mediahub-fe/app/[locale]/(protected)/dashboard/page.tsx

207 lines
8.2 KiB
TypeScript

"use client";
import { StatisticsBlock } from "@/components/blocks/statistics-block";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import DashboardDropdown from "@/components/dashboard-dropdown";
import { useTranslations } from "next-intl";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";
import { UploadIcon } from "lucide-react";
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";
import TaskTable from "../contributor/task/components/task-table";
import PressConferenceTable from "../contributor/schedule/press-release/components/pressrilis-table";
import BlogTable from "../contributor/blog/components/blog-table";
import ContentTable from "./routine-task/components/content-table";
import RecentActivity from "./routine-task/components/recent-activity";
import { Link } from "@/components/navigation";
import ReportTable from "../contributor/report/components/report-table";
const DashboardPage = () => {
const t = useTranslations("AnalyticsDashboard");
const roleId = getCookiesDecrypt("urie");
return Number(roleId) == 2 || Number(roleId) == 11 || Number(roleId) == 12 ? (
<div>
<SiteBreadcrumb />
<DashboardVisualization />
</div>
) : (
<div>
<div className="my-3">
<Tabs defaultValue="routine-task" className="w-full">
<Card className="py-3 px-2 my-4">
<TabsList className="flex-wrap">
<TabsTrigger
value="routine-task"
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
>
{t("task-routine")}
</TabsTrigger>
<TabsTrigger
value="task"
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
>
{t("task")}
</TabsTrigger>
<TabsTrigger
value="schedule"
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
>
{t("schedule")}
</TabsTrigger>
<TabsTrigger
value="indeks"
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
>
{t("indeks")}
</TabsTrigger>
<TabsTrigger
value="report"
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
>
{t("report")}
</TabsTrigger>
</TabsList>
</Card>
<TabsContent value="routine-task">
<div className="grid grid-cols-12 items-center gap-5 mb-5">
<div className="2xl:col-span-12 lg:col-span-12 col-span-12">
<Card>
<CardContent className="p-4">
<div className="grid md:grid-cols-3 gap-4">
<StatisticsBlock
title={t("Hasil_unggah_disetujui_hari_ini")}
total="3,564"
className="bg-info/10 border-none shadow-none"
/>
<StatisticsBlock
title={t("Hasil_unggah_direvisi_hari_ini")}
total="564"
className="bg-warning/10 border-none shadow-none"
chartColor="#FB8F65"
/>
<StatisticsBlock
title={t("Hasil_unggah_ditolak_hari_ini")}
total="+5.0%"
className="bg-primary/10 border-none shadow-none"
chartColor="#2563eb"
/>
</div>
</CardContent>
</Card>
</div>
</div>
<div className="grid grid-cols-12 gap-5">
<div className="lg:col-span-4 col-span-12">
<Card>
<CardHeader className="flex flex-row items-center">
<CardTitle className="flex-1 text-lg">
{t("Total-Content-Production")}
</CardTitle>
<DashboardDropdown />
</CardHeader>
<CardContent>
<RecentActivity />
</CardContent>
</Card>
</div>
<div className="lg:col-span-8 col-span-12">
<Card>
<CardHeader className="flex flex-row items-center">
<CardTitle className="flex-1">{t("tabel")}</CardTitle>
{/* <DashboardDropdown /> */}
</CardHeader>
<CardContent className="p-0">
<ContentTable />
</CardContent>
</Card>
</div>
</div>
</TabsContent>
<TabsContent value="task">
<div className="grid grid-cols-12 gap-5">
<div className="lg:col-span-12 col-span-12">
<Card>
<Card className="py-4 px-3">
<div className="flex flex-row justify-between items-center">
<div className="flex-1 text-xl font-medium text-default-900">
Tabel Penugasan
</div>
<div>
<Link href={"/contributor/task/create"}>
<Button color="primary" className="text-white">
<UploadIcon />
Buat Penugasan
</Button>
</Link>
</div>
</div>
</Card>
<CardContent className="p-0 mt-3">
<TaskTable />
</CardContent>
</Card>
</div>
</div>
</TabsContent>
<TabsContent value="schedule">
<div className="grid grid-cols-12 gap-5">
<div className="lg:col-span-12 col-span-12">
<Card>
<CardContent className="p-0 ">
<PressConferenceTable />
</CardContent>
</Card>
</div>
</div>
</TabsContent>
<TabsContent value="indeks">
<div className="grid grid-cols-12 gap-5">
<div className="lg:col-span-12 col-span-12">
<Card>
{/* <Card className="py-4 px-3">
<div className="flex flex-col md:flex-row md:justify-between md:items-center lg:flex-row lg:justify-between lg:items-center">
<div className="flex-1 text-xl font-medium text-default-900 mb-2">
Table Indeks
</div>
<div>
<Link href={"/contributor/blog/create"}>
<Button color="primary" className="text-white">
<UploadIcon />
Tambah Indeks
</Button>
</Link>
</div>
</div>
</Card> */}
<CardContent className="p-0 mt-3">
<BlogTable />
</CardContent>
</Card>
</div>
</div>
</TabsContent>
<TabsContent value="report">
<div className="grid grid-cols-12 gap-5">
<div className="lg:col-span-12 col-span-12">
<Card>
<CardContent className="p-0 mt-3">
<ReportTable />
</CardContent>
</Card>
</div>
</div>
</TabsContent>
</Tabs>
</div>
</div>
);
};
export default DashboardPage;