feat: add client management module

src/app/(modules)/clients/components/ClientSheet.tsx

@@ -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>
+  );
+}