@hed-hog/finance 0.0.257 → 0.0.261

package/hedhog/frontend/app/cash-and-banks/statements/page.tsx.ejs

@@ -27,6 +27,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { InputMoney } from '@/components/ui/input-money';
 import { Money } from '@/components/ui/money';
 import {
   Select,
@@ -53,10 +54,16 @@ import {
 } from '@/components/ui/table';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { ArrowDownRight, ArrowUpRight, Download, Upload } from 'lucide-react';
+import {
+  ArrowDownRight,
+  ArrowUpRight,
+  Download,
+  Plus,
+  Upload,
+} from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { formatarData } from '../../_lib/formatters';
@@ -83,6 +90,15 @@ type Statement = {
     | 'ajustado';
 };
 
+const bankAccountFormSchema = z.object({
+  banco: z.string().trim().min(1, 'Banco é obrigatório'),
+  agencia: z.string().optional(),
+  conta: z.string().optional(),
+  tipo: z.string().min(1, 'Tipo é obrigatório'),
+  descricao: z.string().optional(),
+  saldoInicial: z.number().min(0, 'Saldo inicial inválido'),
+});
+
 const importStatementSchema = z.object({
   bankAccountId: z.string().trim().min(1, 'Conta bancária é obrigatória'),
   file: z.instanceof(File, { message: 'Arquivo é obrigatório' }).refine(
@@ -95,20 +111,262 @@ const importStatementSchema = z.object({
 });
 
 type ImportStatementFormValues = z.infer<typeof importStatementSchema>;
+type BankAccountFormValues = z.infer<typeof bankAccountFormSchema>;
+
+function NovaContaBancariaSheet({
+  open,
+  onOpenChange,
+  onCreated,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated: (createdBankAccountId?: string) => Promise<void> | void;
+}) {
+  const tBank = useTranslations('finance.BankAccountsPage');
+  const { request, showToastHandler } = useApp();
+
+  const form = useForm<BankAccountFormValues>({
+    resolver: zodResolver(bankAccountFormSchema),
+    defaultValues: {
+      banco: '',
+      agencia: '',
+      conta: '',
+      tipo: '',
+      descricao: '',
+      saldoInicial: 0,
+    },
+  });
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    form.reset({
+      banco: '',
+      agencia: '',
+      conta: '',
+      tipo: '',
+      descricao: '',
+      saldoInicial: 0,
+    });
+  }, [form, open]);
+
+  const handleSubmit = async (values: BankAccountFormValues) => {
+    try {
+      const response = await request<{ id?: string | number }>({
+        url: '/finance/bank-accounts',
+        method: 'POST',
+        data: {
+          bank: values.banco,
+          branch: values.agencia || undefined,
+          account: values.conta || undefined,
+          type: values.tipo,
+          description: values.descricao?.trim() || undefined,
+          initial_balance: values.saldoInicial,
+        },
+      });
+
+      const createdBankAccountId = response?.data?.id;
+
+      await onCreated(
+        createdBankAccountId !== undefined
+          ? String(createdBankAccountId)
+          : undefined
+      );
+      onOpenChange(false);
+      showToastHandler?.(
+        'success',
+        tBank.has('messages.createSuccess')
+          ? tBank('messages.createSuccess')
+          : 'Conta bancária cadastrada com sucesso'
+      );
+    } catch {
+      showToastHandler?.(
+        'error',
+        tBank.has('messages.createError')
+          ? tBank('messages.createError')
+          : 'Erro ao cadastrar conta bancária'
+      );
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle>{tBank('newAccount.title')}</SheetTitle>
+          <SheetDescription>{tBank('newAccount.description')}</SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            className="space-y-4 px-4"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <FormField
+              control={form.control}
+              name="banco"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{tBank('fields.bank')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={tBank('fields.bankPlaceholder')}
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="agencia"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{tBank('fields.branch')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="0000"
+                        {...field}
+                        value={field.value || ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="conta"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{tBank('fields.account')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="00000-0"
+                        {...field}
+                        value={field.value || ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="tipo"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{tBank('fields.type')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder={tBank('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="corrente">
+                          {tBank('types.corrente')}
+                        </SelectItem>
+                        <SelectItem value="poupanca">
+                          {tBank('types.poupanca')}
+                        </SelectItem>
+                        <SelectItem value="investimento">
+                          {tBank('types.investimento')}
+                        </SelectItem>
+                        <SelectItem value="caixa">
+                          {tBank('types.caixa')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="saldoInicial"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{tBank('fields.initialBalance')}</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>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="descricao"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{tBank('fields.description')}</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder={tBank('fields.descriptionPlaceholder')}
+                      {...field}
+                      value={field.value || ''}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end gap-2 pt-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
+                {tBank('common.cancel')}
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {tBank('common.save')}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
 
 function ImportarExtratoSheet({
   contasBancarias,
   t,
   defaultBankAccountId,
   onImported,
+  onBankAccountCreated,
 }: {
   contasBancarias: BankAccount[];
   t: ReturnType<typeof useTranslations>;
   defaultBankAccountId?: string;
   onImported: () => Promise<any> | void;
+  onBankAccountCreated: (createdBankAccountId?: string) => Promise<void> | void;
 }) {
   const { request, showToastHandler } = useApp();
   const [open, setOpen] = useState(false);
+  const [openNovaContaSheet, setOpenNovaContaSheet] = useState(false);
 
   const form = useForm<ImportStatementFormValues>({
     resolver: zodResolver(importStatementSchema),
@@ -172,27 +430,58 @@ function ImportarExtratoSheet({
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>{t('importDialog.bankAccount')}</FormLabel>
-                  <Select value={field.value} onValueChange={field.onChange}>
-                    <FormControl>
-                      <SelectTrigger className="w-full">
-                        <SelectValue
-                          placeholder={t('importDialog.selectAccount')}
-                        />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      {contasBancarias.map((conta) => (
-                        <SelectItem key={conta.id} value={conta.id}>
-                          {conta.banco} - {conta.descricao}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  <div className="flex items-center gap-2">
+                    <div className="flex-1">
+                      <Select
+                        value={field.value}
+                        onValueChange={field.onChange}
+                      >
+                        <FormControl>
+                          <SelectTrigger className="w-full">
+                            <SelectValue
+                              placeholder={t('importDialog.selectAccount')}
+                            />
+                          </SelectTrigger>
+                        </FormControl>
+                        <SelectContent>
+                          {contasBancarias.map((conta) => (
+                            <SelectItem key={conta.id} value={conta.id}>
+                              {conta.banco} - {conta.descricao}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="icon"
+                      onClick={() => setOpenNovaContaSheet(true)}
+                      aria-label="Nova conta bancária"
+                    >
+                      <Plus className="h-4 w-4" />
+                    </Button>
+                  </div>
                   <FormMessage />
                 </FormItem>
               )}
             />
 
+            <NovaContaBancariaSheet
+              open={openNovaContaSheet}
+              onOpenChange={setOpenNovaContaSheet}
+              onCreated={async (createdBankAccountId) => {
+                await onBankAccountCreated(createdBankAccountId);
+
+                if (createdBankAccountId) {
+                  form.setValue('bankAccountId', createdBankAccountId, {
+                    shouldDirty: true,
+                    shouldValidate: true,
+                  });
+                }
+              }}
+            />
+
             <FormField
               control={form.control}
               name="file"
@@ -246,20 +535,46 @@ export default function ExtratosPage() {
 
   const [contaFilter, setContaFilter] = useState<string>('');
   const [search, setSearch] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
   const [extratoSelecionado, setExtratoSelecionado] =
     useState<Statement | null>(null);
 
-  const { data: contasBancarias = [] } = useQuery<BankAccount[]>({
-    queryKey: ['finance-bank-accounts'],
-    queryFn: async () => {
-      const response = await request({
-        url: '/finance/bank-accounts',
-        method: 'GET',
-      });
+  useEffect(() => {
+    const timeoutId = window.setTimeout(() => {
+      setDebouncedSearch(search);
+    }, 300);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [search]);
+
+  const { data: contasBancarias = [], refetch: refetchContasBancarias } =
+    useQuery<BankAccount[]>({
+      queryKey: ['finance-bank-accounts'],
+      queryFn: async () => {
+        const response = await request({
+          url: '/finance/bank-accounts',
+          method: 'GET',
+        });
+
+        return (response?.data || []) as BankAccount[];
+      },
+    });
 
-      return (response?.data || []) as BankAccount[];
-    },
-  });
+  const handleBankAccountCreated = async (createdBankAccountId?: string) => {
+    await refetchContasBancarias();
+
+    if (!createdBankAccountId) {
+      return;
+    }
+
+    setContaFilter(createdBankAccountId);
+
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('bank_account_id', createdBankAccountId);
+    router.replace(`${pathname}?${params.toString()}`);
+  };
 
   useEffect(() => {
     const firstAccount = contasBancarias[0];
@@ -297,14 +612,22 @@ export default function ExtratosPage() {
   const { data: extratos = [], refetch: refetchExtratos } = useQuery<
     Statement[]
   >({
-    queryKey: ['finance-statements', contaFilter],
+    queryKey: ['finance-statements', contaFilter, debouncedSearch],
     queryFn: async () => {
       if (!contaFilter) {
         return [];
       }
 
+      const params = new URLSearchParams();
+      params.set('bank_account_id', contaFilter);
+
+      const trimmedSearch = debouncedSearch.trim();
+      if (trimmedSearch) {
+        params.set('search', trimmedSearch);
+      }
+
       const response = await request({
-        url: `/finance/statements?bank_account_id=${contaFilter}`,
+        url: `/finance/statements?${params.toString()}`,
         method: 'GET',
       });
 
@@ -312,24 +635,16 @@ export default function ExtratosPage() {
     },
   });
 
-  const filteredExtratos = useMemo(
-    () =>
-      extratos.filter((extrato) =>
-        extrato.descricao.toLowerCase().includes(search.toLowerCase())
-      ),
-    [extratos, search]
-  );
-
   const conta = contasBancarias.find((item) => item.id === contaFilter);
   const contaExtratoSelecionado = extratoSelecionado
     ? contasBancarias.find(
         (item) => item.id === extratoSelecionado.contaBancariaId
       )
     : undefined;
-  const totalEntradas = filteredExtratos
+  const totalEntradas = extratos
     .filter((e) => e.tipo === 'entrada')
     .reduce((acc, e) => acc + e.valor, 0);
-  const totalSaidas = filteredExtratos
+  const totalSaidas = extratos
     .filter((e) => e.tipo === 'saida')
     .reduce((acc, e) => acc + e.valor, 0);
 
@@ -340,8 +655,16 @@ export default function ExtratosPage() {
     }
 
     try {
+      const params = new URLSearchParams();
+      params.set('bank_account_id', contaFilter);
+
+      const trimmedSearch = search.trim();
+      if (trimmedSearch) {
+        params.set('search', trimmedSearch);
+      }
+
       const response = await request<Blob>({
-        url: `/finance/statements/export?bank_account_id=${contaFilter}`,
+        url: `/finance/statements/export?${params.toString()}`,
         method: 'GET',
         responseType: 'blob',
       });
@@ -395,6 +718,7 @@ export default function ExtratosPage() {
               t={t}
               defaultBankAccountId={contaFilter}
               onImported={refetchExtratos}
+              onBankAccountCreated={handleBankAccountCreated}
             />
           </div>
         }
@@ -477,7 +801,7 @@ export default function ExtratosPage() {
         <CardHeader>
           <CardTitle>{t('table.title')}</CardTitle>
           <CardDescription>
-            {t('table.foundTransactions', { count: filteredExtratos.length })}
+            {t('table.foundTransactions', { count: extratos.length })}
           </CardDescription>
         </CardHeader>
         <CardContent>
@@ -501,7 +825,7 @@ export default function ExtratosPage() {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {filteredExtratos.map((extrato) => (
+                {extratos.map((extrato) => (
                   <TableRow
                     key={extrato.id}
                     className="cursor-pointer"