web-humas-fe/components/table/tabel-emajalah-polri.tsx

"use client";
import {
  BreadcrumbItem,
  Breadcrumbs,
  Button,
  Input,
  Pagination,
  Select,
  SelectItem,
  SelectSection,
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
} from "@heroui/react";
import Link from "next/link";
import SidebarNav from "../landing/SidebarNav";
import { ChevronRightIcon, EyeFilledIcon, SearchIcon } from "../icons";
import { getListMagazine } from "@/services/magazine";
import { useEffect, useState } from "react";
import Datepicker from "react-tailwindcss-datepicker";

const header = [
  {
    key: "title",
    label: "Daftar E-Majalah Polri",
  },
  {
    key: "icon",
    label: "",
  },
];

export default function ListEnewsPolri() {
  const searchInput = (
    <Input
      aria-label="Search"
      className="w-full"
      classNames={{
        input: ["w-full", "bg-transparent", "h-[20px]", "!text-black"],
        mainWrapper: ["w-full", "bg-transparent"],
        innerWrapper: ["bg-transparent", "h-[20px]"],
        inputWrapper: [
          "bg-white",
          "dark:bg-white",
          // "!border-2 !border-gray-200",
          "hover:!bg-gray-300",
          "dark:hover:bg-gray-300",
          "group-data-[focused=true]:bg-transparent",
          "dark:group-data-[focused=true]:bg-transaparent",
          "group-data-[focused=false]:bg-transparent",
          "focus-within:!bg-transparent",
          "h-[20px]",
          "dark:focus-within:!bg-gray-100",
          // "border-2",
          // "border-red-500",
        ],
      }}
      labelPlacement="outside"
      placeholder="Search..."
      startContent={
        <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
      }
      endContent={
        <Button size="sm" className="bg-[#DD8306] font-semibold">
          Cari
        </Button>
      }
      type="search"
    />
  );

  const [magazines, setMagazines] = useState<any>([]);
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState("");
  const [totalPage, setTotalPage] = useState(1);

  const [startDateValue, setStartDateValue] = useState({
    startDate: null,
    endDate: null,
  });

  useEffect(() => {
    getMagazines();
  }, [page, startDateValue]);

  async function getMagazines() {
    const req = {
      page: page,
      search: search,
      limit: "10",
      startDate:
        startDateValue.startDate === null ? "" : startDateValue.startDate,
      endDate: startDateValue.endDate === null ? "" : startDateValue.endDate,
    };

    const response = await getListMagazine(req);
    setMagazines(response?.data?.data);
    setTotalPage(response?.data?.meta?.totalPage);
  }

  return (
    <div className="bg-white dark:bg-stone-900">
      <div className="px-5 lg:px-0 lg:w-[75vw] lg:mx-auto py-8">
        <div className="flex flex-row gap-4 items-end ">
          <Link href="/" className=" font-semibold text-lg">
            Beranda
          </Link>
          <ChevronRightIcon />
          <p className=" font-semibold text-lg">E-Majalah Polri</p>
        </div>
        <div className="pt-4 space-y-5 ">
          <div className="flex items-end gap-3 flex-col md:flex-row">
            <Input
              aria-label="Search"
              classNames={{
                input: ["w-full", "bg-transparent", "h-[20px]", "!text-black"],
                mainWrapper: ["w-full", "bg-transparent"],
                innerWrapper: ["bg-transparent", "h-[20px]"],
                inputWrapper: [
                  "bg-white",
                  "dark:bg-white",
                  "hover:!bg-gray-300",
                  "dark:hover:bg-gray-300",
                  "group-data-[focused=true]:bg-transparent",
                  "dark:group-data-[focused=true]:bg-transaparent",
                  "group-data-[focused=false]:bg-transparent",
                  "focus-within:!bg-transparent",
                  "h-[20px]",
                  "dark:focus-within:!bg-gray-100",
                ],
              }}
              labelPlacement="outside"
              type="text"
              onChange={(e) => setSearch(e.target.value)}
              startContent={
                <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
              }
              endContent={
                <Button
                  size="sm"
                  className="bg-[#DD8306] font-semibold text-white"
                  onPress={getMagazines}
                >
                  Cari
                </Button>
              }
            />

            <div className="flex flex-col gap-1 w-full md:w-[240px]">
              <p className="font-semibold text-xs md:text-sm">
                Tanggal Publikasi
              </p>
              {/* <Datepicker
                value={startDateValue}
                displayFormat="DD/MM/YYYY"
                useRange={false}
                asSingle={true}
                onChange={(e: any) => setStartDateValue(e)}
                inputClassName="z-50 w-full text-sm bg-white border-1 border-gray-200 px-2 py-[6px] rounded-xl h-[40px] text-black"
              /> */}
            </div>
          </div>
          <div className="flex flex-col gap-3">
            <Table
              color="warning"
              aria-label="Example static collection table"
              classNames={{
                wrapper: "bg-white",
                base: "font-bold",
                td: "font-medium",
              }}
            >
              <TableHeader columns={header}>
                {(column) => (
                  <TableColumn
                    className=" bg-[#DD8306] text-white text-md w-full"
                    key={column.key}
                  >
                    {column.label}
                  </TableColumn>
                )}
              </TableHeader>
              <TableBody items={magazines}>
                {(item: any) => (
                  <TableRow key={item.id}>
                    <TableCell>
                      <Link href={`/e-majalah-polri/detail/${item.id}`}>
                        {item.title}
                      </Link>
                    </TableCell>
                    <TableCell>
                      <Link href={`/e-majalah-polri/detail/${item.key}`}>
                        <EyeFilledIcon color="#DD8306" />
                      </Link>
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
            <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>
    </div>
  );
}