From 32e71348f5fb04a9eb3a84619cbf67105497502f Mon Sep 17 00:00:00 2001 From: Rama Priyanto Date: Fri, 13 Dec 2024 11:10:59 +0700 Subject: [PATCH] feat:pattern relation, content production page --- .../(protected)/content-production/layout.tsx | 9 + .../(protected)/content-production/page.tsx | 11 + app/[locale]/(protected)/dashboard/page.tsx | 6 +- .../(protected)/pattern-relation/layout.tsx | 9 + .../(protected)/pattern-relation/page.tsx | 11 + .../visualization/content-production.tsx | 246 ++++++++++++++ components/visualization/dashboard-viz.tsx | 15 +- .../visualization/pattern-relation-viz.tsx | 312 ++++++++++++++++++ messages/en.json | 15 +- messages/in.json | 15 +- 10 files changed, 626 insertions(+), 23 deletions(-) create mode 100644 app/[locale]/(protected)/content-production/layout.tsx create mode 100644 app/[locale]/(protected)/content-production/page.tsx create mode 100644 app/[locale]/(protected)/pattern-relation/layout.tsx create mode 100644 app/[locale]/(protected)/pattern-relation/page.tsx create mode 100644 components/visualization/content-production.tsx create mode 100644 components/visualization/pattern-relation-viz.tsx diff --git a/app/[locale]/(protected)/content-production/layout.tsx b/app/[locale]/(protected)/content-production/layout.tsx new file mode 100644 index 00000000..3534b5a4 --- /dev/null +++ b/app/[locale]/(protected)/content-production/layout.tsx @@ -0,0 +1,9 @@ +export const metadata = { + title: "Content Production", +}; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return <>{children}; +}; + +export default Layout; diff --git a/app/[locale]/(protected)/content-production/page.tsx b/app/[locale]/(protected)/content-production/page.tsx new file mode 100644 index 00000000..e17db212 --- /dev/null +++ b/app/[locale]/(protected)/content-production/page.tsx @@ -0,0 +1,11 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import ContentProductionVisualization from "@/components/visualization/content-production"; + +export default function ContentProduction() { + return ( +
+ + +
+ ); +} diff --git a/app/[locale]/(protected)/dashboard/page.tsx b/app/[locale]/(protected)/dashboard/page.tsx index b02b93e8..39a1e9c8 100644 --- a/app/[locale]/(protected)/dashboard/page.tsx +++ b/app/[locale]/(protected)/dashboard/page.tsx @@ -15,6 +15,7 @@ import Cookies from "js-cookie"; import { useEffect } from "react"; import { getCookiesDecrypt } from "@/lib/utils"; import DashboardVisualization from "@/components/visualization/dashboard-viz"; +import SiteBreadcrumb from "@/components/site-breadcrumb"; const DashboardPage = () => { const t = useTranslations("AnalyticsDashboard"); @@ -22,9 +23,8 @@ const DashboardPage = () => { return Number(roleId) == 2 || Number(roleId) == 11 || Number(roleId) == 12 ? (
-
- -
+ +
) : (
diff --git a/app/[locale]/(protected)/pattern-relation/layout.tsx b/app/[locale]/(protected)/pattern-relation/layout.tsx new file mode 100644 index 00000000..c2881520 --- /dev/null +++ b/app/[locale]/(protected)/pattern-relation/layout.tsx @@ -0,0 +1,9 @@ +export const metadata = { + title: "Pattern Relation", +}; + +const Layout = ({ children }: { children: React.ReactNode }) => { + return <>{children}; +}; + +export default Layout; diff --git a/app/[locale]/(protected)/pattern-relation/page.tsx b/app/[locale]/(protected)/pattern-relation/page.tsx new file mode 100644 index 00000000..6bcb42ba --- /dev/null +++ b/app/[locale]/(protected)/pattern-relation/page.tsx @@ -0,0 +1,11 @@ +import SiteBreadcrumb from "@/components/site-breadcrumb"; +import PatternRelationVisualization from "@/components/visualization/pattern-relation-viz"; + +export default function PatternRelation() { + return ( +
+ + +
+ ); +} diff --git a/components/visualization/content-production.tsx b/components/visualization/content-production.tsx new file mode 100644 index 00000000..486bb1e9 --- /dev/null +++ b/components/visualization/content-production.tsx @@ -0,0 +1,246 @@ +"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 ContentProductionVisualization() { + 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 [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-published-produksi?" + : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-published-produksi?" + : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-published-produksi-polda?provinsi-polda=${provState}&`; + + const view2 = + levelName == "MABES POLRI" + ? isInternational[1] + ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-publisher?" + : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-publisher?" + : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-publisher-polda?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_Rev201/db-waktu-akses-pengguna?" + : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-waktu-akses-pengguna-polda?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); + } + + 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 ( +
+

+ + {isInternational[0] + ? "CREATORS WITH THE MOST PUBLISHED CONTENT" + : "KREATOR DENGAN PUBLISH KONTEN TERBANYAK"} + +

+ {levelName === "MABES POLRI" ? ( +
+

{t("choose_category")}

+
+ + +
+
+ ) : ( + "" + )} +
+ {ticket1 == "" ? ( +