@hed-hog/finance 0.0.365 → 0.0.370

package/hedhog/frontend/app/_components/bank-account-sheet.tsx.ejs

@@ -0,0 +1,902 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+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 { ResizableSheetContent } from '@/components/ui/resizable-sheet-content';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+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 { Landmark, Trash2, Upload } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useEffect, useMemo, useRef, useState, type ChangeEvent } from 'react';
+import { useForm, useWatch } from 'react-hook-form';
+import { z } from 'zod';
+import { FinanceSheetBody, FinanceSheetSection } from './finance-layout';
+
+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;
+};
+
+export 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 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';
+
+export function BankAccountSheet({
+  t,
+  onCreated,
+  onCreatedAccount,
+  open,
+  onOpenChange,
+  editingAccount,
+  onEditingAccountChange,
+}: {
+  t: ReturnType<typeof useTranslations>;
+  onCreated: () => Promise<unknown> | void;
+  onCreatedAccount?: (account: BankAccount) => 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 {
+      let createdAccount: BankAccount | null = null;
+
+      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 {
+        const response = 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,
+          },
+        });
+        createdAccount = (response?.data ?? null) as BankAccount | null;
+      }
+
+      await onCreated();
+
+      if (!editingAccount && createdAccount) {
+        onCreatedAccount?.(createdAccount);
+      }
+
+      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 = () => {
+    void cleanupUnsavedLogo();
+    clearDraft();
+    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>
+  );
+}