mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: update visualization, reports, and userway

This commit is contained in:
hanif salafi 2025-06-24 02:01:30 +07:00
parent 199aaf5808
commit 4ef9d5b513
3 changed files with 124 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/[locale]/(protected)/contributor/report/components/columns.tsx
View File

@ -23,7 +23,7 @@ import { Link, useRouter } from "@/components/navigation";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content"; import withReactContent from "sweetalert2-react-content";
import { deleteBlog } from "@/service/blog/blog"; import { deleteBlog } from "@/service/blog/blog";
import { error, loading } from "@/lib/swal"; import { error, loading, close } from "@/lib/swal";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import axios from "axios"; import axios from "axios";
@ -126,6 +126,7 @@ const useTableColumns = ({
const handleDownload = async (id: string) => { const handleDownload = async (id: string) => {
try { try {
loading();
const response = await axios.get( const response = await axios.get(
`https://netidhub.com/api/media/report/download?id=${id}`, `https://netidhub.com/api/media/report/download?id=${id}`,
{ {
@ -140,6 +141,7 @@ const useTableColumns = ({
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
link.remove(); link.remove();
close();
} catch (error) { } catch (error) {
console.error("Download failed", error); console.error("Download failed", error);
MySwal.fire({ MySwal.fire({

348
app/[locale]/(protected)/dashboard/executive-data/page.tsx
View File

@ -37,6 +37,7 @@ export default function ExecutiveDataDashboard() {
const state = Cookies.get("state"); const state = Cookies.get("state");
const provState = Cookies.get("state-prov"); const provState = Cookies.get("state-prov");
const t = useTranslations("AnalyticsDashboard"); const t = useTranslations("AnalyticsDashboard");
const [refreshTicket, setRefreshTicket] = useState(true);
const [ticket1, setTicket1] = useState(""); const [ticket1, setTicket1] = useState("");
const [ticket2, setTicket2] = useState(""); const [ticket2, setTicket2] = useState("");
@ -44,6 +45,7 @@ export default function ExecutiveDataDashboard() {
const [ticket4, setTicket4] = useState(""); const [ticket4, setTicket4] = useState("");
const [ticket5, setTicket5] = useState(""); const [ticket5, setTicket5] = useState("");
const [ticket6, setTicket6] = useState(""); const [ticket6, setTicket6] = useState("");
const [ticket7, setTicket7] = useState("");
const [isInternational, setIsInternational] = useState([false, false, false]); const [isInternational, setIsInternational] = useState([false, false, false]);
const baseUrl = "https://analytic.sitani.info/"; const baseUrl = "https://analytic.sitani.info/";
@ -54,13 +56,40 @@ export default function ExecutiveDataDashboard() {
const view1 = const view1 =
levelName == "MABES POLRI" levelName == "MABES POLRI"
? isInternational[0] ? isInternational[0]
? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue-executive?" ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=ALL"
: "views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue-executive?" : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=ALL"
: safeLevelName.includes("POLDA") : safeLevelName.includes("POLDA")
? `views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?provinsi-polda=${state}&` ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=${state}&`
: `views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?provinsi-polda=${state}&`; : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=${state}&`;
const view2 = const view2 =
levelName == "MABES POLRI"
? isInternational[1]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-content-interaction-per-satker?polda-selected=ALL"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-satker?polda-selected=ALL"
: safeLevelName.includes("POLDA")
? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-satker?polda-selected=SATKER POLRI&`
: `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-satker?polda-selected=SATKER POLRI&`;
const view3 =
levelName == "MABES POLRI"
? isInternational[2]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-content-category-per-polda-new?polda-selected=ALL"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-polda-new?polda-selected=ALL"
: safeLevelName.includes("POLDA")
? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-polda-new?polda-selected=${state}&`
: `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-polda-new?polda-selected=${state}&`;
const view4 =
levelName == "MABES POLRI"
? isInternational[1]
? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-satker?polda-selected=ALL"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-satker?polda-selected=ALL"
: safeLevelName.includes("POLDA")
? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-satker?polda-selected=SATKER POLRI&`
: `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-satker?polda-selected=SATKER POLRI&`;
const view5 =
levelName == "MABES POLRI" levelName == "MABES POLRI"
? isInternational[1] ? isInternational[1]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-published-produksi?" ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-published-produksi?"
@ -69,7 +98,7 @@ export default function ExecutiveDataDashboard() {
? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda-executive?polda-selected=${state}&` ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda-executive?polda-selected=${state}&`
: `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda-executive?polda-selected=${state}&`; : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda-executive?polda-selected=${state}&`;
const view3 = const view6 =
levelName == "MABES POLRI" levelName == "MABES POLRI"
? isInternational[2] ? isInternational[2]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-waktu-akses-pengguna?" ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-waktu-akses-pengguna?"
@ -78,59 +107,14 @@ export default function ExecutiveDataDashboard() {
? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda-executive?polda-selected=${state}&` ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda-executive?polda-selected=${state}&`
: `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda-executive?polda-selected=${state}&`; : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda-executive?polda-selected=${state}&`;
const view4 =
levelName == "MABES POLRI"
? isInternational[1]
? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?"
: safeLevelName.includes("POLDA")
? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=${state}&`
: `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=${state}&`;
const view5 =
levelName == "MABES POLRI"
? isInternational[1]
? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?"
: safeLevelName.includes("POLDA")
? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?provinsi-polda=${state}&`
: `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?provinsi-polda=${state}&`;
const view6 =
levelName == "MABES POLRI"
? isInternational[1]
? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?"
: safeLevelName.includes("POLDA")
? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?satker-selected=${state}&`
: `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?satker-selected=${state}&`;
const view7 = const view7 =
levelName == "MABES POLRI" levelName == "MABES POLRI"
? isInternational[2] ? isInternational[2]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-penugasan?" ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-penugasan-vertical-bar?"
: "views/2023_09_db-penugasan_rev100/db-penugasan?" : "views/2023_09_db-penugasan_rev100/db-penugasan-vertical-bar?"
: safeLevelName.includes("POLDA") : safeLevelName.includes("POLDA")
? `views/2023_09_db-penugasan_rev100/db-penugasan?polda-selected=${state}&` ? `views/2023_09_db-penugasan_rev100/db-penugasan-vertical-bar?polda-selected=${state}&`
: `views/2023_09_db-penugasan_rev100/db-penugasan?polda-selected=${state}&`; : `views/2023_09_db-penugasan_rev100/db-penugasan-vertical-bar?polda-selected=${state}&`;
const view8 =
levelName == "MABES POLRI"
? isInternational[2]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-kategori-top10?"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-top10?"
: safeLevelName.includes("POLDA")
? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda-new?polda-selected=${state}&`
: `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda-new?polda-selected=${state}&`;
const view9 =
levelName == "MABES POLRI"
? isInternational[3]
? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-konten-kategori?"
: "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori?"
: safeLevelName.includes("POLDA")
? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-polda?polda-selected=${state}&`
: `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-kategori-polda?polda-selected=${state}&`;
const param = ":embed=yes&:toolbar=no&:iframeSizedToWindow=true"; const param = ":embed=yes&:toolbar=no&:iframeSizedToWindow=true";
@ -153,10 +137,13 @@ export default function ExecutiveDataDashboard() {
const response6 = await generateTicket(); const response6 = await generateTicket();
setTicket6(response6?.data?.data); setTicket6(response6?.data?.data);
const response7 = await generateTicket();
setTicket7(response7?.data?.data);
} }
initState(); initState();
}, [isInternational]); }, [isInternational, refreshTicket]);
// Hooks // Hooks
useEffect(() => { useEffect(() => {
@ -178,7 +165,7 @@ export default function ExecutiveDataDashboard() {
<SiteBreadcrumb /> <SiteBreadcrumb />
<div> <div>
<div className="my-3"> <div className="my-3">
<Tabs defaultValue="content-publish" className="w-full"> <Tabs defaultValue="content-publish" className="w-full" onValueChange={() => setRefreshTicket(!refreshTicket)}>
<TabsList className="flex-wrap bg-black"> <TabsList className="flex-wrap bg-black">
<TabsTrigger <TabsTrigger
value="content-publish" value="content-publish"
@ -217,19 +204,17 @@ export default function ExecutiveDataDashboard() {
{/* Polda */} {/* Polda */}
{(levelNumber === "1" || levelNumber === "2") && ( {(levelNumber === "1" || levelNumber === "2") && (
<Card <Card
className={`rounded-sm p-3 ${ className={`rounded-sm p-3 w-full`}
levelNumber === "2" ? "w-full" : "w-full"
}`}
> >
<div className="flex flex-row justify-between"> {/* <div className="flex flex-row justify-between">
<p className="text-base font-semibold"> <p className="text-base font-semibold">
Upload konten hari ini Polda Upload konten hari ini Polda
</p> </p>
</div> </div> */}
<div className="my-5"> <div className="my-5">
{ticket1 == "w-full" ? ( {ticket1 == "w-full" ? (
<iframe <iframe
src={`${baseUrl + view4 + param}`} src={`${baseUrl + view1 + param}`}
width="100%" width="100%"
height="750" height="750"
className="w-full" className="w-full"
@ -237,7 +222,7 @@ export default function ExecutiveDataDashboard() {
/> />
) : ( ) : (
<iframe <iframe
src={`${url + ticket1}/${view4}${param}`} src={`${url + ticket1}/${view1}${param}`}
width="100%" width="100%"
height="750" height="750"
frameBorder="0" frameBorder="0"
@ -248,60 +233,26 @@ export default function ExecutiveDataDashboard() {
)} )}
{/* Satker */} {/* Satker */}
{(levelNumber === "1" || levelNumber === "3") && ( {(levelNumber === "1") && (
<Card <Card
className={`rounded-sm p-3 ${ className={`rounded-sm p-3 w-full`}
levelNumber === "3" ? "w-full" : "w-full"
}`}
> >
<div className="flex flex-row justify-between"> {/* <div className="flex flex-row justify-between">
<p className="text-base font-semibold"> <p className="text-base font-semibold">
Upload konten hari ini Satker Upload konten hari ini Satker
</p> </p>
</div> </div> */}
<div className="my-5"> <div className="my-5">
{ticket2 == "" ? ( {ticket2 == "" ? (
<iframe <iframe
src={`${baseUrl + view6 + param}`} src={`${baseUrl + view2 + param}`}
width="100%" width="100%"
height="750" height="750"
frameBorder="0" frameBorder="0"
/> />
) : ( ) : (
<iframe <iframe
src={`${url + ticket2}/${view6}${param}`} src={`${url + ticket2}/${view2}${param}`}
width="100%"
height="750"
frameBorder="0"
/>
)}
</div>
</Card>
)}
{/* Polres */}
{(levelNumber === "1" || levelNumber === "2") && (
<Card
className={`rounded-sm p-3 ${
levelNumber === "2" ? "w-full" : "w-full"
}`}
>
<div className="flex flex-row justify-between">
<p className="text-base font-semibold">
Upload konten hari ini Polres
</p>
</div>
<div className="my-5">
{ticket3 == "" ? (
<iframe
src={`${baseUrl + view5 + param}`}
width="100%"
height="750"
frameBorder="0"
/>
) : (
<iframe
src={`${url + ticket3}/${view5}${param}`}
width="100%" width="100%"
height="750" height="750"
frameBorder="0" frameBorder="0"
@ -313,82 +264,63 @@ export default function ExecutiveDataDashboard() {
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="content-category"> <TabsContent value="content-category">
<Card className="px-3 py-3"> {(levelNumber === "1" || levelNumber === "2") && (
<p className="text-lg"> <Card className="px-3 py-3">
<b> <div className="my-5">
{isInternational[2] {ticket3 == "" ? (
? "INTERACTION OF THE MOST POPULAR CATEGORIES AND TITLES" <iframe
: "INTERAKSI KATEGORI DAN JUDUL TERPOPULER"} src={`${baseUrl + view3 + param}`}
</b> width="100%"
</p> height="750"
{levelName === "MABES POLRI" ? ( frameBorder="0"
<div className="flex flex-col gap-1"> />
<p>{t("choose_category")}</p> ) : (
<div className="flex flex-row gap-1 border-2 w-fit"> <iframe
<Button src={`${`${url + ticket3}/${view3}${param}`}`}
onClick={() => handleInternational(2, false)} width="100%"
className={` hover:text-white rounded-none height="750"
${ frameBorder="0"
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> </Card>
) : ( )}
""
)} {levelNumber === "1" && (
<div className="my-5"> <Card className="px-3 py-3">
{ticket3 == "" ? ( <div className="my-5">
<iframe {ticket4 == "" ? (
src={`${baseUrl + view8 + param}`} <iframe
width="100%" src={`${baseUrl + view4 + param}`}
height="750" width="100%"
frameBorder="0" height="750"
/> frameBorder="0"
) : ( />
<iframe ) : (
src={`${`${url + ticket3}/${view8}${param}`}`} <iframe
width="100%" src={`${`${url + ticket4}/${view4}${param}`}`}
height="750" width="100%"
frameBorder="0" height="750"
/> frameBorder="0"
)} />
</div> )}
</Card> </div>
</Card>
)}
</TabsContent> </TabsContent>
<TabsContent value="popular-content"> <TabsContent value="popular-content">
<Card className="rounded-sm p-3 h-[750px]"> <Card className="rounded-sm p-3 h-[750px]">
<div className="flex flex-row justify-between">
<p className="text-base font-semibold">
Konten Paling Populer
</p>
</div>
<div className="my-5"> <div className="my-5">
{ticket4 == "" ? ( {ticket5 == "" ? (
<iframe <iframe
src={`${baseUrl + view2 + param}`} src={`${baseUrl + view5 + param}`}
width="100%" width="100%"
height="650" height="650"
frameBorder="0" frameBorder="0"
/> />
) : ( ) : (
<iframe <iframe
src={`${`${url + ticket4}/${view2}${param}`}`} src={`${`${url + ticket5}/${view5}${param}`}`}
width="100%" width="100%"
height="650" height="650"
frameBorder="0" frameBorder="0"
@ -400,22 +332,17 @@ export default function ExecutiveDataDashboard() {
<TabsContent value="heatmap"> <TabsContent value="heatmap">
<Card className="rounded-sm p-3 h-[750px]"> <Card className="rounded-sm p-3 h-[750px]">
<div className="flex flex-row justify-between mx-3">
<p className="text-base font-semibold">
Heatmap Konten dan Kategori dengan Interaksi
</p>
</div>
<div className="my-5"> <div className="my-5">
{ticket5 == "" ? ( {ticket6 == "" ? (
<iframe <iframe
src={`${baseUrl + view3 + param}`} src={`${baseUrl + view6 + param}`}
width="100%" width="100%"
height="600" height="600"
frameBorder="0" frameBorder="0"
/> />
) : ( ) : (
<iframe <iframe
src={`${`${url + ticket5}/${view3}${param}`}`} src={`${`${url + ticket6}/${view6}${param}`}`}
width="100%" width="100%"
height="600" height="600"
frameBorder="0" frameBorder="0"
@ -425,60 +352,25 @@ export default function ExecutiveDataDashboard() {
</Card> </Card>
</TabsContent> </TabsContent>
<TabsContent value="task"> <TabsContent value="task">
<div className="grid grid-cols-12 gap-5"> <Card className="rounded-sm p-3 h-[750px]">
<div className="lg:col-span-12 col-span-12"> <div className="my-5">
<Card className="px-3 py-3"> {ticket7 == "" ? (
{levelName === "MABES POLRI" ? ( <iframe
<div className="flex flex-col gap-1"> src={`${baseUrl + view7 + param}`}
<p>{t("choose_category")}</p> width="100%"
<div className="flex flex-row gap-1 border-2 w-fit"> height="750"
<Button frameBorder="0"
onClick={() => handleInternational(2, false)} />
className={` hover:text-white rounded-none ) : (
${ <iframe
isInternational[2] src={`${`${url + ticket7}/${view7}${param}`}`}
? "bg-white text-black " width="100%"
: "bg-black text-white " height="750"
}`} frameBorder="0"
> />
Indonesia )}
</Button>
<Button
onClick={() => handleInternational(2, true)}
className={`hover:text-white rounded-none ${
isInternational[1]
? "bg-black text-white "
: "bg-white text-black "
}
`}
>
{t("international")}
</Button>
</div>
</div>
) : (
""
)}
<div className="my-5">
{ticket3 == "" ? (
<iframe
src={`${baseUrl + view7 + param}`}
width="100%"
height="750"
frameBorder="0"
/>
) : (
<iframe
src={`${`${url + ticket3}/${view7}${param}`}`}
width="100%"
height="750"
frameBorder="0"
/>
)}
</div>
</Card>
</div> </div>
</div> </Card>
</TabsContent> </TabsContent>
</Tabs> </Tabs>
</div> </div>

2
utils/globals.tsx
View File

@ -181,7 +181,7 @@ const LoadScript = () => {
const script = document.createElement("script"); const script = document.createElement("script");
script.src = "https://cdn.userway.org/widget.js"; script.src = "https://cdn.userway.org/widget.js";
script.setAttribute("data-account", "X36s1DpjqB"); script.setAttribute("data-account", "X36s1DpjqB");
script.setAttribute("data-position", "3"); script.setAttribute("data-position", "5");
script.async = true; script.async = true;
document.head.appendChild(script); document.head.appendChild(script);