132 lines
4.2 KiB
TypeScript
132 lines
4.2 KiB
TypeScript
"use client";
|
|
import Cookies from "js-cookie";
|
|
import { useEffect, useState } from "react";
|
|
import { getCookiesDecrypt } from "@/lib/utils";
|
|
import { generateTicket } from "@/service/tableau/tableau-service";
|
|
import { Button } from "../ui/button";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export default function PerformancePoldaViz() {
|
|
const [hasMounted, setHasMounted] = useState(false);
|
|
const t = useTranslations("AnalyticsDashboard");
|
|
const levelName = getCookiesDecrypt("ulnae");
|
|
const state = Cookies.get("state");
|
|
const provState = Cookies.get("state-prov");
|
|
|
|
const [ticket1, setTicket1] = useState("");
|
|
const [ticket2, setTicket2] = useState("");
|
|
const [ticket3, setTicket3] = useState("");
|
|
const [ticket4, setTicket4] = useState("");
|
|
const [isInternational, setIsInternational] = useState([false, false, false]);
|
|
|
|
const baseUrl = "https://db-mediahub.polri.go.id/";
|
|
const url = "https://db-mediahub.polri.go.id/trusted/";
|
|
|
|
const safeLevelName = levelName ?? "";
|
|
|
|
const view1 =
|
|
levelName == "MABES POLRI"
|
|
? isInternational[0]
|
|
? // "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-ranking-polda?"
|
|
"views/2025_10_MediaHUB-Viz-POLDA_Rev201/db-ranking-polda?"
|
|
: // "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-ranking-polda?"
|
|
"views/2025_10_MediaHUB-Viz-POLDA_Rev201/db-ranking-polda?"
|
|
: // `views/2023_09_db-ranking-polres-by-polda_rev100/db-ranking-by-polda?polda-selected=${state}&`;
|
|
`views/2025_10_MediaHUB-Viz-POLDA_Rev201/db-ranking-polda?provinsi-polda=${provState}&`;
|
|
|
|
const view2 =
|
|
levelName == "MABES POLRI"
|
|
? isInternational[0]
|
|
? // "views/2023_09_db-ranking-polda_rev100/db-ranking-13?"
|
|
"views/2025_10_db-ranking-polda_rev100/db-ranking-13?"
|
|
: // "views/2023_09_db-ranking-polda_rev100/db-ranking-13?"
|
|
"views/2025_10_db-ranking-polda_rev100/db-ranking-13?"
|
|
: safeLevelName.includes("POLDA")
|
|
? // `views/2023_09_db-ranking-polres-by-polda_rev100/db-ranking-by-polda?polda-selected=${state}&`
|
|
`views/2025_10_db-ranking-polda_rev100/db-ranking-13?provinsi-polda=${provState}&`
|
|
: // `views/2023_09_db-ranking-polres-by-polda_rev100/db-ranking-by-polda?polda-selected=${state}&`;
|
|
`views/2025_10_db-ranking-polda_rev100/db-ranking-13?provinsi-polda=${provState}&`;
|
|
|
|
const param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true";
|
|
|
|
useEffect(() => {
|
|
async function initState() {
|
|
const response1 = await generateTicket();
|
|
setTicket1(response1?.data?.data);
|
|
|
|
const response2 = await generateTicket();
|
|
setTicket2(response2?.data?.data);
|
|
}
|
|
|
|
initState();
|
|
}, [isInternational]);
|
|
|
|
// Hooks
|
|
useEffect(() => {
|
|
setHasMounted(true);
|
|
}, []);
|
|
|
|
// Render
|
|
if (!hasMounted) return null;
|
|
|
|
const handleInternational = (index: number, val: boolean) => {
|
|
const updatedIsInternational = [...isInternational];
|
|
|
|
updatedIsInternational[index] = val;
|
|
setIsInternational(updatedIsInternational);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-2 bg-white dark:bg-black rounded-lg p-3">
|
|
<p className="text-lg">
|
|
<b>
|
|
{levelName == "MABES POLRI"
|
|
? "PERFORMANCE PER POLDA/SATKER"
|
|
: "PERFORMANCE POLRES"}
|
|
</b>
|
|
</p>
|
|
<div className="my-5">
|
|
{ticket1 == "" ? (
|
|
<iframe
|
|
src={`${baseUrl + view1 + param}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
) : (
|
|
<iframe
|
|
src={`${`${url + ticket1}/${view1}${param}`}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
)}
|
|
</div>
|
|
<p className="text-lg">
|
|
<b>
|
|
{isInternational[0]
|
|
? "PUBLISH CONTENT PER POLDA/SATKER"
|
|
: "PUBLISH KONTEN PER POLDA/SATKER"}
|
|
</b>
|
|
</p>
|
|
<div className="my-5">
|
|
{ticket2 == "" ? (
|
|
<iframe
|
|
src={`${baseUrl + view2 + param}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
) : (
|
|
<iframe
|
|
src={`${`${url + ticket2}/${view2}${param}`}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|