From 74b24e7377e89dc353efbd6b58c7a91703d24f77 Mon Sep 17 00:00:00 2001 From: Sabda Yagra Date: Mon, 23 Jun 2025 19:15:31 +0700 Subject: [PATCH 1/9] QUDO-265, QUDO-267, QUDO-268, QUDO-277, QUDO-269 --- .../polda/[polda_name]/audio/filter/page.tsx | 112 ++++++- .../[polda_name]/document/filter/page.tsx | 108 +++++- .../polda/[polda_name]/image/filter/page.tsx | 113 ++++++- .../polda/[polda_name]/video/filter/page.tsx | 111 ++++++- .../[satker_name]/audio/filter/page.tsx | 274 ++++++++++++---- .../[satker_name]/document/filter/page.tsx | 260 ++++++++++----- .../[satker_name]/image/filter/page.tsx | 253 +++++++++----- .../[satker_name]/video/filter/page.tsx | 253 +++++++++----- app/[locale]/(public)/audio/filter/page.tsx | 111 ++++++- .../(public)/document/filter/page.tsx | 110 ++++++- app/[locale]/(public)/image/filter/page.tsx | 119 ++++++- app/[locale]/(public)/video/filter/page.tsx | 111 ++++++- .../area-coverage-and-work-units.tsx | 174 +++++----- components/landing-page/event-calender.tsx | 309 +++++++++--------- components/landing-page/hero-new.tsx | 18 +- components/landing-page/navbar.tsx | 261 +++++++-------- components/landing-page/new-content.tsx | 72 ++-- .../landing-page/search-section-new.tsx | 300 +++++++---------- service/landing/landing.ts | 17 +- utils/globals.tsx | 40 ++- 20 files changed, 2125 insertions(+), 1001 deletions(-) diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx index 6c57b48c..8fb5e685 100644 --- a/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx +++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/audio/filter/page.tsx @@ -107,8 +107,9 @@ const FilterPage = () => { let prefixPath = poldaName ? `/polda/${poldaName}` : "/"; const t = useTranslations("FilterPage"); const satkerName = params?.satker_name; - const [isLoading, setIsLoading] = useState(true); + const [categoryPage, setCategoryPage] = useState(1); + const [categoryTotalPages, setCategoryTotalPages] = useState(1); // const [startDate, endDate] = dateRange; @@ -119,6 +120,7 @@ const FilterPage = () => { return () => clearTimeout(timer); }, []); + React.useEffect(() => { const pageFromUrl = searchParams?.get("page"); if (pageFromUrl) { @@ -185,23 +187,51 @@ const FilterPage = () => { // setCategories(resCategory); // } + // useEffect(() => { + // initFetch(); + // }, []); + // const initFetch = async () => { + // const response = await getPublicCategoryData( + // poldaName && String(poldaName)?.length > 1 + // ? poldaName + // : satkerName && String(satkerName)?.length > 1 + // ? "satker-" + satkerName + // : "", + // "", + // locale == "en" ? true : false + // ); + // console.log("category", response); + // setCategories(response?.data?.data?.content); + // }; + useEffect(() => { - initFetch(); - }, []); - const initFetch = async () => { - const response = await getPublicCategoryData( - poldaName && String(poldaName)?.length > 1 + fetchCategories(categoryPage); + }, [categoryPage]); + + const fetchCategories = async (pageNumber: number) => { + const groupParam = + poldaName && poldaName.length > 1 ? poldaName - : satkerName && String(satkerName)?.length > 1 + : satkerName && satkerName.length > 1 ? "satker-" + satkerName - : "", + : ""; + + const isInt = locale === "en"; + + const response = await getPublicCategoryData( + groupParam, "", - locale == "en" ? true : false + isInt, + pageNumber ); - console.log("category", response); - setCategories(response?.data?.data?.content); + + const content = response?.data?.data?.content || []; + const total = response?.data?.data?.totalPages || 1; + + setCategories(content); + setCategoryTotalPages(total); }; - + useEffect(() => { function initState() { if (dateRange[0] != null && dateRange[1] != null) { @@ -560,6 +590,64 @@ const FilterPage = () => { ))} +
+ {/* Tombol Prev */} + + + {/* Nomor Halaman */} + {Array.from({ length: categoryTotalPages }, (_, i) => ( + + ))} + + {/* Tombol Next */} + +
{/* Garis */} diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx index ed6c0837..117bb8e8 100644 --- a/app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx +++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/document/filter/page.tsx @@ -100,6 +100,8 @@ const FilterPage = () => { let prefixPath = poldaName ? `/polda/${poldaName}` : "/"; const [isLoading, setIsLoading] = useState(true); const satkerName = params?.satker_name; + const [categoryPage, setCategoryPage] = useState(1); + const [categoryTotalPages, setCategoryTotalPages] = useState(1); // const [startDate, endDate] = dateRange; @@ -176,21 +178,49 @@ const FilterPage = () => { // setCategories(resCategory); // } + // useEffect(() => { + // initFetch(); + // }, []); + // const initFetch = async () => { + // const response = await getPublicCategoryData( + // poldaName && String(poldaName)?.length > 1 + // ? poldaName + // : satkerName && String(satkerName)?.length > 1 + // ? "satker-" + satkerName + // : "", + // "", + // locale == "en" ? true : false + // ); + // console.log("category", response); + // setCategories(response?.data?.data?.content); + // }; + useEffect(() => { - initFetch(); - }, []); - const initFetch = async () => { - const response = await getPublicCategoryData( - poldaName && String(poldaName)?.length > 1 + fetchCategories(categoryPage); + }, [categoryPage]); + + const fetchCategories = async (pageNumber: number) => { + const groupParam = + poldaName && poldaName.length > 1 ? poldaName - : satkerName && String(satkerName)?.length > 1 + : satkerName && satkerName.length > 1 ? "satker-" + satkerName - : "", + : ""; + + const isInt = locale === "en"; + + const response = await getPublicCategoryData( + groupParam, "", - locale == "en" ? true : false + isInt, + pageNumber ); - console.log("category", response); - setCategories(response?.data?.data?.content); + + const content = response?.data?.data?.content || []; + const total = response?.data?.data?.totalPages || 1; + + setCategories(content); + setCategoryTotalPages(total); }; useEffect(() => { @@ -576,6 +606,64 @@ const FilterPage = () => { ))} +
+ {/* Tombol Prev */} + + + {/* Nomor Halaman */} + {Array.from({ length: categoryTotalPages }, (_, i) => ( + + ))} + + {/* Tombol Next */} + +
{/* Garis */} diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx index 6b20beef..83dc2ed7 100644 --- a/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx +++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/image/filter/page.tsx @@ -103,6 +103,8 @@ const FilterPage = () => { const satkerName = params?.satker_name; let prefixPath = poldaName ? `/polda/${poldaName}` : "/"; const [isLoading, setIsLoading] = useState(true); + const [categoryPage, setCategoryPage] = useState(1); + const [categoryTotalPages, setCategoryTotalPages] = useState(1); const t = useTranslations("FilterPage"); @@ -182,22 +184,51 @@ const FilterPage = () => { // setCategories(resCategory); // } + // useEffect(() => { + // initFetch(); + // }, []); + // const initFetch = async () => { + // const response = await getPublicCategoryData( + // poldaName && String(poldaName)?.length > 1 + // ? poldaName + // : satkerName && String(satkerName)?.length > 1 + // ? "satker-" + satkerName + // : "", + // "", + // locale == "en" ? true : false + // ); + // console.log("category", response); + // setCategories(response?.data?.data?.content); + // }; + useEffect(() => { - initFetch(); - }, []); - const initFetch = async () => { - const response = await getPublicCategoryData( - poldaName && String(poldaName)?.length > 1 + fetchCategories(categoryPage); + }, [categoryPage]); + + const fetchCategories = async (pageNumber: number) => { + const groupParam = + poldaName && poldaName.length > 1 ? poldaName - : satkerName && String(satkerName)?.length > 1 + : satkerName && satkerName.length > 1 ? "satker-" + satkerName - : "", + : ""; + + const isInt = locale === "en"; + + const response = await getPublicCategoryData( + groupParam, "", - locale == "en" ? true : false - ); - console.log("category", response); - setCategories(response?.data?.data?.content); + isInt, + pageNumber + ); // halaman 1-based + + const content = response?.data?.data?.content || []; + const total = response?.data?.data?.totalPages || 1; + + setCategories(content); + setCategoryTotalPages(total); }; + useEffect(() => { function initState() { if (dateRange[0] != null && dateRange[1] != null) { @@ -586,6 +617,66 @@ const FilterPage = () => { ))} +
+ {/* Tombol Prev */} + + + {/* Nomor Halaman */} + {Array.from({ length: categoryTotalPages }, (_, i) => ( + + ))} + + {/* Tombol Next */} + +
{/* Garis */} diff --git a/app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx b/app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx index dbbdc146..2ec4e371 100644 --- a/app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx +++ b/app/[locale]/(public)/(polda)/polda/[polda_name]/video/filter/page.tsx @@ -100,6 +100,8 @@ const FilterPage = () => { const t = useTranslations("FilterPage"); const [isLoading, setIsLoading] = useState(true); const satkerName = params?.satker_name; + const [categoryPage, setCategoryPage] = useState(1); + const [categoryTotalPages, setCategoryTotalPages] = useState(1); // const [startDate, endDate] = dateRange; @@ -176,22 +178,51 @@ const FilterPage = () => { // setCategories(resCategory); // } + // useEffect(() => { + // initFetch(); + // }, []); + // const initFetch = async () => { + // const response = await getPublicCategoryData( + // poldaName && String(poldaName)?.length > 1 + // ? poldaName + // : satkerName && String(satkerName)?.length > 1 + // ? "satker-" + satkerName + // : "", + // "", + // locale == "en" ? true : false + // ); + // console.log("category", response); + // setCategories(response?.data?.data?.content); + // }; + useEffect(() => { - initFetch(); - }, []); - const initFetch = async () => { - const response = await getPublicCategoryData( - poldaName && String(poldaName)?.length > 1 + fetchCategories(categoryPage); + }, [categoryPage]); + + const fetchCategories = async (pageNumber: number) => { + const groupParam = + poldaName && poldaName.length > 1 ? poldaName - : satkerName && String(satkerName)?.length > 1 + : satkerName && satkerName.length > 1 ? "satker-" + satkerName - : "", + : ""; + + const isInt = locale === "en"; + + const response = await getPublicCategoryData( + groupParam, "", - locale == "en" ? true : false - ); - console.log("category", response); - setCategories(response?.data?.data?.content); + isInt, + pageNumber + ); // halaman 1-based + + const content = response?.data?.data?.content || []; + const total = response?.data?.data?.totalPages || 1; + + setCategories(content); + setCategoryTotalPages(total); }; + useEffect(() => { function initState() { if (dateRange[0] != null && dateRange[1] != null) { @@ -572,6 +603,64 @@ const FilterPage = () => { ))} +
+ {/* Tombol Prev */} + + + {/* Nomor Halaman */} + {Array.from({ length: categoryTotalPages }, (_, i) => ( + + ))} + + {/* Tombol Next */} + +
{/* Garis */} diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx index 416a309c..4368385b 100644 --- a/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx +++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/audio/filter/page.tsx @@ -7,6 +7,7 @@ import { formatDateToIndonesian, getOnlyDate, getOnlyMonthAndYear, + secondToTimes, } from "@/utils/globals"; import { useParams, usePathname, useSearchParams } from "next/navigation"; import { @@ -43,6 +44,7 @@ import { CarouselPrevious, } from "@/components/ui/carousel"; import { useTranslations } from "next-intl"; +import { Skeleton } from "@/components/ui/skeleton"; const columns: ColumnDef[] = [ { @@ -105,6 +107,17 @@ const FilterPage = () => { const satkerName = params?.satker_name; let prefixPath = satkerName ? `/satker/${satkerName}` : "/"; const t = useTranslations("FilterPage"); + const [isLoading, setIsLoading] = useState(true); + const [categoryPage, setCategoryPage] = useState(1); + const [categoryTotalPages, setCategoryTotalPages] = useState(1); + + useEffect(() => { + const timer = setTimeout(() => { + setIsLoading(false); + }, 3000); + + return () => clearTimeout(timer); + }, []); // const [startDate, endDate] = dateRange; @@ -174,21 +187,49 @@ const FilterPage = () => { // setCategories(resCategory); // } + // useEffect(() => { + // initFetch(); + // }, []); + // const initFetch = async () => { + // const response = await getPublicCategoryData( + // poldaName && String(poldaName)?.length > 1 + // ? poldaName + // : satkerName && String(satkerName)?.length > 1 + // ? "satker-" + satkerName + // : "", + // "", + // locale == "en" ? true : false + // ); + // console.log("category", response); + // setCategories(response?.data?.data?.content); + // }; + useEffect(() => { - initFetch(); - }, []); - const initFetch = async () => { - const response = await getPublicCategoryData( - poldaName && String(poldaName)?.length > 1 + fetchCategories(categoryPage); + }, [categoryPage]); + + const fetchCategories = async (pageNumber: number) => { + const groupParam = + poldaName && poldaName.length > 1 ? poldaName - : satkerName && String(satkerName)?.length > 1 + : satkerName && satkerName.length > 1 ? "satker-" + satkerName - : "", + : ""; + + const isInt = locale === "en"; + + const response = await getPublicCategoryData( + groupParam, "", - locale == "en" ? true : false + isInt, + pageNumber ); - console.log("category", response); - setCategories(response?.data?.data?.content); + + const content = response?.data?.data?.content || []; + const total = response?.data?.data?.totalPages || 1; + + setCategories(content); + setCategoryTotalPages(total); }; useEffect(() => { @@ -441,7 +482,7 @@ const FilterPage = () => {
{/* Header */} -
+

{" "} Audio {">"} {t("allAudio")} @@ -451,8 +492,8 @@ const FilterPage = () => {

{/* Left */} -
-
+
+

Filter @@ -529,7 +570,7 @@ const FilterPage = () => { {t("categories")}

    - {categories.map((category: any) => ( + {categories?.map((category: any) => (
    • ))} +
    + {/* Tombol Prev */} + + + {/* Nomor Halaman */} + {Array.from({ length: categoryTotalPages }, (_, i) => ( + + ))} + + {/* Tombol Next */} + +
{/* Garis */} @@ -603,9 +702,9 @@ const FilterPage = () => {
- {/* Konten Kanan */} - -
+ {/* Right */} +
+

{t("sortBy")}

- {audioData?.length > 0 ? ( -
- {audioData?.map((image: any) => ( - - - {audioData?.map((audio: any) => ( - +
+ + + + + + +
+ + ) : ( + <> + {audioData?.length > 0 ? ( +
+ {audioData?.map((audio: any) => ( +
+
+ router.push( + prefixPath + `/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" > -
- -
+
+
+
{ />
- -
-
- {formatDateToIndonesian( - new Date(audio?.createdAt) - )}{" "} - {audio?.timezone ? audio?.timezone : "WIB"} |{" "} - {" "} - {audio?.clickCount}{" "} +
+
+
+ {formatDateToIndonesian( + new Date(audio?.createdAt) + )}{" "} + {audio?.timezone ? audio?.timezone : "WIB"} +
+
+ |  + +  {audio?.clickCount}{" "} +
+
{audio?.title}
- +
+ +
+ wave + + + +

+ {" "} + {audio?.duration + ? secondToTimes(Number(audio?.duration)) + : "00:00:00"} +

+ +
- - ))} - - - - - ))} -
- ) : ( -

- empty -

+
+
+ ))} +
+ ) : ( +

+ empty +

+ )} + )} { totalData={totalData} totalPage={totalPage} /> -
- + +
); diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx index 19e546fa..8924843b 100644 --- a/app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx +++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/document/filter/page.tsx @@ -98,6 +98,8 @@ const FilterPage = () => { const poldaName = params?.polda_name; const satkerName = params?.satker_name; let prefixPath = satkerName ? `/satker/${satkerName}` : "/"; + const [categoryPage, setCategoryPage] = useState(1); + const [categoryTotalPages, setCategoryTotalPages] = useState(1); // const [startDate, endDate] = dateRange; @@ -167,22 +169,51 @@ const FilterPage = () => { // setCategories(resCategory); // } + // useEffect(() => { + // fetchContent(); + // }, []); + // const fetchContent = async () => { + // const response = await getPublicCategoryData( + // poldaName && String(poldaName)?.length > 1 + // ? poldaName + // : satkerName && String(satkerName)?.length > 1 + // ? "satker-" + satkerName + // : "", + // "", + // locale == "en" ? true : false + // ); + // console.log("category", response); + // setCategories(response?.data?.data?.content); + // }; + useEffect(() => { - fetchContent(); - }, []); - const fetchContent = async () => { - const response = await getPublicCategoryData( - poldaName && String(poldaName)?.length > 1 + fetchCategories(categoryPage); + }, [categoryPage]); + + const fetchCategories = async (pageNumber: number) => { + const groupParam = + poldaName && poldaName.length > 1 ? poldaName - : satkerName && String(satkerName)?.length > 1 + : satkerName && satkerName.length > 1 ? "satker-" + satkerName - : "", + : ""; + + const isInt = locale === "en"; + + const response = await getPublicCategoryData( + groupParam, "", - locale == "en" ? true : false + isInt, + pageNumber ); - console.log("category", response); - setCategories(response?.data?.data?.content); + + const content = response?.data?.data?.content || []; + const total = response?.data?.data?.totalPages || 1; + + setCategories(content); + setCategoryTotalPages(total); }; + useEffect(() => { function initState() { if (dateRange[0] != null && dateRange[1] != null) { @@ -457,8 +488,7 @@ const FilterPage = () => { return (
{/* Header */} - -
+

{" "} {t("text")} {">"} {t("allText")} @@ -468,7 +498,7 @@ const FilterPage = () => {

{/* Left */} -
+

@@ -566,6 +596,64 @@ const FilterPage = () => { ))} +
+ {/* Tombol Prev */} + + + {/* Nomor Halaman */} + {Array.from({ length: categoryTotalPages }, (_, i) => ( + + ))} + + {/* Tombol Next */} + +

{/* Garis */} @@ -666,86 +754,90 @@ const FilterPage = () => {
{/* Konten Kanan */} - -
-
-

{t("sortBy")}

- -
+
+ +
+
+

{t("sortBy")}

+ +
- {documentData?.length > 0 ? ( -
- {documentData?.map((document: any) => ( - -
- - - -
-
-
- {formatDateToIndonesian(new Date(document?.createdAt))}{" "} - {document?.timezone ? document?.timezone : "WIB"} |{" "} - 518 -
-
- {document?.title} -
-
+ {documentData?.length > 0 ? ( +
+ {documentData?.map((document: any) => ( + +
- Download Dokumen
-
- - ))} -
- ) : ( -

- empty -

- )} +
+
+ {formatDateToIndonesian( + new Date(document?.createdAt) + )}{" "} + {document?.timezone ? document?.timezone : "WIB"} |{" "} + 518 +
+
+ {document?.title} +
+
+ + + + Download Dokumen +
+
+ + ))} +
+ ) : ( +

+ empty +

+ )} - -
- + +
+ +
); diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx index 7d46d0b7..10f42551 100644 --- a/app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx +++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/image/filter/page.tsx @@ -100,6 +100,8 @@ const FilterPage = () => { const satkerName = params?.satker_name; let prefixPath = satkerName ? `/satker/${satkerName}` : "/"; const t = useTranslations("FilterPage"); + const [categoryPage, setCategoryPage] = useState(1); + const [categoryTotalPages, setCategoryTotalPages] = useState(1); // const [startDate, endDate] = dateRange; @@ -169,21 +171,49 @@ const FilterPage = () => { // setCategories(resCategory); // } + // useEffect(() => { + // fetchContent(); + // }, []); + // const fetchContent = async () => { + // const response = await getPublicCategoryData( + // poldaName && String(poldaName)?.length > 1 + // ? poldaName + // : satkerName && String(satkerName)?.length > 1 + // ? "satker-" + satkerName + // : "", + // "", + // locale == "en" ? true : false + // ); + // console.log("category", response); + // setCategories(response?.data?.data?.content); + // }; + useEffect(() => { - fetchContent(); - }, []); - const fetchContent = async () => { - const response = await getPublicCategoryData( - poldaName && String(poldaName)?.length > 1 + fetchCategories(categoryPage); + }, [categoryPage]); + + const fetchCategories = async (pageNumber: number) => { + const groupParam = + poldaName && poldaName.length > 1 ? poldaName - : satkerName && String(satkerName)?.length > 1 + : satkerName && satkerName.length > 1 ? "satker-" + satkerName - : "", + : ""; + + const isInt = locale === "en"; + + const response = await getPublicCategoryData( + groupParam, "", - locale == "en" ? true : false + isInt, + pageNumber ); - console.log("category", response); - setCategories(response?.data?.data?.content); + + const content = response?.data?.data?.content || []; + const total = response?.data?.data?.totalPages || 1; + + setCategories(content); + setCategoryTotalPages(total); }; useEffect(() => { @@ -435,8 +465,7 @@ const FilterPage = () => { return (
{/* Header */} - -
+

{" "} {t("image")} {">"} {t("allImage")} @@ -446,7 +475,7 @@ const FilterPage = () => {

{/* Left */} -
+
+ + {/* Nomor Halaman */} + {Array.from({ length: categoryTotalPages }, (_, i) => ( + + ))} + + {/* Tombol Next */} + +
{/* Garis */} @@ -624,75 +713,79 @@ const FilterPage = () => { )} {/* Konten Kanan */} - -
-
-

{t("sortBy")}

- -
- - {imageData?.length > 0 ? ( -
- {imageData?.map((image: any) => ( - - - - -
- {formatDateToIndonesian(new Date(image?.createdAt))}{" "} - {image?.timezone ? image?.timezone : "WIB"}|{" "} - - {image?.clickCount}{" "} - - - {" "} -
-
- {image?.title} -
- - - - ))} +
+ +
+
+

{t("sortBy")}

+
- ) : ( -

- empty -

- )} - -
- + {imageData?.length > 0 ? ( +
+ {imageData?.map((image: any) => ( + + + + +
+ {formatDateToIndonesian(new Date(image?.createdAt))}{" "} + {image?.timezone ? image?.timezone : "WIB"}|{" "} + + {image?.clickCount}{" "} + + + {" "} +
+
+ {image?.title} +
+ + + + ))} +
+ ) : ( +

+ empty +

+ )} + + +
+ +
); diff --git a/app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx b/app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx index afa6455c..457eca01 100644 --- a/app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx +++ b/app/[locale]/(public)/(satker)/satker/[satker_name]/video/filter/page.tsx @@ -96,6 +96,8 @@ const FilterPage = () => { const satkerName = params?.satker_name; let prefixPath = satkerName ? `/satker/${satkerName}` : "/"; const t = useTranslations("FilterPage"); + const [categoryPage, setCategoryPage] = useState(1); + const [categoryTotalPages, setCategoryTotalPages] = useState(1); // const [startDate, endDate] = dateRange; @@ -165,21 +167,49 @@ const FilterPage = () => { // setCategories(resCategory); // } + // useEffect(() => { + // fetchContent(); + // }, []); + // const fetchContent = async () => { + // const response = await getPublicCategoryData( + // poldaName && String(poldaName)?.length > 1 + // ? poldaName + // : satkerName && String(satkerName)?.length > 1 + // ? "satker-" + satkerName + // : "", + // "", + // locale == "en" ? true : false + // ); + // console.log("category", response); + // setCategories(response?.data?.data?.content); + // }; + useEffect(() => { - fetchContent(); - }, []); - const fetchContent = async () => { - const response = await getPublicCategoryData( - poldaName && String(poldaName)?.length > 1 + fetchCategories(categoryPage); + }, [categoryPage]); + + const fetchCategories = async (pageNumber: number) => { + const groupParam = + poldaName && poldaName.length > 1 ? poldaName - : satkerName && String(satkerName)?.length > 1 + : satkerName && satkerName.length > 1 ? "satker-" + satkerName - : "", + : ""; + + const isInt = locale === "en"; + + const response = await getPublicCategoryData( + groupParam, "", - locale == "en" ? true : false + isInt, + pageNumber ); - console.log("category", response); - setCategories(response?.data?.data?.content); + + const content = response?.data?.data?.content || []; + const total = response?.data?.data?.totalPages || 1; + + setCategories(content); + setCategoryTotalPages(total); }; useEffect(() => { @@ -452,8 +482,7 @@ const FilterPage = () => { return (
{/* Header */} - -
+

{" "} {t("video")}  @@ -464,11 +493,11 @@ const FilterPage = () => {

{/* Left */} -
+

- Filter + Filter

@@ -562,6 +591,64 @@ const FilterPage = () => { ))} +
+ {/* Tombol Prev */} + + + {/* Nomor Halaman */} + {Array.from({ length: categoryTotalPages }, (_, i) => ( + + ))} + + {/* Tombol Next */} + +
{/* Garis */} @@ -662,75 +749,79 @@ const FilterPage = () => {
{/* Konten Kanan */} - -
-
-

{t("sortBy")}

- -
- - {videoData?.length > 0 ? ( -
- {videoData?.map((video: any) => ( - - - - -
- {formatDateToIndonesian(new Date(video?.createdAt))}{" "} - {video?.timezone ? video?.timezone : "WIB"}|{" "} - - {video?.clickCount}{" "} - - - {" "} -
-
- {video?.title} -
- - - - ))} +
+ +
+
+

{t("sortBy")}

+
- ) : ( -

- empty -

- )} - -
- + {videoData?.length > 0 ? ( +
+ {videoData?.map((video: any) => ( + + + + +
+ {formatDateToIndonesian(new Date(video?.createdAt))}{" "} + {video?.timezone ? video?.timezone : "WIB"}|{" "} + + {video?.clickCount}{" "} + + + {" "} +
+
+ {video?.title} +
+ + + + ))} +
+ ) : ( +

+ empty +

+ )} + + +
+ +
); diff --git a/app/[locale]/(public)/audio/filter/page.tsx b/app/[locale]/(public)/audio/filter/page.tsx index fdbda5a4..072933cf 100644 --- a/app/[locale]/(public)/audio/filter/page.tsx +++ b/app/[locale]/(public)/audio/filter/page.tsx @@ -99,7 +99,8 @@ const FilterPage = () => { const [isLoading, setIsLoading] = useState(true); const poldaName = params?.polda_name; const satkerName = params?.satker_name; - + const [categoryPage, setCategoryPage] = useState(1); + const [categoryTotalPages, setCategoryTotalPages] = useState(1); // const [startDate, endDate] = dateRange; useEffect(() => { @@ -176,21 +177,49 @@ const FilterPage = () => { // setCategories(resCategory); // } + // useEffect(() => { + // initFetch(); + // }, []); + // const initFetch = async () => { + // const response = await getPublicCategoryData( + // poldaName && String(poldaName)?.length > 1 + // ? poldaName + // : satkerName && String(satkerName)?.length > 1 + // ? "satker-" + satkerName + // : "", + // "", + // locale == "en" ? true : false + // ); + // console.log("category", response); + // setCategories(response?.data?.data?.content); + // }; + useEffect(() => { - initFetch(); - }, []); - const initFetch = async () => { - const response = await getPublicCategoryData( - poldaName && String(poldaName)?.length > 1 + fetchCategories(categoryPage); + }, [categoryPage]); + + const fetchCategories = async (pageNumber: number) => { + const groupParam = + poldaName && poldaName.length > 1 ? poldaName - : satkerName && String(satkerName)?.length > 1 + : satkerName && satkerName.length > 1 ? "satker-" + satkerName - : "", + : ""; + + const isInt = locale === "en"; + + const response = await getPublicCategoryData( + groupParam, "", - locale == "en" ? true : false - ); - console.log("category", response); - setCategories(response?.data?.data?.content); + isInt, + pageNumber + ); // halaman 1-based + + const content = response?.data?.data?.content || []; + const total = response?.data?.data?.totalPages || 1; + + setCategories(content); + setCategoryTotalPages(total); }; useEffect(() => { @@ -563,6 +592,64 @@ const FilterPage = () => { ))} +
+ {/* Tombol Prev */} + + + {/* Nomor Halaman */} + {Array.from({ length: categoryTotalPages }, (_, i) => ( + + ))} + + {/* Tombol Next */} + +
{/* Garis */} diff --git a/app/[locale]/(public)/document/filter/page.tsx b/app/[locale]/(public)/document/filter/page.tsx index 983398aa..e1c994c8 100644 --- a/app/[locale]/(public)/document/filter/page.tsx +++ b/app/[locale]/(public)/document/filter/page.tsx @@ -99,6 +99,8 @@ const FilterPage = () => { const [isLoading, setIsLoading] = useState(true); const poldaName = params?.polda_name; const satkerName = params?.satker_name; + const [categoryPage, setCategoryPage] = useState(1); + const [categoryTotalPages, setCategoryTotalPages] = useState(1); // const [startDate, endDate] = dateRange; @@ -176,21 +178,49 @@ const FilterPage = () => { // setCategories(resCategory); // } + // useEffect(() => { + // initFetch(); + // }, []); + // const initFetch = async () => { + // const response = await getPublicCategoryData( + // poldaName && String(poldaName)?.length > 1 + // ? poldaName + // : satkerName && String(satkerName)?.length > 1 + // ? "satker-" + satkerName + // : "", + // "", + // locale == "en" ? true : false + // ); + // console.log("category", response); + // setCategories(response?.data?.data?.content); + // }; + useEffect(() => { - initFetch(); - }, []); - const initFetch = async () => { - const response = await getPublicCategoryData( - poldaName && String(poldaName)?.length > 1 + fetchCategories(categoryPage); + }, [categoryPage]); + + const fetchCategories = async (pageNumber: number) => { + const groupParam = + poldaName && poldaName.length > 1 ? poldaName - : satkerName && String(satkerName)?.length > 1 + : satkerName && satkerName.length > 1 ? "satker-" + satkerName - : "", + : ""; + + const isInt = locale === "en"; + + const response = await getPublicCategoryData( + groupParam, "", - locale == "en" ? true : false - ); - console.log("category", response); - setCategories(response?.data?.data?.content); + isInt, + pageNumber + ); // halaman 1-based + + const content = response?.data?.data?.content || []; + const total = response?.data?.data?.totalPages || 1; + + setCategories(content); + setCategoryTotalPages(total); }; useEffect(() => { @@ -578,6 +608,64 @@ const FilterPage = () => { ))} +
+ {/* Tombol Prev */} + + + {/* Nomor Halaman */} + {Array.from({ length: categoryTotalPages }, (_, i) => ( + + ))} + + {/* Tombol Next */} + +
{/* Garis */} diff --git a/app/[locale]/(public)/image/filter/page.tsx b/app/[locale]/(public)/image/filter/page.tsx index de0a9b78..a3b8ede5 100644 --- a/app/[locale]/(public)/image/filter/page.tsx +++ b/app/[locale]/(public)/image/filter/page.tsx @@ -102,6 +102,8 @@ const FilterPage = () => { const [isFilterOpen, setIsFilterOpen] = useState(true); const poldaName = params?.polda_name; const satkerName = params?.satker_name; + const [categoryPage, setCategoryPage] = useState(1); + const [categoryTotalPages, setCategoryTotalPages] = useState(1); // const [startDate, endDate] = dateRange; @@ -179,19 +181,50 @@ const FilterPage = () => { // setCategories(resCategory); // } - useEffect(() => { - initFetch(); - }, []); - const initFetch = async () => { - const response = await getPublicCategoryData( - poldaName && String(poldaName)?.length > 1 ? poldaName : satkerName && String(satkerName)?.length > 1 ? "satker-" + satkerName : "", - "", - locale == "en" ? true : false - ); - console.log("category", response); - setCategories(response?.data?.data?.content); - }; - + // useEffect(() => { + // initFetch(); + // }, []); + // const initFetch = async () => { + // const response = await getPublicCategoryData( + // poldaName && String(poldaName)?.length > 1 + // ? poldaName + // : satkerName && String(satkerName)?.length > 1 + // ? "satker-" + satkerName + // : "", + // "", + // locale == "en" ? true : false + // ); + // console.log("category", response); + // setCategories(response?.data?.data?.content); + // }; + + useEffect(() => { + fetchCategories(categoryPage); + }, [categoryPage]); + + const fetchCategories = async (pageNumber: number) => { + const groupParam = + poldaName && poldaName.length > 1 + ? poldaName + : satkerName && satkerName.length > 1 + ? "satker-" + satkerName + : ""; + + const isInt = locale === "en"; + + const response = await getPublicCategoryData( + groupParam, + "", + isInt, + pageNumber + ); + + const content = response?.data?.data?.content || []; + const total = response?.data?.data?.totalPages || 1; + + setCategories(content); + setCategoryTotalPages(total); + }; useEffect(() => { function initState() { @@ -593,6 +626,66 @@ const FilterPage = () => { ))} +
+ {/* Tombol Prev */} + + + {/* Nomor Halaman */} + {Array.from({ length: categoryTotalPages }, (_, i) => ( + + ))} + + {/* Tombol Next */} + +
{/* Garis */} diff --git a/app/[locale]/(public)/video/filter/page.tsx b/app/[locale]/(public)/video/filter/page.tsx index 351f31a1..675c6814 100644 --- a/app/[locale]/(public)/video/filter/page.tsx +++ b/app/[locale]/(public)/video/filter/page.tsx @@ -99,7 +99,8 @@ const FilterPage = () => { const [userLevels, setUserLevels] = useState([]); const t = useTranslations("FilterPage"); const [isLoading, setIsLoading] = useState(true); - + const [categoryPage, setCategoryPage] = useState(1); + const [categoryTotalPages, setCategoryTotalPages] = useState(1); // const [startDate, endDate] = dateRange; useEffect(() => { @@ -171,21 +172,49 @@ const FilterPage = () => { // setCategories(resCategory); // } + // useEffect(() => { + // initFetch(); + // }, []); + // const initFetch = async () => { + // const response = await getPublicCategoryData( + // poldaName && String(poldaName)?.length > 1 + // ? poldaName + // : satkerName && String(satkerName)?.length > 1 + // ? "satker-" + satkerName + // : "", + // "", + // locale == "en" ? true : false + // ); + // console.log("category", response); + // setCategories(response?.data?.data?.content); + // }; + useEffect(() => { - initFetch(); - }, []); - const initFetch = async () => { - const response = await getPublicCategoryData( - poldaName && String(poldaName)?.length > 1 + fetchCategories(categoryPage); + }, [categoryPage]); + + const fetchCategories = async (pageNumber: number) => { + const groupParam = + poldaName && poldaName.length > 1 ? poldaName - : satkerName && String(satkerName)?.length > 1 + : satkerName && satkerName.length > 1 ? "satker-" + satkerName - : "", + : ""; + + const isInt = locale === "en"; + + const response = await getPublicCategoryData( + groupParam, "", - locale == "en" ? true : false - ); - console.log("category", response); - setCategories(response?.data?.data?.content); + isInt, + pageNumber + ); // halaman 1-based + + const content = response?.data?.data?.content || []; + const total = response?.data?.data?.totalPages || 1; + + setCategories(content); + setCategoryTotalPages(total); }; useEffect(() => { @@ -580,6 +609,64 @@ const FilterPage = () => { ))} +
+ {/* Tombol Prev */} + + + {/* Nomor Halaman */} + {Array.from({ length: categoryTotalPages }, (_, i) => ( + + ))} + + {/* Tombol Next */} + +
{/* Garis */} diff --git a/components/landing-page/area-coverage-and-work-units.tsx b/components/landing-page/area-coverage-and-work-units.tsx index 7f1650cf..9e501f3e 100644 --- a/components/landing-page/area-coverage-and-work-units.tsx +++ b/components/landing-page/area-coverage-and-work-units.tsx @@ -14,11 +14,14 @@ import Image from "next/image"; import Coverage from "./coverage"; import Division from "./division"; import { useTranslations } from "next-intl"; +import { useParams } from "next/navigation"; const AreaCoverageWorkUnits = () => { const [openPolda, setOpenPolda] = useState(false); const [openSatker, setOpenSatker] = useState(false); const t = useTranslations("LandingPage"); + const params = useParams(); + const locale = params?.locale; useEffect(() => { if (openPolda || openSatker) { @@ -31,90 +34,97 @@ const AreaCoverageWorkUnits = () => { document.body.classList.remove("overflow-hidden"); }; }, [openPolda, openSatker]); - return ( -
-

- {t("areaCoverage")} -

-
- {/* POLDA */} - - - - - - - -

{t("regionalPolice")}

- - -
- - -
- -
-
- - - -
- - - {/* SATKER */} - - - - - - - -

{t("policeDivision")}

- - -
- - - -
- - - -
- - -
-
+ + + + +

{t("regionalPolice")}

+ + +
+ + +
+ +
+
+ + + +
+ + + + {/* SATKER */} + + + + + + + + +

{t("policeDivision")}

+ + +
+ + + +
+ + + +
+ + +
+
+ )} + ); }; diff --git a/components/landing-page/event-calender.tsx b/components/landing-page/event-calender.tsx index 6e8db2c4..35c240d4 100644 --- a/components/landing-page/event-calender.tsx +++ b/components/landing-page/event-calender.tsx @@ -1,6 +1,7 @@ import { getCalendarPagination } from "@/service/schedule/schedule"; import { ChevronLeft, ChevronRight } from "lucide-react"; import { useTranslations } from "next-intl"; +import { useParams } from "next/navigation"; import React, { useEffect, useState } from "react"; interface CalendarItem { @@ -24,12 +25,13 @@ const EventCalender = () => { const currentMonth = today.getMonth(); const currentYear = today.getFullYear(); const currentDate = today.getDate(); - const [events, setEvents] = useState([]); const [selectedEvent, setSelectedEvent] = useState(null); const [month, setMonth] = useState(currentMonth); const [year, setYear] = useState(currentYear); const t = useTranslations("LandingPage"); + const params = useParams(); + const locale = params?.locale; const monthNames = [ t("january"), @@ -164,169 +166,174 @@ const EventCalender = () => { }; return ( -
-

- {t("calendar")} -

-
-
-
-
- -
- {monthNames[month]} {year} -
- -
-
- {["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => ( -
- {d} + <> + {locale === "in" && ( +
+

+ {t("calendar")} +

+
+
+
+
+ +
+ {monthNames[month]} {year} +
+
- ))} - {calendarDays.map((day, index) => { - const isToday = - day === currentDate && - month === currentMonth && - year === currentYear; +
+ {["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"].map((d) => ( +
+ {d} +
+ ))} + {calendarDays.map((day, index) => { + const isToday = + day === currentDate && + month === currentMonth && + year === currentYear; - return ( -
- {day} -
- ); - })} -
-
- -
-

- {t("eventList")} -

- {events?.length === 0 ? ( -
- {t("noEvent")} + return ( +
+ {day} +
+ ); + })} +
- ) : ( - events.map((event) => ( -
setSelectedEvent(event)} - className={`flex items-center rounded-xl shadow-sm p-3 cursor-pointer transition-all duration-200 hover:shadow-md ${ - selectedEvent?.id === event.id - ? "bg-red-100 dark:bg-red-900/20 border-2 border-red-500" - : "bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700" - }`} - > - {event.title} { - const target = e.target as HTMLImageElement; - target.src = "/images/default-event.png"; - }} - /> -
-
- {event.title} -
-
- {formatDateRange(event.startDate, event.endDate)} -
+ +
+

+ {t("eventList")} +

+ {events?.length === 0 ? ( +
+ {t("noEvent")}
-
+ ) : ( + events.map((event) => (
setSelectedEvent(event)} + className={`flex items-center rounded-xl shadow-sm p-3 cursor-pointer transition-all duration-200 hover:shadow-md ${ + selectedEvent?.id === event.id + ? "bg-red-100 dark:bg-red-900/20 border-2 border-red-500" + : "bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700" }`} - >
-
-
- )) - )} -
-
- -
-
-

- {t("eventDetails")} -

- - {selectedEvent ? ( -
- {selectedEvent.title} { - const target = e.target as HTMLImageElement; - target.src = "/images/default-event.png"; - }} - /> - -
-

- {selectedEvent.title} -

- -
-
- - {t("date")} - - - {formatDateRange( - selectedEvent.startDate, - selectedEvent.endDate - )} - + > + {event.title} { + const target = e.target as HTMLImageElement; + target.src = "/images/default-event.png"; + }} + /> +
+
+ {event.title} +
+
+ {formatDateRange(event.startDate, event.endDate)} +
+
+
+
+
-
-

- {selectedEvent.description || - "Tidak ada deskripsi tersedia."} -

+ )) + )} +
+
+ +
+
+

+ {t("eventDetails")} +

+ + {selectedEvent ? ( +
+ {selectedEvent.title} { + const target = e.target as HTMLImageElement; + target.src = "/images/default-event.png"; + }} + /> + +
+

+ {selectedEvent.title} +

+ +
+
+ + {t("date")} + + + {formatDateRange( + selectedEvent.startDate, + selectedEvent.endDate + )} + +
+
+

+ {selectedEvent.description || + "Tidak ada deskripsi tersedia."} +

+
+
+ +
+ +
- -
- + ) : ( +
+ {t("selectEvent")}
-
+ )}
- ) : ( -
- {t("selectEvent")} -
- )} +
-
-
+ )} + ); }; diff --git a/components/landing-page/hero-new.tsx b/components/landing-page/hero-new.tsx index 4c7c8f12..34f8e2ad 100644 --- a/components/landing-page/hero-new.tsx +++ b/components/landing-page/hero-new.tsx @@ -66,6 +66,11 @@ const HeroModal = ({ const params = useParams(); const locale = params?.locale; const swiperRef = useRef(null); + const pathname = usePathname(); + + if (pathname?.includes("/polda") || pathname?.includes("/satker")) { + return null; + } let prefixPath = poldaName ? `/polda/${poldaName}` @@ -462,7 +467,7 @@ const HeroNew = (props: { group?: string }) => {
- {newContent?.slice(0, 3).map((item: any) => ( + {content?.slice(0, 3).map((item: any) => (
  • { className="w-full h-[100px] object-cover rounded-lg" />
    -
    +
    { ? `${prefixPath}/document/detail/${item?.slug}` : `${prefixPath}/audio/detail/${item?.slug}` } + className="flex flex-col justify-between" > - +

    {item?.categoryName} - -

    +

    +

    {item?.title}

    -

    +

    {formatDateToIndonesian(new Date(item?.createdAt))}{" "} {item?.timezone || "WIB"} |{" "} { const [notificationsUpdate, setNotificationsUpdate] = useState([]); const [selectedTab, setSelectedTab] = useState("image"); + const isHidden = pathname?.includes("polda") || pathname?.includes("satker"); + let prefixPath = poldaName ? `/polda/${poldaName}` : satkerName @@ -109,19 +111,18 @@ const Navbar = () => { window.location.href = "/"; }; -// useEffect(() => { -// if (!roleId) { -// router.replace("/"); // Kalau roleId-nya belum tersedia, redirect juga (opsional) -// return; -// } + // useEffect(() => { + // if (!roleId) { + // router.replace("/"); // Kalau roleId-nya belum tersedia, redirect juga (opsional) + // return; + // } -// const token = Cookies.get(roleId); - -// if (!token) { -// router.replace("/"); // Redirect ke halaman home jika tidak ada token -// } -// }, []); + // const token = Cookies.get(roleId); + // if (!token) { + // router.replace("/"); // Redirect ke halaman home jika tidak ada token + // } + // }, []); // const profilePicture = Cookies.get("profile_picture"); const fullName = getCookiesDecrypt("ufne"); @@ -202,6 +203,8 @@ const Navbar = () => { return () => clearTimeout(handler); }, [onSearch]); + const [open, setOpen] = useState(false); + return (

    @@ -218,132 +221,114 @@ const Navbar = () => { {/* Nav Menu */}
    - - - - - - - - - {t("content")} - - - - router.push(prefixPath + "/image/filter")} - className="flex place-items-start gap-1 px-3 py-1 w-36" +
    + {/* Popover Utama */} + + + + + + + + + + + + + + {/* Link Schedule */} + + + + - {pathname?.split("/")[1] == "in" ? ( - <> -

    - - {t("video")} -

    - - ) : ( - <> -

    - - {t("video")} -

    - - )} - - - router.push(prefixPath + "/document/filter") - } - className="flex place-items-start gap-1 py-1 px-3" + + +     + {t("schedule")} +     + + + {/* Link Index */} + + + + -

    - - {t("text")} -

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

    - - {t("audio")}{" "} -

    -     - - - - - - - - - - - {t("schedule")} - - - - - - - - - - - - {t("index")} - - - - - + + +     + {t("index")} +     + +
    - {/* Mobile Menu Toggle */} - {/* Desktop Navigation */}
    {roleId == undefined ? ( @@ -399,7 +384,7 @@ const Navbar = () => {
    {/* Languange */} -
    +
    @@ -1030,7 +1015,7 @@ const Navbar = () => { {/* Mobile Menu */} {menuOpen && (
    -
    +
    @@ -1242,13 +1227,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" + className="pl-8 pr-4 py-1 text-[13px] border rounded-full focus:outline-none dark:text-white w-full " />{" "}
    @@ -1793,7 +1778,7 @@ const Navbar = () => {
    {t("logIn")} @@ -1801,7 +1786,7 @@ const Navbar = () => { diff --git a/components/landing-page/new-content.tsx b/components/landing-page/new-content.tsx index 3dd7c627..df987992 100644 --- a/components/landing-page/new-content.tsx +++ b/components/landing-page/new-content.tsx @@ -243,20 +243,29 @@ const NewContent = (props: { group: string; type: string }) => {
    {/* Caption section */} -
    -

    - {image?.categoryName?.toUpperCase() ?? - "Giat Pimpinan"} -

    - -

    - {image?.title} -

    - - {/*

    - {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ?? "WIB"} | - {image.clickCount} -

    */} +
    +
    +

    + {image?.categoryName?.toUpperCase() ?? + "Giat Pimpinan"} +

    +

    + {image?.title} +

    +
    + {/* Optional metadata area (uncomment if needed) */} + {/* +

    + {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ?? "WIB"} | + {image.clickCount} +

    + */}
    @@ -329,7 +338,7 @@ const NewContent = (props: { group: string; type: string }) => { "GIAT PIMPINAN"}

    -

    +

    {audio?.title}

    @@ -427,19 +436,24 @@ const NewContent = (props: { group: string; type: string }) => {
    {/* Caption section */} -
    -

    - {video?.categoryName?.toUpperCase() ?? "Video"} -

    - -

    - {video?.title} -

    - - {/*

    - {formatDateToIndonesian(new Date(video?.createdAt))} {video?.timezone ?? "WIB"} | - {video?.clickCount} -

    */} +
    +
    +

    + {video?.categoryName?.toUpperCase() ?? + "Giat Pimpinan"} +

    +

    + {video?.title} +

    +
    + {/* Optional metadata area (uncomment if needed) */} + {/* +

    + {formatDateToIndonesian(new Date(image?.createdAt))} {image?.timezone ?? "WIB"} | + {image.clickCount} +

    + */}
    @@ -513,7 +527,7 @@ const NewContent = (props: { group: string; type: string }) => {
    {/* Judul */} -
    +
    {text?.title}
    diff --git a/components/landing-page/search-section-new.tsx b/components/landing-page/search-section-new.tsx index bc698988..692f4142 100644 --- a/components/landing-page/search-section-new.tsx +++ b/components/landing-page/search-section-new.tsx @@ -69,6 +69,7 @@ const ScrollableContent = () => { setContentPolda(data); }; + const initFetchSatker = async () => { const response = await getHeroData(locale == "en", "satker"); console.log(response); @@ -79,8 +80,8 @@ const ScrollableContent = () => { return ( <> -
    -

    +
    +

    {t("exploration")} {t("and")} @@ -151,7 +152,7 @@ const ScrollableContent = () => { onClick={() => router.push(`/${contentType}/filter?title=${search}`) } - className="flex justify-center items-center px-6 w-full lg:w-[20%] py-4 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700" + className="flex justify-center items-center px-6 w-full lg:w-[20%] py-4 bg-[#bb3523] gap-2 text-white rounded-lg hover:bg-red-700 text-[14px]" > {t("searchCoverage")} @@ -160,15 +161,18 @@ const ScrollableContent = () => {

    {/* Berita Polda */} -
    -

    - {t("regionNews")} -

    -
    -
    -
    - {(seeAllValuePolda ? contentPolda : contentPolda?.slice(0, 3))?.map( - (item: any, index: number) => ( + {locale === "in" && ( +
    +

    + {t("regionNews")} +

    +
    +
    +
    + {(seeAllValuePolda + ? contentPolda + : contentPolda?.slice(0, 3) + )?.map((item: any, index: number) => (
    {
    - {/* */} { index === 0 ? "p-4" : "p-3 w-[50%] cursor-pointer" }`} > -

    +

    {item.categoryName}

    -

    +

    {item.title}

    -

    +

    {htmlToString(item.description)}

    - ) - )} - {contentPolda?.length > 3 && ( -
    - -
    - )} + ))} + {contentPolda?.length > 3 && ( +
    + +
    + )} +
    -
    + )} {/* Berita SATKER */} -
    -

    - {t("divisionNews")} -

    -
    -
    -
    - {/* {seeAllValue ? content : content - ?.filter((item: any) => item.isPublishOnPolda === true) - .slice(0, 3) - .map((item: any, index: number) => ( -
    -
    + {locale === "in" && ( +
    +

    + {t("divisionNews")} +

    +
    +
    +
    + {(seeAllValueSatker + ? contentSatker + : contentSatker?.slice(0, 3) + )?.map((item: any, index: number) => ( +
    +
    { : `${prefixPath}/audio/detail/${item?.slug}` } > - {item.title} + {item?.title}
    - + {
    -
    -

    {item.categoryName}

    -

    {item.title}

    -

    {htmlToString(item.description)}

    -
    -
    - ))} */} - {/* */} - {(seeAllValueSatker - ? contentSatker - : contentSatker?.slice(0, 3) - )?.map((item: any, index: number) => ( -
    -
    { ? `${prefixPath}/document/detail/${item?.slug}` : `${prefixPath}/audio/detail/${item?.slug}` } + className={`${index === 0 ? "p-4" : "p-3 w-[50%]"}`} > - {item?.title} -
    +

    + {item.categoryName} +

    +

    + {item.title} +

    +

    + {htmlToString(item.description)} +

    + +
    + ))} + {/* Tombol See More / See Less */} + {contentSatker?.length > 3 && ( +
    +
    - + +
    - {/* */} - -

    - {item.categoryName} -

    -

    - {item.title} -

    -

    - {htmlToString(item.description)} -

    - -
    - ))} - {/* Tombol See More / See Less */} - {contentSatker?.length > 3 && ( -
    - -
    - )} + )} +
    -
    + )}
    ); diff --git a/service/landing/landing.ts b/service/landing/landing.ts index e61e8220..399a4fe1 100644 --- a/service/landing/landing.ts +++ b/service/landing/landing.ts @@ -31,9 +31,15 @@ export async function getCsrfToken() { // } } -export async function getHeroData(isInt: Boolean = false, unitType= "") { +export async function getHeroData(isInt: Boolean = false, unitType = "") { return await httpGetInterceptor( - `media/public/list?enablePage=1&sort=desc&sortBy=createdAt&size=5&page=0&typeId=1&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=&isInt=${isInt}${unitType==""?"":unitType=='polda'?'&isAllPolda=true':'&isAllSatker=true'}` + `media/public/list?enablePage=1&sort=desc&sortBy=createdAt&size=5&page=0&typeId=1&title=&categoryId=&fileFormats=&tags=&group=&startDate=&endDate=&month=&year=&isInt=${isInt}${ + unitType == "" + ? "" + : unitType == "polda" + ? "&isAllPolda=true" + : "&isAllSatker=true" + }` ); } @@ -53,10 +59,13 @@ export async function listPopUp(group: any = "", isInt: Boolean = false) { export async function getPublicCategoryData( group: any = "", type: string = "", - isInt: Boolean = false + isInt: boolean = false, + page: number = 1 ) { return await httpGetInterceptor( - `media/categories/list/publish?enablePage=0&group=${group}&type=${type}&isInt=${isInt}` + `media/categories/list/publish?enablePage=1&size=12&page=${ + page - 1 + }&group=${group}&type=${type}&isInt=${isInt}` ); } diff --git a/utils/globals.tsx b/utils/globals.tsx index 81def301..445354d9 100644 --- a/utils/globals.tsx +++ b/utils/globals.tsx @@ -11,7 +11,11 @@ export const generateLocalizedPath = (href: string, locale: string): string => { return `/${locale}${href}`; }; -export function textEllipsis(str: string, maxLength: number, { side = "end", ellipsis = "..." } = {}) { +export function textEllipsis( + str: string, + maxLength: number, + { side = "end", ellipsis = "..." } = {} +) { if (str !== undefined && str?.length > maxLength) { switch (side) { case "start": @@ -78,7 +82,10 @@ export function getOnlyMonthAndYear(d: Date) { export function getPublicLocaleTimestamp(d: any) { const pad = (n: any, s = 2) => `${new Array(s).fill(0)}${n}`.slice(-s); - return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${pad(d.getFullYear(), 4)} ${pad(d.getHours())}:${pad(d.getMinutes())}`; + return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${pad( + d.getFullYear(), + 4 + )} ${pad(d.getHours())}:${pad(d.getMinutes())}`; } export function capitalize(s: any) { @@ -91,9 +98,13 @@ export function capitalize(s: any) { } export function getLocaleTimestamp(d: Date): string { - const pad = (n: number, s: number = 2): string => `${new Array(s).fill(0)}${n}`.slice(-s); + const pad = (n: number, s: number = 2): string => + `${new Array(s).fill(0)}${n}`.slice(-s); - return `${pad(d.getDate())}-${pad(d.getMonth() + 1)}-${pad(d.getFullYear(), 4)} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`; + return `${pad(d.getDate())}-${pad(d.getMonth() + 1)}-${pad( + d.getFullYear(), + 4 + )} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`; } export function getLocaleTime(d: Date) { @@ -102,7 +113,9 @@ export function getLocaleTime(d: Date) { } export function getTimestamp(d: Date) { const pad = (n: any, s = 2) => `${new Array(s).fill(0)}${n}`.slice(-s); - return `${pad(d.getFullYear(), 4)}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`; + return `${pad(d.getFullYear(), 4)}-${pad(d.getMonth() + 1)}-${pad( + d.getDate() + )} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`; } export function secondToTimes(sec: number) { @@ -116,7 +129,10 @@ export function secondToTimes(sec: number) { export function checkMaliciousText(str: any) { try { - const urlPattern = new RegExp("(https?:\\/\\/(?:www\\.|(?!www))[^\\s\\.]+\\.[^\\s]{2,}|www\\.[^\\s]+\\.[^\\s]{2,}|https?:\\/\\/[^\\s]+|\\b(?:https?|ftp):\\/\\/[^\\s/$.?#].[^\\s]*)", "gi"); + const urlPattern = new RegExp( + "(https?:\\/\\/(?:www\\.|(?!www))[^\\s\\.]+\\.[^\\s]{2,}|www\\.[^\\s]+\\.[^\\s]{2,}|https?:\\/\\/[^\\s]+|\\b(?:https?|ftp):\\/\\/[^\\s/$.?#].[^\\s]*)", + "gi" + ); const isContainUrl = urlPattern.test(str); if (isContainUrl) { return "Message mengandung URL yang tidak diizinkan"; @@ -155,20 +171,26 @@ export const shimmer = (w: number, h: number) => ` `; -export const toBase64 = (str: string) => (typeof window === "undefined" ? Buffer.from(str).toString("base64") : window.btoa(str)); +export const toBase64 = (str: string) => + typeof window === "undefined" + ? Buffer.from(str).toString("base64") + : window.btoa(str); const LoadScript = () => { useEffect(() => { const script = document.createElement("script"); script.src = "https://cdn.userway.org/widget.js"; script.setAttribute("data-account", "X36s1DpjqB"); + script.setAttribute("data-position", "3"); script.async = true; document.head.appendChild(script); + return () => { - // Cleanup if needed document.head.removeChild(script); }; }, []); - return null; // Tidak perlu merender apa-apa + + return null; }; + export default LoadScript; From 4ef9d5b513f2de1fc5d0ef0a0e5a6dd5002ef927 Mon Sep 17 00:00:00 2001 From: hanif salafi Date: Tue, 24 Jun 2025 02:01:30 +0700 Subject: [PATCH 2/9] feat: update visualization, reports, and userway --- .../contributor/report/components/columns.tsx | 4 +- .../dashboard/executive-data/page.tsx | 348 ++++++------------ utils/globals.tsx | 2 +- 3 files changed, 124 insertions(+), 230 deletions(-) diff --git a/app/[locale]/(protected)/contributor/report/components/columns.tsx b/app/[locale]/(protected)/contributor/report/components/columns.tsx index e244576c..f12626f3 100644 --- a/app/[locale]/(protected)/contributor/report/components/columns.tsx +++ b/app/[locale]/(protected)/contributor/report/components/columns.tsx @@ -23,7 +23,7 @@ import { Link, useRouter } from "@/components/navigation"; import Swal from "sweetalert2"; import withReactContent from "sweetalert2-react-content"; import { deleteBlog } from "@/service/blog/blog"; -import { error, loading } from "@/lib/swal"; +import { error, loading, close } from "@/lib/swal"; import { useTranslations } from "next-intl"; import axios from "axios"; @@ -126,6 +126,7 @@ const useTableColumns = ({ const handleDownload = async (id: string) => { try { + loading(); const response = await axios.get( `https://netidhub.com/api/media/report/download?id=${id}`, { @@ -140,6 +141,7 @@ const useTableColumns = ({ document.body.appendChild(link); link.click(); link.remove(); + close(); } catch (error) { console.error("Download failed", error); MySwal.fire({ diff --git a/app/[locale]/(protected)/dashboard/executive-data/page.tsx b/app/[locale]/(protected)/dashboard/executive-data/page.tsx index bee89e65..209eb27c 100644 --- a/app/[locale]/(protected)/dashboard/executive-data/page.tsx +++ b/app/[locale]/(protected)/dashboard/executive-data/page.tsx @@ -37,6 +37,7 @@ export default function ExecutiveDataDashboard() { const state = Cookies.get("state"); const provState = Cookies.get("state-prov"); const t = useTranslations("AnalyticsDashboard"); + const [refreshTicket, setRefreshTicket] = useState(true); const [ticket1, setTicket1] = useState(""); const [ticket2, setTicket2] = useState(""); @@ -44,6 +45,7 @@ export default function ExecutiveDataDashboard() { const [ticket4, setTicket4] = useState(""); const [ticket5, setTicket5] = useState(""); const [ticket6, setTicket6] = useState(""); + const [ticket7, setTicket7] = useState(""); const [isInternational, setIsInternational] = useState([false, false, false]); const baseUrl = "https://analytic.sitani.info/"; @@ -54,13 +56,40 @@ export default function ExecutiveDataDashboard() { const view1 = levelName == "MABES POLRI" ? isInternational[0] - ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue-executive?" - : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue-executive?" + ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=ALL" + : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=ALL" : safeLevelName.includes("POLDA") - ? `views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?provinsi-polda=${state}&` - : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?provinsi-polda=${state}&`; + ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=${state}&` + : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=${state}&`; const view2 = + levelName == "MABES POLRI" + ? isInternational[1] + ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-content-interaction-per-satker?polda-selected=ALL" + : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-satker?polda-selected=ALL" + : safeLevelName.includes("POLDA") + ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-satker?polda-selected=SATKER POLRI&` + : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-satker?polda-selected=SATKER POLRI&`; + + const view3 = + levelName == "MABES POLRI" + ? isInternational[2] + ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-content-category-per-polda-new?polda-selected=ALL" + : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-polda-new?polda-selected=ALL" + : safeLevelName.includes("POLDA") + ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-polda-new?polda-selected=${state}&` + : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-polda-new?polda-selected=${state}&`; + + const view4 = + levelName == "MABES POLRI" + ? isInternational[1] + ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-satker?polda-selected=ALL" + : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-satker?polda-selected=ALL" + : safeLevelName.includes("POLDA") + ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-satker?polda-selected=SATKER POLRI&` + : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-satker?polda-selected=SATKER POLRI&`; + + const view5 = levelName == "MABES POLRI" ? isInternational[1] ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-published-produksi?" @@ -69,7 +98,7 @@ export default function ExecutiveDataDashboard() { ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda-executive?polda-selected=${state}&` : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda-executive?polda-selected=${state}&`; - const view3 = + const view6 = levelName == "MABES POLRI" ? isInternational[2] ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-waktu-akses-pengguna?" @@ -78,59 +107,14 @@ export default function ExecutiveDataDashboard() { ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda-executive?polda-selected=${state}&` : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda-executive?polda-selected=${state}&`; - const view4 = - levelName == "MABES POLRI" - ? isInternational[1] - ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?" - : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?" - : safeLevelName.includes("POLDA") - ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=${state}&` - : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=${state}&`; - - const view5 = - levelName == "MABES POLRI" - ? isInternational[1] - ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?" - : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?" - : safeLevelName.includes("POLDA") - ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?provinsi-polda=${state}&` - : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?provinsi-polda=${state}&`; - - const view6 = - levelName == "MABES POLRI" - ? isInternational[1] - ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?" - : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?" - : safeLevelName.includes("POLDA") - ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?satker-selected=${state}&` - : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?satker-selected=${state}&`; - const view7 = levelName == "MABES POLRI" ? isInternational[2] - ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-penugasan?" - : "views/2023_09_db-penugasan_rev100/db-penugasan?" + ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-penugasan-vertical-bar?" + : "views/2023_09_db-penugasan_rev100/db-penugasan-vertical-bar?" : safeLevelName.includes("POLDA") - ? `views/2023_09_db-penugasan_rev100/db-penugasan?polda-selected=${state}&` - : `views/2023_09_db-penugasan_rev100/db-penugasan?polda-selected=${state}&`; - - const view8 = - levelName == "MABES POLRI" - ? isInternational[2] - ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-kategori-top10?" - : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-top10?" - : safeLevelName.includes("POLDA") - ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda-new?polda-selected=${state}&` - : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda-new?polda-selected=${state}&`; - - const view9 = - levelName == "MABES POLRI" - ? isInternational[3] - ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-kategori?" - : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori?" - : safeLevelName.includes("POLDA") - ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-polda?polda-selected=${state}&` - : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-polda?polda-selected=${state}&`; + ? `views/2023_09_db-penugasan_rev100/db-penugasan-vertical-bar?polda-selected=${state}&` + : `views/2023_09_db-penugasan_rev100/db-penugasan-vertical-bar?polda-selected=${state}&`; const param = ":embed=yes&:toolbar=no&:iframeSizedToWindow=true"; @@ -153,10 +137,13 @@ export default function ExecutiveDataDashboard() { const response6 = await generateTicket(); setTicket6(response6?.data?.data); + + const response7 = await generateTicket(); + setTicket7(response7?.data?.data); } initState(); - }, [isInternational]); + }, [isInternational, refreshTicket]); // Hooks useEffect(() => { @@ -178,7 +165,7 @@ export default function ExecutiveDataDashboard() {
    - + setRefreshTicket(!refreshTicket)}> -
    + {/*

    Upload konten hari ini Polda

    -
    +
    */}
    {ticket1 == "w-full" ? (