shoc-frontend-new/src/app/(protected)/vendor-pos/index.tsx

import { Alert, Box, TablePagination } from "@mui/material";
import { useNavigate } from "react-router";
import { VendorPosListControls } from "./_components/vendor-pos-list-controls";
import { VendorPosListTable } from "./_components/vendor-pos-list-table";
import { useVendorPosFilters } from "./_hooks/use-vendor-pos-filters";
import { useVendorPosList } from "@/domain/vendor-pos/use-cases/use-vendor-pos-list";
import { useVendorsList } from "@/domain/vendors/use-cases/use-vendors-list";

export default function VendorPosListPage() {
  const navigate = useNavigate();
  const {
    filters,
    page,
    pageSize,
    listParams,
    setSearch,
    setFilter,
    clearFilters,
    setPage,
    changePageSize,
  } = useVendorPosFilters();
  const { data, isLoading, isFetching, error } = useVendorPosList(listParams);
  const { data: vendorsData } = useVendorsList({ page: 1, pageSize: 500 });
  const rows = data?.items ?? [];
  const totalCount = data?.totalCount ?? 0;
  const vendors = vendorsData?.items ?? [];

  return (
    <Box className="flex flex-col gap-4 p-4">
      <VendorPosListControls
        filters={filters}
        vendors={vendors}
        totalCount={totalCount}
        isFetching={isFetching}
        isLoading={isLoading}
        onSearchChange={setSearch}
        onFilterChange={setFilter}
        onClearFilters={clearFilters}
      />
      {Boolean(error) && (
        <Alert severity="error">
          {error instanceof Error ? error.message : "Failed to load vendor POs"}
        </Alert>
      )}
      <VendorPosListTable
        rows={rows}
        isLoading={isLoading}
        onNavigate={(id) => navigate(`/vendor-pos/${id}`)}
      />
      <TablePagination
        component="div"
        count={totalCount}
        page={page}
        onPageChange={(_event, nextPage) => setPage(nextPage)}
        rowsPerPage={pageSize}
        onRowsPerPageChange={(event) => changePageSize(Number(event.target.value))}
        rowsPerPageOptions={[12, 24, 48]}
      />
    </Box>
  );
}