@hed-hog/finance 0.0.225 → 0.0.227

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

@@ -10,8 +10,16 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
+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,
@@ -26,97 +34,321 @@ import {
   SheetDescription,
   SheetHeader,
   SheetTitle,
-  SheetTrigger,
 } from '@/components/ui/sheet';
+import { useApp, useQuery } from '@hed-hog/next-app-provider';
+import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Building2,
   Eye,
   Landmark,
+  Pencil,
   PiggyBank,
   Plus,
   RefreshCw,
+  Trash2,
   TrendingUp,
   Upload,
   Wallet,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
-import { useFinanceData } from '../../_lib/use-finance-data';
+import { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+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'),
+});
+
+type BankAccountFormValues = z.infer<typeof bankAccountFormSchema>;
+
+type BankAccount = {
+  id: string;
+  codigo: string;
+  descricao: string;
+  banco: string;
+  agencia: string;
+  conta: string;
+  tipo: 'corrente' | 'poupanca' | 'investimento' | 'caixa';
+  saldoAtual: number;
+  saldoConciliado: number;
+  ativo: boolean;
+};
+
+function NovaContaSheet({
+  t,
+  onCreated,
+  open,
+  onOpenChange,
+  editingAccount,
+  onEditingAccountChange,
+}: {
+  t: ReturnType<typeof useTranslations>;
+  onCreated: () => Promise<any> | void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  editingAccount: BankAccount | null;
+  onEditingAccountChange: (account: BankAccount | null) => void;
+}) {
+  const { request, showToastHandler } = useApp();
+
+  const form = useForm<BankAccountFormValues>({
+    resolver: zodResolver(bankAccountFormSchema),
+    defaultValues: {
+      banco: '',
+      agencia: '',
+      conta: '',
+      tipo: '',
+      descricao: '',
+      saldoInicial: 0,
+    },
+  });
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    if (editingAccount) {
+      form.reset({
+        banco: editingAccount.banco,
+        agencia: editingAccount.agencia === '-' ? '' : editingAccount.agencia,
+        conta: editingAccount.conta === '-' ? '' : editingAccount.conta,
+        tipo: editingAccount.tipo,
+        descricao: editingAccount.descricao,
+        saldoInicial: editingAccount.saldoAtual,
+      });
+      return;
+    }
+
+    form.reset({
+      banco: '',
+      agencia: '',
+      conta: '',
+      tipo: '',
+      descricao: '',
+      saldoInicial: 0,
+    });
+  }, [editingAccount, form, open]);
+
+  const handleSubmit = async (values: BankAccountFormValues) => {
+    try {
+      if (editingAccount) {
+        await request({
+          url: `/finance/bank-accounts/${editingAccount.id}`,
+          method: 'PATCH',
+          data: {
+            bank: values.banco,
+            branch: values.agencia || undefined,
+            account: values.conta || undefined,
+            type: values.tipo,
+            description: values.descricao?.trim() || undefined,
+          },
+        });
+      } else {
+        await request({
+          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,
+          },
+        });
+      }
+
+      await onCreated();
+      form.reset();
+      onOpenChange(false);
+      onEditingAccountChange(null);
+      showToastHandler?.(
+        'success',
+        editingAccount
+          ? 'Conta bancária atualizada com sucesso'
+          : 'Conta bancária cadastrada com sucesso'
+      );
+    } catch {
+      showToastHandler?.(
+        'error',
+        editingAccount
+          ? 'Erro ao atualizar conta bancária'
+          : 'Erro ao cadastrar conta bancária'
+      );
+    }
+  };
+
+  const handleCancel = () => {
+    form.reset();
+    onEditingAccountChange(null);
+    onOpenChange(false);
+  };
 
-function NovaContaSheet({ t }: { t: ReturnType<typeof useTranslations> }) {
   return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button>
-          <Plus className="mr-2 h-4 w-4" />
-          {t('newAccount.action')}
-        </Button>
-      </SheetTrigger>
+    <Sheet
+      open={open}
+      onOpenChange={(nextOpen) => {
+        onOpenChange(nextOpen);
+        if (!nextOpen) {
+          onEditingAccountChange(null);
+        }
+      }}
+    >
       <SheetContent className="w-full sm:max-w-lg">
         <SheetHeader>
-          <SheetTitle>{t('newAccount.title')}</SheetTitle>
+          <SheetTitle>
+            {editingAccount ? t('common.edit') : t('newAccount.title')}
+          </SheetTitle>
           <SheetDescription>{t('newAccount.description')}</SheetDescription>
         </SheetHeader>
-        <form className="mt-6 space-y-4">
-          <div className="grid gap-4">
-            <div className="space-y-2">
-              <Label htmlFor="banco">{t('fields.bank')}</Label>
-              <Input id="banco" placeholder={t('fields.bankPlaceholder')} />
-            </div>
-            <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-2">
-                <Label htmlFor="agencia">{t('fields.branch')}</Label>
-                <Input id="agencia" placeholder="0000" />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="conta">{t('fields.account')}</Label>
-                <Input id="conta" placeholder="00000-0" />
+        <Form {...form}>
+          <form className="p-4" onSubmit={form.handleSubmit(handleSubmit)}>
+            <div className="grid gap-4">
+              <FormField
+                control={form.control}
+                name="banco"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.bank')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t('fields.bankPlaceholder')}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <div className="grid grid-cols-2 gap-4">
+                <FormField
+                  control={form.control}
+                  name="agencia"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('fields.branch')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder="0000"
+                          {...field}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="conta"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>{t('fields.account')}</FormLabel>
+                      <FormControl>
+                        <Input
+                          placeholder="00000-0"
+                          {...field}
+                          value={field.value || ''}
+                        />
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
               </div>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="tipo">{t('fields.type')}</Label>
-              <Select>
-                <SelectTrigger>
-                  <SelectValue placeholder={t('common.select')} />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="corrente">
-                    {t('types.corrente')}
-                  </SelectItem>
-                  <SelectItem value="poupanca">
-                    {t('types.poupanca')}
-                  </SelectItem>
-                  <SelectItem value="investimento">
-                    {t('types.investimento')}
-                  </SelectItem>
-                  <SelectItem value="caixa">{t('types.caixa')}</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="descricao">{t('fields.description')}</Label>
-              <Input
-                id="descricao"
-                placeholder={t('fields.descriptionPlaceholder')}
+
+              <FormField
+                control={form.control}
+                name="tipo"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.type')}</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue placeholder={t('common.select')} />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="corrente">
+                          {t('types.corrente')}
+                        </SelectItem>
+                        <SelectItem value="poupanca">
+                          {t('types.poupanca')}
+                        </SelectItem>
+                        <SelectItem value="investimento">
+                          {t('types.investimento')}
+                        </SelectItem>
+                        <SelectItem value="caixa">
+                          {t('types.caixa')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
-            </div>
-            <div className="space-y-2">
-              <Label htmlFor="saldoInicial">{t('fields.initialBalance')}</Label>
-              <Input
-                id="saldoInicial"
-                type="number"
-                placeholder="0,00"
-                step="0.01"
+
+              <FormField
+                control={form.control}
+                name="descricao"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('fields.description')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={t('fields.descriptionPlaceholder')}
+                        {...field}
+                        value={field.value || ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
               />
+
+              <FormField
+                control={form.control}
+                name="saldoInicial"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t('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"
+                        disabled={!!editingAccount}
+                      />
+                    </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>
   );
@@ -124,8 +356,23 @@ function NovaContaSheet({ t }: { t: ReturnType<typeof useTranslations> }) {
 
 export default function ContasBancariasPage() {
   const t = useTranslations('finance.BankAccountsPage');
-  const { data } = useFinanceData();
-  const { contasBancarias } = data;
+  const { request, showToastHandler } = useApp();
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [editingAccount, setEditingAccount] = useState<BankAccount | null>(
+    null
+  );
+  const { data: contasBancarias, refetch } = useQuery<BankAccount[]>({
+    queryKey: ['finance-bank-accounts'],
+    queryFn: async () => {
+      const response = await request({
+        url: '/finance/bank-accounts',
+        method: 'GET',
+      });
+
+      return (response.data || []) as BankAccount[];
+    },
+    initialData: [],
+  });
 
   const tipoConfig = {
     corrente: { label: t('types.corrente'), icon: Building2 },
@@ -142,6 +389,38 @@ export default function ContasBancariasPage() {
     .filter((c) => c.ativo)
     .reduce((acc, c) => acc + c.saldoConciliado, 0);
 
+  const handleCreate = () => {
+    setEditingAccount(null);
+    setSheetOpen(true);
+  };
+
+  const handleEdit = (account: BankAccount) => {
+    setEditingAccount(account);
+    setSheetOpen(true);
+  };
+
+  const handleDelete = async (accountId: string) => {
+    const confirmed = window.confirm(
+      'Deseja realmente inativar esta conta bancária?'
+    );
+
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await request({
+        url: `/finance/bank-accounts/${accountId}`,
+        method: 'DELETE',
+      });
+
+      await refetch();
+      showToastHandler?.('success', 'Conta bancária inativada com sucesso');
+    } catch {
+      showToastHandler?.('error', 'Erro ao inativar conta bancária');
+    }
+  };
+
   return (
     <Page>
       <PageHeader
@@ -152,7 +431,21 @@ export default function ContasBancariasPage() {
           { label: t('breadcrumbs.finance'), href: '/finance' },
           { label: t('breadcrumbs.current') },
         ]}
-        actions={<NovaContaSheet t={t} />}
+        actions={
+          <Button onClick={handleCreate}>
+            <Plus className="mr-2 h-4 w-4" />
+            {t('newAccount.action')}
+          </Button>
+        }
+      />
+
+      <NovaContaSheet
+        t={t}
+        onCreated={refetch}
+        open={sheetOpen}
+        onOpenChange={setSheetOpen}
+        editingAccount={editingAccount}
+        onEditingAccountChange={setEditingAccount}
       />
 
       <div className="grid gap-4 md:grid-cols-2">
@@ -284,6 +577,20 @@ export default function ContasBancariasPage() {
                     <Button variant="outline" size="sm">
                       <Upload className="h-4 w-4" />
                     </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleEdit(conta)}
+                    >
+                      <Pencil className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => handleDelete(conta.id)}
+                    >
+                      <Trash2 className="h-4 w-4" />
+                    </Button>
                   </div>
                 </div>
               </CardContent>

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

@@ -21,6 +21,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 { Progress } from '@/components/ui/progress';
@@ -77,7 +78,7 @@ function CriarAjusteDialog({ t }: { t: ReturnType<typeof useTranslations> }) {
           </div>
           <div className="space-y-2">
             <Label htmlFor="valor">{t('adjustment.value')}</Label>
-            <Input id="valor" type="number" placeholder="0,00" />
+            <InputMoney id="valor" placeholder="0,00" />
           </div>
           <div className="space-y-2">
             <Label htmlFor="descricao">{t('adjustment.details')}</Label>
@@ -88,8 +89,10 @@ function CriarAjusteDialog({ t }: { t: ReturnType<typeof useTranslations> }) {
           </div>
         </div>
         <DialogFooter>
-          <Button variant="outline">{t('common.cancel')}</Button>
-          <Button>{t('adjustment.submit')}</Button>
+          <Button type="button" variant="outline">
+            {t('common.cancel')}
+          </Button>
+          <Button type="button">{t('adjustment.submit')}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

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

@@ -89,8 +89,10 @@ function ImportarExtratoDialog({
           </div>
         </div>
         <DialogFooter>
-          <Button variant="outline">{t('common.cancel')}</Button>
-          <Button>{t('importDialog.submit')}</Button>
+          <Button type="button" variant="outline">
+            {t('common.cancel')}
+          </Button>
+          <Button type="button">{t('importDialog.submit')}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

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

@@ -10,6 +10,7 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 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 {
@@ -61,7 +62,10 @@ function NovaTransferenciaSheet({
           <SheetTitle>{t('newTransfer.title')}</SheetTitle>
           <SheetDescription>{t('newTransfer.description')}</SheetDescription>
         </SheetHeader>
-        <form className="mt-6 space-y-4">
+        <form
+          className="mt-6 space-y-4"
+          onSubmit={(event) => event.preventDefault()}
+        >
           <div className="grid gap-4">
             <div className="space-y-2">
               <Label htmlFor="contaOrigem">{t('fields.sourceAccount')}</Label>
@@ -102,12 +106,7 @@ function NovaTransferenciaSheet({
               </div>
               <div className="space-y-2">
                 <Label htmlFor="valor">{t('fields.value')}</Label>
-                <Input
-                  id="valor"
-                  type="number"
-                  placeholder="0,00"
-                  step="0.01"
-                />
+                <InputMoney id="valor" placeholder="0,00" />
               </div>
             </div>
             <div className="space-y-2">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hed-hog/finance",
-  "version": "0.0.225",
+  "version": "0.0.227",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -9,13 +9,13 @@
     "@nestjs/core": "^11",
     "@nestjs/jwt": "^11",
     "@nestjs/mapped-types": "*",
-    "@hed-hog/api-locale": "0.0.11",
-    "@hed-hog/api-pagination": "0.0.5",
     "@hed-hog/api-prisma": "0.0.4",
-    "@hed-hog/api": "0.0.3",
-    "@hed-hog/contact": "0.0.223",
+    "@hed-hog/api-pagination": "0.0.5",
+    "@hed-hog/api-locale": "0.0.11",
     "@hed-hog/tag": "0.0.223",
-    "@hed-hog/api-types": "0.0.1"
+    "@hed-hog/api-types": "0.0.1",
+    "@hed-hog/api": "0.0.3",
+    "@hed-hog/contact": "0.0.223"
   },
   "exports": {
     ".": {

package/src/dto/create-bank-account.dto.ts

@@ -0,0 +1,49 @@
+import { getLocaleText } from '@hed-hog/api-locale';
+import { IsNumber, IsOptional, IsString, Min } from 'class-validator';
+
+export class CreateBankAccountDto {
+  @IsString({
+    message: (args) => getLocaleText('validation.bankMustBeString', args.value),
+  })
+  bank: string;
+
+  @IsOptional()
+  @IsString({
+    message: (args) =>
+      getLocaleText('validation.branchMustBeString', args.value),
+  })
+  branch?: string;
+
+  @IsOptional()
+  @IsString({
+    message: (args) =>
+      getLocaleText('validation.accountMustBeString', args.value),
+  })
+  account?: string;
+
+  @IsString({
+    message: (args) =>
+      getLocaleText('validation.accountTypeMustBeString', args.value),
+  })
+  type: string;
+
+  @IsOptional()
+  @IsString({
+    message: (args) =>
+      getLocaleText('validation.descriptionMustBeString', args.value),
+  })
+  description?: string;
+
+  @IsOptional()
+  @IsNumber(
+    {},
+    {
+      message: (args) =>
+        getLocaleText('validation.initialBalanceMustBeNumber', args.value),
+    },
+  )
+  @Min(0, {
+    message: (args) => getLocaleText('validation.initialBalanceMin', args.value),
+  })
+  initial_balance?: number;
+}