feat: add ReconcileDateRangeCard to settings page; enhance date picker layout in statistics and transaction filters components
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 1m24s

This commit is contained in:
Julien Froidefond
2025-12-20 12:05:30 +01:00
parent 8b81dfe8c0
commit 53798176a0
7 changed files with 439 additions and 70 deletions

View File

@@ -202,44 +202,49 @@ export function TransactionFilters({
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<div className="p-4 space-y-4">
<div className="p-3 flex gap-4">
<div className="space-y-2">
<label className="text-sm font-medium">Date de début</label>
<CalendarComponent
mode="single"
selected={customStartDate}
onSelect={(date) => {
onCustomStartDateChange(date);
if (date && customEndDate && date > customEndDate) {
onCustomEndDateChange(undefined);
}
}}
locale={fr}
/>
<div className="scale-90 origin-top-left">
<CalendarComponent
mode="single"
selected={customStartDate}
onSelect={(date) => {
onCustomStartDateChange(date);
if (date && customEndDate && date > customEndDate) {
onCustomEndDateChange(undefined);
}
}}
locale={fr}
/>
</div>
</div>
<div className="space-y-2">
<label className="text-sm font-medium">Date de fin</label>
<CalendarComponent
mode="single"
selected={customEndDate}
onSelect={(date) => {
if (date && customStartDate && date < customStartDate) {
return;
}
onCustomEndDateChange(date);
if (date && customStartDate) {
onCustomDatePickerOpenChange(false);
}
}}
disabled={(date) => {
if (!customStartDate) return true;
return date < customStartDate;
}}
locale={fr}
/>
<div className="scale-90 origin-top-left">
<CalendarComponent
mode="single"
selected={customEndDate}
onSelect={(date) => {
if (date && customStartDate && date < customStartDate) {
return;
}
onCustomEndDateChange(date);
if (date && customStartDate) {
onCustomDatePickerOpenChange(false);
}
}}
disabled={(date) => {
if (!customStartDate) return true;
return date < customStartDate;
}}
locale={fr}
/>
</div>
</div>
{customStartDate && customEndDate && (
<div className="flex gap-2 pt-2 border-t">
</div>
{customStartDate && customEndDate && (
<div className="flex gap-2 pt-2 border-t px-3 pb-3">
<Button
variant="outline"
size="sm"
@@ -260,7 +265,6 @@ export function TransactionFilters({
</Button>
</div>
)}
</div>
</PopoverContent>
</Popover>
)}