@hed-hog/finance 0.0.225 → 0.0.227

package/hedhog/frontend/app/accounts-receivable/installments/page.tsx.ejs

@@ -11,8 +11,16 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { FilterBar } from '@/components/ui/filter-bar';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
+import { InputMoney } from '@/components/ui/input-money';
 import { Money } from '@/components/ui/money';
 import {
   Select,
@@ -39,6 +47,8 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { Textarea } from '@/components/ui/textarea';
+import { useApp } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Download,
   Edit,
@@ -51,22 +61,96 @@ import {
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
 import { formatarData } from '../../_lib/formatters';
 import { useFinanceData } from '../../_lib/use-finance-data';
 
+const newTitleFormSchema = z.object({
+  documento: z.string().trim().min(1, 'Documento é obrigatório'),
+  clienteId: z.string().min(1, 'Cliente é obrigatório'),
+  competencia: z.string().optional(),
+  vencimento: z.string().min(1, 'Vencimento é obrigatório'),
+  valor: z.number().min(0.01, 'Valor deve ser maior que zero'),
+  categoriaId: z.string().optional(),
+  centroCustoId: z.string().optional(),
+  canal: z.string().optional(),
+  descricao: z.string().optional(),
+});
+
+type NewTitleFormValues = z.infer<typeof newTitleFormSchema>;
+
 function NovoTituloSheet({
   pessoas,
   categorias,
   centrosCusto,
   t,
+  onCreated,
 }: {
   pessoas: any[];
   categorias: any[];
   centrosCusto: any[];
   t: ReturnType<typeof useTranslations>;
+  onCreated: () => Promise<any> | void;
 }) {
+  const { request, showToastHandler } = useApp();
+  const [open, setOpen] = useState(false);
+
+  const form = useForm<NewTitleFormValues>({
+    resolver: zodResolver(newTitleFormSchema),
+    defaultValues: {
+      documento: '',
+      clienteId: '',
+      competencia: '',
+      vencimento: '',
+      valor: 0,
+      categoriaId: '',
+      centroCustoId: '',
+      canal: '',
+      descricao: '',
+    },
+  });
+
+  const handleSubmit = async (values: NewTitleFormValues) => {
+    try {
+      await request({
+        url: '/finance/accounts-receivable/installments',
+        method: 'POST',
+        data: {
+          document_number: values.documento,
+          person_id: Number(values.clienteId),
+          competence_date: values.competencia
+            ? `${values.competencia}-01`
+            : undefined,
+          due_date: values.vencimento,
+          total_amount: values.valor,
+          finance_category_id: values.categoriaId
+            ? Number(values.categoriaId)
+            : undefined,
+          cost_center_id: values.centroCustoId
+            ? Number(values.centroCustoId)
+            : undefined,
+          payment_channel: values.canal || undefined,
+          description: values.descricao?.trim() || undefined,
+        },
+      });
+
+      await onCreated();
+      form.reset();
+      setOpen(false);
+      showToastHandler?.('success', 'Título criado com sucesso');
+    } catch {
+      showToastHandler?.('error', 'Erro ao criar título');
+    }
+  };
+
+  const handleCancel = () => {
+    form.reset();
+    setOpen(false);
+  };
+
   return (
-    <Sheet>
+    <Sheet open={open} onOpenChange={setOpen}>
       <SheetTrigger asChild>
         <Button>
           <Plus className="mr-2 h-4 w-4" />
@@ -78,106 +162,222 @@ function NovoTituloSheet({
           <SheetTitle>{t('newTitle.title')}</SheetTitle>
           <SheetDescription>{t('newTitle.description')}</SheetDescription>
         </SheetHeader>
-        <form className="mt-6 space-y-4">
-          <div className="grid gap-4">
-            <div className="space-y-2">
-              <Label htmlFor="documento">{t('fields.document')}</Label>
-              <Input id="documento" placeholder="FAT-00000" />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="cliente">{t('fields.client')}</Label>
-              <Select>
-                <SelectTrigger>
-                  <SelectValue placeholder={t('common.select')} />
-                </SelectTrigger>
-                <SelectContent>
-                  {pessoas
-                    .filter((p) => p.tipo === 'cliente' || p.tipo === 'ambos')
-                    .map((p) => (
-                      <SelectItem key={p.id} value={p.id}>
-                        {p.nome}
-                      </SelectItem>
-                    ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label htmlFor="competencia">{t('fields.competency')}</Label>
-                <Input id="competencia" type="month" />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="vencimento">{t('fields.dueDate')}</Label>
-                <Input id="vencimento" type="date" />
+        <Form {...form}>
+          <form className="px-4" onSubmit={form.handleSubmit(handleSubmit)}>
+            <div className="grid gap-4">
+              <FormField
+                control={form.control}
+                name="documento"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.document')}</FormLabel>
+                    <FormControl>
+                      <Input placeholder="FAT-00000" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="clienteId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.client')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder={t('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {pessoas
+                          .filter(
+                            (p) => p.tipo === 'cliente' || p.tipo === 'ambos'
+                          )
+                          .map((p) => (
+                            <SelectItem key={p.id} value={String(p.id)}>
+                              {p.nome}
+                            </SelectItem>
+                          ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="competencia"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('fields.competency')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="month"
+                          {...field}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="vencimento"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('fields.dueDate')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          type="date"
+                          {...field}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
               </div>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="valor">{t('fields.totalValue')}</Label>
-              <Input id="valor" type="number" placeholder="0,00" step="0.01" />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="categoria">{t('fields.category')}</Label>
-              <Select>
-                <SelectTrigger>
-                  <SelectValue placeholder={t('common.select')} />
-                </SelectTrigger>
-                <SelectContent>
-                  {categorias
-                    .filter((c) => c.natureza === 'receita')
-                    .map((c) => (
-                      <SelectItem key={c.id} value={c.id}>
-                        {c.codigo} - {c.nome}
-                      </SelectItem>
-                    ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="centroCusto">{t('fields.costCenter')}</Label>
-              <Select>
-                <SelectTrigger>
-                  <SelectValue placeholder={t('common.select')} />
-                </SelectTrigger>
-                <SelectContent>
-                  {centrosCusto.map((c) => (
-                    <SelectItem key={c.id} value={c.id}>
-                      {c.codigo} - {c.nome}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="canal">{t('fields.channel')}</Label>
-              <Select>
-                <SelectTrigger>
-                  <SelectValue placeholder={t('common.select')} />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="boleto">{t('channels.boleto')}</SelectItem>
-                  <SelectItem value="pix">PIX</SelectItem>
-                  <SelectItem value="cartao">{t('channels.card')}</SelectItem>
-                  <SelectItem value="transferencia">
-                    {t('channels.transfer')}
-                  </SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="descricao">{t('fields.description')}</Label>
-              <Textarea
-                id="descricao"
-                placeholder={t('newTitle.descriptionPlaceholder')}
+
+              <FormField
+                control={form.control}
+                name="valor"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.totalValue')}</FormLabel>
+                    <FormControl>
+                      <InputMoney
+                        ref={field.ref}
+                        name={field.name}
+                        value={field.value}
+                        onBlur={field.onBlur}
+                        onValueChange={(value) => field.onChange(value ?? 0)}
+                        placeholder="0,00"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="categoriaId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.category')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder={t('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {categorias
+                          .filter((c) => c.natureza === 'receita')
+                          .map((c) => (
+                            <SelectItem key={c.id} value={String(c.id)}>
+                              {c.codigo} - {c.nome}
+                            </SelectItem>
+                          ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="centroCustoId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.costCenter')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder={t('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {centrosCusto.map((c) => (
+                          <SelectItem key={c.id} value={String(c.id)}>
+                            {c.codigo} - {c.nome}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="canal"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.channel')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder={t('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="boleto">
+                          {t('channels.boleto')}
+                        </SelectItem>
+                        <SelectItem value="pix">PIX</SelectItem>
+                        <SelectItem value="cartao">
+                          {t('channels.card')}
+                        </SelectItem>
+                        <SelectItem value="transferencia">
+                          {t('channels.transfer')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
+
+              <FormField
+                control={form.control}
+                name="descricao"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.description')}</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder={t('newTitle.descriptionPlaceholder')}
+                        {...field}
+                        value={field.value || ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="flex justify-end gap-2 pt-4">
+              <Button type="button" variant="outline" onClick={handleCancel}>
+                {t('common.cancel')}
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {t('common.save')}
+              </Button>
             </div>
-          </div>
-          <div className="flex justify-end gap-2 pt-4">
-            <Button type="button" variant="outline">
-              {t('common.cancel')}
-            </Button>
-            <Button type="submit">{t('common.save')}</Button>
-          </div>
-        </form>
+          </form>
+        </Form>
       </SheetContent>
     </Sheet>
   );
@@ -185,7 +385,7 @@ function NovoTituloSheet({
 
 export default function TitulosReceberPage() {
   const t = useTranslations('finance.ReceivableInstallmentsPage');
-  const { data } = useFinanceData();
+  const { data, refetch } = useFinanceData();
   const { titulosReceber, pessoas, categorias, centrosCusto } = data;
 
   const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
@@ -237,6 +437,7 @@ export default function TitulosReceberPage() {
             categorias={categorias}
             centrosCusto={centrosCusto}
             t={t}
+            onCreated={refetch}
           />
         }
       />