feat:pattern relation, content production page

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;

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 (
+    <div>
+      <SiteBreadcrumb />
+      <ContentProductionVisualization />
+    </div>
+  );
+}

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 ? (
     <div>
-      <div className="my-3">
-        <DashboardVisualization />
-      </div>
+      <SiteBreadcrumb />
+      <DashboardVisualization />
     </div>
   ) : (
     <div>

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;

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 (
+    <div>
+      <SiteBreadcrumb />
+      <PatternRelationVisualization />
+    </div>
+  );
+}

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 (
+    <div className="flex flex-col gap-2 bg-white rounded-lg p-3">
+      <p className="text-lg">
+        <b>
+          {isInternational[0]
+            ? "CREATORS WITH THE MOST PUBLISHED CONTENT"
+            : "KREATOR DENGAN PUBLISH KONTEN TERBANYAK"}
+        </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(0, false)}
+              className={` hover:text-white rounded-none
+                ${
+                  isInternational[0]
+                    ? "bg-white text-black "
+                    : "bg-black text-white "
+                }`}
+            >
+              Indonesia
+            </Button>
+            <Button
+              onClick={() => handleInternational(0, true)}
+              className={`hover:text-white rounded-none ${
+                isInternational[0]
+                  ? "bg-black text-white "
+                  : "bg-white text-black "
+              }
+              `}
+            >
+              {t("international")}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+      <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[1]
+            ? "CREATORS WITH THE MOST INTERACTION OF CONTENT"
+            : "KREATOR DENGAN INTERAKSI KONTEN TERBANYAK"}
+        </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(1, false)}
+              className={` hover:text-white rounded-none
+                ${
+                  isInternational[1]
+                    ? "bg-white text-black "
+                    : "bg-black text-white "
+                }`}
+            >
+              Indonesia
+            </Button>
+            <Button
+              onClick={() => handleInternational(1, 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">
+        {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>
+      <p className="text-lg">
+        <b>
+          {isInternational[2]
+            ? "ACCESS TIME PER CONTENT / CATEGORY"
+            : "WAKTU AKSES PER KONTEN / KATEGORI"}
+        </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 + view3 + param}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        ) : (
+          <iframe
+            src={`${`${url + ticket3}/${view3}${param}`}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        )}
+      </div>
+    </div>
+  );
+}

components/visualization/dashboard-viz.tsx

@@ -1,12 +1,15 @@
+"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 DashboardVisualization() {
   const levelName = getCookiesDecrypt("ulnae");
   const poldaState = Cookies.get("state");
+  const t = useTranslations("AnalyticsDashboard");
 
   const [ticket1, setTicket1] = useState("");
   const [ticket2, setTicket2] = useState("");
@@ -88,7 +91,7 @@ export default function DashboardVisualization() {
       </p>
       {levelName === "MABES POLRI" ? (
         <div className="flex flex-col gap-1">
-          <p>Pilih Kategory</p>
+          <p>{t("choose_category")}</p>
           <div className="flex flex-row gap-1 border-2 w-fit">
             <Button
               onClick={() => handleInternational(0, false)}
@@ -110,7 +113,7 @@ export default function DashboardVisualization() {
               }
               `}
             >
-              Internasional
+              {t("international")}
             </Button>
           </div>
         </div>
@@ -143,7 +146,7 @@ export default function DashboardVisualization() {
       </p>
       {levelName === "MABES POLRI" ? (
         <div className="flex flex-col gap-1">
-          <p>Pilih Kategory</p>
+          <p>{t("choose_category")}</p>
           <div className="flex flex-row gap-1 border-2 w-fit">
             <Button
               onClick={() => handleInternational(1, false)}
@@ -165,7 +168,7 @@ export default function DashboardVisualization() {
               }
               `}
             >
-              Internasional
+              {t("international")}
             </Button>
           </div>
         </div>
@@ -194,7 +197,7 @@ export default function DashboardVisualization() {
       </p>
       {levelName === "MABES POLRI" ? (
         <div className="flex flex-col gap-1">
-          <p>Pilih Kategory</p>
+          <p>{t("choose_category")}</p>
           <div className="flex flex-row gap-1 border-2 w-fit">
             <Button
               onClick={() => handleInternational(2, false)}
@@ -216,7 +219,7 @@ export default function DashboardVisualization() {
               }
               `}
             >
-              Internasional
+              {t("international")}
             </Button>
           </div>
         </div>

components/visualization/pattern-relation-viz.tsx

@@ -0,0 +1,312 @@
+"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 PatternRelationVisualization() {
+  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_04_MediaHUB-Viz-POLDA_Rev201/db-konten-top10-polda?provinsi-polda=${provState}&`;
+
+  const view2 =
+    levelName == "MABES POLRI"
+      ? isInternational[1]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten?"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten?"
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-polda?provinsi-polda=${poldaState}&`;
+
+  const view3 =
+    levelName == "MABES POLRI"
+      ? isInternational[2]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-kategori-top10?"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-kategori-top10?"
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-kategori-top10-polda?provinsi-polda=${poldaState}&`;
+
+  const view4 =
+    levelName == "MABES POLRI"
+      ? isInternational[3]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-kategori?"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-kategori?"
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-konten-kategori-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);
+
+      const response4 = await generateTicket();
+      setTicket4(response4.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]
+            ? "INTERACTION OF THE MOST POPULAR CONTENT AND TITLES"
+            : "INTERAKSI KONTEN 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(0, false)}
+              className={` hover:text-white rounded-none
+                ${
+                  isInternational[0]
+                    ? "bg-white text-black "
+                    : "bg-black text-white "
+                }`}
+            >
+              Indonesia
+            </Button>
+            <Button
+              onClick={() => handleInternational(0, true)}
+              className={`hover:text-white rounded-none ${
+                isInternational[0]
+                  ? "bg-black text-white "
+                  : "bg-white text-black "
+              }
+              `}
+            >
+              {t("international")}
+            </Button>
+          </div>
+        </div>
+      ) : (
+        ""
+      )}
+      <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[1]
+            ? "INTERACTION OF CONTENT AND ACCESS TIME"
+            : "INTERAKSI KONTEN DAN WAKTU AKSES"}
+        </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(1, false)}
+              className={` hover:text-white rounded-none
+                ${
+                  isInternational[1]
+                    ? "bg-white text-black "
+                    : "bg-black text-white "
+                }`}
+            >
+              Indonesia
+            </Button>
+            <Button
+              onClick={() => handleInternational(1, 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">
+        {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>
+      <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 + view3 + param}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        ) : (
+          <iframe
+            src={`${`${url + ticket3}/${view3}${param}`}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        )}
+      </div>
+      <p className="text-lg">
+        <b>
+          {isInternational[3]
+            ? "INTERACTIONS OF CATEGORY AND ACCESS TIME"
+            : "INTERAKSI KATEGORI DAN WAKTU AKSES"}
+        </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(3, false)}
+              className={` hover:text-white rounded-none
+                ${
+                  isInternational[2]
+                    ? "bg-white text-black "
+                    : "bg-black text-white "
+                }`}
+            >
+              Indonesia
+            </Button>
+            <Button
+              onClick={() => handleInternational(3, 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">
+        {ticket4 == "" ? (
+          <iframe
+            src={`${baseUrl + view4 + param}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        ) : (
+          <iframe
+            src={`${`${url + ticket4}/${view4}${param}`}`}
+            width="100%"
+            height="750"
+            frameBorder="0"
+          />
+        )}
+      </div>
+    </div>
+  );
+}

messages/en.json

@@ -20,7 +20,9 @@
     "invested_amount": "Invested amount",
     "last_28_days": "Last 28 days",
     "last_months": "Last months",
-    "last_year": "Last year"
+    "last_year": "Last year",
+    "choose_category": "Choose Category",
+    "international": "International"
   },
   "BankingDashboard": {
     "widget_title": "Good evening",
@@ -121,7 +123,6 @@
     "ratings": "ratings",
     "view_less": "View Less",
     "add_to_cart": "Add to Cart"
-    
   },
   "Menu": {
     "dashboard": "Dashboard",
@@ -221,14 +222,14 @@
     "input": "Input",
     "textarea": "Textarea",
     "select": "Select",
-    "reactSelect":"React Select",
+    "reactSelect": "React Select",
     "slider": "Slider",
     "switch": "Switch",
     "inputGroup": "Input Group",
-    "inputLayout":"Input Layout",
-    "inputMask":"Input Mask",
-    "inputFile":"File Input",
-    "formValidation":"Form Validation",
+    "inputLayout": "Input Layout",
+    "inputMask": "Input Mask",
+    "inputFile": "File Input",
+    "formValidation": "Form Validation",
     "radio": "Radio",
     "checkbox": "Checkbox",
     "inputOtp": "Input Otp",

messages/in.json

@@ -20,7 +20,9 @@
     "invested_amount": "Invested amount",
     "last_28_days": "Last 28 days",
     "last_months": "Last months",
-    "last_year": "Last year"
+    "last_year": "Last year",
+    "choose_category": "Pilih Kategori",
+    "international": "Internasional"
   },
   "BankingDashboard": {
     "widget_title": "Good evening",
@@ -121,7 +123,6 @@
     "ratings": "ratings",
     "view_less": "View Less",
     "add_to_cart": "Add to Cart"
-    
   },
   "Menu": {
     "dashboard": "Dashboard",
@@ -221,14 +222,14 @@
     "input": "Input",
     "textarea": "Textarea",
     "select": "Select",
-    "reactSelect":"React Select",
+    "reactSelect": "React Select",
     "slider": "Slider",
     "switch": "Switch",
     "inputGroup": "Input Group",
-    "inputLayout":"Input Layout",
-    "inputMask":"Input Mask",
-    "inputFile":"File Input",
-    "formValidation":"Form Validation",
+    "inputLayout": "Input Layout",
+    "inputMask": "Input Mask",
+    "inputFile": "File Input",
+    "formValidation": "Form Validation",
     "radio": "Radio",
     "checkbox": "Checkbox",
     "inputOtp": "Input Otp",