@hed-hog/finance 0.0.299 → 0.0.300

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

@@ -59,10 +59,11 @@ import {
   TrendingUp,
   Upload,
   Wallet,
+  type LucideIcon,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState, type ChangeEvent } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
@@ -72,6 +73,7 @@ const bankAccountFormSchema = z.object({
   conta: z.string().optional(),
   tipo: z.string().min(1, 'Tipo é obrigatório'),
   descricao: z.string().optional(),
+  logoFileId: z.number().int().nullable().optional(),
   saldoInicial: z.number().min(0, 'Saldo inicial inválido'),
 });
 
@@ -85,11 +87,48 @@ type BankAccount = {
   agencia: string;
   conta: string;
   tipo: 'corrente' | 'poupanca' | 'investimento' | 'caixa';
+  logoFileId: number | null;
   saldoAtual: number;
   saldoConciliado: number;
   ativo: boolean;
 };
 
+type UploadedFilePayload = {
+  id?: number | string | null;
+};
+
+function BankAccountLogo({
+  account,
+  icon: Icon,
+}: {
+  account: BankAccount;
+  icon: LucideIcon;
+}) {
+  const [hasImageError, setHasImageError] = useState(false);
+  const apiBaseUrl = String(process.env.NEXT_PUBLIC_API_BASE_URL || '');
+  const logoUrl =
+    account.logoFileId && account.logoFileId > 0
+      ? `${apiBaseUrl}/file/open/${account.logoFileId}?v=${account.logoFileId}`
+      : null;
+
+  if (!logoUrl || hasImageError) {
+    return (
+      <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
+        <Icon className="h-5 w-5" />
+      </div>
+    );
+  }
+
+  return (
+    <img
+      src={logoUrl}
+      alt={account.banco}
+      className="h-10 w-10 rounded-lg border bg-muted object-cover"
+      onError={() => setHasImageError(true)}
+    />
+  );
+}
+
 function NovaContaSheet({
   t,
   onCreated,
@@ -119,6 +158,21 @@ function NovaContaSheet({
   const updateErrorMessage = t.has('messages.updateError')
     ? t('messages.updateError')
     : 'Erro ao atualizar conta bancária';
+  const logoUploadSuccessMessage = t.has('messages.logoUploadSuccess')
+    ? t('messages.logoUploadSuccess')
+    : 'Logo enviado com sucesso';
+  const logoUploadErrorMessage = t.has('messages.logoUploadError')
+    ? t('messages.logoUploadError')
+    : 'Erro ao enviar logo';
+  const logoRemoveSuccessMessage = t.has('messages.logoRemoveSuccess')
+    ? t('messages.logoRemoveSuccess')
+    : 'Logo removido com sucesso';
+  const logoInvalidTypeMessage = t.has('messages.logoInvalidType')
+    ? t('messages.logoInvalidType')
+    : 'Selecione um arquivo de imagem válido';
+  const logoTooLargeMessage = t.has('messages.logoTooLarge')
+    ? t('messages.logoTooLarge')
+    : 'O logo deve ter no máximo 5 MB';
 
   const form = useForm<BankAccountFormValues>({
     resolver: zodResolver(bankAccountFormSchema),
@@ -128,38 +182,204 @@ function NovaContaSheet({
       conta: '',
       tipo: '',
       descricao: '',
+      logoFileId: null,
       saldoInicial: 0,
     },
   });
 
+  const [logoFileId, setLogoFileId] = useState<number | null>(null);
+  const [persistedLogoFileId, setPersistedLogoFileId] = useState<number | null>(
+    null
+  );
+  const [logoPreviewUrl, setLogoPreviewUrl] = useState<string | null>(null);
+  const [isUploadingLogo, setIsUploadingLogo] = useState(false);
+  const [logoUploadProgress, setLogoUploadProgress] = useState(0);
+  const logoInputRef = useRef<HTMLInputElement | null>(null);
+
+  const getLogoUrl = (fileId?: number | null) => {
+    if (typeof fileId !== 'number' || fileId <= 0) {
+      return null;
+    }
+
+    return `${String(process.env.NEXT_PUBLIC_API_BASE_URL || '')}/file/open/${fileId}`;
+  };
+
+  const deleteFileById = async (fileId?: number | null) => {
+    if (!fileId || fileId <= 0) {
+      return;
+    }
+
+    try {
+      await request({
+        url: '/file',
+        method: 'DELETE',
+        data: { ids: [fileId] },
+      });
+    } catch {
+      // Ignore cleanup failures to keep the form stable.
+    }
+  };
+
+  const cleanupUnsavedLogo = async () => {
+    if (logoFileId && logoFileId !== persistedLogoFileId) {
+      await deleteFileById(logoFileId);
+    }
+  };
+
+  const handleSelectLogo = () => {
+    if (!logoInputRef.current || isUploadingLogo) {
+      return;
+    }
+
+    logoInputRef.current.value = '';
+    logoInputRef.current.click();
+  };
+
+  const handleLogoUpload = async (event: ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+
+    if (!file) {
+      return;
+    }
+
+    if (!file.type.startsWith('image/')) {
+      showToastHandler?.('error', logoInvalidTypeMessage);
+      event.target.value = '';
+      return;
+    }
+
+    if (file.size > 5 * 1024 * 1024) {
+      showToastHandler?.('error', logoTooLargeMessage);
+      event.target.value = '';
+      return;
+    }
+
+    setIsUploadingLogo(true);
+    setLogoUploadProgress(0);
+
+    try {
+      const previousUploadedLogoId = logoFileId;
+      const formData = new FormData();
+      formData.append('file', file);
+      formData.append('destination', 'finance/bank-account/logo');
+
+      const { data } = await request<UploadedFilePayload>({
+        url: '/file',
+        method: 'POST',
+        data: formData,
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+        onUploadProgress: (progressEvent) => {
+          if (!progressEvent.total) {
+            return;
+          }
+
+          const progress = Math.round(
+            (progressEvent.loaded * 100) / progressEvent.total
+          );
+          setLogoUploadProgress(progress);
+        },
+      });
+
+      const nextLogoFileId = Number(data?.id);
+
+      if (!nextLogoFileId) {
+        throw new Error('Logo upload failed');
+      }
+
+      if (
+        previousUploadedLogoId &&
+        previousUploadedLogoId !== persistedLogoFileId
+      ) {
+        await deleteFileById(previousUploadedLogoId);
+      }
+
+      setLogoFileId(nextLogoFileId);
+      setLogoPreviewUrl(`${getLogoUrl(nextLogoFileId)}?ts=${Date.now()}`);
+      setLogoUploadProgress(100);
+      form.setValue('logoFileId', nextLogoFileId, {
+        shouldDirty: true,
+        shouldValidate: true,
+      });
+      showToastHandler?.('success', logoUploadSuccessMessage);
+    } catch {
+      showToastHandler?.('error', logoUploadErrorMessage);
+      setLogoUploadProgress(0);
+    } finally {
+      setIsUploadingLogo(false);
+      event.target.value = '';
+    }
+  };
+
+  const handleRemoveLogo = async () => {
+    if (isUploadingLogo) {
+      return;
+    }
+
+    if (logoFileId && logoFileId !== persistedLogoFileId) {
+      await deleteFileById(logoFileId);
+    }
+
+    setLogoFileId(null);
+    setLogoPreviewUrl(null);
+    setLogoUploadProgress(0);
+    form.setValue('logoFileId', null, {
+      shouldDirty: true,
+      shouldValidate: true,
+    });
+    showToastHandler?.('success', logoRemoveSuccessMessage);
+  };
+
   useEffect(() => {
     if (!open) {
       return;
     }
 
     if (editingAccount) {
+      const currentLogoFileId = editingAccount.logoFileId ?? null;
+
+      setLogoFileId(currentLogoFileId);
+      setPersistedLogoFileId(currentLogoFileId);
+      setLogoPreviewUrl(
+        currentLogoFileId
+          ? `${getLogoUrl(currentLogoFileId)}?ts=${Date.now()}`
+          : null
+      );
+      setLogoUploadProgress(0);
+
       form.reset({
         banco: editingAccount.banco,
         agencia: editingAccount.agencia === '-' ? '' : editingAccount.agencia,
         conta: editingAccount.conta === '-' ? '' : editingAccount.conta,
         tipo: editingAccount.tipo,
         descricao: editingAccount.descricao,
+        logoFileId: currentLogoFileId,
         saldoInicial: editingAccount.saldoAtual,
       });
       return;
     }
 
+    setLogoFileId(null);
+    setPersistedLogoFileId(null);
+    setLogoPreviewUrl(null);
+    setLogoUploadProgress(0);
+
     form.reset({
       banco: '',
       agencia: '',
       conta: '',
       tipo: '',
       descricao: '',
+      logoFileId: null,
       saldoInicial: 0,
     });
   }, [editingAccount, form, open]);
 
   const handleSubmit = async (values: BankAccountFormValues) => {
+    const nextLogoFileId = values.logoFileId ?? null;
+    const previousPersistedLogoId = persistedLogoFileId;
+
     try {
       if (editingAccount) {
         await request({
@@ -171,6 +391,7 @@ function NovaContaSheet({
             account: values.conta || undefined,
             type: values.tipo,
             description: values.descricao?.trim() || undefined,
+            logo_file_id: nextLogoFileId,
           },
         });
       } else {
@@ -183,13 +404,36 @@ function NovaContaSheet({
             account: values.conta || undefined,
             type: values.tipo,
             description: values.descricao?.trim() || undefined,
+            logo_file_id: nextLogoFileId,
             initial_balance: values.saldoInicial,
           },
         });
       }
 
       await onCreated();
-      form.reset();
+
+      if (
+        previousPersistedLogoId &&
+        previousPersistedLogoId !== nextLogoFileId
+      ) {
+        await deleteFileById(previousPersistedLogoId);
+      }
+
+      setPersistedLogoFileId(nextLogoFileId);
+      setLogoFileId(nextLogoFileId);
+      setLogoPreviewUrl(
+        nextLogoFileId ? `${getLogoUrl(nextLogoFileId)}?ts=${Date.now()}` : null
+      );
+      setLogoUploadProgress(0);
+      form.reset({
+        banco: '',
+        agencia: '',
+        conta: '',
+        tipo: '',
+        descricao: '',
+        logoFileId: null,
+        saldoInicial: 0,
+      });
       onOpenChange(false);
       onEditingAccountChange(null);
       showToastHandler?.(
@@ -205,6 +449,7 @@ function NovaContaSheet({
   };
 
   const handleCancel = () => {
+    void cleanupUnsavedLogo();
     form.reset();
     onEditingAccountChange(null);
     onOpenChange(false);
@@ -214,6 +459,10 @@ function NovaContaSheet({
     <Sheet
       open={open}
       onOpenChange={(nextOpen) => {
+        if (!nextOpen) {
+          void cleanupUnsavedLogo();
+        }
+
         onOpenChange(nextOpen);
         if (!nextOpen) {
           onEditingAccountChange(null);
@@ -361,13 +610,79 @@ function NovaContaSheet({
                   </FormItem>
                 )}
               />
+
+              <FormItem>
+                <FormLabel>{t('fields.logo')}</FormLabel>
+                <div className="flex items-start gap-4 rounded-lg border p-3">
+                  <div className="flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted">
+                    {logoPreviewUrl ? (
+                      <img
+                        src={logoPreviewUrl}
+                        alt={t('fields.logo')}
+                        className="h-full w-full object-cover"
+                      />
+                    ) : (
+                      <Landmark className="h-8 w-8 text-muted-foreground" />
+                    )}
+                  </div>
+
+                  <div className="flex-1 space-y-2">
+                    <input
+                      ref={logoInputRef}
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleLogoUpload}
+                    />
+
+                    <div className="flex flex-wrap gap-2">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={handleSelectLogo}
+                        disabled={isUploadingLogo}
+                      >
+                        <Upload className="mr-2 h-4 w-4" />
+                        {t('fields.logoAction')}
+                      </Button>
+
+                      {logoFileId ? (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          onClick={() => void handleRemoveLogo()}
+                          disabled={isUploadingLogo}
+                        >
+                          <Trash2 className="mr-2 h-4 w-4" />
+                          {t('fields.logoRemove')}
+                        </Button>
+                      ) : null}
+                    </div>
+
+                    <p className="text-xs text-muted-foreground">
+                      {t('fields.logoHint')}
+                    </p>
+
+                    {isUploadingLogo ? (
+                      <p className="text-xs text-muted-foreground">
+                        {t('fields.logoUploading', {
+                          progress: logoUploadProgress,
+                        })}
+                      </p>
+                    ) : null}
+                  </div>
+                </div>
+              </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}>
+              <Button
+                type="submit"
+                disabled={form.formState.isSubmitting || isUploadingLogo}
+              >
                 {t('common.save')}
               </Button>
             </div>
@@ -565,9 +880,7 @@ export default function ContasBancariasPage() {
               <CardHeader>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                    <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
-                      <TipoIcon className="h-5 w-5" />
-                    </div>
+                    <BankAccountLogo account={conta} icon={TipoIcon} />
                     <div>
                       <div className="flex gap-4 items-center">
                         <CardTitle className="text-base">
@@ -655,21 +968,24 @@ export default function ContasBancariasPage() {
                         {t('accountCard.reconcile')}
                       </Link>
                     </Button>
-                    <div className="ml-auto flex shrink-0 gap-2">
-                      <Button variant="outline" size="sm">
-                        <Upload className="h-4 w-4" />
-                      </Button>
+                    <div className="ml-auto inline-flex shrink-0 overflow-hidden rounded-md border bg-background shadow-sm">
                       <Button
-                        variant="outline"
+                        variant="ghost"
                         size="sm"
+                        className="rounded-none border-0 px-3 hover:bg-muted"
                         onClick={() => handleEdit(conta)}
+                        aria-label={t('common.edit')}
+                        title={t('common.edit')}
                       >
                         <Pencil className="h-4 w-4" />
                       </Button>
                       <Button
-                        variant="outline"
+                        variant="ghost"
                         size="sm"
+                        className="rounded-none border-0 border-l px-3 text-destructive hover:bg-destructive/10 hover:text-destructive"
                         onClick={() => setAccountIdToDelete(conta.id)}
+                        aria-label={deleteDialogTitle}
+                        title={deleteDialogTitle}
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>

package/hedhog/frontend/messages/en.json

@@ -38,8 +38,44 @@
       "default": {
         "title": "Default",
         "description": "Overdue titles"
+      },
+      "pendingApprovals": {
+        "title": "Approvals",
+        "countLabel": "open",
+        "description": "In review: {value}"
+      },
+      "pendingReconciliation": {
+        "title": "Reconciliation",
+        "countLabel": "pending",
+        "description": "Active accounts: {value}"
       }
     },
+    "bankReconciliation": {
+      "title": "Bank Reconciliation",
+      "description": "Pending statements and differences by account",
+      "pending": "Pending",
+      "reconciled": "Reconciled",
+      "accounts": "Accounts",
+      "difference": "Difference to review",
+      "allClear": "All active accounts are fully reconciled.",
+      "unnamedAccount": "Unnamed account"
+    },
+    "approvalQueue": {
+      "title": "Approval Queue",
+      "description": "Most recent financial approvals waiting for action",
+      "defaultPolicy": "Financial approval",
+      "empty": "No approvals pending right now."
+    },
+    "aging": {
+      "title": "Receivable Aging",
+      "description": "Delinquency split by overdue range",
+      "totalLabel": "Total overdue",
+      "clientsLabel": "Clients impacted",
+      "range0to30": "0-30 days",
+      "range31to60": "31-60 days",
+      "range61to90": "61-90 days",
+      "range90plus": "90+ days"
+    },
     "cashFlow": {
       "title": "Cash Flow",
       "description": "Predicted vs Actual"
@@ -837,7 +873,12 @@
       "updateSuccess": "Bank account updated successfully",
       "updateError": "Failed to update bank account",
       "deleteSuccess": "Bank account deactivated successfully",
-      "deleteError": "Failed to deactivate bank account"
+      "deleteError": "Failed to deactivate bank account",
+      "logoUploadSuccess": "Logo uploaded successfully",
+      "logoUploadError": "Failed to upload logo",
+      "logoRemoveSuccess": "Logo removed successfully",
+      "logoInvalidType": "Please select a valid image file",
+      "logoTooLarge": "The logo must be 5 MB or smaller"
     },
     "deleteDialog": {
       "title": "Deactivate bank account",
@@ -863,7 +904,12 @@
       "type": "Type",
       "description": "Description",
       "descriptionPlaceholder": "Example: Main Account",
-      "initialBalance": "Initial Balance"
+      "initialBalance": "Initial Balance",
+      "logo": "Logo",
+      "logoAction": "Upload logo",
+      "logoRemove": "Remove logo",
+      "logoHint": "Optional. Prefer a square image for the best result.",
+      "logoUploading": "Uploading logo... {progress}%"
     },
     "header": {
       "title": "Bank Accounts",

package/hedhog/frontend/messages/pt.json

@@ -38,8 +38,44 @@
       "default": {
         "title": "Inadimplência",
         "description": "Títulos vencidos"
+      },
+      "pendingApprovals": {
+        "title": "Aprovações",
+        "countLabel": "abertas",
+        "description": "Em análise: {value}"
+      },
+      "pendingReconciliation": {
+        "title": "Conciliação",
+        "countLabel": "pendentes",
+        "description": "Contas ativas: {value}"
       }
     },
+    "bankReconciliation": {
+      "title": "Conciliação Bancária",
+      "description": "Extratos pendentes e diferenças por conta",
+      "pending": "Pendentes",
+      "reconciled": "Conciliados",
+      "accounts": "Contas",
+      "difference": "Diferença a revisar",
+      "allClear": "Todas as contas ativas estão conciliadas.",
+      "unnamedAccount": "Conta sem nome"
+    },
+    "approvalQueue": {
+      "title": "Fila de Aprovações",
+      "description": "Aprovações financeiras mais recentes aguardando ação",
+      "defaultPolicy": "Aprovação financeira",
+      "empty": "Não há aprovações pendentes no momento."
+    },
+    "aging": {
+      "title": "Aging de Recebíveis",
+      "description": "Inadimplência segmentada por faixa de atraso",
+      "totalLabel": "Total em atraso",
+      "clientsLabel": "Clientes impactados",
+      "range0to30": "0-30 dias",
+      "range31to60": "31-60 dias",
+      "range61to90": "61-90 dias",
+      "range90plus": "90+ dias"
+    },
     "cashFlow": {
       "title": "Fluxo de Caixa",
       "description": "Previsto vs Realizado"
@@ -837,7 +873,12 @@
       "updateSuccess": "Conta bancária atualizada com sucesso",
       "updateError": "Erro ao atualizar conta bancária",
       "deleteSuccess": "Conta bancária inativada com sucesso",
-      "deleteError": "Erro ao inativar conta bancária"
+      "deleteError": "Erro ao inativar conta bancária",
+      "logoUploadSuccess": "Logo enviado com sucesso",
+      "logoUploadError": "Erro ao enviar logo",
+      "logoRemoveSuccess": "Logo removido com sucesso",
+      "logoInvalidType": "Selecione um arquivo de imagem válido",
+      "logoTooLarge": "O logo deve ter no máximo 5 MB"
     },
     "deleteDialog": {
       "title": "Inativar conta bancária",
@@ -863,7 +904,12 @@
       "type": "Tipo",
       "description": "Descrição",
       "descriptionPlaceholder": "Ex: Conta Principal",
-      "initialBalance": "Saldo Inicial"
+      "initialBalance": "Saldo Inicial",
+      "logo": "Logo",
+      "logoAction": "Enviar logo",
+      "logoRemove": "Remover logo",
+      "logoHint": "Opcional. Use preferencialmente uma imagem quadrada.",
+      "logoUploading": "Enviando logo... {progress}%"
     },
     "header": {
       "title": "Contas Bancárias",

package/hedhog/frontend/widgets/alerts.tsx.ejs

@@ -5,7 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useWidgetData } from '@/hooks/use-widget-data';
 import { AlertTriangle } from 'lucide-react';
 import { useLocale, useTranslations } from 'next-intl';
-import { WidgetWrapper } from '../widget-wrapper';
+import { WidgetWrapper } from '@/app/(app)/(libraries)/core/dashboard/components';
 
 interface FinanceData {
   titulosPagar?: Array<{