web-humas-fe/components/main/dashboard/dashboard-container.tsx

"use client";
import {
  DashboardCommentIcon,
  DashboardConnectIcon,
  DashboardShareIcon,
  DashboardSpeecIcon,
  DashboardTopLeftPointIcon,
  DashboardUserIcon,
} from "@/components/icons/dashboard-icon";
import { Submenu1Icon } from "@/components/icons/sidebar-icon";
import {
  Button,
  Checkbox,
  CheckboxGroup,
  Pagination,
  Select,
  SelectItem,
  SelectSection,
} from "@nextui-org/react";
import ApexChartColumn from "./chart/column-chart";
import ApexChartDonut from "./chart/donut-chart";
import ApexChartLineArea from "./chart/line-area-chart";
import Cookies from "js-cookie";
import Link from "next/link";
import { useEffect, useState } from "react";
import { getListArticle } from "@/service/article";
import { Article } from "@/types/globals";
import { convertDateFormat, textEllipsis } from "@/utils/global";
import Datepicker from "react-tailwindcss-datepicker";

type ArticleData = Article & {
  no: number;
  createdAt: string;
};

interface TopPages {
  id: number;
  no: number;
  title: string;
  visits: number;
}

interface PostCount {
  id: number;
  no: number;
  name: string;
  count: number;
}

const dummyTopPages = [
  { id: 1, title: "Home Page", visits: 830 },
  { id: 2, title: "Media Update", visits: 762 },
  { id: 3, title: "Polda Metro Jaya", visits: 532 },
  { id: 4, title: "Kapolri: Transformasi Menuju Polri Presisi", visits: 500 },
  { id: 5, title: "Polda Jawa Barat Ungkap Kasus Narkoba", visits: 480 },
  { id: 6, title: "Polri Perketat Pengamanan Jelang Pemilu", visits: 460 },
  { id: 7, title: "Polda Jawa Tengah Berhasil Tangkap Buronan", visits: 440 },
  {
    id: 8,
    title: "Divisi Humas Polri Rilis Data Kejahatan Terbaru",
    visits: 420,
  },
  { id: 9, title: "Polda Sumatera Utara Gerebek Pabrik Narkoba", visits: 400 },
  {
    id: 10,
    title: "Kapolda Bali Imbau Wisatawan Waspada Kejahatan",
    visits: 380,
  },
];

const dummyPostCount = [
  { id: 1, name: "Polda Sumatera Utara", count: 132 },
  { id: 2, name: "Polda Metro Jaya", count: 128 },
  { id: 3, name: "Polda Jawa Barat", count: 120 },
  { id: 4, name: "Polda Jawa Timur", count: 115 },
  { id: 5, name: "Polda Bali", count: 110 },
  { id: 6, name: "Polda Daerah Istimewa Yogyakarta", count: 105 },
  { id: 7, name: "Polda Riau", count: 98 },
  { id: 8, name: "Polda Sulawesi Selatan", count: 92 },
  { id: 9, name: "Polda Kalimantan Timur", count: 85 },
  { id: 10, name: "Polda Jawa Tengah", count: 78 },
  { id: 11, name: "Polda Kalimantan Selatan", count: 72 },
  { id: 12, name: "Polda Sumatera Barat", count: 65 },
  { id: 13, name: "Polda Papua", count: 60 },
  { id: 14, name: "Polda Nusa Tenggara Barat", count: 54 },
  { id: 15, name: "Polda Maluku", count: 49 },
  { id: 16, name: "Polda Bengkulu", count: 43 },
  { id: 17, name: "Polda Lampung", count: 37 },
  { id: 18, name: "Polda Sulawesi Tenggara", count: 30 },
  { id: 19, name: "Polda Gorontalo", count: 24 },
  { id: 20, name: "Polda Kalimantan Barat", count: 18 },
  { id: 21, name: "Polda Kepulauan Riau", count: 10 },
  { id: 22, name: "Polda Sulawesi Barat", count: 8 },
  { id: 23, name: "Polda Papua Barat", count: 5 },
  { id: 24, name: "Polda Maluku Utara", count: 3 },
  { id: 25, name: "Polda Nusa Tenggara Timur", count: 2 },
  { id: 26, name: "Polda Kalimantan Tengah", count: 1 },
  { id: 27, name: "Polda Sulawesi Tengah", count: 1 },
  { id: 28, name: "Polda Bangka Belitung", count: 1 },
  { id: 29, name: "Polda Jambi", count: 0 },
  { id: 30, name: "Polda Banten", count: 0 },
  { id: 31, name: "Polda Aceh", count: 0 },
  { id: 32, name: "Polda Kalimantan Utara", count: 0 },
  { id: 33, name: "Polda Sulawesi Utara", count: 0 },
  { id: 34, name: "Polda Kepulauan Bangka Belitung", count: 0 },
  { id: 35, name: "Polda Sumatera Selatan", count: 0 },
];

export default function DashboardContainer() {
  const username = Cookies.get("username");
  const fullname = Cookies.get("ufne");
  const [page, setPage] = useState(1);
  const [totalPage, setTotalPage] = useState(1);
  const [topPagespage, setTopPagesPage] = useState(1);
  const [topPagesTotalPage, setTopPagesTotalPage] = useState(1);
  const [article, setArticle] = useState<ArticleData[]>([]);
  const [analyticsView, setAnalyticView] = useState<string[]>([
    "visit",
    "view",
    "share",
  ]);
  const [startDateValue, setStartDateValue] = useState({
    startDate: new Date(),
    endDate: new Date(),
  });

  const [postContentDate, setPostContentDate] = useState({
    startDate: new Date(new Date().setDate(new Date().getDate() - 7)),
    endDate: new Date(),
  });

  const [typeDate, setTypeDate] = useState("monthly");

  const [topPages, setTopPages] = useState<TopPages[]>([]);
  const [postCount, setPostCount] = useState<PostCount[]>([]);

  useEffect(() => {
    initState();
    fetchTopPages();
    fetchPostCount();
  }, [page]);

  async function initState() {
    const req = {
      limit: "4",
      page: page,
      search: "",
    };
    const res = await getListArticle(req);
    setArticle(res.data?.data);
    setTotalPage(res?.data?.meta?.totalPage);
  }

  async function fetchTopPages() {
    setTopPages(getTableNumber(10, dummyTopPages));
    setTopPagesTotalPage(1);
  }
  async function fetchPostCount() {
    setPostCount(getTableNumber(10, dummyPostCount));
    setTopPagesTotalPage(1);
  }

  const getTableNumber = (limit: number, data: any) => {
    if (data) {
      const startIndex = limit * (page - 1);
      let iterate = 0;
      const newData = data.map((value: any) => {
        iterate++;
        value.no = startIndex + iterate;
        return value;
      });
      return newData;
    }
  };

  const getMonthYear = (date: Date | string) => {
    const newDate = new Date(date);

    const months = [
      "january",
      "february",
      "march",
      "april",
      "may",
      "june",
      "july",
      "august",
      "september",
      "october",
      "november",
      "december",
    ];
    const year = newDate.getFullYear();

    const month = months[newDate.getMonth()];
    return month + " " + year;
  };

  return (
    <div className="px-2 lg:p-8 flex justify-center">
      <div className="w-full flex flex-col gap-6">
        <div className="w-full flex flex-col lg:flex-row gap-6 justify-center">
          <div className="px-4 lg:px-8 py-4 justify-between w-full lg:w-[37%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col rounded-lg">
            <div className="flex justify-between w-full  items-center">
              <div className="flex flex-col gap-2">
                <p className="font-bold text-xl ">{fullname}</p>
                <p>{username}</p>
              </div>
              <DashboardUserIcon size={78} />
            </div>
            <div className="flex flex-row gap-5">
              <p className="text-lg font-semibold">
                4 Post <span className="text-sm font-normal">Hari ini</span>
              </p>
              <p className="text-lg font-semibold">
                12 Post <span className="text-sm font-normal">Minggu ini</span>
              </p>
            </div>
          </div>

          <div className="lg:w-[20%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col justify-center items-center rounded-lg">
            <div className="h-1/2 flex items-center justify-center">
              <DashboardSpeecIcon />
            </div>
            <div className="">Total post</div>
            <div className="font-semibold text-lg">121</div>
          </div>
          <div className="w-full lg:w-[15%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col justify-center items-center rounded-lg">
            <div className="h-1/2 flex items-center justify-center">
              <DashboardConnectIcon />
            </div>
            <div className="">Total views</div>
            <div className="font-semibold text-lg">154</div>
          </div>
          <div className="w-full lg:w-[15%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col justify-center items-center rounded-lg">
            <div className="h-1/2 flex items-center justify-center">
              <DashboardShareIcon />
            </div>
            <div className="">Total share</div>
            <div className="font-semibold text-lg">154</div>
          </div>
          <div className="w-full lg:w-[15%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col justify-center items-center rounded-lg">
            <div className="h-1/2 flex items-center justify-center">
              <DashboardCommentIcon size={50} />
            </div>
            <div className="">Total comment</div>
            <div className="font-semibold text-lg">530</div>
          </div>
        </div>
        <div className="w-full flex flex-col lg:flex-row gap-6 justify-center ">
          <div className="border-1 shadow-sm w-screen rounded-lg lg:w-[55%] p-6 flex flex-col text-xs lg:text-sm">
            <div className="flex justify-between mb-4 items-center">
              <p className="font-semibold">
                Rekapitulasi Post Berita Polda Pada Website
              </p>
              <div className="w-[220px]">
                <Datepicker
                  value={postContentDate}
                  displayFormat="DD/MM/YYYY"
                  asSingle={false}
                  useRange={true}
                  onChange={(e: any) => setPostContentDate(e)}
                  inputClassName="z-50 w-full text-xs lg:text-sm bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-sm lg:rounded-lg h-[30px] lg:h-[40px] text-gray-600 dark:text-gray-300"
                />
              </div>
            </div>
            <div className="flex flex-row border-b-1 gap-1">
              <div className="w-[5%]">NO</div>
              <div className="w-[50%] lg:w-[70%]">POLDA</div>
              <div className="w-[45%] lg:w-[25%] text-right">
                JUMLAH POST BERITA
              </div>
            </div>
            <div className="flex flex-col gap-1 lg:h-[500px] overflow-y-auto">
              {postCount?.map((list) => (
                <div key={list.id} className="flex flex-row border-b-1 gap-1">
                  <div className="w-[5%]">{list?.no}</div>
                  <div className="w-[85%]">{list?.name}</div>
                  <div
                    className={`w-[10%] text-center ${
                      list?.count === 0 && "bg-red-600 text-white"
                    }`}
                  >
                    {list?.count}
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="flex flex-col w-full lg:w-[45%] gap-6 shadow-md bg-white dark:bg-[#18181b] rounded-lg p-8 text-sm">
            <div className="flex justify-between font-semibold">
              <p>Recent Article</p>
              <Link href="/admin/article/create">
                <Button color="primary" variant="bordered">
                  Buat Article
                </Button>
              </Link>
            </div>
            {article?.map((list: any) => (
              <div
                key={list?.id}
                className="flex flex-row gap-2 items-center border-b-2 py-2"
              >
                <img
                  src={list?.thumbnailUrl || `/no-image.jpg`}
                  className="h-[70px] w-[70px] object-cover rounded-lg"
                />
                <div className="flex flex-col gap-2">
                  <p>{textEllipsis(list?.title, 78)}</p>
                  <p className="text-xs">
                    {convertDateFormat(list?.createdAt)}
                  </p>
                </div>
              </div>
            ))}
            <div className="my-2 w-full flex justify-center">
              <Pagination
                isCompact
                showControls
                showShadow
                color="primary"
                classNames={{
                  base: "bg-transparent",
                  wrapper: "bg-transparent",
                }}
                page={page}
                total={totalPage}
                onChange={(page) => setPage(page)}
              />
            </div>
          </div>
        </div>
        <div className="w-full flex flex-col lg:flex-row gap-6 justify-center ">
          <div className="border-1 shadow-sm w-screen rounded-lg lg:w-[55%] p-6 flex flex-col">
            <div className="flex justify-between mb-3">
              <div className="font-semibold flex flex-col">
                Analytics
                <div className="font-normal text-xs text-gray-600 flex flex-row gap-2">
                  <CheckboxGroup
                    label=""
                    value={analyticsView}
                    orientation="vertical"
                    onValueChange={setAnalyticView}
                    className="lg:hidden"
                  >
                    <Checkbox size="sm" value="visit">
                      Visit
                    </Checkbox>
                    <Checkbox size="sm" value="view" color="success">
                      View
                    </Checkbox>
                    <Checkbox size="sm" value="share" color="warning">
                      Share
                    </Checkbox>
                  </CheckboxGroup>
                  <CheckboxGroup
                    label=""
                    value={analyticsView}
                    orientation="horizontal"
                    onValueChange={setAnalyticView}
                    className="hidden lg:block"
                  >
                    <Checkbox size="sm" value="visit">
                      Visit
                    </Checkbox>
                    <Checkbox size="sm" value="view" color="success">
                      View
                    </Checkbox>
                    <Checkbox size="sm" value="share" color="warning">
                      Share
                    </Checkbox>
                  </CheckboxGroup>
                </div>
              </div>
              <div className="flex flex-col lg:flex-row gap-2">
                <Button
                  color="primary"
                  variant={typeDate === "monthly" ? "solid" : "bordered"}
                  onClick={() => setTypeDate("monthly")}
                  className="w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px] rounded-sm lg:rounded-lg"
                >
                  Bulanan
                </Button>
                <Button
                  color="primary"
                  onClick={() => setTypeDate("weekly")}
                  variant={typeDate === "weekly" ? "solid" : "bordered"}
                  className="w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px] rounded-sm lg:rounded-lg"
                >
                  Mingguan
                </Button>
                <div className="w-[140px]">
                  <Datepicker
                    value={startDateValue}
                    displayFormat="DD/MM/YYYY"
                    asSingle={true}
                    useRange={false}
                    onChange={(e: any) => setStartDateValue(e)}
                    inputClassName="z-50 w-full text-xs lg:text-sm bg-transparent border-1 border-gray-200 px-2 py-[6px] rounded-sm lg:rounded-lg h-[30px] lg:h-[40px] text-gray-600 dark:text-gray-300"
                  />
                </div>
              </div>
            </div>
            <div className="flex flex-row w-full h-full">
              <div className="w-full h-[30vh] lg:h-full text-black">
                <ApexChartColumn
                  type={typeDate}
                  date={getMonthYear(startDateValue.startDate)}
                  view={analyticsView}
                />
              </div>
            </div>
          </div>
          <div className="flex flex-col w-full lg:w-[45%] gap-6 shadow-md bg-white dark:bg-[#18181b] rounded-lg p-8 text-xs lg:text-sm">
            <div className="flex justify-between font-semibold">
              <p>Top Pages</p>
            </div>
            <div className="flex flex-row border-b-1">
              <div className="w-[5%]">No</div>
              <div className="w-[85%]">Title</div>
              <div className="w-[10%]">Visits</div>
            </div>
            {topPages?.map((list) => (
              <div key={list.id} className="flex flex-row border-b-1">
                <div className="w-[5%]">{list?.no}</div>
                <div className="w-[85%]">{list?.title}</div>
                <div className="w-[10%]">{list?.visits}</div>
              </div>
            ))}
            <div className="my-2 w-full flex justify-center">
              <Pagination
                isCompact
                showControls
                showShadow
                color="primary"
                classNames={{
                  base: "bg-transparent",
                  wrapper: "bg-transparent",
                }}
                page={topPagespage}
                total={topPagesTotalPage}
                onChange={(page) => setTopPagesPage(page)}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}