admin
295 lines
12 KiB
TypeScript
295 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { useQuery, useMutation } from '@tanstack/react-query';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { z } from 'zod';
|
|
|
|
import { circulationService } from '@/lib/services/circulation.service';
|
|
import { userService } from '@/lib/services/user.service';
|
|
import { correspondenceService } from '@/lib/services/correspondence.service';
|
|
import { CreateCirculationDto } from '@/types/circulation';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
|
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command';
|
|
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { ArrowLeft, Check, ChevronsUpDown, X } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { toast } from 'sonner';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
// Force dynamic rendering to prevent build-time prerendering issues
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
// Ensure this page is never statically generated
|
|
export const fetchCache = 'force-no-store';
|
|
|
|
// Form validation schema
|
|
const formSchema = z.object({
|
|
correspondenceId: z.string().min(1, 'Please select a document'),
|
|
subject: z.string().min(1, 'Subject is required'),
|
|
assigneeIds: z.array(z.string()).min(1, 'At least one assignee is required'),
|
|
remarks: z.string().optional(),
|
|
});
|
|
|
|
type FormData = z.infer<typeof formSchema>;
|
|
|
|
export default function CreateCirculationPage() {
|
|
const router = useRouter();
|
|
const [assigneeOpen, setAssigneeOpen] = useState(false);
|
|
const [docOpen, setDocOpen] = useState(false);
|
|
|
|
const form = useForm<FormData>({
|
|
resolver: zodResolver(formSchema),
|
|
defaultValues: {
|
|
subject: '',
|
|
assigneeIds: [],
|
|
remarks: '',
|
|
},
|
|
});
|
|
|
|
// Fetch users for assignee selection
|
|
const { data: users = [] } = useQuery({
|
|
queryKey: ['users'],
|
|
queryFn: () => userService.getAll(),
|
|
});
|
|
|
|
// Fetch correspondences for document selection
|
|
const { data: correspondences } = useQuery({
|
|
queryKey: ['correspondences-dropdown'],
|
|
queryFn: () => correspondenceService.getAll({ limit: 100 }),
|
|
});
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: (data: CreateCirculationDto) => circulationService.create(data),
|
|
onSuccess: (result) => {
|
|
toast.success('Circulation created successfully');
|
|
router.push(`/circulation/${result.publicId}`);
|
|
},
|
|
onError: () => {
|
|
toast.error('Failed to create circulation');
|
|
},
|
|
});
|
|
|
|
const onSubmit = (data: FormData) => {
|
|
createMutation.mutate(data);
|
|
};
|
|
|
|
const selectedAssignees = form.watch('assigneeIds');
|
|
const selectedDocId = form.watch('correspondenceId');
|
|
|
|
const selectedDoc = correspondences?.data?.find((c: { publicId: string }) => c.publicId === selectedDocId);
|
|
|
|
const toggleAssignee = (userUuid: string) => {
|
|
const current = form.getValues('assigneeIds');
|
|
if (current.includes(userUuid)) {
|
|
form.setValue(
|
|
'assigneeIds',
|
|
current.filter((id) => id !== userUuid)
|
|
);
|
|
} else {
|
|
form.setValue('assigneeIds', [...current, userUuid]);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section className="space-y-6 max-w-2xl">
|
|
{/* Header */}
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/circulation">
|
|
<Button variant="ghost" size="icon">
|
|
<ArrowLeft className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
<div>
|
|
<h1 className="text-2xl font-bold">Create Circulation</h1>
|
|
<p className="text-muted-foreground">Create a new internal document circulation</p>
|
|
</div>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Circulation Details</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
|
|
{/* Document Selection */}
|
|
<FormField
|
|
control={form.control}
|
|
name="correspondenceId"
|
|
render={({ field }) => (
|
|
<FormItem className="flex flex-col">
|
|
<FormLabel>Document</FormLabel>
|
|
<Popover open={docOpen} onOpenChange={setDocOpen}>
|
|
<PopoverTrigger asChild>
|
|
<FormControl>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
className={cn('justify-between', !field.value && 'text-muted-foreground')}
|
|
>
|
|
{selectedDoc ? selectedDoc.correspondenceNumber : 'Select document...'}
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</FormControl>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-full p-0">
|
|
<Command>
|
|
<CommandInput placeholder="Search documents..." />
|
|
<CommandList>
|
|
<CommandEmpty>No document found.</CommandEmpty>
|
|
<CommandGroup>
|
|
{correspondences?.data?.map((doc: { publicId: string; correspondenceNumber: string }) => (
|
|
<CommandItem
|
|
key={doc.publicId}
|
|
value={doc.correspondenceNumber}
|
|
onSelect={() => {
|
|
form.setValue('correspondenceId', doc.publicId);
|
|
setDocOpen(false);
|
|
}}
|
|
>
|
|
<Check
|
|
className={cn(
|
|
'mr-2 h-4 w-4',
|
|
doc.publicId === field.value ? 'opacity-100' : 'opacity-0'
|
|
)}
|
|
/>
|
|
{doc.correspondenceNumber}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
{/* Subject */}
|
|
<FormField
|
|
control={form.control}
|
|
name="subject"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Subject</FormLabel>
|
|
<FormControl>
|
|
<Input placeholder="Enter circulation subject" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
{/* Assignees Multi-select */}
|
|
<FormField
|
|
control={form.control}
|
|
name="assigneeIds"
|
|
render={({ field: _field }) => (
|
|
<FormItem className="flex flex-col">
|
|
<FormLabel>Assignees</FormLabel>
|
|
<Popover open={assigneeOpen} onOpenChange={setAssigneeOpen}>
|
|
<PopoverTrigger asChild>
|
|
<FormControl>
|
|
<Button variant="outline" role="combobox" className="justify-between h-auto min-h-10">
|
|
{selectedAssignees.length > 0 ? (
|
|
<div className="flex flex-wrap gap-1">
|
|
{selectedAssignees.map((userUuid) => {
|
|
const user = users.find((u) => u.publicId === userUuid);
|
|
return user ? (
|
|
<Badge key={userUuid} variant="secondary" className="mr-1">
|
|
{user.firstName || user.username}
|
|
<X
|
|
className="ml-1 h-3 w-3 cursor-pointer"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
toggleAssignee(userUuid);
|
|
}}
|
|
/>
|
|
</Badge>
|
|
) : null;
|
|
})}
|
|
</div>
|
|
) : (
|
|
<span className="text-muted-foreground">Select assignees...</span>
|
|
)}
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</FormControl>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-full p-0">
|
|
<Command>
|
|
<CommandInput placeholder="Search users..." />
|
|
<CommandList>
|
|
<CommandEmpty>No user found.</CommandEmpty>
|
|
<CommandGroup>
|
|
{users.map((user) => (
|
|
<CommandItem
|
|
key={user.publicId}
|
|
value={user.username}
|
|
onSelect={() => toggleAssignee(user.publicId)}
|
|
>
|
|
<Check
|
|
className={cn(
|
|
'mr-2 h-4 w-4',
|
|
selectedAssignees.includes(user.publicId) ? 'opacity-100' : 'opacity-0'
|
|
)}
|
|
/>
|
|
{user.firstName && user.lastName
|
|
? `${user.firstName} ${user.lastName}`
|
|
: user.username}
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
{/* Remarks */}
|
|
<FormField
|
|
control={form.control}
|
|
name="remarks"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel>Remarks (Optional)</FormLabel>
|
|
<FormControl>
|
|
<Textarea placeholder="Additional notes..." className="resize-none" {...field} />
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
{/* Actions */}
|
|
<div className="flex justify-end gap-2">
|
|
<Link href="/circulation">
|
|
<Button variant="outline" type="button">
|
|
Cancel
|
|
</Button>
|
|
</Link>
|
|
<Button type="submit" disabled={createMutation.isPending}>
|
|
{createMutation.isPending ? 'Creating...' : 'Create Circulation'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
);
|
|
}
|