Files
lcbp3/frontend/components/numbering/cancel-number-form.tsx
T
admin 11984bfa29
CI Pipeline / build (push) Failing after 12m41s
Build and Deploy / deploy (push) Failing after 2m44s
260322:1648 Correct Coresspondence / Doing RFA / Correct CI
2026-03-22 16:48:12 +07:00

89 lines
2.8 KiB
TypeScript

'use client';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { Button } from '@/components/ui/button';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { toast } from 'sonner';
import { documentNumberingService } from '@/lib/services/document-numbering.service';
import { CancelNumberDto } from '@/types/dto/numbering.dto';
import { useState } from 'react';
const formSchema = z.object({
documentNumber: z.string().min(3, 'Document Number is required'),
reason: z.string().min(5, 'Reason must be at least 5 characters'),
});
type CancelNumberFormData = z.infer<typeof formSchema>;
export function CancelNumberForm() {
const [loading, setLoading] = useState(false);
const form = useForm<CancelNumberFormData>({
resolver: zodResolver(formSchema) as any, // eslint-disable-line @typescript-eslint/no-explicit-any -- zod 4 + @hookform/resolvers compat
defaultValues: {
documentNumber: '',
reason: '',
},
});
async function onSubmit(values: CancelNumberFormData) {
setLoading(true);
try {
const dto: CancelNumberDto = values;
await documentNumberingService.cancelNumber(dto);
toast.success('Number cancelled successfully.');
form.reset();
} catch (_error) {
toast.error('Failed to cancel number. It may not exist or is already cancelled.');
} finally {
setLoading(false);
}
}
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 border p-4 rounded-md">
<h3 className="text-lg font-medium">Cancel Number</h3>
<p className="text-sm text-gray-500">
Permanently cancel a number (e.g. if generated by mistake). It cannot be reused.
</p>
<FormField
control={form.control}
name="documentNumber"
render={({ field }) => (
<FormItem>
<FormLabel>Document Number</FormLabel>
<FormControl>
<Input placeholder="e.g. LCB3-COR-GGL-2025-0001" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="reason"
render={({ field }) => (
<FormItem>
<FormLabel>Reason</FormLabel>
<FormControl>
<Input placeholder="Reason for cancellation..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit" variant="destructive" disabled={loading}>
{loading ? 'Cancelling...' : 'Cancel Number'}
</Button>
</form>
</Form>
);
}