Initial commit for new panel
This commit is contained in:
AmirReza Jamali
@@ -0,0 +1,43 @@
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
|
||||
export function CustomersSkeleton() {
|
||||
return (
|
||||
<div className="rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
|
||||
<h2 className="mb-5.5 text-body-2xlg font-bold text-dark dark:text-white">
|
||||
Tenders
|
||||
</h2>
|
||||
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="border-none uppercase [&>th]:text-center">
|
||||
<TableHead className="uppercase">full name</TableHead>
|
||||
<TableHead className="uppercase">email</TableHead>
|
||||
<TableHead className="uppercase">created at</TableHead>
|
||||
<TableHead className="uppercase">type</TableHead>
|
||||
<TableHead className="uppercase">status</TableHead>
|
||||
<TableHead className="uppercase">company</TableHead>
|
||||
<TableHead className="uppercase">actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<TableRow key={i}>
|
||||
<TableCell colSpan={100}>
|
||||
<Skeleton className="h-8" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import { CustomersSkeleton } from "./Skeleton";
|
||||
import useCustomerListPresenter from "./useCustomerListPresenter";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
|
||||
import ConfirmationModal from "@/components/ui/ConfirmationModal";
|
||||
const CustomersTable = () => {
|
||||
const {
|
||||
isPending,
|
||||
pathName,
|
||||
router,
|
||||
columns,
|
||||
allCustomers,
|
||||
modalConfig,
|
||||
isModalOpen,
|
||||
setIsModalOpen,
|
||||
onConfirmDelete,
|
||||
setCurrentCustomer,
|
||||
} = useCustomerListPresenter();
|
||||
if (isPending) return <CustomersSkeleton />;
|
||||
return (
|
||||
<div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
|
||||
<button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
|
||||
<Link href={`${pathName}/create`}>Create Company</Link>
|
||||
</button>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{columns.map((columns) => (
|
||||
<TableHead
|
||||
colSpan={100}
|
||||
className="text-start font-extrabold uppercase"
|
||||
key={columns}
|
||||
>
|
||||
{columns}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{allCustomers.map((customer, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell colSpan={100}>{customer.full_name}</TableCell>
|
||||
<TableCell colSpan={100}>{customer.email}</TableCell>
|
||||
<TableCell colSpan={100}>{customer.created_at}</TableCell>
|
||||
<TableCell colSpan={100}>{customer.type}</TableCell>
|
||||
<TableCell colSpan={100}>{customer.status}</TableCell>
|
||||
<TableCell colSpan={100}>
|
||||
{customer.companies?.length ? (
|
||||
customer.companies.map((c) => <span>{c.name}, </span>)
|
||||
) : (
|
||||
<span>None</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-start xl:pr-7.5">
|
||||
<div className="flex items-center justify-start gap-x-3.5">
|
||||
<button
|
||||
className="hover:text-red-500"
|
||||
onClick={() => {
|
||||
setCurrentCustomer(customer);
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<span className="sr-only">Delete Company </span>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
<button
|
||||
className="hover:text-primary"
|
||||
onClick={() =>
|
||||
router.push(`${pathName}/edit/${customer.id}`)
|
||||
}
|
||||
>
|
||||
<span className="sr-only">Edit Company </span>
|
||||
<PencilSquareIcon />
|
||||
</button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
{isModalOpen && (
|
||||
<ConfirmationModal
|
||||
isOpen={isModalOpen}
|
||||
title={modalConfig.title || "Confirm"}
|
||||
message={modalConfig.message || "Are you sure?"}
|
||||
variant={modalConfig.variant || "default"}
|
||||
size={modalConfig.size || "md"}
|
||||
confirmText={modalConfig.confirmText ?? "Confirm"}
|
||||
cancelText={modalConfig.cancelText ?? "Cancel"}
|
||||
onConfirm={() => {
|
||||
onConfirmDelete();
|
||||
}}
|
||||
onCancel={() => setIsModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomersTable;
|
||||
@@ -0,0 +1,115 @@
|
||||
"use client";
|
||||
|
||||
import { ConfirmationModalProps } from "@/components/ui/ConfirmationModal";
|
||||
import {
|
||||
useAssignCompany,
|
||||
useCustomersInfiniteQuery,
|
||||
useDeleteCustomerQuery,
|
||||
} from "@/hooks/queries";
|
||||
import useDebounce from "@/hooks/useDebounce";
|
||||
import { TAssignCustomerToCompanyCredentials, TCustomer } from "@/lib/api";
|
||||
import { usePathname, useRouter } from "next/navigation";
|
||||
import { ChangeEvent, useEffect, useRef, useState } from "react";
|
||||
import { useInView } from "react-intersection-observer";
|
||||
import { z } from "zod";
|
||||
|
||||
const useCustomerListPresenter = () => {
|
||||
const deleteModal = useRef<HTMLDialogElement | null>(null);
|
||||
const assignToCompanyModal = useRef<HTMLDialogElement | null>(null);
|
||||
const { inView } = useInView({ threshold: 0.5 });
|
||||
const [selectedCompanies, setSelectedCompanies] =
|
||||
useState<TAssignCustomerToCompanyCredentials | null>(null);
|
||||
const [currentCustomer, setCurrentCustomer] = useState<TCustomer | null>(
|
||||
null,
|
||||
);
|
||||
const [modalConfig, setModalConfig] = useState<
|
||||
Partial<ConfirmationModalProps>
|
||||
>({});
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const pathName = usePathname();
|
||||
const [search, setSearch] = useState("");
|
||||
const [params, setParams] = useState<Record<string, any>>({
|
||||
sort: "created_at",
|
||||
});
|
||||
const router = useRouter();
|
||||
const debouncedSearch = useDebounce(search, 1000);
|
||||
const {
|
||||
data,
|
||||
error,
|
||||
isPending,
|
||||
isError,
|
||||
fetchNextPage,
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
} = useCustomersInfiniteQuery(params);
|
||||
useEffect(() => {
|
||||
if (inView && hasNextPage && data && data.pages.length < 5) {
|
||||
fetchNextPage();
|
||||
}
|
||||
}, [inView, hasNextPage, data, fetchNextPage]);
|
||||
const { mutate: deleteCustomer } = useDeleteCustomerQuery(() =>
|
||||
setIsModalOpen(false),
|
||||
);
|
||||
const { mutate: assignSelectedCompanies } = useAssignCompany(
|
||||
currentCustomer?.id ?? "",
|
||||
() => {
|
||||
assignToCompanyModal.current?.close();
|
||||
},
|
||||
);
|
||||
useEffect(() => {
|
||||
const result = z.string().safeParse(debouncedSearch);
|
||||
if (result.success) {
|
||||
setParams((prevParams) => ({
|
||||
...prevParams,
|
||||
}));
|
||||
}
|
||||
}, [debouncedSearch]);
|
||||
const handleFilterChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||
setSearch(e.target.value);
|
||||
};
|
||||
const columns = [
|
||||
"full name",
|
||||
"email",
|
||||
"created at",
|
||||
"type",
|
||||
"status",
|
||||
"company",
|
||||
"actions",
|
||||
];
|
||||
const onConfirmDelete = () => {
|
||||
if (currentCustomer) {
|
||||
deleteCustomer(currentCustomer.id);
|
||||
}
|
||||
};
|
||||
const customers = data?.pages.flatMap((page) => page.data.customers) ?? [];
|
||||
return {
|
||||
hasNextPage,
|
||||
fetchNextPage,
|
||||
allCustomers: customers,
|
||||
currentCustomer,
|
||||
deleteCustomer,
|
||||
deleteModal,
|
||||
error,
|
||||
handleFilterChange,
|
||||
isError,
|
||||
isFetchingNextPage,
|
||||
columns,
|
||||
data,
|
||||
isPending,
|
||||
search,
|
||||
setCurrentCustomer,
|
||||
selectedCompanies,
|
||||
setSelectedCompanies,
|
||||
onConfirmDelete,
|
||||
assignToCompanyModal,
|
||||
assignSelectedCompanies,
|
||||
pathName,
|
||||
router,
|
||||
modalConfig,
|
||||
setModalConfig,
|
||||
isModalOpen,
|
||||
setIsModalOpen,
|
||||
};
|
||||
};
|
||||
|
||||
export default useCustomerListPresenter;
|
||||
Reference in New Issue
Block a user