138 lines
3.7 KiB
TypeScript
138 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useMemo, useState } from 'react';
|
|
import { Building2, Plus } from 'lucide-react';
|
|
|
|
import { PageHeader } from '@/components/page-header';
|
|
import { PoweredBy } from '@/components/powered-by';
|
|
import { Button } from '@/components/ui/button';
|
|
import { PERMISSIONS } from '@/constants/permissions';
|
|
import { PermissionGuard } from '@/guards';
|
|
import type { Client } from '@/types';
|
|
|
|
import { useClientColumns } from './components/ClientColumns';
|
|
import { ClientFilters } from './components/ClientFilters';
|
|
import { ClientSheet } from './components/ClientSheet';
|
|
import { ClientTable } from './components/ClientTable';
|
|
import { useClientFilters } from './hooks/useClientFilters';
|
|
import { useClientForm } from './hooks/useClientForm';
|
|
import { useClientStatusMutation } from './hooks/useClientMutations';
|
|
import { useClientsQuery } from './hooks/useClientQueries';
|
|
|
|
export default function ClientsPage() {
|
|
const [isSheetOpen, setIsSheetOpen] = useState(false);
|
|
const {
|
|
skip,
|
|
setSkip,
|
|
limit,
|
|
setLimit,
|
|
sorting,
|
|
setSorting,
|
|
searchTerm,
|
|
debouncedSearchTerm,
|
|
setSearchTerm,
|
|
statusFilter,
|
|
setStatusFilter,
|
|
} = useClientFilters();
|
|
|
|
const clientsQuery = useClientsQuery({
|
|
skip,
|
|
limit,
|
|
searchTerm: debouncedSearchTerm,
|
|
statusFilter,
|
|
sorting,
|
|
});
|
|
const clientForm = useClientForm({
|
|
onSaved: () => setIsSheetOpen(false),
|
|
});
|
|
const { openCreate: prepareCreateClient, openEdit: prepareEditClient } = clientForm;
|
|
const { register, handleSubmit, clientId, isSaving } = clientForm;
|
|
const statusMutation = useClientStatusMutation();
|
|
const { mutate: updateClientStatus, pendingClientId } = statusMutation;
|
|
|
|
const openCreate = useCallback(() => {
|
|
prepareCreateClient();
|
|
setIsSheetOpen(true);
|
|
}, [prepareCreateClient]);
|
|
|
|
const openEdit = useCallback(
|
|
(client: Client) => {
|
|
prepareEditClient(client);
|
|
setIsSheetOpen(true);
|
|
},
|
|
[prepareEditClient],
|
|
);
|
|
|
|
const toggleStatus = useCallback(
|
|
(client: Client) => {
|
|
updateClientStatus(client);
|
|
},
|
|
[updateClientStatus],
|
|
);
|
|
|
|
const columns = useClientColumns({
|
|
onEdit: openEdit,
|
|
onToggleStatus: toggleStatus,
|
|
pendingClientId,
|
|
});
|
|
|
|
const total = clientsQuery.data?.total ?? 0;
|
|
const clients = clientsQuery.data?.items ?? [];
|
|
const toolbar = useMemo(
|
|
() => (
|
|
<ClientFilters
|
|
searchTerm={searchTerm}
|
|
statusFilter={statusFilter}
|
|
onSearchChange={setSearchTerm}
|
|
onStatusChange={setStatusFilter}
|
|
/>
|
|
),
|
|
[searchTerm, setSearchTerm, setStatusFilter, statusFilter],
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<main className="relative z-10 space-y-5">
|
|
<PageHeader
|
|
title="Client Management"
|
|
description="Manage client company and contact details"
|
|
icon={Building2}
|
|
actions={
|
|
<PermissionGuard permissions={PERMISSIONS.CLIENT.CREATE}>
|
|
<Button onClick={openCreate}>
|
|
<Plus className="mr-2 size-4" />
|
|
Add Client
|
|
</Button>
|
|
</PermissionGuard>
|
|
}
|
|
/>
|
|
|
|
<ClientTable
|
|
columns={columns}
|
|
clients={clients}
|
|
isLoading={clientsQuery.isLoading}
|
|
toolbar={toolbar}
|
|
skip={skip}
|
|
limit={limit}
|
|
total={total}
|
|
sorting={sorting}
|
|
onPageChange={setSkip}
|
|
onLimitChange={setLimit}
|
|
onSortingChange={setSorting}
|
|
/>
|
|
|
|
<PoweredBy />
|
|
</main>
|
|
|
|
<ClientSheet
|
|
open={isSheetOpen}
|
|
onOpenChange={setIsSheetOpen}
|
|
clientId={clientId}
|
|
register={register}
|
|
onSubmit={handleSubmit}
|
|
isSaving={isSaving}
|
|
/>
|
|
</>
|
|
);
|
|
}
|