489 lines
19 KiB
TypeScript
489 lines
19 KiB
TypeScript
"use client";
|
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle } 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, UploadIcon } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import Cookies from "js-cookie";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { useTranslations } from "next-intl";
|
|
import DashboardDropdown from "@/components/dashboard-dropdown";
|
|
import RecentActivity from "../routine-task/components/recent-activity";
|
|
import ContentTable from "../routine-task/components/content-table";
|
|
import { Link } from "@/i18n/routing";
|
|
import TaskTable from "../../contributor/task/components/task-table";
|
|
import PressConferenceTable from "../../contributor/schedule/press-conference/components/presscon-table";
|
|
|
|
export default function ExecutiveDataDashboard() {
|
|
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 levelNumber = getCookiesDecrypt("ulne");
|
|
const state = Cookies.get("state");
|
|
const provState = Cookies.get("state-prov");
|
|
const t = useTranslations("AnalyticsDashboard");
|
|
|
|
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://analytic.sitani.info/";
|
|
const url = "https://analytic.sitani.info/trusted/";
|
|
|
|
const safeLevelName = levelNumber ?? "";
|
|
|
|
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?"
|
|
: 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}&`;
|
|
|
|
const view2 =
|
|
levelName == "MABES POLRI"
|
|
? isInternational[1]
|
|
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-published-produksi?"
|
|
: "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-executive?"
|
|
: safeLevelName.includes("POLDA")
|
|
? `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 =
|
|
levelName == "MABES POLRI"
|
|
? isInternational[2]
|
|
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-waktu-akses-pengguna?"
|
|
: "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-executive?"
|
|
: safeLevelName.includes("POLDA")
|
|
? `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?"
|
|
: 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}&`;
|
|
|
|
const param = ":embed=yes&:toolbar=no&: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>
|
|
<div className="my-3">
|
|
<Tabs defaultValue="content-publish" className="w-full">
|
|
<TabsList className="flex-wrap bg-black">
|
|
<TabsTrigger
|
|
value="content-publish"
|
|
className="data-[state=active]:bg-black data-[state=active]:text-primary-foreground rounded-md px-6"
|
|
>
|
|
Publish Konten
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="content-category"
|
|
className="data-[state=active]:bg-black data-[state=active]:text-primary-foreground rounded-md px-6"
|
|
>
|
|
Kategori Konten
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="popular-content"
|
|
className="data-[state=active]:bg-black data-[state=active]:text-primary-foreground rounded-md px-6"
|
|
>
|
|
Konten Terpopuler
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="heatmap"
|
|
className="data-[state=active]:bg-black data-[state=active]:text-primary-foreground rounded-md px-6"
|
|
>
|
|
Heatmap
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="task"
|
|
className="data-[state=active]:bg-black data-[state=active]:text-primary-foreground rounded-md px-6"
|
|
>
|
|
Penugasan
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="content-publish">
|
|
<div className="mt-3 flex gap-2 flex-col justify-center">
|
|
{/* Polda */}
|
|
{(levelNumber === "1" || levelNumber === "2") && (
|
|
<Card
|
|
className={`rounded-sm p-3 ${
|
|
levelNumber === "2" ? "w-full" : "w-full"
|
|
}`}
|
|
>
|
|
<div className="flex flex-row justify-between">
|
|
<p className="text-base font-semibold">
|
|
Upload konten hari ini Polda
|
|
</p>
|
|
</div>
|
|
<div className="my-5">
|
|
{ticket1 == "w-full" ? (
|
|
<iframe
|
|
src={`${baseUrl + view4 + param}`}
|
|
width="100%"
|
|
height="750"
|
|
className="w-full"
|
|
frameBorder="0"
|
|
/>
|
|
) : (
|
|
<iframe
|
|
src={`${url + ticket1}/${view4}${param}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Satker */}
|
|
{(levelNumber === "1" || levelNumber === "3") && (
|
|
<Card
|
|
className={`rounded-sm p-3 ${
|
|
levelNumber === "3" ? "w-full" : "w-full"
|
|
}`}
|
|
>
|
|
<div className="flex flex-row justify-between">
|
|
<p className="text-base font-semibold">
|
|
Upload konten hari ini Satker
|
|
</p>
|
|
</div>
|
|
<div className="my-5">
|
|
{ticket2 == "" ? (
|
|
<iframe
|
|
src={`${baseUrl + view6 + param}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
) : (
|
|
<iframe
|
|
src={`${url + ticket2}/${view6}${param}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Polres */}
|
|
{(levelNumber === "1" || levelNumber === "2") && (
|
|
<Card
|
|
className={`rounded-sm p-3 ${
|
|
levelNumber === "2" ? "w-full" : "w-full"
|
|
}`}
|
|
>
|
|
<div className="flex flex-row justify-between">
|
|
<p className="text-base font-semibold">
|
|
Upload konten hari ini Polres
|
|
</p>
|
|
</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>
|
|
</TabsContent>
|
|
<TabsContent value="content-category">
|
|
<Card className="px-3 py-3">
|
|
<p className="text-lg">
|
|
<b>
|
|
{isInternational[2]
|
|
? "INTERACTION OF THE MOST POPULAR CATEGORIES AND TITLES"
|
|
: "INTERAKSI KATEGORI DAN JUDUL TERPOPULER"}
|
|
</b>
|
|
</p>
|
|
{levelName === "MABES POLRI" ? (
|
|
<div className="flex flex-col gap-1">
|
|
<p>{t("choose_category")}</p>
|
|
<div className="flex flex-row gap-1 border-2 w-fit">
|
|
<Button
|
|
onClick={() => handleInternational(2, false)}
|
|
className={` hover:text-white rounded-none
|
|
${
|
|
isInternational[2]
|
|
? "bg-white text-black "
|
|
: "bg-black text-white "
|
|
}`}
|
|
>
|
|
Indonesia
|
|
</Button>
|
|
<Button
|
|
onClick={() => handleInternational(2, true)}
|
|
className={`hover:text-white rounded-none ${
|
|
isInternational[1]
|
|
? "bg-black text-white "
|
|
: "bg-white text-black "
|
|
}
|
|
`}
|
|
>
|
|
{t("international")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
""
|
|
)}
|
|
<div className="my-5">
|
|
{ticket3 == "" ? (
|
|
<iframe
|
|
src={`${baseUrl + view8 + param}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
) : (
|
|
<iframe
|
|
src={`${`${url + ticket3}/${view8}${param}`}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</TabsContent>
|
|
<TabsContent value="popular-content">
|
|
<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>
|
|
</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>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="heatmap">
|
|
<Card className="rounded-sm p-3 h-[750px]">
|
|
<div className="flex flex-row justify-between mx-3">
|
|
<p className="text-base font-semibold">
|
|
Heatmap Konten dan Kategori dengan Interaksi
|
|
</p>
|
|
</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>
|
|
</TabsContent>
|
|
<TabsContent value="task">
|
|
<div className="grid grid-cols-12 gap-5">
|
|
<div className="lg:col-span-12 col-span-12">
|
|
<Card className="px-3 py-3">
|
|
{levelName === "MABES POLRI" ? (
|
|
<div className="flex flex-col gap-1">
|
|
<p>{t("choose_category")}</p>
|
|
<div className="flex flex-row gap-1 border-2 w-fit">
|
|
<Button
|
|
onClick={() => handleInternational(2, false)}
|
|
className={` hover:text-white rounded-none
|
|
${
|
|
isInternational[2]
|
|
? "bg-white text-black "
|
|
: "bg-black text-white "
|
|
}`}
|
|
>
|
|
Indonesia
|
|
</Button>
|
|
<Button
|
|
onClick={() => handleInternational(2, true)}
|
|
className={`hover:text-white rounded-none ${
|
|
isInternational[1]
|
|
? "bg-black text-white "
|
|
: "bg-white text-black "
|
|
}
|
|
`}
|
|
>
|
|
{t("international")}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
""
|
|
)}
|
|
<div className="my-5">
|
|
{ticket3 == "" ? (
|
|
<iframe
|
|
src={`${baseUrl + view7 + param}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
) : (
|
|
<iframe
|
|
src={`${`${url + ticket3}/${view7}${param}`}`}
|
|
width="100%"
|
|
height="750"
|
|
frameBorder="0"
|
|
/>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|