mirror of
https://github.com/felipegcoutinho/openmonetis.git
synced 2026-03-10 04:51:47 +00:00
4237062bde
BREAKING CHANGE: Remove feature de seleção de período das preferências do usuário
Alterações principais:
- Adiciona sistema completo de relatórios por categoria
- Cria página /relatorios/categorias com filtros e visualizações
- Implementa tabela e gráfico de evolução mensal
- Adiciona funcionalidade de exportação de dados
- Cria skeleton otimizado para melhor UX de loading
- Remove feature de seleção de período das preferências
- Deleta lib/user-preferences/period.ts
- Remove colunas periodMonthsBefore e periodMonthsAfter do schema
- Remove todas as referências em 16+ arquivos
- Atualiza database schema via Drizzle
- Substitui Select de período por MonthPicker visual
- Implementa componente PeriodPicker reutilizável
- Integra shadcn MonthPicker customizado (português, Remix icons)
- Substitui createMonthOptions em todos os formulários
- Mantém formato "YYYY-MM" no banco de dados
- Melhora design da tabela de relatórios
- Mescla colunas Categoria e Tipo em uma única coluna
- Substitui badge de tipo por dot colorido discreto
- Reduz largura da tabela em ~120px
- Atualiza skeleton para refletir nova estrutura
- Melhorias gerais de UI
- Reduz espaçamento entre títulos da sidebar (p-2 → px-2 py-1)
- Adiciona MonthNavigation para navegação entre períodos
- Otimiza loading states com skeletons detalhados
79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { Label } from "@/components/ui/label";
|
|
import { DatePicker } from "@/components/ui/date-picker";
|
|
import { PeriodPicker } from "@/components/period-picker";
|
|
import { CurrencyInput } from "@/components/ui/currency-input";
|
|
import { CalculatorDialogButton } from "@/components/calculadora/calculator-dialog";
|
|
import { RiCalculatorLine } from "@remixicon/react";
|
|
import { EstabelecimentoInput } from "../../shared/estabelecimento-input";
|
|
import type { BasicFieldsSectionProps } from "./lancamento-dialog-types";
|
|
|
|
export function BasicFieldsSection({
|
|
formState,
|
|
onFieldChange,
|
|
estabelecimentos,
|
|
}: Omit<BasicFieldsSectionProps, "monthOptions">) {
|
|
return (
|
|
<>
|
|
<div className="flex w-full flex-col gap-2 md:flex-row">
|
|
<div className="w-1/2 space-y-1">
|
|
<Label htmlFor="purchaseDate">Data da transação</Label>
|
|
<DatePicker
|
|
id="purchaseDate"
|
|
value={formState.purchaseDate}
|
|
onChange={(value) => onFieldChange("purchaseDate", value)}
|
|
placeholder="Data da transação"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="w-1/2 space-y-1">
|
|
<Label htmlFor="period">Período</Label>
|
|
<PeriodPicker
|
|
value={formState.period}
|
|
onChange={(value) => onFieldChange("period", value)}
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex w-full flex-col gap-2 md:flex-row">
|
|
<div className="w-1/2 space-y-1">
|
|
<Label htmlFor="name">Estabelecimento</Label>
|
|
<EstabelecimentoInput
|
|
id="name"
|
|
value={formState.name}
|
|
onChange={(value) => onFieldChange("name", value)}
|
|
estabelecimentos={estabelecimentos}
|
|
placeholder="Ex.: Padaria"
|
|
maxLength={20}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="w-1/2 space-y-1">
|
|
<Label htmlFor="amount">Valor</Label>
|
|
<div className="relative">
|
|
<CurrencyInput
|
|
id="amount"
|
|
value={formState.amount}
|
|
onValueChange={(value) => onFieldChange("amount", value)}
|
|
placeholder="R$ 0,00"
|
|
required
|
|
className="pr-10"
|
|
/>
|
|
<CalculatorDialogButton
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2"
|
|
>
|
|
<RiCalculatorLine className="h-4 w-4 text-muted-foreground" />
|
|
</CalculatorDialogButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|