@hed-hog/finance 0.0.318 → 0.0.319

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

@@ -1,8 +1,14 @@
 'use client';
 
 import { FinancePageSection } from '@/app/(app)/(libraries)/finance/_components/finance-layout';
-import { EmptyState, Page, PageHeader } from '@/components/entity-list';
+import {
+  EmptyState,
+  Page,
+  PageHeader,
+  PaginationFooter,
+} from '@/components/entity-list';
 import { Button } from '@/components/ui/button';
+import { DateRangePicker } from '@/components/ui/date-range-picker';
 import {
   Dialog,
   DialogContent,
@@ -57,7 +63,9 @@ import {
   ArrowDownRight,
   ArrowUpRight,
   Download,
+  Pencil,
   Plus,
+  Trash2,
   Upload,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
@@ -74,6 +82,10 @@ type BankAccount = {
   saldoAtual: number;
 };
 
+type PaginatedBankAccountsResponse = {
+  data: BankAccount[];
+};
+
 type Statement = {
   id: string;
   contaBancariaId: string;
@@ -87,14 +99,41 @@ type Statement = {
     | 'conciliado'
     | 'estornado'
     | 'ajustado';
+  canEdit?: boolean;
+  canDelete?: boolean;
+  isTransfer?: boolean;
 };
 
+type PaginatedStatementsResponse = {
+  data: Statement[];
+  total: number;
+  page: number;
+  pageSize: number;
+  prev: number | null;
+  next: number | null;
+  lastPage: number;
+  summary?: {
+    totalEntradas?: number;
+    totalSaidas?: number;
+  };
+};
+
+const statementEntrySchema = z.object({
+  date: z.string().trim().min(1, 'Data é obrigatória'),
+  description: z.string().trim().min(1, 'Descrição é obrigatória'),
+  type: z.enum(['entrada', 'saida']),
+  amount: z.number().min(0.01, 'Valor deve ser maior que zero'),
+});
+
+type StatementEntryFormValues = z.infer<typeof statementEntrySchema>;
+
 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(),
+  dataInicial: z.string().optional(),
   saldoInicial: z.number().min(0, 'Saldo inicial inválido'),
 });
 
@@ -148,6 +187,7 @@ function NovaContaBancariaSheet({
       conta: '',
       tipo: '',
       descricao: '',
+      dataInicial: new Date().toISOString().slice(0, 10),
       saldoInicial: 0,
     },
   });
@@ -170,6 +210,9 @@ function NovaContaBancariaSheet({
         conta: watchedBankValues.conta ?? '',
         tipo: watchedBankValues.tipo ?? '',
         descricao: watchedBankValues.descricao ?? '',
+        dataInicial:
+          watchedBankValues.dataInicial ??
+          new Date().toISOString().slice(0, 10),
         saldoInicial: watchedBankValues.saldoInicial ?? 0,
       },
     },
@@ -179,6 +222,8 @@ function NovaContaBancariaSheet({
       (watchedBankValues.conta ?? '').trim() ||
       (watchedBankValues.tipo ?? '').trim() ||
       (watchedBankValues.descricao ?? '').trim() ||
+      (watchedBankValues.dataInicial ?? '').trim() !==
+        new Date().toISOString().slice(0, 10) ||
       (watchedBankValues.saldoInicial ?? 0) > 0
     ),
     enabled: open,
@@ -224,6 +269,7 @@ function NovaContaBancariaSheet({
         conta: '',
         tipo: '',
         descricao: '',
+        dataInicial: new Date().toISOString().slice(0, 10),
         saldoInicial: 0,
       }
     );
@@ -240,6 +286,7 @@ function NovaContaBancariaSheet({
           account: values.conta || undefined,
           type: values.tipo,
           description: values.descricao?.trim() || undefined,
+          start_date: values.dataInicial || undefined,
           initial_balance: values.saldoInicial,
         },
       });
@@ -370,6 +417,28 @@ function NovaContaBancariaSheet({
                 )}
               />
 
+              <FormField
+                control={form.control}
+                name="dataInicial"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Data inicial</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="date"
+                        {...field}
+                        value={
+                          field.value || new Date().toISOString().slice(0, 10)
+                        }
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-4">
               <FormField
                 control={form.control}
                 name="saldoInicial"
@@ -390,25 +459,25 @@ function NovaContaBancariaSheet({
                   </FormItem>
                 )}
               />
-            </div>
 
-            <FormField
-              control={form.control}
-              name="descricao"
-              render={({ field }) => (
-                <FormItem>
-                  <FormLabel>{tBank('fields.description')}</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder={tBank('fields.descriptionPlaceholder')}
-                      {...field}
-                      value={field.value || ''}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+              <FormField
+                control={form.control}
+                name="descricao"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{tBank('fields.description')}</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder={tBank('fields.descriptionPlaceholder')}
+                        {...field}
+                        value={field.value || ''}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
 
             {draftStatusContent ? (
               <p className="text-xs text-muted-foreground">
@@ -681,6 +750,179 @@ function ImportarExtratoSheet({
   );
 }
 
+function NovoLancamentoSheet({
+  open,
+  onOpenChange,
+  bankAccountId,
+  onCreated,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  bankAccountId?: string;
+  onCreated: () => Promise<void> | void;
+}) {
+  const { request, showToastHandler } = useApp();
+  const form = useForm<StatementEntryFormValues>({
+    resolver: zodResolver(statementEntrySchema),
+    defaultValues: {
+      date: new Date().toISOString().slice(0, 10),
+      description: '',
+      type: 'entrada',
+      amount: 0,
+    },
+  });
+
+  useEffect(() => {
+    if (open) {
+      form.reset({
+        date: new Date().toISOString().slice(0, 10),
+        description: '',
+        type: 'entrada',
+        amount: 0,
+      });
+    }
+  }, [form, open]);
+
+  const handleSubmit = async (values: StatementEntryFormValues) => {
+    if (!bankAccountId) {
+      showToastHandler?.('error', 'Selecione uma conta bancária');
+      return;
+    }
+
+    try {
+      await request({
+        url: '/finance/statements',
+        method: 'POST',
+        data: {
+          bank_account_id: Number(bankAccountId),
+          date: values.date,
+          description: values.description.trim(),
+          type: values.type,
+          amount: values.amount,
+        },
+      });
+
+      await onCreated();
+      onOpenChange(false);
+      showToastHandler?.('success', 'Movimentação adicionada com sucesso');
+    } catch (error: any) {
+      const message = error?.response?.data?.message;
+      showToastHandler?.(
+        'error',
+        typeof message === 'string' && message.trim()
+          ? message
+          : 'Não foi possível adicionar a movimentação'
+      );
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle>Novo lançamento</SheetTitle>
+          <SheetDescription>
+            Adicione uma movimentação manual ao extrato da conta bancária.
+          </SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            className="space-y-4 px-4"
+            onSubmit={form.handleSubmit(handleSubmit)}
+          >
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="date"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Data</FormLabel>
+                    <FormControl>
+                      <Input type="date" {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="type"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Tipo</FormLabel>
+                    <Select value={field.value} onValueChange={field.onChange}>
+                      <FormControl>
+                        <SelectTrigger className="w-full">
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="entrada">Entrada</SelectItem>
+                        <SelectItem value="saida">Saída</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Descrição</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="amount"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Valor</FormLabel>
+                  <FormControl>
+                    <InputMoney
+                      ref={field.ref}
+                      name={field.name}
+                      value={field.value}
+                      onBlur={field.onBlur}
+                      onValueChange={(value) => field.onChange(value ?? 0)}
+                      placeholder="0,00"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end gap-2 pt-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
+                Cancelar
+              </Button>
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                Salvar
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
 export default function ExtratosPage() {
   const t = useTranslations('finance.StatementsPage');
   const { request, showToastHandler } = useApp();
@@ -695,8 +937,29 @@ export default function ExtratosPage() {
   const [search, setSearch] = useState('');
   const [debouncedSearch, setDebouncedSearch] = useState('');
   const [isImportSheetOpen, setIsImportSheetOpen] = useState(false);
+  const [isNewEntrySheetOpen, setIsNewEntrySheetOpen] = useState(false);
   const [extratoSelecionado, setExtratoSelecionado] =
     useState<Statement | null>(null);
+  const [fromDate, setFromDate] = useState('');
+  const [toDate, setToDate] = useState('');
+  const [page, setPage] = useState(1);
+  // Inline editing state — keyed by statement id
+  const [editingValueId, setEditingValueId] = useState<string | null>(null);
+  const [editingValue, setEditingValue] = useState(0);
+  const [editingDescId, setEditingDescId] = useState<string | null>(null);
+  const [editingDesc, setEditingDesc] = useState('');
+  const [editingDateId, setEditingDateId] = useState<string | null>(null);
+  const [editingDate, setEditingDate] = useState('');
+  // Pending edits to save
+  const [pendingEdits, setPendingEdits] = useState<
+    Map<string, { amount?: number; description?: string; date?: string }>
+  >(new Map());
+  const [isSavingEdits, setIsSavingEdits] = useState(false);
+  const [statementToDelete, setStatementToDelete] = useState<Statement | null>(
+    null
+  );
+  const [isDeletingStatement, setIsDeletingStatement] = useState(false);
+  const pageSize = 10;
 
   useEffect(() => {
     const timeoutId = window.setTimeout(() => {
@@ -715,9 +978,20 @@ export default function ExtratosPage() {
         const response = await request({
           url: '/finance/bank-accounts',
           method: 'GET',
+          params: {
+            page: 1,
+            pageSize: 100,
+          },
         });
 
-        return (response?.data || []) as BankAccount[];
+        const payload = response?.data as
+          | { data?: BankAccount[] }
+          | BankAccount[]
+          | undefined;
+
+        return (
+          Array.isArray(payload) ? payload : payload?.data || []
+        ) as BankAccount[];
       },
     });
 
@@ -769,44 +1043,98 @@ export default function ExtratosPage() {
     router.replace(`${pathname}?${params.toString()}`);
   }, [activeContaFilter, bankAccountIdFromUrl, pathname, router, searchParams]);
 
-  const { data: extratos = [], refetch: refetchExtratos } = useQuery<
-    Statement[]
-  >({
-    queryKey: ['finance-statements', activeContaFilter, debouncedSearch],
-    queryFn: async () => {
-      if (!activeContaFilter) {
-        return [];
-      }
+  const { data: extratosResponse, refetch: refetchExtratos } =
+    useQuery<PaginatedStatementsResponse>({
+      queryKey: [
+        'finance-statements',
+        activeContaFilter,
+        debouncedSearch,
+        fromDate,
+        toDate,
+        page,
+        pageSize,
+      ],
+      queryFn: async () => {
+        if (!activeContaFilter) {
+          return {
+            data: [],
+            total: 0,
+            page,
+            pageSize,
+            prev: null,
+            next: null,
+            lastPage: 1,
+            summary: {
+              totalEntradas: 0,
+              totalSaidas: 0,
+            },
+          } as PaginatedStatementsResponse;
+        }
 
-      const params = new URLSearchParams();
-      params.set('bank_account_id', activeContaFilter);
+        const params: Record<string, string | number> = {
+          bank_account_id: activeContaFilter,
+          page,
+          pageSize,
+        };
 
-      const trimmedSearch = debouncedSearch.trim();
-      if (trimmedSearch) {
-        params.set('search', trimmedSearch);
-      }
+        const trimmedSearch = debouncedSearch.trim();
+        if (trimmedSearch) {
+          params.search = trimmedSearch;
+        }
 
-      const response = await request({
-        url: `/finance/statements?${params.toString()}`,
-        method: 'GET',
-      });
+        if (fromDate) {
+          params.from = fromDate;
+        }
 
-      return (response?.data || []) as Statement[];
-    },
-  });
+        if (toDate) {
+          params.to = toDate;
+        }
+
+        const response = await request({
+          url: '/finance/statements',
+          method: 'GET',
+          params,
+        });
 
+        return (response?.data || {
+          data: [],
+          total: 0,
+          page,
+          pageSize,
+          prev: null,
+          next: null,
+          lastPage: 1,
+          summary: {
+            totalEntradas: 0,
+            totalSaidas: 0,
+          },
+        }) as PaginatedStatementsResponse;
+      },
+      placeholderData: (old) => old,
+    });
+
+  useEffect(() => {
+    setPage(1);
+  }, [activeContaFilter, debouncedSearch, fromDate, toDate]);
+
+  const extratos = extratosResponse?.data ?? [];
+  const totalExtratos = extratosResponse?.total ?? 0;
   const conta = contasBancarias.find((item) => item.id === activeContaFilter);
   const contaExtratoSelecionado = extratoSelecionado
     ? contasBancarias.find(
         (item) => item.id === extratoSelecionado.contaBancariaId
       )
     : undefined;
-  const totalEntradas = extratos
-    .filter((e) => e.tipo === 'entrada')
-    .reduce((acc, e) => acc + e.valor, 0);
-  const totalSaidas = extratos
-    .filter((e) => e.tipo === 'saida')
-    .reduce((acc, e) => acc + e.valor, 0);
+  const totalEntradas =
+    extratosResponse?.summary?.totalEntradas ??
+    extratos
+      .filter((statement) => statement.tipo === 'entrada')
+      .reduce((acc, statement) => acc + statement.valor, 0);
+  const totalSaidas =
+    extratosResponse?.summary?.totalSaidas ??
+    extratos
+      .filter((statement) => statement.tipo === 'saida')
+      .reduce((acc, statement) => acc + statement.valor, 0);
   const summaryCards = [
     {
       key: 'inflows',
@@ -836,7 +1164,6 @@ export default function ExtratosPage() {
       layout: 'compact' as const,
     },
   ];
-
   const handleExport = async () => {
     if (!activeContaFilter) {
       showToastHandler?.('error', 'Selecione uma conta bancária para exportar');
@@ -852,6 +1179,14 @@ export default function ExtratosPage() {
         params.set('search', trimmedSearch);
       }
 
+      if (fromDate) {
+        params.set('from', fromDate);
+      }
+
+      if (toDate) {
+        params.set('to', toDate);
+      }
+
       const response = await request<Blob>({
         url: `/finance/statements/export?${params.toString()}`,
         method: 'GET',
@@ -886,6 +1221,136 @@ export default function ExtratosPage() {
     }
   };
 
+  const handleStartInlineEdit = (extrato: Statement) => {
+    if (!extrato.canEdit) {
+      return;
+    }
+
+    setEditingValueId(extrato.id);
+    setEditingValue(Math.abs(Number(extrato.valor || 0)));
+  };
+
+  const handleChangeInlineValue = (extrato: Statement, value: number) => {
+    setEditingValue(value);
+    setPendingEdits((prev) => {
+      const next = new Map(prev);
+      const existing = next.get(extrato.id) ?? {};
+      next.set(extrato.id, { ...existing, amount: value });
+      return next;
+    });
+  };
+
+  const handleStartInlineEditDesc = (extrato: Statement) => {
+    if (!extrato.canEdit) return;
+    setEditingDescId(extrato.id);
+    setEditingDesc(extrato.descricao);
+  };
+
+  const handleChangeInlineDesc = (extrato: Statement, value: string) => {
+    setEditingDesc(value);
+    setPendingEdits((prev) => {
+      const next = new Map(prev);
+      const existing = next.get(extrato.id) ?? {};
+      next.set(extrato.id, { ...existing, description: value });
+      return next;
+    });
+  };
+
+  const handleStartInlineEditDate = (extrato: Statement) => {
+    if (!extrato.canEdit) return;
+    setEditingDateId(extrato.id);
+    setEditingDate(extrato.data.slice(0, 10));
+  };
+
+  const handleChangeInlineDate = (extrato: Statement, value: string) => {
+    setEditingDate(value);
+    setPendingEdits((prev) => {
+      const next = new Map(prev);
+      const existing = next.get(extrato.id) ?? {};
+      next.set(extrato.id, { ...existing, date: value });
+      return next;
+    });
+  };
+
+  const handleCancelPendingEdits = () => {
+    setPendingEdits(new Map());
+    setEditingValueId(null);
+    setEditingDescId(null);
+    setEditingDateId(null);
+  };
+
+  const handleSaveAllPendingEdits = async () => {
+    if (pendingEdits.size === 0) return;
+    setIsSavingEdits(true);
+    let hasError = false;
+    try {
+      for (const [id, edits] of pendingEdits.entries()) {
+        await request({
+          url: `/finance/statements/${id}`,
+          method: 'PATCH',
+          data: edits,
+        });
+      }
+    } catch (error: any) {
+      hasError = true;
+      const message = error?.response?.data?.message;
+      showToastHandler?.(
+        'error',
+        typeof message === 'string' && message.trim()
+          ? message
+          : 'Não foi possível salvar as alterações'
+      );
+    } finally {
+      setIsSavingEdits(false);
+    }
+
+    if (!hasError) {
+      setPendingEdits(new Map());
+      setEditingValueId(null);
+      setEditingDescId(null);
+      setEditingDateId(null);
+      await Promise.all([refetchExtratos(), refetchContasBancarias()]);
+      showToastHandler?.('success', 'Alterações salvas com sucesso');
+    }
+  };
+
+  const handleDeleteStatement = async (extrato: Statement) => {
+    if (!extrato.canDelete) {
+      return;
+    }
+
+    setStatementToDelete(extrato);
+  };
+
+  const confirmDeleteStatement = async () => {
+    if (!statementToDelete) return;
+    setIsDeletingStatement(true);
+    try {
+      await request({
+        url: `/finance/statements/${statementToDelete.id}`,
+        method: 'DELETE',
+      });
+
+      if (extratoSelecionado?.id === statementToDelete.id) {
+        setExtratoSelecionado(null);
+      }
+
+      setStatementToDelete(null);
+      await Promise.all([refetchExtratos(), refetchContasBancarias()]);
+      showToastHandler?.('success', 'Movimentação excluída com sucesso');
+    } catch (error: any) {
+      const message = error?.response?.data?.message;
+      showToastHandler?.(
+        'error',
+        typeof message === 'string' && message.trim()
+          ? message
+          : 'Não foi possível excluir a movimentação'
+      );
+    } finally {
+      setIsDeletingStatement(false);
+    }
+  };
+
   return (
     <Page>
       <PageHeader
@@ -902,6 +1367,10 @@ export default function ExtratosPage() {
               <Download className="mr-2 h-4 w-4" />
               {t('actions.export')}
             </Button>
+            <Button onClick={() => setIsNewEntrySheetOpen(true)}>
+              <Plus className="mr-2 h-4 w-4" />
+              Novo lançamento
+            </Button>
             <ImportarExtratoSheet
               contasBancarias={contasBancarias}
               t={t}
@@ -915,6 +1384,15 @@ export default function ExtratosPage() {
         }
       />
 
+      <NovoLancamentoSheet
+        open={isNewEntrySheetOpen}
+        onOpenChange={setIsNewEntrySheetOpen}
+        bankAccountId={activeContaFilter}
+        onCreated={async () => {
+          await Promise.all([refetchExtratos(), refetchContasBancarias()]);
+        }}
+      />
+
       <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
         <Select
           value={activeContaFilter}
@@ -944,6 +1422,13 @@ export default function ExtratosPage() {
             onSearchChange={setSearch}
           />
         </div>
+        <DateRangePicker
+          fromDate={fromDate}
+          toDate={toDate}
+          onFromDateChange={setFromDate}
+          onToDateChange={setToDate}
+          defaultPreset="thisMonth"
+        />
       </div>
 
       <KpiCardsGrid items={summaryCards} columns={3} />
@@ -951,10 +1436,10 @@ export default function ExtratosPage() {
       <FinancePageSection
         variant="flat"
         title={t('table.title')}
-        description={t('table.foundTransactions', { count: extratos.length })}
+        description={t('table.foundTransactions', { count: totalExtratos })}
         contentClassName="p-4 sm:p-5"
       >
-        {extratos.length > 0 ? (
+        {totalExtratos > 0 ? (
           <div className="overflow-x-auto">
             <Table className="min-w-190 table-fixed">
               <TableHeader>
@@ -972,6 +1457,7 @@ export default function ExtratosPage() {
                   <TableHead className="w-35">
                     {t('table.headers.reconciliation')}
                   </TableHead>
+                  <TableHead className="w-24 text-right">Ações</TableHead>
                 </TableRow>
               </TableHeader>
               <TableBody>
@@ -989,20 +1475,123 @@ export default function ExtratosPage() {
                     role="button"
                     tabIndex={0}
                   >
-                    <TableCell>{formatarData(extrato.data)}</TableCell>
+                    <TableCell>
+                      {editingDateId === extrato.id ? (
+                        <Input
+                          type="date"
+                          className="h-7 px-1 text-sm"
+                          value={editingDate}
+                          onChange={(e) =>
+                            handleChangeInlineDate(extrato, e.target.value)
+                          }
+                          onKeyDown={(e) => {
+                            e.stopPropagation();
+                            if (e.key === 'Escape') setEditingDateId(null);
+                            if (e.key === 'Enter') {
+                              e.preventDefault();
+                              setEditingDateId(null);
+                              handleSaveAllPendingEdits();
+                            }
+                          }}
+                          onClick={(e) => e.stopPropagation()}
+                          autoFocus
+                        />
+                      ) : (
+                        <button
+                          type="button"
+                          className={`inline-flex items-center gap-1 ${extrato.canEdit ? 'cursor-pointer underline-offset-2 hover:underline' : 'cursor-default'}`}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleStartInlineEditDate(extrato);
+                          }}
+                        >
+                          {extrato.canEdit ? (
+                            <Pencil className="h-3 w-3" />
+                          ) : null}
+                          {formatarData(extrato.data)}
+                        </button>
+                      )}
+                    </TableCell>
                     <TableCell className="truncate" title={extrato.descricao}>
-                      {extrato.descricao}
+                      {editingDescId === extrato.id ? (
+                        <Input
+                          className="h-7 px-1 text-sm"
+                          value={editingDesc}
+                          onChange={(e) =>
+                            handleChangeInlineDesc(extrato, e.target.value)
+                          }
+                          onKeyDown={(e) => {
+                            e.stopPropagation();
+                            if (e.key === 'Escape') setEditingDescId(null);
+                            if (e.key === 'Enter') {
+                              e.preventDefault();
+                              setEditingDescId(null);
+                              handleSaveAllPendingEdits();
+                            }
+                          }}
+                          onClick={(e) => e.stopPropagation()}
+                          autoFocus
+                        />
+                      ) : (
+                        <button
+                          type="button"
+                          className={`inline-flex max-w-full items-center gap-1 truncate ${extrato.canEdit ? 'cursor-pointer underline-offset-2 hover:underline' : 'cursor-default'}`}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleStartInlineEditDesc(extrato);
+                          }}
+                          title={extrato.descricao}
+                        >
+                          {extrato.canEdit ? (
+                            <Pencil className="h-3 w-3 shrink-0" />
+                          ) : null}
+                          <span className="truncate">{extrato.descricao}</span>
+                        </button>
+                      )}
                     </TableCell>
                     <TableCell className="text-right">
-                      <span
-                        className={
-                          extrato.tipo === 'entrada'
-                            ? 'text-green-600'
-                            : 'text-red-600'
-                        }
-                      >
-                        <Money value={extrato.valor} />
-                      </span>
+                      {editingValueId === extrato.id ? (
+                        <InputMoney
+                          value={editingValue}
+                          onValueChange={(value) =>
+                            handleChangeInlineValue(extrato, Number(value || 0))
+                          }
+                          onKeyDown={(event) => {
+                            event.stopPropagation();
+                            if (event.key === 'Escape') {
+                              setEditingValueId(null);
+                            }
+                            if (event.key === 'Enter') {
+                              event.preventDefault();
+                              setEditingValueId(null);
+                              handleSaveAllPendingEdits();
+                            }
+                          }}
+                          autoFocus
+                        />
+                      ) : (
+                        <button
+                          type="button"
+                          className={`inline-flex items-center gap-1 ${
+                            extrato.canEdit
+                              ? 'cursor-pointer underline-offset-2 hover:underline'
+                              : 'cursor-default'
+                          } ${
+                            extrato.tipo === 'entrada'
+                              ? 'text-green-600'
+                              : 'text-red-600'
+                          }`}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            handleStartInlineEdit(extrato);
+                          }}
+                        >
+                          {extrato.canEdit ? (
+                            <Pencil className="h-3 w-3" />
+                          ) : null}
+                          <Money value={extrato.valor} />
+                        </button>
+                      )}
                     </TableCell>
                     <TableCell>
                       {extrato.tipo === 'entrada' ? (
@@ -1023,6 +1612,21 @@ export default function ExtratosPage() {
                         type="conciliacao"
                       />
                     </TableCell>
+                    <TableCell className="text-right">
+                      {extrato.canDelete ? (
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon"
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            void handleDeleteStatement(extrato);
+                          }}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      ) : null}
+                    </TableCell>
                   </TableRow>
                 ))}
               </TableBody>
@@ -1037,6 +1641,18 @@ export default function ExtratosPage() {
             onAction={() => setIsImportSheetOpen(true)}
           />
         )}
+        {totalExtratos > 0 ? (
+          <div className="border-t border-border/50 px-4 py-4 sm:px-6">
+            <PaginationFooter
+              currentPage={page}
+              pageSize={pageSize}
+              totalItems={totalExtratos}
+              onPageChange={setPage}
+              onPageSizeChange={() => undefined}
+              pageSizeOptions={[10]}
+            />
+          </div>
+        ) : null}
       </FinancePageSection>
 
       <Dialog
@@ -1139,6 +1755,61 @@ export default function ExtratosPage() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {pendingEdits.size > 0 ? (
+        <div className="fixed bottom-6 right-6 z-50 flex items-center gap-2 rounded-lg bg-white p-3 shadow-lg ring-1 ring-black/10 dark:bg-zinc-900 dark:ring-white/10">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleCancelPendingEdits}
+            disabled={isSavingEdits}
+          >
+            Cancelar
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            onClick={() => void handleSaveAllPendingEdits()}
+            disabled={isSavingEdits}
+          >
+            {isSavingEdits ? 'Salvando...' : 'Salvar alterações'}
+          </Button>
+        </div>
+      ) : null}
+
+      <Dialog
+        open={statementToDelete !== null}
+        onOpenChange={(open) => {
+          if (!open && !isDeletingStatement) setStatementToDelete(null);
+        }}
+      >
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Excluir movimentação</DialogTitle>
+            <DialogDescription>
+              Esta ação não pode ser desfeita. A movimentação será removida
+              permanentemente do extrato.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="mt-2">
+            <Button
+              variant="outline"
+              onClick={() => setStatementToDelete(null)}
+              disabled={isDeletingStatement}
+            >
+              Cancelar
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => void confirmDeleteStatement()}
+              disabled={isDeletingStatement}
+            >
+              {isDeletingStatement ? 'Excluindo...' : 'Excluir'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Page>
   );
 }