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

'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 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 { Suspense } from "react";

const DashboardPage = () => {
  const t = useTranslations("AnalyticsDashboard");
  return (
    <Suspense>
      <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"
                >
                  Tugas Rutin
                </TabsTrigger>
                <TabsTrigger
                  value="task"
                  className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
                >
                  Penugasan
                </TabsTrigger>
                <TabsTrigger
                  value="schedule"
                  className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
                >
                  Jadwal
                </TabsTrigger>
                <TabsTrigger
                  value="indeks"
                  className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-md px-6"
                >
                  Indeks
                </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={"Hasil unggah disetujui hari ini"}
                          total="3,564"
                          className="bg-info/10 border-none shadow-none"
                        />
                        <StatisticsBlock
                          title={"Hasil unggah direvisi hari ini"}
                          total="564"
                          className="bg-warning/10 border-none shadow-none"
                          chartColor="#FB8F65"
                        />
                        <StatisticsBlock
                          title={"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">
                        {"Total Produksi Konten"}
                      </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">{"Table"}</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">
                          Table 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-row justify-between items-center">
                        <div className="flex-1 text-xl font-medium text-default-900">
                          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>
          </Tabs>
        </div>
      </div>
    </Suspense>
  );
};

export default DashboardPage;