tsms/src/components/ProgressByClientSearch/ProgressByClientSearch.tsx

"use client";

import { ProjectResult } from "@/app/api/projects";
import React, { useMemo, useState } from "react";
import SearchBox, { Criterion } from "../SearchBox";
import { useTranslation } from "react-i18next";
import SearchResults, { Column } from "../SearchResults";
import { ClientProjectResult } from "@/app/api/clientprojects";

interface Props {
  projects: ClientProjectResult[];
}
type SearchQuery = Partial<Omit<ClientProjectResult, "id">>;
type SearchParamNames = keyof SearchQuery;

const ProgressByClientSearch: React.FC<Props> = ({ projects }) => {
  const { t } = useTranslation("projects");

  // If project searching is done on the server-side, then no need for this.
  const [filteredProjects, setFilteredProjects] = useState(projects);

  const searchCriteria: Criterion<SearchParamNames>[] = useMemo(
    () => [
      { label: "Client Code", paramName: "clientCode", type: "text" },
      { label: "Client Name", paramName: "clientName", type: "text" },
    ],
    [t],
  );

  const columns = useMemo<Column<ClientProjectResult>[]>(
    () => [
      { name: "clientCode", label: t("Client Code") },
      { name: "clientName", label: t("Client Name") },
      { name: "SubsidiaryClientCode", label: t("Subsidiary Code") },
      { name: "SubsidiaryClientName", label: t("Subisdiary") },
      { name: "NoOfProjects", label: t("No. of Projects") },
    ],
    [t],
  );

  return (
    <>
      <SearchBox
        criteria={searchCriteria}
        onSearch={(query) => {
          console.log(query);
        }}
      />
      <SearchResults<ClientProjectResult>
        items={filteredProjects}
        columns={columns}
      />
    </>
  );
};

export default ProgressByClientSearch;