@hed-hog/finance 0.0.225 → 0.0.227

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

@@ -10,8 +10,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,
@@ -38,6 +46,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 {
   CheckCircle,
   Download,
@@ -52,22 +62,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'),
+  fornecedorId: z.string().min(1, 'Fornecedor é 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(),
+  metodo: 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: '',
+      fornecedorId: '',
+      competencia: '',
+      vencimento: '',
+      valor: 0,
+      categoriaId: '',
+      centroCustoId: '',
+      metodo: '',
+      descricao: '',
+    },
+  });
+
+  const handleSubmit = async (values: NewTitleFormValues) => {
+    try {
+      await request({
+        url: '/finance/accounts-payable/installments',
+        method: 'POST',
+        data: {
+          document_number: values.documento,
+          person_id: Number(values.fornecedorId),
+          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.metodo || 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" />
@@ -79,118 +163,228 @@ 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="NF-00000" />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="fornecedor">{t('fields.supplier')}</Label>
-              <Select>
-                <SelectTrigger>
-                  <SelectValue placeholder={t('common.select')} />
-                </SelectTrigger>
-                <SelectContent>
-                  {pessoas
-                    .filter(
-                      (p) => p.tipo === 'fornecedor' || 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="NF-00000" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="fornecedorId"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.supplier')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder={t('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        {pessoas
+                          .filter(
+                            (p) => p.tipo === 'fornecedor' || 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 === 'despesa')
-                    .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="metodo">{t('fields.paymentMethod')}</Label>
-              <Select>
-                <SelectTrigger>
-                  <SelectValue placeholder={t('common.select')} />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="boleto">
-                    {t('paymentMethods.boleto')}
-                  </SelectItem>
-                  <SelectItem value="pix">PIX</SelectItem>
-                  <SelectItem value="transferencia">
-                    {t('paymentMethods.transfer')}
-                  </SelectItem>
-                  <SelectItem value="cartao">
-                    {t('paymentMethods.card')}
-                  </SelectItem>
-                  <SelectItem value="dinheiro">
-                    {t('paymentMethods.cash')}
-                  </SelectItem>
-                  <SelectItem value="cheque">
-                    {t('paymentMethods.check')}
-                  </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 === 'despesa')
+                          .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="metodo"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.paymentMethod')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder={t('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="boleto">
+                          {t('paymentMethods.boleto')}
+                        </SelectItem>
+                        <SelectItem value="pix">PIX</SelectItem>
+                        <SelectItem value="transferencia">
+                          {t('paymentMethods.transfer')}
+                        </SelectItem>
+                        <SelectItem value="cartao">
+                          {t('paymentMethods.card')}
+                        </SelectItem>
+                        <SelectItem value="dinheiro">
+                          {t('paymentMethods.cash')}
+                        </SelectItem>
+                        <SelectItem value="cheque">
+                          {t('paymentMethods.check')}
+                        </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>
   );
@@ -198,7 +392,7 @@ function NovoTituloSheet({
 
 export default function TitulosPagarPage() {
   const t = useTranslations('finance.PayableInstallmentsPage');
-  const { data } = useFinanceData();
+  const { data, refetch } = useFinanceData();
   const { titulosPagar, pessoas, categorias, centrosCusto } = data;
 
   const getPessoaById = (id?: string) => pessoas.find((p) => p.id === id);
@@ -235,6 +429,7 @@ export default function TitulosPagarPage() {
             categorias={categorias}
             centrosCusto={centrosCusto}
             t={t}
+            onCreated={refetch}
           />
         }
       />

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

@@ -19,6 +19,7 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
+import { InputMoney } from '@/components/ui/input-money';
 import { Label } from '@/components/ui/label';
 import { Money } from '@/components/ui/money';
 import {
@@ -122,13 +123,25 @@ function EnviarCobrancaDialog({
           <div className="space-y-2">
             <Label>{t('send.contactType')}</Label>
             <div className="flex gap-2">
-              <Button variant="outline" className="flex-1 bg-transparent">
+              <Button
+                type="button"
+                variant="outline"
+                className="flex-1 bg-transparent"
+              >
                 {t('send.channels.email')}
               </Button>
-              <Button variant="outline" className="flex-1 bg-transparent">
+              <Button
+                type="button"
+                variant="outline"
+                className="flex-1 bg-transparent"
+              >
                 WhatsApp
               </Button>
-              <Button variant="outline" className="flex-1 bg-transparent">
+              <Button
+                type="button"
+                variant="outline"
+                className="flex-1 bg-transparent"
+              >
                 SMS
               </Button>
             </div>
@@ -143,8 +156,10 @@ function EnviarCobrancaDialog({
           </div>
         </div>
         <DialogFooter>
-          <Button variant="outline">{t('common.cancel')}</Button>
-          <Button>{t('send.submit')}</Button>
+          <Button type="button" variant="outline">
+            {t('common.cancel')}
+          </Button>
+          <Button type="button">{t('send.submit')}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
@@ -176,7 +191,7 @@ function RegistrarAcordoDialog({
           <div className="grid grid-cols-2 gap-4">
             <div className="space-y-2">
               <Label htmlFor="valorAcordo">{t('agreement.value')}</Label>
-              <Input id="valorAcordo" type="number" placeholder="0,00" />
+              <InputMoney id="valorAcordo" placeholder="0,00" />
             </div>
             <div className="space-y-2">
               <Label htmlFor="parcelas">{t('agreement.installments')}</Label>
@@ -198,8 +213,10 @@ function RegistrarAcordoDialog({
           </div>
         </div>
         <DialogFooter>
-          <Button variant="outline">{t('common.cancel')}</Button>
-          <Button>{t('agreement.submit')}</Button>
+          <Button type="button" variant="outline">
+            {t('common.cancel')}
+          </Button>
+          <Button type="button">{t('agreement.submit')}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>