dmenu-admin/src/pages/customers/List.tsx

import Button from "@/components/Button";
import Filters, { type FieldType } from "@/components/Filters";
import Table from "@/components/Table";
import { Pages } from "@/config/Pages";
import { formatFaNumber, formatOptionalDate } from "@/helpers/func";
import type { CustomerListRow, UserRestaurant } from "@/pages/customers/types/Types";
import { DocumentDownload, DocumentUpload, Edit } from "iconsax-react";
import { type FC, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import ImportCustomersModal from "./components/ImportCustomersModal";
import { useCustomerFilters } from "./hooks/useCustomerFilters";
import { useGetUsers } from "./hooks/useUsersData";
import { downloadCustomerImportSampleExcel } from "./utils/downloadCustomerImportSampleExcel";

const mapUserRestaurantToRow = (userRestaurant: UserRestaurant): CustomerListRow => {
  const { user, orderCount, totalOrderAmount } = userRestaurant;
  const fullName = [user.firstName, user.lastName].filter(Boolean).join(" ").trim();
  return {
    id: user.id,
    fullName: fullName || "بدون نام",
    phone: user.phone || "-",
    birthDate: formatOptionalDate(user.birthDate),
    marriageDate: formatOptionalDate(user.marriageDate),
    orderCount: formatFaNumber(orderCount),
    totalOrderAmount: formatFaNumber(totalOrderAmount),
    status: user.isActive !== false ? "فعال" : "غیرفعال",
    firstName: user.firstName,
    lastName: user.lastName,
    birthDateRaw: user.birthDate,
    marriageDateRaw: user.marriageDate,
    gender: user.gender,
    avatarUrl: user.avatarUrl,
  };
};

const CustomersList: FC = () => {
  const { t } = useTranslation("global");
  const navigate = useNavigate();
  const [isImportModalOpen, setIsImportModalOpen] = useState(false);

  const { filters, currentPage, apiParams, handleFiltersChange, handlePageChange } = useCustomerFilters();

  const { data: usersData, isLoading } = useGetUsers(apiParams);

  const filterFields = useMemo<FieldType[]>(
    () => [
      {
        type: "input",
        name: "search",
        placeholder: "نام یا شماره تماس",
      },
    ],
    [],
  );

  const userRestaurants = usersData?.data ?? [];
  const tableData = useMemo<CustomerListRow[]>(() => userRestaurants.map(mapUserRestaurantToRow), [userRestaurants]);

  const totalPages = usersData?.meta?.totalPages || 1;

  const columns = useMemo(
    () => [
      {
        key: "fullName",
        title: "نام و نام خانوادگی",
      },
      {
        key: "phone",
        title: "شماره تماس",
      },
      {
        key: "birthDate",
        title: "تاریخ تولد",
      },
      {
        key: "marriageDate",
        title: "تاریخ ازدواج",
      },
      {
        key: "orderCount",
        title: "تعداد سفارش",
      },
      {
        key: "totalOrderAmount",
        title: "مجموع سفارش (تومان)",
      },
      {
        key: "status",
        title: "وضعیت",
        render: (item: CustomerListRow) => (
          <span className={`px-3 py-1 rounded-full text-xs ${item.status === "فعال" ? "bg-green-100 text-green-700" : "bg-red-100 text-red-600"}`}>{item.status}</span>
        ),
      },
      {
        key: "details",
        title: "عملیات",
        render: (item: CustomerListRow) => (
          <button
            type="button"
            className="text-primary text-xs flex items-center gap-1"
            onClick={(e) => {
              e.stopPropagation();
              navigate(Pages.customers.update + item.id, {
                state: { customer: item },
              });
            }}
          >
            <Edit size={18} color="#0047FF" />
          </button>
        ),
      },
    ],
    [navigate],
  );

  return (
    <div className="mt-5">
      <div className="flex flex-wrap justify-between items-center gap-3">
        <h1 className="text-lg font-light">{t("customer.customer_list")}</h1>
        <div className="flex flex-wrap gap-2">
          <Button type="button" className="w-fit px-4 bg-gray-100 text-gray-700" onClick={downloadCustomerImportSampleExcel}>
            <div className="flex items-center gap-2">
              <DocumentDownload size={18} color="#374151" />
              <span>{t("customer.download_sample")}</span>
            </div>
          </Button>
          <Button type="button" className="w-fit px-4" onClick={() => setIsImportModalOpen(true)}>
            <div className="flex items-center gap-2">
              <DocumentUpload size={18} color="#fff" />
              <span>{t("customer.import_excel")}</span>
            </div>
          </Button>
        </div>
      </div>

      <div className="mt-8">
        <Filters fields={filterFields} onChange={handleFiltersChange} initialValues={filters} searchField="search" />
      </div>

      <Table
        columns={columns}
        data={tableData}
        isloading={isLoading}
        selectable
        pagination={{
          currentPage,
          totalPages,
          onPageChange: handlePageChange,
        }}
      />

      <ImportCustomersModal open={isImportModalOpen} onClose={() => setIsImportModalOpen(false)} />
    </div>
  );
};

export default CustomersList;