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

feat: update performance polda

This commit is contained in:
hanif salafi 2025-02-18 11:18:51 +07:00
parent c4ba5e44f0
commit 9f3810fdee
4 changed files with 186 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/[locale]/(protected)/admin/performance-polda/page.tsx
View File

@ -1,10 +1,12 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import PerformancePoldaViz from "@/components/visualization/performance-polda";
export default function PerformancePolda() {
return (
<div>
<SiteBreadcrumb />
<p className="font-semibold">PERFORMANCE KUMULATIF PER POLDA</p>
<PerformancePoldaViz />
</div>
);
}

12
app/[locale]/(protected)/admin/performance-polres/page.tsx Normal file
View File

@ -0,0 +1,12 @@
import SiteBreadcrumb from "@/components/site-breadcrumb";
import PerformancePolresViz from "@/components/visualization/performance-polres";
export default function PerformancePolda() {
return (
<div>
<SiteBreadcrumb />
<p className="font-semibold">PERFORMANCE KUMULATIF PER POLDA</p>
<PerformancePolresViz />
</div>
);
}

86
components/visualization/performance-polda.tsx Normal file
View File

@ -0,0 +1,86 @@
"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 poldaState = 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 view1 =
levelName == "MABES POLRI"
? isInternational[0]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-top10?"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-top10?"
: `/views/2023_09_db-ranking-polres-by-polda_rev100/db-ranking-by-polda?`;
const param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true";
useEffect(() => {
async function initState() {
const response1 = await generateTicket();
setTicket1(response1?.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 rounded-lg p-3">
<p className="text-lg">
<b>
{isInternational[0]
? "POLRES PERFORMANCE"
: "POLFORMANCE 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>
</div>
);
}

86
components/visualization/performance-polres.tsx Normal file
View File

@ -0,0 +1,86 @@
"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 PerformancePolresViz() {
const [hasMounted, setHasMounted] = useState(false);
const t = useTranslations("AnalyticsDashboard");
const levelName = getCookiesDecrypt("ulnae");
const poldaState = 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 view1 =
levelName == "MABES POLRI"
? isInternational[0]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-top10?"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-top10?"
: `/views/2023_09_db-ranking-polres-by-polda_rev100/db-ranking-by-polda?polda-selected=${provState}&`;
const param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true";
useEffect(() => {
async function initState() {
const response1 = await generateTicket();
setTicket1(response1?.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 rounded-lg p-3">
<p className="text-lg">
<b>
{isInternational[0]
? "POLRES PERFORMANCE"
: "POLFORMANCE 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>
</div>
);
}