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,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user