416 lines
14 KiB
TypeScript
416 lines
14 KiB
TypeScript
"use client";
|
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card } from "@/components/ui/card";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { getCookiesDecrypt } from "@/lib/utils";
|
|
import { generateTicket } from "@/service/tableau/tableau-service";
|
|
import { LucideBoxSelect } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import Cookies from "js-cookie";
|
|
|
|
export default function ExecutiveDashboard() {
|
|
// const downloadReport = async () => {
|
|
// // const formattedDate = `${reportDate.year}-${String(
|
|
// // reportDate.month
|
|
// // ).padStart(2, "0")}-${String(reportDate.day).padStart(2, "0")}`;
|
|
// // const resLogin = await tableauSignin();
|
|
// // const token = resLogin?.data.data?.credentials?.token;
|
|
// // const resCover = await tableauViewImage(
|
|
// // token,
|
|
// // "1df3df4a-0457-4483-a8e1-160f70e7834f",
|
|
// // formattedDate
|
|
// // );
|
|
// // const resTotalLink = await tableauViewImage(
|
|
// // token,
|
|
// // "8f902032-a6eb-4083-817a-57350f509b75",
|
|
// // formattedDate
|
|
// // );
|
|
// // const resCount = await tableauViewImage(
|
|
// // token,
|
|
// // "11b2fe3c-f853-4156-800e-43342bf8e5ce",
|
|
// // formattedDate
|
|
// // );
|
|
// // const resCoverCommentTwitter = await tableauViewImage(
|
|
// // token,
|
|
// // "28183e0b-80d0-428d-8684-2cbb572e97b3",
|
|
// // formattedDate,
|
|
// // 2
|
|
// // );
|
|
// // const resCoverCommentTiktok = await tableauViewImage(
|
|
// // token,
|
|
// // "28183e0b-80d0-428d-8684-2cbb572e97b3",
|
|
// // formattedDate,
|
|
// // 3
|
|
// // );
|
|
// // const resCoverCommentFacebook = await tableauViewImage(
|
|
// // token,
|
|
// // "28183e0b-80d0-428d-8684-2cbb572e97b3",
|
|
// // formattedDate,
|
|
// // 4
|
|
// // );
|
|
// // const resCoverCommentInstagram = await tableauViewImage(
|
|
// // token,
|
|
// // "28183e0b-80d0-428d-8684-2cbb572e97b3",
|
|
// // formattedDate,
|
|
// // 5
|
|
// // );
|
|
// // const resCoverCommentYoutube = await tableauViewImage(
|
|
// // token,
|
|
// // "28183e0b-80d0-428d-8684-2cbb572e97b3",
|
|
// // formattedDate,
|
|
// // 6
|
|
// // );
|
|
// // const resCommentTwitter = await tableauViewImage(
|
|
// // token,
|
|
// // "9a6d05ed-dea7-4a93-b709-82d0dab4790d",
|
|
// // formattedDate,
|
|
// // 2
|
|
// // );
|
|
// // const resCommentTiktok = await tableauViewImage(
|
|
// // token,
|
|
// // "9a6d05ed-dea7-4a93-b709-82d0dab4790d",
|
|
// // formattedDate,
|
|
// // 3
|
|
// // );
|
|
// // const resCommentFacebook = await tableauViewImage(
|
|
// // token,
|
|
// // "9a6d05ed-dea7-4a93-b709-82d0dab4790d",
|
|
// // formattedDate,
|
|
// // 4
|
|
// // );
|
|
// // const resCommentInstagram = await tableauViewImage(
|
|
// // token,
|
|
// // "9a6d05ed-dea7-4a93-b709-82d0dab4790d",
|
|
// // formattedDate,
|
|
// // 5
|
|
// // );
|
|
// // const resCommentYoutube = await tableauViewImage(
|
|
// // token,
|
|
// // "9a6d05ed-dea7-4a93-b709-82d0dab4790d",
|
|
// // formattedDate,
|
|
// // 6
|
|
// // );
|
|
// // const blobCover = new Blob([resCover.data], { type: "image/png" });
|
|
// // const blobTotalLink = new Blob([resTotalLink.data], { type: "image/png" });
|
|
// // const blobCount = new Blob([resCount.data], { type: "image/png" });
|
|
// // const blobCoverCommentTwitter = new Blob([resCoverCommentTwitter.data], {
|
|
// // type: "image/png",
|
|
// // });
|
|
// // const blobCoverCommentTiktok = new Blob([resCoverCommentTiktok.data], {
|
|
// // type: "image/png",
|
|
// // });
|
|
// // const blobCoverCommentFacebook = new Blob([resCoverCommentFacebook.data], {
|
|
// // type: "image/png",
|
|
// // });
|
|
// // const blobCoverCommentInstagram = new Blob(
|
|
// // [resCoverCommentInstagram.data],
|
|
// // { type: "image/png" }
|
|
// // );
|
|
// // const blobCoverCommentYoutube = new Blob([resCoverCommentYoutube.data], {
|
|
// // type: "image/png",
|
|
// // });
|
|
// // const blobCommentTwitter = new Blob([resCommentTwitter.data], {
|
|
// // type: "image/png",
|
|
// // });
|
|
// // const blobCommentTiktok = new Blob([resCommentTiktok.data], {
|
|
// // type: "image/png",
|
|
// // });
|
|
// // const blobCommentFacebook = new Blob([resCommentFacebook.data], {
|
|
// // type: "image/png",
|
|
// // });
|
|
// // const blobCommentInstagram = new Blob([resCommentInstagram.data], {
|
|
// // type: "image/png",
|
|
// // });
|
|
// // const blobCommentYoutube = new Blob([resCommentYoutube.data], {
|
|
// // type: "image/png",
|
|
// // });
|
|
// // await pdfGenerator([
|
|
// // blobCover,
|
|
// // blobTotalLink,
|
|
// // blobCount,
|
|
// // blobCoverCommentTwitter,
|
|
// // blobCommentTwitter,
|
|
// // blobCoverCommentTiktok,
|
|
// // blobCommentTiktok,
|
|
// // blobCoverCommentFacebook,
|
|
// // blobCommentFacebook,
|
|
// // blobCoverCommentInstagram,
|
|
// // blobCommentInstagram,
|
|
// // blobCoverCommentYoutube,
|
|
// // blobCommentYoutube,
|
|
// // ]);
|
|
// };
|
|
|
|
const [startDate, setStartDate] = useState<any>(new Date());
|
|
const [endDate, setEndDate] = useState<any>(new Date());
|
|
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 [ticket5, setTicket5] = useState("");
|
|
const [ticket6, setTicket6] = 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_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?"
|
|
: "views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?"
|
|
: `views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?provinsi-polda=${provState}&`;
|
|
|
|
const view2 =
|
|
levelName == "MABES POLRI"
|
|
? isInternational[1]
|
|
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-published-produksi?"
|
|
: "views/2023_04_MediaHUB-Viz-POLDA_Rev202/db-published-produksi-executive?"
|
|
: `views/2023_04_MediaHUB-Viz-POLDA_Rev202/db-konten-publisher-polda-executive?provinsi-polda=${poldaState}&`;
|
|
|
|
const view3 =
|
|
levelName == "MABES POLRI"
|
|
? isInternational[2]
|
|
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-waktu-akses-pengguna?"
|
|
: "views/2023_04_MediaHUB-Viz-POLDA_Rev202/db-waktu-akses-pengguna-executive?"
|
|
: `views/2023_04_MediaHUB-Viz-POLDA_Rev202/db-waktu-akses-pengguna-polda-executive?provinsi-polda=${poldaState}&`;
|
|
|
|
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?"
|
|
: `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?provinsi-polda=${poldaState}&`;
|
|
|
|
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?"
|
|
: `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?provinsi-polda=${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);
|
|
|
|
const response3 = await generateTicket();
|
|
setTicket3(response3?.data?.data);
|
|
|
|
const response4 = await generateTicket();
|
|
setTicket4(response4?.data?.data);
|
|
|
|
const response5 = await generateTicket();
|
|
setTicket5(response5?.data?.data);
|
|
|
|
const response6 = await generateTicket();
|
|
setTicket6(response6?.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>
|
|
<SiteBreadcrumb />
|
|
<div className="mt-3 flex flex-row gap-3 justify-center">
|
|
<Card className="rounded-sm w-4/12 p-3">
|
|
<div className="flex flex-row justify-between">
|
|
<p className="text-base font-semibold">
|
|
Upload konten hari ini Polda
|
|
</p>
|
|
<LucideBoxSelect />
|
|
</div>
|
|
<div className="my-5">
|
|
{ticket1 == "" ? (
|
|
<iframe
|
|
src={`${baseUrl + view4 + param}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
) : (
|
|
<iframe
|
|
src={`${`${url + ticket1}/${view4}${param}`}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
<Card className="rounded-sm w-4/12 p-3">
|
|
<div className="flex flex-row justify-between">
|
|
<p className="text-base font-semibold">
|
|
Upload konten hari ini Satker
|
|
</p>
|
|
<LucideBoxSelect />
|
|
</div>
|
|
<div className="my-5">
|
|
{ticket2 == "" ? (
|
|
<iframe
|
|
src={`${baseUrl + view4 + param}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
) : (
|
|
<iframe
|
|
src={`${`${url + ticket2}/${view4}${param}`}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
<Card className="rounded-sm w-4/12 p-3">
|
|
<div className="flex flex-row justify-between">
|
|
<p className="text-base font-semibold">
|
|
Upload konten hari ini Polres
|
|
</p>
|
|
<LucideBoxSelect />
|
|
</div>
|
|
<div className="my-5">
|
|
{ticket3 == "" ? (
|
|
<iframe
|
|
src={`${baseUrl + view5 + param}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
) : (
|
|
<iframe
|
|
src={`${`${url + ticket3}/${view5}${param}`}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
<div className="w-full mt-3">
|
|
<Card className="rounded-sm p-3 h-[750px]">
|
|
<div className="flex flex-row justify-between">
|
|
<p className="text-base font-semibold">Konten Paling Populer</p>
|
|
<LucideBoxSelect />
|
|
</div>
|
|
<div className="my-5">
|
|
{ticket4 == "" ? (
|
|
<iframe
|
|
src={`${baseUrl + view2 + param}`}
|
|
width="100%"
|
|
height="650"
|
|
frameBorder="0"
|
|
/>
|
|
) : (
|
|
<iframe
|
|
src={`${`${url + ticket4}/${view2}${param}`}`}
|
|
width="100%"
|
|
height="650"
|
|
frameBorder="0"
|
|
/>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
<div className="w-full mt-3">
|
|
<Card className="rounded-sm p-3 h-[750px]">
|
|
<div className="flex flex-row justify-between">
|
|
<p className="text-base font-semibold">
|
|
Heatmap Konten Dengan Interaksi
|
|
</p>
|
|
<p className="text-base font-semibold">
|
|
Heatmap Kategori Dengan Interaksi
|
|
</p>
|
|
<LucideBoxSelect />
|
|
</div>
|
|
<div className="my-5">
|
|
{ticket5 == "" ? (
|
|
<iframe
|
|
src={`${baseUrl + view3 + param}`}
|
|
width="100%"
|
|
height="600"
|
|
frameBorder="0"
|
|
/>
|
|
) : (
|
|
<iframe
|
|
src={`${`${url + ticket5}/${view3}${param}`}`}
|
|
width="100%"
|
|
height="600"
|
|
frameBorder="0"
|
|
/>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
<div className="w-full mt-3">
|
|
<Card className="rounded-sm p-3 h-[300px]">
|
|
<div className="flex flex-row justify-between">
|
|
<p className="text-base font-semibold">Emergency Issue</p>
|
|
<LucideBoxSelect />
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
<div className="my-5">
|
|
{ticket6 == "" ? (
|
|
<iframe
|
|
src={`${baseUrl + view1 + param}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
) : (
|
|
<iframe
|
|
src={`${`${url + ticket6}/${view1}${param}`}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|