From 5d826469255f6731b27292f9bd051006d4a03d68 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Mon, 24 Feb 2025 12:27:02 +0800
Subject: [PATCH 1/2] feat:update data tableu,menu sidebar polda

---
 .../analysis/content-management/page.tsx      | 426 +++++++++++-------
 .../admin/analysis/emergency-issue/page.tsx   | 130 +++---
 .../admin/analysis/feedback-center/page.tsx   | 131 +++---
 .../admin/analysis/schedule/page.tsx          | 386 +++++++---------
 .../(protected)/dashboard/executive/page.tsx  | 201 ++++++++-
 components/visualization/dashboard-viz.tsx    |   4 +-
 .../visualization/performance-polda.tsx       |  42 +-
 lib/menus.ts                                  |  89 ++--
 8 files changed, 847 insertions(+), 562 deletions(-)

diff --git a/app/[locale]/(protected)/admin/analysis/content-management/page.tsx b/app/[locale]/(protected)/admin/analysis/content-management/page.tsx
index bd14ea00..a278e85c 100644
--- a/app/[locale]/(protected)/admin/analysis/content-management/page.tsx
+++ b/app/[locale]/(protected)/admin/analysis/content-management/page.tsx
@@ -6,12 +6,12 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { addDays, format } from "date-fns";
 import { Calendar as CalendarIcon } from "lucide-react";
 import { DateRange } from "react-day-picker";
-
-import { cn } from "@/lib/utils";
+import Cookies from "js-cookie";
+import { cn, getCookiesDecrypt } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import {
@@ -19,6 +19,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { generateTicket } from "@/service/tableau/tableau-service";
 
 const users = [
   { id: 1, name: "POLRI" },
@@ -28,168 +29,277 @@ const users = [
 export default function ContentManagement() {
   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-ktn-indo-polri?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-polri?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-polri?provinsi-polda=${provState}&`;
+
+  const view2 =
+    levelName == "MABES POLRI"
+      ? isInternational[1]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jurnalis?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jurnalis?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jurnalis?provinsi-polda=${poldaState}&`;
+
+  const view3 =
+    levelName == "MABES POLRI"
+      ? isInternational[2]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-jurnalis-intl?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-jurnalis-intl?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-jurnalis-intl?provinsi-polda=${poldaState}&`;
+
+  const view4 =
+    levelName == "MABES POLRI"
+      ? isInternational[3]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-satker?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-satker?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-satker?provinsi-polda=${poldaState}&`;
+
+  const view5 =
+    levelName == "MABES POLRI"
+      ? isInternational[4]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jnl?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jnl?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-indo-jnl?provinsi-polda=${poldaState}&`;
+
+  const view6 =
+    levelName == "MABES POLRI"
+      ? isInternational[5]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-intl?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-intl?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-intl?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="flex flex-col gap-3">
-        {users.map((user) => (
-          <Accordion
-            key={user.id}
-            id="polri"
-            type="single"
-            collapsible
-            className="w-full"
-          >
-            <AccordionItem value="item-1" className="bg-white w-full">
-              <AccordionTrigger className="bg-white">
-                KONTEN YANG DISIMPAN OLEH PENGGUNA {user.name} INDONESIA
-              </AccordionTrigger>
-              <AccordionContent>
-                <div className="flex flex-row gap-3">
-                  <div className="flex flex-col">
-                    <p>Tanggal Mulai</p>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <Button
-                          variant={"outline"}
-                          className={cn(
-                            "w-[280px] justify-start text-left font-normal",
-                            !startDate && "text-muted-foreground"
-                          )}
-                        >
-                          <CalendarIcon />
-                          {startDate ? (
-                            format(startDate, "PPP")
-                          ) : (
-                            <span>Pick a date</span>
-                          )}
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0">
-                        <Calendar
-                          mode="single"
-                          selected={startDate}
-                          onSelect={setStartDate}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-                  <div className="flex flex-col">
-                    <p>Tanggal Mulai</p>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <Button
-                          variant={"outline"}
-                          className={cn(
-                            "w-[280px] justify-start text-left font-normal",
-                            !startDate && "text-muted-foreground"
-                          )}
-                        >
-                          <CalendarIcon />
-                          {startDate ? (
-                            format(startDate, "PPP")
-                          ) : (
-                            <span>Pick a date</span>
-                          )}
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0">
-                        <Calendar
-                          mode="single"
-                          selected={endDate}
-                          onSelect={setEndDate}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                  </div>
+        <Accordion id="polri" type="single" collapsible className="w-full">
+          <AccordionItem value="item-1" className="bg-white w-full">
+            <AccordionTrigger className="bg-white">
+              KONTEN YANG DISIMPAN OLEH PENGGUNA POLRI INDONESIA
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <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>
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
-        ))}
-        {users.map((user) => (
-          <Accordion
-            key={user.id}
-            id={String(user.id)}
-            type="single"
-            collapsible
-            className="w-full"
-          >
-            <AccordionItem
-              value={`${user.id}-value-${user.name}`}
-              className="bg-white w-full"
-            >
-              <AccordionTrigger className="bg-white">
-                PENAMBAHAN JUMLAH PENGGUNA {user.name} INDONESIA
-              </AccordionTrigger>
-              <AccordionContent>
-                <div className="flex flex-row gap-3">
-                  <div className="flex flex-col">
-                    <p>Tanggal Mulai</p>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <Button
-                          variant={"outline"}
-                          className={cn(
-                            "w-[280px] justify-start text-left font-normal",
-                            !startDate && "text-muted-foreground"
-                          )}
-                        >
-                          <CalendarIcon />
-                          {startDate ? (
-                            format(startDate, "PPP")
-                          ) : (
-                            <span>Pick a date</span>
-                          )}
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0">
-                        <Calendar
-                          mode="single"
-                          selected={startDate}
-                          onSelect={setStartDate}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                  </div>
-                  <div className="flex flex-col">
-                    <p>Tanggal Mulai</p>
-                    <Popover>
-                      <PopoverTrigger asChild>
-                        <Button
-                          variant={"outline"}
-                          className={cn(
-                            "w-[280px] justify-start text-left font-normal",
-                            !startDate && "text-muted-foreground"
-                          )}
-                        >
-                          <CalendarIcon />
-                          {startDate ? (
-                            format(startDate, "PPP")
-                          ) : (
-                            <span>Pick a date</span>
-                          )}
-                        </Button>
-                      </PopoverTrigger>
-                      <PopoverContent className="w-auto p-0">
-                        <Calendar
-                          mode="single"
-                          selected={endDate}
-                          onSelect={setEndDate}
-                          initialFocus
-                        />
-                      </PopoverContent>
-                    </Popover>
-                  </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <Accordion id="2" type="single" collapsible className="w-full">
+          <AccordionItem value="item-2" className="bg-white w-full">
+            <AccordionTrigger className="bg-white">
+              PENAMBAHAN JUMLAH PENGGUNA JURNALIS INDONESIA
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <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>
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
-        ))}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <Accordion id="3" type="single" collapsible className="w-full">
+          <AccordionItem value="item-1" className="bg-white w-full">
+            <AccordionTrigger className="bg-white">
+              KONTEN YANG DISIMPAN OLEH PENGGUNA JURNALIS INTERNASIONAL
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <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>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <Accordion id="4" type="single" collapsible className="w-full">
+          <AccordionItem value="item-1" className="bg-white w-full">
+            <AccordionTrigger className="bg-white">
+              PENAMBAHAN JUMLAH PENGGUNA POLRI INDONESIA
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <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>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <Accordion id="5" type="single" collapsible className="w-full">
+          <AccordionItem value="item-1" className="bg-white w-full">
+            <AccordionTrigger className="bg-white">
+              PENAMBAHAN JUMLAH PENGGUNA JURNALIS INDONESIA
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <div className="my-5">
+                  {ticket5 == "" ? (
+                    <iframe
+                      src={`${baseUrl + view5 + param}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  ) : (
+                    <iframe
+                      src={`${`${url + ticket5}/${view5}${param}`}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  )}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+        <Accordion id="6" type="single" collapsible className="w-full">
+          <AccordionItem value="item-1" className="bg-white w-full">
+            <AccordionTrigger className="bg-white">
+              PENAMBAHAN JUMLAH PENGGUNA JURNALIS INTERNASIONAL
+            </AccordionTrigger>
+            <AccordionContent>
+              <div className="flex flex-col">
+                <div className="my-5">
+                  {ticket6 == "" ? (
+                    <iframe
+                      src={`${baseUrl + view6 + param}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  ) : (
+                    <iframe
+                      src={`${`${url + ticket6}/${view6}${param}`}`}
+                      width="100%"
+                      height="750"
+                      frameBorder="0"
+                    />
+                  )}
+                </div>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
       </div>
     </div>
   );
diff --git a/app/[locale]/(protected)/admin/analysis/emergency-issue/page.tsx b/app/[locale]/(protected)/admin/analysis/emergency-issue/page.tsx
index 620fca5e..9fd67f21 100644
--- a/app/[locale]/(protected)/admin/analysis/emergency-issue/page.tsx
+++ b/app/[locale]/(protected)/admin/analysis/emergency-issue/page.tsx
@@ -6,12 +6,12 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { addDays, format } from "date-fns";
 import { Calendar as CalendarIcon } from "lucide-react";
 import { DateRange } from "react-day-picker";
-
-import { cn } from "@/lib/utils";
+import Cookies from "js-cookie";
+import { cn, getCookiesDecrypt } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import {
@@ -19,6 +19,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { generateTicket } from "@/service/tableau/tableau-service";
 
 const users = [
   { id: 1, name: "POLRI" },
@@ -28,7 +29,55 @@ const users = [
 export default function EmergencyIssue() {
   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 param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true";
+
+  useEffect(() => {
+    async function initState() {
+      const response1 = await generateTicket();
+      setTicket1(response1?.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 />
@@ -44,64 +93,23 @@ export default function EmergencyIssue() {
               ANALISA BERKAITAN DENGAN AKUN PELAPOR{" "}
             </AccordionTrigger>
             <AccordionContent>
-              <div className="flex flex-row gap-3">
-                <div className="flex flex-col">
-                  <p>Tanggal Mulai</p>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant={"outline"}
-                        className={cn(
-                          "w-[280px] justify-start text-left font-normal",
-                          !startDate && "text-muted-foreground"
-                        )}
-                      >
-                        <CalendarIcon />
-                        {startDate ? (
-                          format(startDate, "PPP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0">
-                      <Calendar
-                        mode="single"
-                        selected={startDate}
-                        onSelect={setStartDate}
-                        initialFocus
-                      />
-                    </PopoverContent>
-                  </Popover>
-                </div>
-                <div className="flex flex-col">
-                  <p>Tanggal Mulai</p>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant={"outline"}
-                        className={cn(
-                          "w-[280px] justify-start text-left font-normal",
-                          !startDate && "text-muted-foreground"
-                        )}
-                      >
-                        <CalendarIcon />
-                        {startDate ? (
-                          format(startDate, "PPP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0">
-                      <Calendar
-                        mode="single"
-                        selected={endDate}
-                        onSelect={setEndDate}
-                        initialFocus
-                      />
-                    </PopoverContent>
-                  </Popover>
+              <div className="flex flex-col">
+                <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>
               </div>
             </AccordionContent>
diff --git a/app/[locale]/(protected)/admin/analysis/feedback-center/page.tsx b/app/[locale]/(protected)/admin/analysis/feedback-center/page.tsx
index bf3cb51c..1e0b0fcc 100644
--- a/app/[locale]/(protected)/admin/analysis/feedback-center/page.tsx
+++ b/app/[locale]/(protected)/admin/analysis/feedback-center/page.tsx
@@ -6,12 +6,12 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { addDays, format } from "date-fns";
 import { Calendar as CalendarIcon } from "lucide-react";
 import { DateRange } from "react-day-picker";
-
-import { cn } from "@/lib/utils";
+import Cookies from "js-cookie";
+import { cn, getCookiesDecrypt } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import {
@@ -19,6 +19,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { generateTicket } from "@/service/tableau/tableau-service";
 
 const users = [
   { id: 1, name: "POLRI" },
@@ -28,6 +29,55 @@ const users = [
 export default function FeedbackCenter() {
   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-tickets?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-tickets?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-tickets?provinsi-polda=${provState}&`;
+
+  const param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true";
+
+  useEffect(() => {
+    async function initState() {
+      const response1 = await generateTicket();
+      setTicket1(response1?.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>
@@ -44,64 +94,23 @@ export default function FeedbackCenter() {
               TICKET PADA FEEDBACK CENTER{" "}
             </AccordionTrigger>
             <AccordionContent>
-              <div className="flex flex-row gap-3">
-                <div className="flex flex-col">
-                  <p>Tanggal Mulai</p>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant={"outline"}
-                        className={cn(
-                          "w-[280px] justify-start text-left font-normal",
-                          !startDate && "text-muted-foreground"
-                        )}
-                      >
-                        <CalendarIcon />
-                        {startDate ? (
-                          format(startDate, "PPP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0">
-                      <Calendar
-                        mode="single"
-                        selected={startDate}
-                        onSelect={setStartDate}
-                        initialFocus
-                      />
-                    </PopoverContent>
-                  </Popover>
-                </div>
-                <div className="flex flex-col">
-                  <p>Tanggal Mulai</p>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant={"outline"}
-                        className={cn(
-                          "w-[280px] justify-start text-left font-normal",
-                          !startDate && "text-muted-foreground"
-                        )}
-                      >
-                        <CalendarIcon />
-                        {startDate ? (
-                          format(startDate, "PPP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0">
-                      <Calendar
-                        mode="single"
-                        selected={endDate}
-                        onSelect={setEndDate}
-                        initialFocus
-                      />
-                    </PopoverContent>
-                  </Popover>
+              <div className="flex flex-col">
+                <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>
               </div>
             </AccordionContent>
diff --git a/app/[locale]/(protected)/admin/analysis/schedule/page.tsx b/app/[locale]/(protected)/admin/analysis/schedule/page.tsx
index 06a74a1b..342c2298 100644
--- a/app/[locale]/(protected)/admin/analysis/schedule/page.tsx
+++ b/app/[locale]/(protected)/admin/analysis/schedule/page.tsx
@@ -6,12 +6,12 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { addDays, format } from "date-fns";
 import { Calendar as CalendarIcon } from "lucide-react";
 import { DateRange } from "react-day-picker";
-
-import { cn } from "@/lib/utils";
+import Cookies from "js-cookie";
+import { cn, getCookiesDecrypt } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
 import {
@@ -19,10 +19,90 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { generateTicket } from "@/service/tableau/tableau-service";
 
 export default function ContentManagement() {
   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-ktn-rank?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-rank?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-rank?provinsi-polda=${provState}&`;
+
+  const view2 =
+    levelName == "MABES POLRI"
+      ? isInternational[1]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-rank-kat?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-rank-kat?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-rank-kat?provinsi-polda=${poldaState}&`;
+
+  const view3 =
+    levelName == "MABES POLRI"
+      ? isInternational[2]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-act?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-act?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-act?provinsi-polda=${poldaState}&`;
+
+  const view4 =
+    levelName == "MABES POLRI"
+      ? isInternational[3]
+        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-act-jnl?"
+        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-act-jnl?"
+      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-ktn-act-jnl?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>
@@ -39,64 +119,23 @@ export default function ContentManagement() {
               PUBLISH JADWAL PRESS CONFERENCE TERBANYAK
             </AccordionTrigger>
             <AccordionContent>
-              <div className="flex flex-row gap-3">
-                <div className="flex flex-col">
-                  <p>Tanggal Mulai</p>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant={"outline"}
-                        className={cn(
-                          "w-[280px] justify-start text-left font-normal",
-                          !startDate && "text-muted-foreground"
-                        )}
-                      >
-                        <CalendarIcon />
-                        {startDate ? (
-                          format(startDate, "PPP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0">
-                      <Calendar
-                        mode="single"
-                        selected={startDate}
-                        onSelect={setStartDate}
-                        initialFocus
-                      />
-                    </PopoverContent>
-                  </Popover>
-                </div>
-                <div className="flex flex-col">
-                  <p>Tanggal Mulai</p>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant={"outline"}
-                        className={cn(
-                          "w-[280px] justify-start text-left font-normal",
-                          !startDate && "text-muted-foreground"
-                        )}
-                      >
-                        <CalendarIcon />
-                        {startDate ? (
-                          format(startDate, "PPP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0">
-                      <Calendar
-                        mode="single"
-                        selected={endDate}
-                        onSelect={setEndDate}
-                        initialFocus
-                      />
-                    </PopoverContent>
-                  </Popover>
+              <div className="flex flex-col">
+                <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>
               </div>
             </AccordionContent>
@@ -113,64 +152,23 @@ export default function ContentManagement() {
               JUMLAH PRODUKSI KONTEN UNTUK KATEGORI PRESS CONFERENCE
             </AccordionTrigger>
             <AccordionContent>
-              <div className="flex flex-row gap-3">
-                <div className="flex flex-col">
-                  <p>Tanggal Mulai</p>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant={"outline"}
-                        className={cn(
-                          "w-[280px] justify-start text-left font-normal",
-                          !startDate && "text-muted-foreground"
-                        )}
-                      >
-                        <CalendarIcon />
-                        {startDate ? (
-                          format(startDate, "PPP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0">
-                      <Calendar
-                        mode="single"
-                        selected={startDate}
-                        onSelect={setStartDate}
-                        initialFocus
-                      />
-                    </PopoverContent>
-                  </Popover>
-                </div>
-                <div className="flex flex-col">
-                  <p>Tanggal Mulai</p>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant={"outline"}
-                        className={cn(
-                          "w-[280px] justify-start text-left font-normal",
-                          !startDate && "text-muted-foreground"
-                        )}
-                      >
-                        <CalendarIcon />
-                        {startDate ? (
-                          format(startDate, "PPP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0">
-                      <Calendar
-                        mode="single"
-                        selected={endDate}
-                        onSelect={setEndDate}
-                        initialFocus
-                      />
-                    </PopoverContent>
-                  </Popover>
+              <div className="flex flex-col">
+                <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>
             </AccordionContent>
@@ -187,64 +185,23 @@ export default function ContentManagement() {
               TINGKAT INTERAKSI KONTEN UNTUK KATEGORI PRESS CONFERENCE
             </AccordionTrigger>
             <AccordionContent>
-              <div className="flex flex-row gap-3">
-                <div className="flex flex-col">
-                  <p>Tanggal Mulai</p>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant={"outline"}
-                        className={cn(
-                          "w-[280px] justify-start text-left font-normal",
-                          !startDate && "text-muted-foreground"
-                        )}
-                      >
-                        <CalendarIcon />
-                        {startDate ? (
-                          format(startDate, "PPP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0">
-                      <Calendar
-                        mode="single"
-                        selected={startDate}
-                        onSelect={setStartDate}
-                        initialFocus
-                      />
-                    </PopoverContent>
-                  </Popover>
-                </div>
-                <div className="flex flex-col">
-                  <p>Tanggal Mulai</p>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant={"outline"}
-                        className={cn(
-                          "w-[280px] justify-start text-left font-normal",
-                          !startDate && "text-muted-foreground"
-                        )}
-                      >
-                        <CalendarIcon />
-                        {startDate ? (
-                          format(startDate, "PPP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0">
-                      <Calendar
-                        mode="single"
-                        selected={endDate}
-                        onSelect={setEndDate}
-                        initialFocus
-                      />
-                    </PopoverContent>
-                  </Popover>
+              <div className="flex flex-col">
+                <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>
             </AccordionContent>
@@ -261,64 +218,23 @@ export default function ContentManagement() {
               AKTIFITAS MEDIA BERKAITAN DENGAN PERS RILIS
             </AccordionTrigger>
             <AccordionContent>
-              <div className="flex flex-row gap-3">
-                <div className="flex flex-col">
-                  <p>Tanggal Mulai</p>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant={"outline"}
-                        className={cn(
-                          "w-[280px] justify-start text-left font-normal",
-                          !startDate && "text-muted-foreground"
-                        )}
-                      >
-                        <CalendarIcon />
-                        {startDate ? (
-                          format(startDate, "PPP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0">
-                      <Calendar
-                        mode="single"
-                        selected={startDate}
-                        onSelect={setStartDate}
-                        initialFocus
-                      />
-                    </PopoverContent>
-                  </Popover>
-                </div>
-                <div className="flex flex-col">
-                  <p>Tanggal Mulai</p>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <Button
-                        variant={"outline"}
-                        className={cn(
-                          "w-[280px] justify-start text-left font-normal",
-                          !startDate && "text-muted-foreground"
-                        )}
-                      >
-                        <CalendarIcon />
-                        {startDate ? (
-                          format(startDate, "PPP")
-                        ) : (
-                          <span>Pick a date</span>
-                        )}
-                      </Button>
-                    </PopoverTrigger>
-                    <PopoverContent className="w-auto p-0">
-                      <Calendar
-                        mode="single"
-                        selected={endDate}
-                        onSelect={setEndDate}
-                        initialFocus
-                      />
-                    </PopoverContent>
-                  </Popover>
+              <div className="flex flex-col">
+                <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>
             </AccordionContent>
diff --git a/app/[locale]/(protected)/dashboard/executive/page.tsx b/app/[locale]/(protected)/dashboard/executive/page.tsx
index 4760bb6f..58374d76 100644
--- a/app/[locale]/(protected)/dashboard/executive/page.tsx
+++ b/app/[locale]/(protected)/dashboard/executive/page.tsx
@@ -1,3 +1,4 @@
+"use client";
 import SiteBreadcrumb from "@/components/site-breadcrumb";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
@@ -12,7 +13,11 @@ import {
 } 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 () => {
@@ -147,6 +152,79 @@ export default function ExecutiveDashboard() {
   //   // ]);
   // };
 
+  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-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 view4 =
+    levelName == "MABES POLRI"
+      ? isInternational[1]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-content-interaction-konten?"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-content-interaction-konten?"
+      : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-content-interaction-konten-polda?provinsi-polda=${poldaState}&`;
+
+  const param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true";
+
+  useEffect(() => {
+    async function initState() {
+      const response1 = await generateTicket();
+      setTicket1(response1?.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 />
@@ -180,13 +258,30 @@ export default function ExecutiveDashboard() {
         </DialogContent>
       </Dialog>
       <div className="mt-3 flex flex-row gap-3 justify-center">
-        <Card className="rounded-sm w-4/12 h-[500px] p-3">
+        <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">
@@ -195,6 +290,23 @@ export default function ExecutiveDashboard() {
             </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">
@@ -203,18 +315,52 @@ export default function ExecutiveDashboard() {
             </p>
             <LucideBoxSelect />
           </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">Konten Paling Populer</p>
-            <LucideBoxSelect />
+          <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>
       </div>
       <div className="w-full mt-3">
-        <Card className="rounded-sm p-3 h-[300px]">
+        <Card className="rounded-sm p-3 h-[850px]">
+          <div className="flex flex-row justify-between">
+            <p className="text-base font-semibold">Konten Paling Populer</p>
+            <LucideBoxSelect />
+          </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>
+        </Card>
+      </div>
+      <div className="w-full mt-3">
+        <Card className="rounded-sm p-3 h-[850px]">
           <div className="flex flex-row justify-between">
             <p className="text-base font-semibold">
               Heatmap Konten Dengan Interaksi
@@ -224,6 +370,23 @@ export default function ExecutiveDashboard() {
             </p>
             <LucideBoxSelect />
           </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>
         </Card>
       </div>
       <div className="w-full mt-3">
@@ -232,6 +395,26 @@ export default function ExecutiveDashboard() {
             <p className="text-base font-semibold">Emergency Issue</p>
             <LucideBoxSelect />
           </div>
+
+          <div className="flex flex-col">
+            <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>
+          </div>
         </Card>
       </div>
     </div>
diff --git a/components/visualization/dashboard-viz.tsx b/components/visualization/dashboard-viz.tsx
index 97721ee6..51b486cb 100644
--- a/components/visualization/dashboard-viz.tsx
+++ b/components/visualization/dashboard-viz.tsx
@@ -15,8 +15,8 @@ export default function DashboardVisualization() {
   const [ticket2, setTicket2] = useState("");
   const [ticket3, setTicket3] = useState("");
   const [isInternational, setIsInternational] = useState([false, false, false]);
-  const baseUrl = "https://analytic.sitani.info/";
-  const url = "https://analytic.sitani.info/trusted/";
+  const baseUrl = "https://db-mediahub.polri.go.id/";
+  const url = "https://db-mediahub.polri.go.id/trusted/";
 
   const view1 =
     levelName == "MABES POLRI"
diff --git a/components/visualization/performance-polda.tsx b/components/visualization/performance-polda.tsx
index 30a0f57e..8c4411ee 100644
--- a/components/visualization/performance-polda.tsx
+++ b/components/visualization/performance-polda.tsx
@@ -26,15 +26,25 @@ export default function PerformancePoldaViz() {
     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-ranking-polda?"
       : `/views/2023_09_db-ranking-polres-by-polda_rev100/db-ranking-by-polda?`;
 
+  const view2 =
+    levelName == "MABES POLRI"
+      ? isInternational[0]
+        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-top10?"
+        : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-ranking-polda?"
+      : `views/2023_09_db-ranking-polda_rev100/db-ranking-13?`;
+
   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();
@@ -58,11 +68,7 @@ export default function PerformancePoldaViz() {
   return (
     <div className="flex flex-col gap-2 bg-white rounded-lg p-3">
       <p className="text-lg">
-        <b>
-          {isInternational[0]
-            ? "POLRES PERFORMANCE"
-            : "POLFORMANCE POLRES"}
-        </b>
+        <b>{isInternational[0] ? "POLRES PERFORMANCE" : "POLFORMANCE POLDA"}</b>
       </p>
       <div className="my-5">
         {ticket1 == "" ? (
@@ -81,6 +87,30 @@ export default function PerformancePoldaViz() {
           />
         )}
       </div>
+      <p className="text-lg">
+        <b>
+          {isInternational[0]
+            ? "PUBLISH CONTENT PER POLDA"
+            : "PUBLISH KONTEN PER POLDA"}
+        </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>
   );
 }
diff --git a/lib/menus.ts b/lib/menus.ts
index dc045ee9..e4cf05f3 100644
--- a/lib/menus.ts
+++ b/lib/menus.ts
@@ -3013,7 +3013,22 @@ export function getMenuList(pathname: string, t: any): Group[] {
               label: t("dashboard"),
               active: pathname.includes("/dashboard"),
               icon: "material-symbols:dashboard",
-              submenus: [],
+              submenus: [
+                {
+                  href: "/dashboard",
+                  label: "Breakdown",
+                  active: pathname === "/dashboard",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+                {
+                  href: "/dashboard/executive",
+                  label: "Executive",
+                  active: pathname === "/dashboard/executive",
+                  icon: "heroicons:arrow-trending-up",
+                  children: [],
+                },
+              ],
             },
           ],
         },
@@ -3059,6 +3074,20 @@ export function getMenuList(pathname: string, t: any): Group[] {
             },
           ],
         },
+        {
+          groupLabel: "",
+          id: "agenda-setting",
+          menus: [
+            {
+              id: "agenda-setting",
+              href: "/contributor/agenda-setting",
+              label: t("agenda-setting"),
+              active: pathname.includes("/agenda-setting"),
+              icon: "iconoir:journal-page",
+              submenus: [],
+            },
+          ],
+        },
         {
           groupLabel: "",
           id: "performance-polres",
@@ -3130,35 +3159,35 @@ export function getMenuList(pathname: string, t: any): Group[] {
             },
           ],
         },
-        {
-          groupLabel: "",
-          id: "settings",
-          menus: [
-            {
-              id: "settings",
-              href: "/admin/settings",
-              label: t("settings"),
-              active: pathname.includes("/settinng"),
-              icon: "material-symbols:settings",
-              submenus: [
-                {
-                  href: "/admin/settings/category",
-                  label: t("category"),
-                  active: pathname === "/admin/settings/category",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
-                {
-                  href: "/admin/settings/tag",
-                  label: "Tag",
-                  active: pathname === "/admin/settings/tag",
-                  icon: "heroicons:arrow-trending-up",
-                  children: [],
-                },
-              ],
-            },
-          ],
-        },
+        // {
+        //   groupLabel: "",
+        //   id: "settings",
+        //   menus: [
+        //     {
+        //       id: "settings",
+        //       href: "/admin/settings",
+        //       label: t("settings"),
+        //       active: pathname.includes("/settinng"),
+        //       icon: "material-symbols:settings",
+        //       submenus: [
+        //         {
+        //           href: "/admin/settings/category",
+        //           label: t("category"),
+        //           active: pathname === "/admin/settings/category",
+        //           icon: "heroicons:arrow-trending-up",
+        //           children: [],
+        //         },
+        //         {
+        //           href: "/admin/settings/tag",
+        //           label: "Tag",
+        //           active: pathname === "/admin/settings/tag",
+        //           icon: "heroicons:arrow-trending-up",
+        //           children: [],
+        //         },
+        //       ],
+        //     },
+        //   ],
+        // },
       ];
     } else {
       menusSelected = [

From d7bf7c820f79eb85b58447938b06fb40d0922988 Mon Sep 17 00:00:00 2001
From: Anang Yusman <anangyusman23@gmail.com>
Date: Mon, 24 Feb 2025 13:59:35 +0800
Subject: [PATCH 2/2] feat:executive

---
 .../(protected)/dashboard/executive/page.tsx    | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/[locale]/(protected)/dashboard/executive/page.tsx b/app/[locale]/(protected)/dashboard/executive/page.tsx
index 58374d76..1f5edf77 100644
--- a/app/[locale]/(protected)/dashboard/executive/page.tsx
+++ b/app/[locale]/(protected)/dashboard/executive/page.tsx
@@ -195,9 +195,16 @@ export default function ExecutiveDashboard() {
   const view4 =
     levelName == "MABES POLRI"
       ? isInternational[1]
-        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-content-interaction-konten?"
-        : "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-content-interaction-konten?"
-      : `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-content-interaction-konten-polda?provinsi-polda=${poldaState}&`;
+        ? "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";
 
@@ -318,14 +325,14 @@ export default function ExecutiveDashboard() {
           <div className="my-5">
             {ticket1 == "" ? (
               <iframe
-                src={`${baseUrl + view4 + param}`}
+                src={`${baseUrl + view5 + param}`}
                 width="100%"
                 height="750"
                 frameBorder="0"
               />
             ) : (
               <iframe
-                src={`${`${url + ticket1}/${view4}${param}`}`}
+                src={`${`${url + ticket1}/${view5}${param}`}`}
                 width="100%"
                 height="750"
                 frameBorder="0"