tsms/src/components/ClaimSearch/ClaimSearch.tsx

"use client";

import { Claim, ClaimSearchForm } from "@/app/api/claims";
import React, { useCallback, useMemo, useState } from "react";
import SearchBox, { Criterion } from "../SearchBox/index";
import { useTranslation } from "react-i18next";
import SearchResults, { Column } from "../SearchResults/index";
import EditNote from "@mui/icons-material/EditNote";
import { dateInRange } from "@/app/utils/commonUtil";
import { claimStatusCombo, expenseTypeCombo } from "@/app/utils/comboUtil";
import { convertDateArrayToString, convertDateToString } from "@/app/utils/formatUtil";

interface Props {
  claims: Claim[];
}

type SearchQuery = Partial<Omit<ClaimSearchForm, "id">>;
type SearchParamNames = keyof SearchQuery;

const ClaimSearch: React.FC<Props> = ({ claims }) => {
  const { t } = useTranslation();

  // If claim searching is done on the server-side, then no need for this.
  const [filteredClaims, setFilteredClaims] = useState(claims);

  const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
    () => [
      { label: t("Creation Date From"), label2: t("Creation Date To"), paramName: "created", type: "dateRange" },
      // { label: t("Related Project Name"), paramName: "name", type: "text" },
      {
        label: t("Expense Type"),
        paramName: "type",
        type: "select",
        options: expenseTypeCombo,
      },
      {
        label: t("Status"),
        paramName: "status",
        type: "select",
        options: claimStatusCombo,
      },
    ],
    [t],
  );

  const onClaimClick = useCallback((claim: Claim) => {
    console.log(claim);
  }, []);

  const columns = useMemo<Column<Claim>[]>(
    () => [
      // {
      //   name: "action",
      //   label: t("Actions"),
      //   onClick: onClaimClick,
      //   buttonIcon: <EditNote />,
      // },
      { name: "created", label: t("Creation Date"), type: "date" },
      { name: "code", label: t("Claim Code") },
      // { name: "project", label: t("Related Project Name") },
      { name: "amount", label: t("Amount (HKD)") },
      { name: "type", label: t("Expense Type"), needTranslation: true },
      { name: "status", label: t("Status"), needTranslation: true },
      { name: "remarks", label: t("Remarks") },
    ],
    [t, onClaimClick],
  );

  return (
    <>
      <SearchBox
        criteria={searchCriteria}
        onSearch={(query) => {
          setFilteredClaims(
            claims.filter(
              (claim) =>
                dateInRange(convertDateArrayToString(claim.created, "YYYY-MM-DD")!!, query.created, query.createdTo ?? undefined) &&
                // claim.project.name.toLowerCase().includes(query.name.toLowerCase()) &&
                (claim.type.toLowerCase().includes(query.type.toLowerCase()) || query.type.toLowerCase() === "all") &&
                (claim.status.toLowerCase().includes(query.status.toLowerCase()) || query.status.toLowerCase() === "all")
            ),
          );
        }}
      />
      <SearchResults<Claim> items={filteredClaims} columns={columns} />
    </>
  );
};

export default ClaimSearch;