@hed-hog/finance 0.0.366 → 0.0.370

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

@@ -25,38 +25,8 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
-import { EntityPicker } from '@/components/ui/entity-picker';
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from '@/components/ui/form';
-import { Input } from '@/components/ui/input';
-import { InputMoney } from '@/components/ui/input-money';
 import { KpiCardsGrid } from '@/components/ui/kpi-cards-grid';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import {
-  Sheet,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
-import { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
-import { useFormDraft } from '@/hooks/use-form-draft';
-import { formatDateTime } from '@/lib/format-date';
 import { useApp, useQuery } from '@hed-hog/next-app-provider';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { formatDistanceToNow } from 'date-fns';
-import { enUS, ptBR } from 'date-fns/locale';
 import {
   Building2,
   Eye,
@@ -67,71 +37,19 @@ import {
   RefreshCw,
   Trash2,
   TrendingUp,
-  Upload,
   Wallet,
   type LucideIcon,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
-import { useEffect, useMemo, useRef, useState, type ChangeEvent } from 'react';
-import { useForm, useWatch } from 'react-hook-form';
-import { z } from 'zod';
+import { useState } from 'react';
 import {
-  FinancePageSection,
-  FinanceSheetBody,
-  FinanceSheetSection,
-} from '../../_components/finance-layout';
+  BankAccountSheet,
+  type BankAccount,
+} from '../../_components/bank-account-sheet';
+import { FinancePageSection } from '../../_components/finance-layout';
 import { useFinanceRealtimeRefresh } from '../../_lib/use-finance-realtime-refresh';
 
-const createBankAccountFormSchema = (t: ReturnType<typeof useTranslations>) =>
-  z.object({
-    banco: z.string().trim().min(1, t('validation.bankRequired')),
-    agencia: z.string().optional(),
-    conta: z.string().optional(),
-    tipo: z.string().min(1, t('validation.typeRequired')),
-    descricao: z.string().optional(),
-    logoFileId: z.number().int().nullable().optional(),
-    currencyId: z.number().int().nullable().optional(),
-    dataInicial: z.string().optional(),
-    saldoInicial: z.number().min(0, t('validation.initialBalanceInvalid')),
-  });
-
-type BankAccountFormValues = z.infer<
-  ReturnType<typeof createBankAccountFormSchema>
->;
-
-type Currency = {
-  id: string;
-  code: string;
-  name: string;
-  symbol: string;
-  ativo: boolean;
-};
-
-type BankAccountCurrency = {
-  id: string;
-  code: string;
-  symbol: string;
-  name: string;
-};
-
-type BankAccount = {
-  id: string;
-  codigo: string;
-  descricao: string;
-  banco: string;
-  agencia: string;
-  conta: string;
-  tipo: 'corrente' | 'poupanca' | 'investimento' | 'caixa';
-  logoFileId: number | null;
-  currencyId: number | null;
-  currency: BankAccountCurrency | null;
-  saldoAtual: number;
-  saldoConciliado: number;
-  ativo: boolean;
-  dataInicial: string | null;
-};
-
 type PaginatedBankAccountsResponse = {
   data: BankAccount[];
   total: number;
@@ -142,21 +60,6 @@ type PaginatedBankAccountsResponse = {
   lastPage: number;
 };
 
-type UploadedFilePayload = {
-  id?: number | string | null;
-};
-
-type BankAccountDraftPayload = {
-  mode: 'create' | 'edit';
-  accountId: string | null;
-  values: BankAccountFormValues;
-  logoFileId: number | null;
-  logoPreviewUrl: string | null;
-  currencyId: number | null;
-};
-
-const BANK_ACCOUNT_FORM_DRAFT_STORAGE_KEY = 'finance-bank-account-form-draft';
-
 function formatCurrency(value: number, currencyCode: string, locale: string) {
   const localeTag = locale.startsWith('pt') ? 'pt-BR' : 'en-US';
   return new Intl.NumberFormat(localeTag, {
@@ -197,796 +100,6 @@ function BankAccountLogo({
   );
 }
 
-function NovaContaSheet({
-  t,
-  onCreated,
-  open,
-  onOpenChange,
-  editingAccount,
-  onEditingAccountChange,
-}: {
-  t: ReturnType<typeof useTranslations>;
-  onCreated: () => Promise<unknown> | void;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  editingAccount: BankAccount | null;
-  onEditingAccountChange: (account: BankAccount | null) => void;
-}) {
-  const { request, showToastHandler, currentLocaleCode, getSettingValue } =
-    useApp();
-
-  const { data: currenciesData, refetch: refetchCurrencies } = useQuery<
-    Currency[]
-  >({
-    queryKey: ['finance-currencies-for-select'],
-    queryFn: async () => {
-      const response = await request({
-        url: '/finance/currencies',
-        method: 'GET',
-      });
-      return (response.data || []) as Currency[];
-    },
-    placeholderData: [],
-  });
-  const currencies = currenciesData || [];
-
-  const createSuccessMessage = t('messages.createSuccess');
-  const createErrorMessage = t('messages.createError');
-  const updateSuccessMessage = t('messages.updateSuccess');
-  const updateErrorMessage = t('messages.updateError');
-  const logoUploadSuccessMessage = t('messages.logoUploadSuccess');
-  const logoUploadErrorMessage = t('messages.logoUploadError');
-  const logoRemoveSuccessMessage = t('messages.logoRemoveSuccess');
-  const logoInvalidTypeMessage = t('messages.logoInvalidType');
-  const logoTooLargeMessage = t('messages.logoTooLarge');
-
-  const form = useForm<BankAccountFormValues>({
-    resolver: zodResolver(createBankAccountFormSchema(t)),
-    defaultValues: {
-      banco: '',
-      agencia: '',
-      conta: '',
-      tipo: '',
-      descricao: '',
-      logoFileId: null,
-      currencyId: null,
-      dataInicial: new Date().toISOString().slice(0, 10),
-      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 watchedFormValues = useWatch({
-    control: form.control,
-  });
-
-  const hasDraftContent = useMemo(
-    () =>
-      Boolean(
-        (watchedFormValues.banco ?? '').trim() ||
-        (watchedFormValues.agencia ?? '').trim() ||
-        (watchedFormValues.conta ?? '').trim() ||
-        (watchedFormValues.tipo ?? '').trim() ||
-        (watchedFormValues.descricao ?? '').trim() ||
-        (watchedFormValues.dataInicial ?? '').trim() !==
-          new Date().toISOString().slice(0, 10) ||
-        (watchedFormValues.saldoInicial ?? 0) > 0 ||
-        logoFileId != null
-      ),
-    [watchedFormValues, logoFileId]
-  );
-
-  const draftValue = useMemo<BankAccountDraftPayload>(
-    () => ({
-      mode: editingAccount ? 'edit' : 'create',
-      accountId: editingAccount?.id ?? null,
-      values: {
-        banco: watchedFormValues.banco ?? '',
-        agencia: watchedFormValues.agencia ?? '',
-        conta: watchedFormValues.conta ?? '',
-        tipo: watchedFormValues.tipo ?? '',
-        descricao: watchedFormValues.descricao ?? '',
-        logoFileId: logoFileId ?? null,
-        dataInicial:
-          watchedFormValues.dataInicial ||
-          new Date().toISOString().slice(0, 10),
-        saldoInicial: watchedFormValues.saldoInicial ?? 0,
-        currencyId: watchedFormValues.currencyId ?? null,
-      },
-      logoFileId: logoFileId ?? null,
-      logoPreviewUrl,
-      currencyId: watchedFormValues.currencyId ?? null,
-    }),
-    [editingAccount, logoFileId, logoPreviewUrl, watchedFormValues]
-  );
-
-  const {
-    clearDraft,
-    loadDraft,
-    hasDraft,
-    savedAt: draftSavedAt,
-  } = useFormDraft<BankAccountDraftPayload>({
-    storageKey: BANK_ACCOUNT_FORM_DRAFT_STORAGE_KEY,
-    value: draftValue,
-    hasData: hasDraftContent,
-    enabled: open,
-  });
-
-  const draftStatusContent = useMemo(() => {
-    if (!hasDraft || !draftSavedAt) {
-      return null;
-    }
-
-    const savedDate = new Date(draftSavedAt);
-    if (Number.isNaN(savedDate.getTime())) {
-      return null;
-    }
-
-    const locale = currentLocaleCode.startsWith('pt') ? ptBR : enUS;
-    const relativeLabel = formatDistanceToNow(savedDate, {
-      addSuffix: true,
-      locale,
-    });
-    const absoluteLabel = formatDateTime(
-      savedDate,
-      getSettingValue,
-      currentLocaleCode
-    );
-
-    return t('draftStatus', {
-      relativeLabel,
-      absoluteLabel,
-    });
-  }, [draftSavedAt, currentLocaleCode, getSettingValue, hasDraft, t]);
-
-  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 || !editingAccount) {
-      const brlCurrency = currencies.find((c) => c.code === 'BRL');
-      if (brlCurrency && open) {
-        form.setValue('currencyId', Number(brlCurrency.id));
-      }
-    }
-  }, [currencies, open, editingAccount, form]);
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-
-    const storedDraft = loadDraft();
-
-    if (editingAccount) {
-      const shouldRestoreDraft =
-        storedDraft?.payload.mode === 'edit' &&
-        storedDraft.payload.accountId === editingAccount.id;
-      const currentLogoFileId = shouldRestoreDraft
-        ? storedDraft.payload.logoFileId
-        : (editingAccount.logoFileId ?? null);
-
-      setLogoFileId(currentLogoFileId);
-      setPersistedLogoFileId(editingAccount.logoFileId ?? null);
-      setLogoPreviewUrl(
-        shouldRestoreDraft
-          ? storedDraft.payload.logoPreviewUrl
-          : currentLogoFileId
-            ? `${getLogoUrl(currentLogoFileId)}?ts=${Date.now()}`
-            : null
-      );
-      setLogoUploadProgress(0);
-
-      form.reset(
-        shouldRestoreDraft
-          ? storedDraft.payload.values
-          : {
-              banco: editingAccount.banco,
-              agencia:
-                editingAccount.agencia === '-' ? '' : editingAccount.agencia,
-              conta: editingAccount.conta === '-' ? '' : editingAccount.conta,
-              tipo: editingAccount.tipo,
-              descricao: editingAccount.descricao,
-              logoFileId: currentLogoFileId,
-              currencyId: editingAccount.currencyId ?? null,
-              dataInicial:
-                editingAccount.dataInicial ??
-                new Date().toISOString().slice(0, 10),
-              saldoInicial: editingAccount.saldoAtual,
-            }
-      );
-      return;
-    }
-
-    const shouldRestoreDraft = storedDraft?.payload.mode === 'create';
-
-    setLogoFileId(shouldRestoreDraft ? storedDraft.payload.logoFileId : null);
-    setPersistedLogoFileId(null);
-    setLogoPreviewUrl(
-      shouldRestoreDraft ? storedDraft.payload.logoPreviewUrl : null
-    );
-    setLogoUploadProgress(0);
-
-    form.reset(
-      shouldRestoreDraft
-        ? storedDraft.payload.values
-        : {
-            banco: '',
-            agencia: '',
-            conta: '',
-            tipo: '',
-            descricao: '',
-            logoFileId: null,
-            currencyId: null,
-            dataInicial: new Date().toISOString().slice(0, 10),
-            saldoInicial: 0,
-          }
-    );
-  }, [editingAccount, form, loadDraft, open]);
-
-  const handleSubmit = async (values: BankAccountFormValues) => {
-    const nextLogoFileId = values.logoFileId ?? null;
-    const previousPersistedLogoId = persistedLogoFileId;
-
-    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,
-            logo_file_id: nextLogoFileId,
-            currency_id: values.currencyId ?? null,
-            start_date: values.dataInicial || 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,
-            logo_file_id: nextLogoFileId,
-            currency_id: values.currencyId ?? null,
-            start_date: values.dataInicial || undefined,
-            initial_balance: values.saldoInicial,
-          },
-        });
-      }
-
-      await onCreated();
-
-      if (
-        previousPersistedLogoId &&
-        previousPersistedLogoId !== nextLogoFileId
-      ) {
-        await deleteFileById(previousPersistedLogoId);
-      }
-
-      clearDraft();
-      setPersistedLogoFileId(nextLogoFileId);
-      setLogoFileId(nextLogoFileId);
-      setLogoPreviewUrl(
-        nextLogoFileId ? `${getLogoUrl(nextLogoFileId)}?ts=${Date.now()}` : null
-      );
-      setLogoUploadProgress(0);
-      form.reset({
-        banco: '',
-        agencia: '',
-        conta: '',
-        tipo: '',
-        descricao: '',
-        logoFileId: null,
-        currencyId: null,
-        dataInicial: new Date().toISOString().slice(0, 10),
-        saldoInicial: 0,
-      });
-      onOpenChange(false);
-      onEditingAccountChange(null);
-      showToastHandler?.(
-        'success',
-        editingAccount ? updateSuccessMessage : createSuccessMessage
-      );
-    } catch {
-      showToastHandler?.(
-        'error',
-        editingAccount ? updateErrorMessage : createErrorMessage
-      );
-    }
-  };
-
-  const handleCancel = () => {
-    if (!hasDraftContent) {
-      void cleanupUnsavedLogo();
-    }
-    form.reset();
-    onEditingAccountChange(null);
-    onOpenChange(false);
-  };
-
-  return (
-    <Sheet
-      open={open}
-      onOpenChange={(nextOpen) => {
-        if (!nextOpen && !hasDraftContent) {
-          void cleanupUnsavedLogo();
-        }
-
-        onOpenChange(nextOpen);
-        if (!nextOpen) {
-          onEditingAccountChange(null);
-        }
-      }}
-    >
-      <ResizableSheetContent sheetId="finance-bank-account-form" defaultWidth={672} className="flex h-full w-full flex-col">
-        <SheetHeader>
-          <SheetTitle>
-            {editingAccount ? t('common.edit') : t('newAccount.title')}
-          </SheetTitle>
-          <SheetDescription>{t('newAccount.description')}</SheetDescription>
-        </SheetHeader>
-        <Form {...form}>
-          <form
-            className="flex h-full flex-col"
-            onSubmit={form.handleSubmit(handleSubmit)}
-          >
-            <FinanceSheetBody>
-              <FinanceSheetSection
-                title={t('sections.accountData.title')}
-                description={t('sections.accountData.description')}
-              >
-                <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 gap-4 md:grid-cols-2">
-                  <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>
-
-                <FormField
-                  control={form.control}
-                  name="tipo"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>{t('fields.type')}</FormLabel>
-                      <Select
-                        value={field.value}
-                        onValueChange={field.onChange}
-                      >
-                        <FormControl>
-                          <SelectTrigger className="w-full">
-                            <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 className="grid gap-4 md:grid-cols-2">
-                  <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>
-                    )}
-                  />
-
-                  <FormField
-                    control={form.control}
-                    name="dataInicial"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>Data inicial</FormLabel>
-                        <FormControl>
-                          <Input
-                            type="date"
-                            {...field}
-                            onChange={(e) =>
-                              field.onChange(
-                                e.target.value ||
-                                  new Date().toISOString().slice(0, 10)
-                              )
-                            }
-                            disabled={!!editingAccount}
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-
-                <div className="grid gap-4 md:grid-cols-2">
-                  <EntityPicker<Currency>
-                    form={form as never}
-                    name="currencyId"
-                    label={t('fields.currency')}
-                    placeholder={t('fields.currencyPlaceholder')}
-                    searchPlaceholder={t('fields.currencySearchPlaceholder')}
-                    entityLabel={t('fields.currencyEntityLabel')}
-                    valueType="number"
-                    clearable
-                    options={currencies}
-                    getOptionValue={(c) => c.id}
-                    getOptionLabel={(c) => `${c.symbol} ${c.code} — ${c.name}`}
-                    createTitle={t('fields.currencyCreateTitle')}
-                    createDescription={t('fields.currencyCreateDescription')}
-                    mapSearchToCreateValues={(s) => ({ code: s.toUpperCase() })}
-                    createFields={[
-                      {
-                        name: 'code',
-                        label: t('fields.currencyCode'),
-                        placeholder: t('fields.currencyCodePlaceholder'),
-                        required: true,
-                      },
-                      {
-                        name: 'name',
-                        label: t('fields.currencyName'),
-                        placeholder: t('fields.currencyNamePlaceholder'),
-                        required: true,
-                      },
-                      {
-                        name: 'symbol',
-                        label: t('fields.currencySymbol'),
-                        placeholder: t('fields.currencySymbolPlaceholder'),
-                        required: true,
-                      },
-                    ]}
-                    onCreate={async (values) => {
-                      const response = await request({
-                        url: '/finance/currencies',
-                        method: 'POST',
-                        data: {
-                          code: (values.code ?? '').toUpperCase(),
-                          name: values.name,
-                          symbol: values.symbol,
-                        },
-                      });
-                      void refetchCurrencies();
-                      return response.data as Currency;
-                    }}
-                  />
-
-                  <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>
-                    )}
-                  />
-                </div>
-              </FinanceSheetSection>
-
-              <FinanceSheetSection
-                title={t('sections.logo.title')}
-                description={t('sections.logo.description')}
-              >
-                <FormItem>
-                  <FormLabel>{t('fields.logo')}</FormLabel>
-                  <div className="flex flex-col gap-4 rounded-xl border border-dashed border-border/70 bg-muted/20 p-4 sm:flex-row sm:items-start">
-                    <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>
-              </FinanceSheetSection>
-            </FinanceSheetBody>
-
-            <div className="border-t px-4 py-4 sm:px-6">
-              {draftStatusContent ? (
-                <p className="mb-3 text-xs text-muted-foreground">
-                  {draftStatusContent}
-                </p>
-              ) : null}
-              <div className="flex justify-end gap-2">
-                <Button type="button" variant="outline" onClick={handleCancel}>
-                  {t('common.cancel')}
-                </Button>
-                <Button
-                  type="submit"
-                  disabled={form.formState.isSubmitting || isUploadingLogo}
-                >
-                  {t('common.save')}
-                </Button>
-              </div>
-            </div>
-          </form>
-        </Form>
-      </ResizableSheetContent>
-    </Sheet>
-  );
-}
-
 export default function ContasBancariasPage() {
   const t = useTranslations('finance.BankAccountsPage');
   const { request, showToastHandler, currentLocaleCode } = useApp();
@@ -1148,7 +261,7 @@ export default function ContasBancariasPage() {
         }
       />
 
-      <NovaContaSheet
+      <BankAccountSheet
         t={t}
         onCreated={refetch}
         open={sheetOpen}