mediahub-fe/components/visualization/performance-polres.tsx

"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 = `views/2025_10_MediaHUB-Viz-POLDA_Rev203/db-ranking-polda-satker?polda-selected=${poldaState}&`;
  const view2 = `views/2023_09_db-ranking-polres-by-polda_rev100/db-ranking-by-polda?polda-selected=${poldaState}&`;
  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;

  return (
    <div className="flex flex-col gap-2 bg-white rounded-lg p-3">
      <p className="text-lg">
        <b>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 POLICE REGENCY"
            : "PUBLISH KONTEN PER POLRES"}
        </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>
  );
}