feat: add client management module
This commit is contained in:
111
src/app/(modules)/clients/components/ClientColumns.tsx
Normal file
111
src/app/(modules)/clients/components/ClientColumns.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
import { Edit, RotateCcw } from 'lucide-react';
|
||||
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { PERMISSIONS } from '@/constants/permissions';
|
||||
import { usePermissions } from '@/hooks/usePermissions';
|
||||
import type { Client } from '@/types';
|
||||
|
||||
function formatDate(value?: string | null) {
|
||||
if (!value) return '-';
|
||||
return new Intl.DateTimeFormat('en-IN', {
|
||||
day: '2-digit',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
}).format(new Date(value));
|
||||
}
|
||||
|
||||
interface UseClientColumnsParams {
|
||||
onEdit: (client: Client) => void;
|
||||
onToggleStatus: (client: Client) => void;
|
||||
pendingClientId?: number;
|
||||
}
|
||||
|
||||
export function useClientColumns({
|
||||
onEdit,
|
||||
onToggleStatus,
|
||||
pendingClientId,
|
||||
}: UseClientColumnsParams): ColumnDef<Client>[] {
|
||||
const { hasPermission } = usePermissions();
|
||||
const canEdit = hasPermission(PERMISSIONS.CLIENT.UPDATE);
|
||||
const canDelete = hasPermission(PERMISSIONS.CLIENT.DELETE);
|
||||
|
||||
return useMemo(() => {
|
||||
const columns: ColumnDef<Client>[] = [
|
||||
{
|
||||
accessorKey: 'name',
|
||||
header: 'Client',
|
||||
cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
|
||||
},
|
||||
{
|
||||
accessorKey: 'email',
|
||||
header: 'Email',
|
||||
},
|
||||
{
|
||||
accessorKey: 'contact_name',
|
||||
header: 'Contact',
|
||||
cell: ({ row }) => (
|
||||
<div>
|
||||
<p className="font-medium">{row.original.contact_name}</p>
|
||||
<p className="text-xs text-muted-foreground">{row.original.contact_phone_number}</p>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'gst',
|
||||
header: 'GST',
|
||||
cell: ({ row }) => row.original.gst || '-',
|
||||
},
|
||||
{
|
||||
accessorKey: 'created_at',
|
||||
header: 'Created',
|
||||
cell: ({ row }) => formatDate(row.original.created_at),
|
||||
},
|
||||
{
|
||||
accessorKey: 'is_active',
|
||||
header: 'Status',
|
||||
cell: ({ row }) => (
|
||||
<Badge variant={row.original.is_active ? 'default' : 'secondary'}>
|
||||
{row.original.is_active ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
if (!canEdit && !canDelete) return columns;
|
||||
|
||||
columns.push({
|
||||
id: 'actions',
|
||||
header: () => <div className="text-right">Actions</div>,
|
||||
cell: ({ row }) => {
|
||||
const client = row.original;
|
||||
return (
|
||||
<div className="flex justify-end gap-2">
|
||||
{canEdit ? (
|
||||
<Button variant="outline" size="sm" onClick={() => onEdit(client)}>
|
||||
<Edit className="size-4" />
|
||||
</Button>
|
||||
) : null}
|
||||
{canDelete ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={pendingClientId === client.id}
|
||||
onClick={() => onToggleStatus(client)}
|
||||
>
|
||||
<RotateCcw className="mr-2 size-4" />
|
||||
{client.is_active ? 'Deactivate' : 'Activate'}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
return columns;
|
||||
}, [canDelete, canEdit, onEdit, onToggleStatus, pendingClientId]);
|
||||
}
|
||||
49
src/app/(modules)/clients/components/ClientFilters.tsx
Normal file
49
src/app/(modules)/clients/components/ClientFilters.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
'use client';
|
||||
|
||||
import { Input } from '@/components/ui/input';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import type { ClientStatusFilter } from '../hooks/useClientFilters';
|
||||
|
||||
interface ClientFiltersProps {
|
||||
searchTerm: string;
|
||||
statusFilter: ClientStatusFilter;
|
||||
onSearchChange: (value: string) => void;
|
||||
onStatusChange: (value: ClientStatusFilter) => void;
|
||||
}
|
||||
|
||||
export function ClientFilters({
|
||||
searchTerm,
|
||||
statusFilter,
|
||||
onSearchChange,
|
||||
onStatusChange,
|
||||
}: ClientFiltersProps) {
|
||||
return (
|
||||
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||
<Input
|
||||
value={searchTerm}
|
||||
onChange={(event) => onSearchChange(event.target.value)}
|
||||
placeholder="Search clients"
|
||||
className="md:max-w-sm"
|
||||
/>
|
||||
<Select
|
||||
value={statusFilter}
|
||||
onValueChange={(value) => onStatusChange(value as ClientStatusFilter)}
|
||||
>
|
||||
<SelectTrigger className="md:w-44">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All status</SelectItem>
|
||||
<SelectItem value="active">Active</SelectItem>
|
||||
<SelectItem value="inactive">Inactive</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
152
src/app/(modules)/clients/components/ClientSheet.tsx
Normal file
152
src/app/(modules)/clients/components/ClientSheet.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
'use client';
|
||||
|
||||
import type { ComponentProps } from 'react';
|
||||
import type { UseFormRegister } from 'react-hook-form';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import type { ClientFormValues } from '../hooks/useClientForm';
|
||||
|
||||
interface ClientSheetProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
clientId?: number;
|
||||
register: UseFormRegister<ClientFormValues>;
|
||||
onSubmit: ComponentProps<'form'>['onSubmit'];
|
||||
isSaving: boolean;
|
||||
}
|
||||
|
||||
export function ClientSheet({
|
||||
open,
|
||||
onOpenChange,
|
||||
clientId,
|
||||
register,
|
||||
onSubmit,
|
||||
isSaving,
|
||||
}: ClientSheetProps) {
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-h-[calc(100vh-2rem)] overflow-y-auto sm:max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{clientId ? 'Edit Client' : 'Create Client'}</DialogTitle>
|
||||
<DialogDescription>Manage company and primary contact details.</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form onSubmit={onSubmit} className="flex flex-1 flex-col gap-5 px-4">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="client-name">Name</Label>
|
||||
<Input
|
||||
id="client-name"
|
||||
placeholder="Acme Corp"
|
||||
{...register('name', { required: true })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="client-email">Email</Label>
|
||||
<Input
|
||||
id="client-email"
|
||||
type="email"
|
||||
placeholder="info@acme.com"
|
||||
{...register('email', { required: true })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="landline-number">Landline Number</Label>
|
||||
<Input
|
||||
id="landline-number"
|
||||
placeholder="+91-22-12345678"
|
||||
{...register('landline_number', { required: true })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="address">Address</Label>
|
||||
<Input
|
||||
id="address"
|
||||
placeholder="12 MG Road, Mumbai, MH 400001"
|
||||
{...register('address', { required: true })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="gst">GST</Label>
|
||||
<Input id="gst" placeholder="27ABCDE1234F1Z5" {...register('gst')} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="pan">PAN</Label>
|
||||
<Input id="pan" placeholder="ABCDE1234F" {...register('pan')} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tan">TAN</Label>
|
||||
<Input id="tan" placeholder="MUMA12345B" {...register('tan')} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="contact-name">Contact Name</Label>
|
||||
<Input
|
||||
id="contact-name"
|
||||
placeholder="Jane Doe"
|
||||
{...register('contact_name', { required: true })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="contact-phone-number">Contact Phone</Label>
|
||||
<Input
|
||||
id="contact-phone-number"
|
||||
placeholder="+91-9876543210"
|
||||
{...register('contact_phone_number', { required: true })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="contact-email">Contact Email</Label>
|
||||
<Input
|
||||
id="contact-email"
|
||||
type="email"
|
||||
placeholder="jane.doe@acme.com"
|
||||
{...register('contact_email', { required: true })}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="px-0">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => onOpenChange(false)}
|
||||
disabled={isSaving}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSaving}>
|
||||
{isSaving ? <Loader2 className="mr-2 size-4 animate-spin" /> : null}
|
||||
{clientId ? 'Update Client' : 'Create Client'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
47
src/app/(modules)/clients/components/ClientTable.tsx
Normal file
47
src/app/(modules)/clients/components/ClientTable.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
'use client';
|
||||
|
||||
import type { ReactNode } from 'react';
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
|
||||
import { DataTable } from '@/components/data-table';
|
||||
import type { Client } from '@/types';
|
||||
|
||||
interface ClientTableProps {
|
||||
columns: ColumnDef<Client>[];
|
||||
clients: Client[];
|
||||
isLoading: boolean;
|
||||
toolbar: ReactNode;
|
||||
skip: number;
|
||||
limit: number;
|
||||
total: number;
|
||||
onPageChange: (skip: number) => void;
|
||||
}
|
||||
|
||||
export function ClientTable({
|
||||
columns,
|
||||
clients,
|
||||
isLoading,
|
||||
toolbar,
|
||||
skip,
|
||||
limit,
|
||||
total,
|
||||
onPageChange,
|
||||
}: ClientTableProps) {
|
||||
return (
|
||||
<DataTable
|
||||
title="Clients"
|
||||
columns={columns}
|
||||
data={clients}
|
||||
isLoading={isLoading}
|
||||
toolbar={toolbar}
|
||||
emptyTitle="No clients found."
|
||||
pagination={{
|
||||
skip,
|
||||
limit,
|
||||
totalItems: total,
|
||||
onPageChange,
|
||||
onLimitChange: () => undefined,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
36
src/app/(modules)/clients/hooks/useClientFilters.ts
Normal file
36
src/app/(modules)/clients/hooks/useClientFilters.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback, useState } from 'react';
|
||||
|
||||
import { useDebounce } from '@/hooks/useDebounce';
|
||||
|
||||
export type ClientStatusFilter = 'all' | 'active' | 'inactive';
|
||||
|
||||
export function useClientFilters() {
|
||||
const [skip, setSkip] = useState(0);
|
||||
const [limit] = useState(10);
|
||||
const [searchTerm, setSearchTermValue] = useState('');
|
||||
const [statusFilter, setStatusFilterValue] = useState<ClientStatusFilter>('all');
|
||||
const debouncedSearchTerm = useDebounce(searchTerm.trim(), 400);
|
||||
|
||||
const setSearchTerm = useCallback((value: string) => {
|
||||
setSearchTermValue(value);
|
||||
setSkip(0);
|
||||
}, []);
|
||||
|
||||
const setStatusFilter = useCallback((value: ClientStatusFilter) => {
|
||||
setStatusFilterValue(value);
|
||||
setSkip(0);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
skip,
|
||||
setSkip,
|
||||
limit,
|
||||
searchTerm,
|
||||
debouncedSearchTerm,
|
||||
setSearchTerm,
|
||||
statusFilter,
|
||||
setStatusFilter,
|
||||
};
|
||||
}
|
||||
109
src/app/(modules)/clients/hooks/useClientForm.ts
Normal file
109
src/app/(modules)/clients/hooks/useClientForm.ts
Normal file
@@ -0,0 +1,109 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback } from 'react';
|
||||
import { useForm, useWatch } from 'react-hook-form';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import type { Client } from '@/types';
|
||||
import { useSaveClientMutation } from './useClientMutations';
|
||||
|
||||
export interface ClientFormValues {
|
||||
id?: number;
|
||||
name: string;
|
||||
email: string;
|
||||
landline_number: string;
|
||||
address: string;
|
||||
gst: string;
|
||||
pan: string;
|
||||
tan: string;
|
||||
contact_name: string;
|
||||
contact_phone_number: string;
|
||||
contact_email: string;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
const defaultValues: ClientFormValues = {
|
||||
name: '',
|
||||
email: '',
|
||||
landline_number: '',
|
||||
address: '',
|
||||
gst: '',
|
||||
pan: '',
|
||||
tan: '',
|
||||
contact_name: '',
|
||||
contact_phone_number: '',
|
||||
contact_email: '',
|
||||
is_active: true,
|
||||
};
|
||||
|
||||
export function useClientForm({ onSaved }: { onSaved: () => void }) {
|
||||
const {
|
||||
register,
|
||||
handleSubmit: submitForm,
|
||||
reset,
|
||||
control,
|
||||
formState: { isSubmitting, errors },
|
||||
} = useForm<ClientFormValues>({
|
||||
defaultValues,
|
||||
});
|
||||
const saveMutation = useSaveClientMutation({
|
||||
onSaved: () => {
|
||||
reset(defaultValues);
|
||||
onSaved();
|
||||
},
|
||||
});
|
||||
|
||||
const clientId = useWatch({ control, name: 'id' });
|
||||
|
||||
const handleSubmit = submitForm(
|
||||
(values) => saveMutation.mutate(values),
|
||||
(formErrors) => {
|
||||
if (
|
||||
formErrors.name ||
|
||||
formErrors.email ||
|
||||
formErrors.landline_number ||
|
||||
formErrors.address ||
|
||||
formErrors.contact_name ||
|
||||
formErrors.contact_phone_number ||
|
||||
formErrors.contact_email
|
||||
) {
|
||||
toast.error('Complete all required client fields');
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const openCreate = useCallback(() => {
|
||||
reset(defaultValues);
|
||||
}, [reset]);
|
||||
|
||||
const openEdit = useCallback(
|
||||
(client: Client) => {
|
||||
reset({
|
||||
id: client.id,
|
||||
name: client.name || '',
|
||||
email: client.email || '',
|
||||
landline_number: client.landline_number || '',
|
||||
address: client.address || '',
|
||||
gst: client.gst || '',
|
||||
pan: client.pan || '',
|
||||
tan: client.tan || '',
|
||||
contact_name: client.contact_name || '',
|
||||
contact_phone_number: client.contact_phone_number || '',
|
||||
contact_email: client.contact_email || '',
|
||||
is_active: client.is_active,
|
||||
});
|
||||
},
|
||||
[reset],
|
||||
);
|
||||
|
||||
return {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
openCreate,
|
||||
openEdit,
|
||||
clientId,
|
||||
errors,
|
||||
isSaving: isSubmitting || saveMutation.isPending,
|
||||
};
|
||||
}
|
||||
61
src/app/(modules)/clients/hooks/useClientMutations.ts
Normal file
61
src/app/(modules)/clients/hooks/useClientMutations.ts
Normal file
@@ -0,0 +1,61 @@
|
||||
'use client';
|
||||
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import { clientService } from '@/services/api';
|
||||
import type { Client } from '@/types';
|
||||
import { clientKeys } from '../queries/clientKeys';
|
||||
import type { ClientFormValues } from './useClientForm';
|
||||
|
||||
function optionalValue(value: string) {
|
||||
const trimmed = value.trim();
|
||||
return trimmed ? trimmed : null;
|
||||
}
|
||||
|
||||
export function useSaveClientMutation({ onSaved }: { onSaved: () => void }) {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (values: ClientFormValues) =>
|
||||
clientService.saveClient({
|
||||
id: values.id,
|
||||
name: values.name.trim(),
|
||||
email: values.email.trim(),
|
||||
landline_number: values.landline_number.trim(),
|
||||
address: values.address.trim(),
|
||||
gst: optionalValue(values.gst),
|
||||
pan: optionalValue(values.pan),
|
||||
tan: optionalValue(values.tan),
|
||||
contact_name: values.contact_name.trim(),
|
||||
contact_phone_number: values.contact_phone_number.trim(),
|
||||
contact_email: values.contact_email.trim(),
|
||||
is_active: values.is_active,
|
||||
}),
|
||||
onSuccess: (_data, values) => {
|
||||
toast.success(values.id ? 'Client updated' : 'Client created');
|
||||
onSaved();
|
||||
queryClient.invalidateQueries({ queryKey: clientKeys.all });
|
||||
},
|
||||
onError: (_error, values) => {
|
||||
toast.error(values.id ? 'Failed to update client' : 'Failed to create client');
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function useClientStatusMutation() {
|
||||
const queryClient = useQueryClient();
|
||||
const mutation = useMutation({
|
||||
mutationFn: (client: Client) => clientService.updateClientStatus(client.id, !client.is_active),
|
||||
onSuccess: () => {
|
||||
toast.success('Client status updated');
|
||||
queryClient.invalidateQueries({ queryKey: clientKeys.all });
|
||||
},
|
||||
onError: () => toast.error('Failed to update client status'),
|
||||
});
|
||||
|
||||
return {
|
||||
...mutation,
|
||||
pendingClientId: mutation.isPending ? mutation.variables?.id : undefined,
|
||||
};
|
||||
}
|
||||
45
src/app/(modules)/clients/hooks/useClientQueries.ts
Normal file
45
src/app/(modules)/clients/hooks/useClientQueries.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
|
||||
import { clientService } from '@/services/api';
|
||||
import type { ClientListParams } from '@/types';
|
||||
import { clientKeys } from '../queries/clientKeys';
|
||||
import type { ClientStatusFilter } from './useClientFilters';
|
||||
|
||||
interface UseClientsQueryParams {
|
||||
skip: number;
|
||||
limit: number;
|
||||
searchTerm: string;
|
||||
statusFilter: ClientStatusFilter;
|
||||
}
|
||||
|
||||
function buildClientListParams({
|
||||
skip,
|
||||
limit,
|
||||
searchTerm,
|
||||
statusFilter,
|
||||
}: UseClientsQueryParams): ClientListParams {
|
||||
return {
|
||||
skip,
|
||||
limit,
|
||||
search_term: searchTerm || undefined,
|
||||
is_active: statusFilter === 'all' ? undefined : statusFilter === 'active',
|
||||
sort_by: 'created_at',
|
||||
sort_order: 'desc',
|
||||
};
|
||||
}
|
||||
|
||||
export function useClientsQuery(params: UseClientsQueryParams) {
|
||||
const { skip, limit, searchTerm, statusFilter } = params;
|
||||
const listParams = useMemo(
|
||||
() => buildClientListParams({ skip, limit, searchTerm, statusFilter }),
|
||||
[limit, searchTerm, skip, statusFilter],
|
||||
);
|
||||
|
||||
return useQuery({
|
||||
queryKey: clientKeys.list(listParams),
|
||||
queryFn: () => clientService.getClients(listParams),
|
||||
});
|
||||
}
|
||||
130
src/app/(modules)/clients/page.tsx
Normal file
130
src/app/(modules)/clients/page.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
'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,
|
||||
searchTerm,
|
||||
debouncedSearchTerm,
|
||||
setSearchTerm,
|
||||
statusFilter,
|
||||
setStatusFilter,
|
||||
} = useClientFilters();
|
||||
|
||||
const clientsQuery = useClientsQuery({
|
||||
skip,
|
||||
limit,
|
||||
searchTerm: debouncedSearchTerm,
|
||||
statusFilter,
|
||||
});
|
||||
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}
|
||||
onPageChange={setSkip}
|
||||
/>
|
||||
|
||||
<PoweredBy />
|
||||
</main>
|
||||
|
||||
<ClientSheet
|
||||
open={isSheetOpen}
|
||||
onOpenChange={setIsSheetOpen}
|
||||
clientId={clientId}
|
||||
register={register}
|
||||
onSubmit={handleSubmit}
|
||||
isSaving={isSaving}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
7
src/app/(modules)/clients/queries/clientKeys.ts
Normal file
7
src/app/(modules)/clients/queries/clientKeys.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import type { ClientListParams } from '@/types';
|
||||
|
||||
export const clientKeys = {
|
||||
all: ['clients'] as const,
|
||||
lists: () => [...clientKeys.all, 'list'] as const,
|
||||
list: (params: ClientListParams) => [...clientKeys.lists(), params] as const,
|
||||
};
|
||||
@@ -15,6 +15,10 @@ export const appRoutes: AppRoute[] = [
|
||||
path: ROUTES.USERS,
|
||||
permission: PERMISSIONS.USER.READ,
|
||||
},
|
||||
{
|
||||
path: ROUTES.CLIENTS,
|
||||
permission: PERMISSIONS.CLIENT.READ,
|
||||
},
|
||||
];
|
||||
|
||||
export function getRoutePermission(pathname: string) {
|
||||
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
Settings,
|
||||
ShieldCheck,
|
||||
Users,
|
||||
Building2,
|
||||
} from 'lucide-react';
|
||||
import type { ComponentType, SVGProps } from 'react';
|
||||
|
||||
@@ -63,6 +64,12 @@ export const menuItems: MenuItem[] = [
|
||||
icon: Users,
|
||||
permission: PERMISSIONS.USER.READ,
|
||||
},
|
||||
{
|
||||
title: 'Clients',
|
||||
path: ROUTES.CLIENTS,
|
||||
icon: Building2,
|
||||
permission: PERMISSIONS.CLIENT.READ,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export const PERMISSIONS = {
|
||||
ROLE: {
|
||||
CREATE: 'administration.roles.create',
|
||||
READ: 'administration.roles.reads',
|
||||
READ: 'administration.roles.read',
|
||||
UPDATE: 'administration.roles.update',
|
||||
DELETE: 'administration.roles.delete',
|
||||
},
|
||||
@@ -11,6 +11,12 @@ export const PERMISSIONS = {
|
||||
UPDATE: 'administration.users.update',
|
||||
DELETE: 'administration.users.delete',
|
||||
},
|
||||
CLIENT: {
|
||||
CREATE: 'administration.client.create',
|
||||
READ: 'administration.client.read',
|
||||
UPDATE: 'administration.client.update',
|
||||
DELETE: 'administration.client.delete',
|
||||
},
|
||||
LOG: {
|
||||
VIEW: 'log.view',
|
||||
},
|
||||
|
||||
54
src/services/api/client.service.ts
Normal file
54
src/services/api/client.service.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import axiosClient from '../axios/axios';
|
||||
import type { Client, ClientListParams, ClientListResponse, ClientRequest } from '@/types';
|
||||
|
||||
const CLIENTS_ENDPOINT = 'api/clients';
|
||||
|
||||
function toClientPayload(payload: ClientRequest) {
|
||||
return {
|
||||
name: payload.name,
|
||||
email: payload.email,
|
||||
landline_number: payload.landline_number,
|
||||
address: payload.address,
|
||||
gst: payload.gst ?? null,
|
||||
pan: payload.pan ?? null,
|
||||
tan: payload.tan ?? null,
|
||||
contact_name: payload.contact_name,
|
||||
contact_phone_number: payload.contact_phone_number,
|
||||
contact_email: payload.contact_email,
|
||||
is_active: payload.is_active ?? true,
|
||||
};
|
||||
}
|
||||
|
||||
export const clientService = {
|
||||
getClients: async (params?: ClientListParams): Promise<ClientListResponse> => {
|
||||
const response = await axiosClient.get<ClientListResponse>(CLIENTS_ENDPOINT, {
|
||||
params: {
|
||||
skip: params?.skip ?? 0,
|
||||
limit: params?.limit ?? 10,
|
||||
search_term: params?.search_term,
|
||||
name: params?.name,
|
||||
email: params?.email,
|
||||
contact_name: params?.contact_name,
|
||||
is_active: params?.is_active,
|
||||
sort_by: params?.sort_by,
|
||||
sort_order: params?.sort_order,
|
||||
},
|
||||
});
|
||||
return response.data;
|
||||
},
|
||||
|
||||
saveClient: async (payload: ClientRequest): Promise<Client> => {
|
||||
const requestPayload = toClientPayload(payload);
|
||||
const response = payload.id
|
||||
? await axiosClient.put<Client>(`${CLIENTS_ENDPOINT}/${payload.id}`, requestPayload)
|
||||
: await axiosClient.post<Client>(CLIENTS_ENDPOINT, requestPayload);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
updateClientStatus: async (id: number, isActive: boolean): Promise<Client> => {
|
||||
const response = await axiosClient.patch<Client>(`${CLIENTS_ENDPOINT}/${id}/status`, {
|
||||
is_active: isActive,
|
||||
});
|
||||
return response.data;
|
||||
},
|
||||
};
|
||||
@@ -9,3 +9,4 @@ export { projectDataService } from './project.service';
|
||||
export * from './permission.service';
|
||||
export * from './role.service';
|
||||
export * from './user.service';
|
||||
export * from './client.service';
|
||||
|
||||
50
src/types/client.ts
Normal file
50
src/types/client.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
import type { PaginationParams } from './common';
|
||||
|
||||
export interface Client {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
landline_number: string;
|
||||
address: string;
|
||||
gst: string | null;
|
||||
pan: string | null;
|
||||
tan: string | null;
|
||||
contact_name: string;
|
||||
contact_phone_number: string;
|
||||
contact_email: string;
|
||||
is_active: boolean;
|
||||
created_at: string;
|
||||
updated_at: string | null;
|
||||
}
|
||||
|
||||
export interface ClientRequest {
|
||||
id?: number;
|
||||
name: string;
|
||||
email: string;
|
||||
landline_number: string;
|
||||
address: string;
|
||||
gst?: string | null;
|
||||
pan?: string | null;
|
||||
tan?: string | null;
|
||||
contact_name: string;
|
||||
contact_phone_number: string;
|
||||
contact_email: string;
|
||||
is_active?: boolean;
|
||||
}
|
||||
|
||||
export interface ClientListParams extends PaginationParams {
|
||||
search_term?: string;
|
||||
name?: string;
|
||||
email?: string;
|
||||
contact_name?: string;
|
||||
is_active?: boolean;
|
||||
sort_by?: string;
|
||||
sort_order?: string;
|
||||
}
|
||||
|
||||
export interface ClientListResponse {
|
||||
items: Client[];
|
||||
total: number;
|
||||
active_count?: number;
|
||||
inactive_count?: number;
|
||||
}
|
||||
@@ -10,3 +10,4 @@ export * from './auth.type';
|
||||
export * from './permission';
|
||||
export * from './role';
|
||||
export * from './user';
|
||||
export * from './client';
|
||||
|
||||
@@ -6,6 +6,7 @@ export const ROUTES = {
|
||||
CHAINAGE: '/segment',
|
||||
ROLES: '/roles',
|
||||
USERS: '/users',
|
||||
CLIENTS: '/clients',
|
||||
ACCESS: '/access',
|
||||
ACCOUNT: '/account',
|
||||
UPLOAD: '/upload',
|
||||
|
||||
Reference in New Issue
Block a user