feat: add mobile-friendly filter sheet to statistics and transaction components, enhancing user experience with improved layout and accessibility
This commit is contained in:
Julien Froidefond
@@ -34,6 +34,13 @@ import {
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger,
|
||||
} from "@/components/ui/sheet";
|
||||
import { Calendar as CalendarComponent } from "@/components/ui/calendar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { format } from "date-fns";
|
||||
@@ -45,6 +52,8 @@ type Period = "1month" | "3months" | "6months" | "12months" | "custom" | "all";
|
||||
|
||||
export default function StatisticsPage() {
|
||||
const { data, isLoading } = useBankingData();
|
||||
const isMobile = useIsMobile();
|
||||
const [sheetOpen, setSheetOpen] = useState(false);
|
||||
const [period, setPeriod] = useState<Period>("6months");
|
||||
const [selectedAccounts, setSelectedAccounts] = useState<string[]>(["all"]);
|
||||
const [selectedCategories, setSelectedCategories] = useState<string[]>([
|
||||
@@ -53,10 +62,10 @@ export default function StatisticsPage() {
|
||||
const [excludeInternalTransfers, setExcludeInternalTransfers] =
|
||||
useState(true);
|
||||
const [customStartDate, setCustomStartDate] = useState<Date | undefined>(
|
||||
undefined,
|
||||
undefined
|
||||
);
|
||||
const [customEndDate, setCustomEndDate] = useState<Date | undefined>(
|
||||
undefined,
|
||||
undefined
|
||||
);
|
||||
const [isCustomDatePickerOpen, setIsCustomDatePickerOpen] = useState(false);
|
||||
|
||||
@@ -91,7 +100,7 @@ export default function StatisticsPage() {
|
||||
const internalTransferCategory = useMemo(() => {
|
||||
if (!data) return null;
|
||||
return data.categories.find(
|
||||
(c) => c.name.toLowerCase() === "virement interne",
|
||||
(c) => c.name.toLowerCase() === "virement interne"
|
||||
);
|
||||
}, [data]);
|
||||
|
||||
@@ -207,7 +216,7 @@ export default function StatisticsPage() {
|
||||
// Filter by accounts
|
||||
if (!selectedAccounts.includes("all")) {
|
||||
transactions = transactions.filter((t) =>
|
||||
selectedAccounts.includes(t.accountId),
|
||||
selectedAccounts.includes(t.accountId)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -217,7 +226,7 @@ export default function StatisticsPage() {
|
||||
transactions = transactions.filter((t) => !t.categoryId);
|
||||
} else {
|
||||
transactions = transactions.filter(
|
||||
(t) => t.categoryId && selectedCategories.includes(t.categoryId),
|
||||
(t) => t.categoryId && selectedCategories.includes(t.categoryId)
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -225,7 +234,7 @@ export default function StatisticsPage() {
|
||||
// Exclude "Virement interne" category if checkbox is checked
|
||||
if (excludeInternalTransfers && internalTransferCategory) {
|
||||
transactions = transactions.filter(
|
||||
(t) => t.categoryId !== internalTransferCategory.id,
|
||||
(t) => t.categoryId !== internalTransferCategory.id
|
||||
);
|
||||
}
|
||||
|
||||
@@ -297,7 +306,7 @@ export default function StatisticsPage() {
|
||||
});
|
||||
|
||||
const categoryChartDataByParent = Array.from(
|
||||
categoryTotalsByParent.entries(),
|
||||
categoryTotalsByParent.entries()
|
||||
)
|
||||
.map(([groupId, total]) => {
|
||||
const category = data.categories.find((c) => c.id === groupId);
|
||||
@@ -312,7 +321,7 @@ export default function StatisticsPage() {
|
||||
|
||||
// Top expenses - deduplicate by ID and sort by amount (most negative first)
|
||||
const uniqueTransactions = Array.from(
|
||||
new Map(transactions.map((t) => [t.id, t])).values(),
|
||||
new Map(transactions.map((t) => [t.id, t])).values()
|
||||
);
|
||||
const topExpenses = uniqueTransactions
|
||||
.filter((t) => t.amount < 0)
|
||||
@@ -338,7 +347,7 @@ export default function StatisticsPage() {
|
||||
|
||||
// Balance evolution - Aggregated (using filtered transactions)
|
||||
const sortedFilteredTransactions = [...transactions].sort(
|
||||
(a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
|
||||
(a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
|
||||
);
|
||||
|
||||
// Calculate starting balance: initialBalance + transactions before startDate
|
||||
@@ -350,7 +359,7 @@ export default function StatisticsPage() {
|
||||
// Start with initial balances
|
||||
runningBalance = accountsToUse.reduce(
|
||||
(sum, acc) => sum + (acc.initialBalance || 0),
|
||||
0,
|
||||
0
|
||||
);
|
||||
|
||||
// Add all transactions before the start date for these accounts
|
||||
@@ -387,7 +396,7 @@ export default function StatisticsPage() {
|
||||
});
|
||||
|
||||
const aggregatedBalanceData = Array.from(
|
||||
aggregatedBalanceByDate.entries(),
|
||||
aggregatedBalanceByDate.entries()
|
||||
).map(([date, balance]) => ({
|
||||
date: new Date(date).toLocaleDateString("fr-FR", {
|
||||
day: "2-digit",
|
||||
@@ -643,170 +652,208 @@ export default function StatisticsPage() {
|
||||
description="Analysez vos dépenses et revenus"
|
||||
/>
|
||||
|
||||
<Card className="mb-4 md:mb-6">
|
||||
<CardContent className="pt-3 md:pt-4">
|
||||
<div className="flex flex-wrap gap-2 md:gap-4">
|
||||
<AccountFilterCombobox
|
||||
accounts={data.accounts}
|
||||
folders={data.folders}
|
||||
value={selectedAccounts}
|
||||
onChange={setSelectedAccounts}
|
||||
className="w-full md:w-[280px]"
|
||||
filteredTransactions={transactionsForAccountFilter}
|
||||
/>
|
||||
|
||||
<CategoryFilterCombobox
|
||||
categories={data.categories}
|
||||
value={selectedCategories}
|
||||
onChange={setSelectedCategories}
|
||||
className="w-full md:w-[220px]"
|
||||
filteredTransactions={transactionsForCategoryFilter}
|
||||
/>
|
||||
|
||||
<Select
|
||||
value={period}
|
||||
onValueChange={(v) => {
|
||||
setPeriod(v as Period);
|
||||
if (v !== "custom") {
|
||||
setIsCustomDatePickerOpen(false);
|
||||
} else {
|
||||
setIsCustomDatePickerOpen(true);
|
||||
}
|
||||
}}
|
||||
{isMobile ? (
|
||||
<>
|
||||
<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="outline" className="w-full mb-4">
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
Filtres
|
||||
{((!selectedAccounts.includes("all") &&
|
||||
selectedAccounts.length > 0) ||
|
||||
(!selectedCategories.includes("all") &&
|
||||
selectedCategories.length > 0) ||
|
||||
period !== "6months") && (
|
||||
<Badge variant="secondary" className="ml-2">
|
||||
{[
|
||||
!selectedAccounts.includes("all") &&
|
||||
selectedAccounts.length,
|
||||
!selectedCategories.includes("all") &&
|
||||
selectedCategories.length,
|
||||
period !== "6months" && 1,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.reduce((a, b) => (a || 0) + (b || 0), 0)}
|
||||
</Badge>
|
||||
)}
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent
|
||||
side="bottom"
|
||||
className="h-[85vh] overflow-y-auto px-4 pb-6"
|
||||
>
|
||||
<SelectTrigger className="w-full md:w-[150px]">
|
||||
<SelectValue placeholder="Période" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1month">1 mois</SelectItem>
|
||||
<SelectItem value="3months">3 mois</SelectItem>
|
||||
<SelectItem value="6months">6 mois</SelectItem>
|
||||
<SelectItem value="12months">12 mois</SelectItem>
|
||||
<SelectItem value="custom">Personnalisé</SelectItem>
|
||||
<SelectItem value="all">Tout</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{period === "custom" && (
|
||||
<Popover
|
||||
open={isCustomDatePickerOpen}
|
||||
onOpenChange={setIsCustomDatePickerOpen}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full md:w-[280px] justify-start text-left font-normal"
|
||||
>
|
||||
<Calendar className="mr-2 h-4 w-4" />
|
||||
{customStartDate && customEndDate ? (
|
||||
<>
|
||||
{format(customStartDate, "PPP", { locale: fr })} -{" "}
|
||||
{format(customEndDate, "PPP", { locale: fr })}
|
||||
</>
|
||||
) : customStartDate ? (
|
||||
format(customStartDate, "PPP", { locale: fr })
|
||||
) : (
|
||||
<span className="text-muted-foreground">
|
||||
Sélectionner les dates
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">
|
||||
Date de début
|
||||
</label>
|
||||
<CalendarComponent
|
||||
mode="single"
|
||||
selected={customStartDate}
|
||||
onSelect={(date) => {
|
||||
setCustomStartDate(date);
|
||||
if (date && customEndDate && date > customEndDate) {
|
||||
setCustomEndDate(undefined);
|
||||
}
|
||||
}}
|
||||
locale={fr}
|
||||
/>
|
||||
</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;
|
||||
}
|
||||
setCustomEndDate(date);
|
||||
if (date && customStartDate) {
|
||||
setIsCustomDatePickerOpen(false);
|
||||
}
|
||||
}}
|
||||
disabled={(date) => {
|
||||
if (!customStartDate) return true;
|
||||
return date < customStartDate;
|
||||
}}
|
||||
locale={fr}
|
||||
/>
|
||||
</div>
|
||||
{customStartDate && customEndDate && (
|
||||
<div className="flex gap-2 pt-2 border-t">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
onClick={() => {
|
||||
setCustomStartDate(undefined);
|
||||
setCustomEndDate(undefined);
|
||||
}}
|
||||
>
|
||||
Réinitialiser
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
onClick={() => setIsCustomDatePickerOpen(false)}
|
||||
>
|
||||
Valider
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)}
|
||||
|
||||
{internalTransferCategory && (
|
||||
<div className="flex items-center gap-2 px-2 md:px-3 py-1.5 md:py-2 border border-border rounded-md bg-[var(--card)]">
|
||||
<Checkbox
|
||||
id="exclude-internal-transfers"
|
||||
checked={excludeInternalTransfers}
|
||||
onCheckedChange={(checked) =>
|
||||
setExcludeInternalTransfers(checked === true)
|
||||
}
|
||||
<SheetHeader className="px-0">
|
||||
<SheetTitle>Filtres</SheetTitle>
|
||||
</SheetHeader>
|
||||
<div className="mt-6 space-y-4 px-0">
|
||||
<AccountFilterCombobox
|
||||
accounts={data.accounts}
|
||||
folders={data.folders}
|
||||
value={selectedAccounts}
|
||||
onChange={setSelectedAccounts}
|
||||
className="w-full"
|
||||
filteredTransactions={transactionsForAccountFilter}
|
||||
/>
|
||||
<label
|
||||
htmlFor="exclude-internal-transfers"
|
||||
className="text-xs md:text-sm font-medium cursor-pointer select-none"
|
||||
>
|
||||
Exclure Virement interne
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<CategoryFilterCombobox
|
||||
categories={data.categories}
|
||||
value={selectedCategories}
|
||||
onChange={setSelectedCategories}
|
||||
className="w-full"
|
||||
filteredTransactions={transactionsForCategoryFilter}
|
||||
/>
|
||||
|
||||
<Select
|
||||
value={period}
|
||||
onValueChange={(v) => {
|
||||
setPeriod(v as Period);
|
||||
if (v !== "custom") {
|
||||
setIsCustomDatePickerOpen(false);
|
||||
} else {
|
||||
setIsCustomDatePickerOpen(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Période" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1month">1 mois</SelectItem>
|
||||
<SelectItem value="3months">3 mois</SelectItem>
|
||||
<SelectItem value="6months">6 mois</SelectItem>
|
||||
<SelectItem value="12months">12 mois</SelectItem>
|
||||
<SelectItem value="custom">Personnalisé</SelectItem>
|
||||
<SelectItem value="all">Tout</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{period === "custom" && (
|
||||
<Popover
|
||||
open={isCustomDatePickerOpen}
|
||||
onOpenChange={setIsCustomDatePickerOpen}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full justify-start text-left font-normal"
|
||||
>
|
||||
<Calendar className="mr-2 h-4 w-4" />
|
||||
{customStartDate && customEndDate ? (
|
||||
<>
|
||||
{format(customStartDate, "PPP", { locale: fr })} -{" "}
|
||||
{format(customEndDate, "PPP", { locale: fr })}
|
||||
</>
|
||||
) : customStartDate ? (
|
||||
format(customStartDate, "PPP", { locale: fr })
|
||||
) : (
|
||||
<span className="text-muted-foreground">
|
||||
Sélectionner les dates
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">
|
||||
Date de début
|
||||
</label>
|
||||
<CalendarComponent
|
||||
mode="single"
|
||||
selected={customStartDate}
|
||||
onSelect={(date) => {
|
||||
setCustomStartDate(date);
|
||||
if (
|
||||
date &&
|
||||
customEndDate &&
|
||||
date > customEndDate
|
||||
) {
|
||||
setCustomEndDate(undefined);
|
||||
}
|
||||
}}
|
||||
locale={fr}
|
||||
/>
|
||||
</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;
|
||||
}
|
||||
setCustomEndDate(date);
|
||||
if (date && customStartDate) {
|
||||
setIsCustomDatePickerOpen(false);
|
||||
}
|
||||
}}
|
||||
disabled={(date) => {
|
||||
if (!customStartDate) return true;
|
||||
return date < customStartDate;
|
||||
}}
|
||||
locale={fr}
|
||||
/>
|
||||
</div>
|
||||
{customStartDate && customEndDate && (
|
||||
<div className="flex gap-2 pt-2 border-t">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
onClick={() => {
|
||||
setCustomStartDate(undefined);
|
||||
setCustomEndDate(undefined);
|
||||
}}
|
||||
>
|
||||
Réinitialiser
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
onClick={() => setIsCustomDatePickerOpen(false)}
|
||||
>
|
||||
Valider
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)}
|
||||
|
||||
{internalTransferCategory && (
|
||||
<div className="flex items-center gap-2 px-2 py-1.5 border border-border rounded-md bg-[var(--card)]">
|
||||
<Checkbox
|
||||
id="exclude-internal-transfers-mobile"
|
||||
checked={excludeInternalTransfers}
|
||||
onCheckedChange={(checked) =>
|
||||
setExcludeInternalTransfers(checked === true)
|
||||
}
|
||||
/>
|
||||
<label
|
||||
htmlFor="exclude-internal-transfers-mobile"
|
||||
className="text-sm font-medium cursor-pointer select-none"
|
||||
>
|
||||
Exclure Virement interne
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
<ActiveFilters
|
||||
selectedAccounts={selectedAccounts}
|
||||
onRemoveAccount={(id) => {
|
||||
const newAccounts = selectedAccounts.filter((a) => a !== id);
|
||||
setSelectedAccounts(
|
||||
newAccounts.length > 0 ? newAccounts : ["all"],
|
||||
newAccounts.length > 0 ? newAccounts : ["all"]
|
||||
);
|
||||
}}
|
||||
onClearAccounts={() => setSelectedAccounts(["all"])}
|
||||
@@ -814,7 +861,7 @@ export default function StatisticsPage() {
|
||||
onRemoveCategory={(id) => {
|
||||
const newCategories = selectedCategories.filter((c) => c !== id);
|
||||
setSelectedCategories(
|
||||
newCategories.length > 0 ? newCategories : ["all"],
|
||||
newCategories.length > 0 ? newCategories : ["all"]
|
||||
);
|
||||
}}
|
||||
onClearCategories={() => setSelectedCategories(["all"])}
|
||||
@@ -829,8 +876,201 @@ export default function StatisticsPage() {
|
||||
customStartDate={customStartDate}
|
||||
customEndDate={customEndDate}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
) : (
|
||||
<Card className="mb-4 md:mb-6">
|
||||
<CardContent className="pt-3 md:pt-4">
|
||||
<div className="flex flex-wrap gap-2 md:gap-4">
|
||||
<AccountFilterCombobox
|
||||
accounts={data.accounts}
|
||||
folders={data.folders}
|
||||
value={selectedAccounts}
|
||||
onChange={setSelectedAccounts}
|
||||
className="w-full md:w-[280px]"
|
||||
filteredTransactions={transactionsForAccountFilter}
|
||||
/>
|
||||
|
||||
<CategoryFilterCombobox
|
||||
categories={data.categories}
|
||||
value={selectedCategories}
|
||||
onChange={setSelectedCategories}
|
||||
className="w-full md:w-[220px]"
|
||||
filteredTransactions={transactionsForCategoryFilter}
|
||||
/>
|
||||
|
||||
<Select
|
||||
value={period}
|
||||
onValueChange={(v) => {
|
||||
setPeriod(v as Period);
|
||||
if (v !== "custom") {
|
||||
setIsCustomDatePickerOpen(false);
|
||||
} else {
|
||||
setIsCustomDatePickerOpen(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-full md:w-[150px]">
|
||||
<SelectValue placeholder="Période" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="1month">1 mois</SelectItem>
|
||||
<SelectItem value="3months">3 mois</SelectItem>
|
||||
<SelectItem value="6months">6 mois</SelectItem>
|
||||
<SelectItem value="12months">12 mois</SelectItem>
|
||||
<SelectItem value="custom">Personnalisé</SelectItem>
|
||||
<SelectItem value="all">Tout</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{period === "custom" && (
|
||||
<Popover
|
||||
open={isCustomDatePickerOpen}
|
||||
onOpenChange={setIsCustomDatePickerOpen}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full md:w-[280px] justify-start text-left font-normal"
|
||||
>
|
||||
<Calendar className="mr-2 h-4 w-4" />
|
||||
{customStartDate && customEndDate ? (
|
||||
<>
|
||||
{format(customStartDate, "PPP", { locale: fr })} -{" "}
|
||||
{format(customEndDate, "PPP", { locale: fr })}
|
||||
</>
|
||||
) : customStartDate ? (
|
||||
format(customStartDate, "PPP", { locale: fr })
|
||||
) : (
|
||||
<span className="text-muted-foreground">
|
||||
Sélectionner les dates
|
||||
</span>
|
||||
)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-auto p-0" align="start">
|
||||
<div className="p-4 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">
|
||||
Date de début
|
||||
</label>
|
||||
<CalendarComponent
|
||||
mode="single"
|
||||
selected={customStartDate}
|
||||
onSelect={(date) => {
|
||||
setCustomStartDate(date);
|
||||
if (date && customEndDate && date > customEndDate) {
|
||||
setCustomEndDate(undefined);
|
||||
}
|
||||
}}
|
||||
locale={fr}
|
||||
/>
|
||||
</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;
|
||||
}
|
||||
setCustomEndDate(date);
|
||||
if (date && customStartDate) {
|
||||
setIsCustomDatePickerOpen(false);
|
||||
}
|
||||
}}
|
||||
disabled={(date) => {
|
||||
if (!customStartDate) return true;
|
||||
return date < customStartDate;
|
||||
}}
|
||||
locale={fr}
|
||||
/>
|
||||
</div>
|
||||
{customStartDate && customEndDate && (
|
||||
<div className="flex gap-2 pt-2 border-t">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
onClick={() => {
|
||||
setCustomStartDate(undefined);
|
||||
setCustomEndDate(undefined);
|
||||
}}
|
||||
>
|
||||
Réinitialiser
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
className="flex-1"
|
||||
onClick={() => setIsCustomDatePickerOpen(false)}
|
||||
>
|
||||
Valider
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
)}
|
||||
|
||||
{internalTransferCategory && (
|
||||
<div className="flex items-center gap-2 px-2 md:px-3 py-1.5 md:py-2 border border-border rounded-md bg-[var(--card)]">
|
||||
<Checkbox
|
||||
id="exclude-internal-transfers"
|
||||
checked={excludeInternalTransfers}
|
||||
onCheckedChange={(checked) =>
|
||||
setExcludeInternalTransfers(checked === true)
|
||||
}
|
||||
/>
|
||||
<label
|
||||
htmlFor="exclude-internal-transfers"
|
||||
className="text-xs md:text-sm font-medium cursor-pointer select-none"
|
||||
>
|
||||
Exclure Virement interne
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ActiveFilters
|
||||
selectedAccounts={selectedAccounts}
|
||||
onRemoveAccount={(id) => {
|
||||
const newAccounts = selectedAccounts.filter((a) => a !== id);
|
||||
setSelectedAccounts(
|
||||
newAccounts.length > 0 ? newAccounts : ["all"]
|
||||
);
|
||||
}}
|
||||
onClearAccounts={() => setSelectedAccounts(["all"])}
|
||||
selectedCategories={selectedCategories}
|
||||
onRemoveCategory={(id) => {
|
||||
const newCategories = selectedCategories.filter(
|
||||
(c) => c !== id
|
||||
);
|
||||
setSelectedCategories(
|
||||
newCategories.length > 0 ? newCategories : ["all"]
|
||||
);
|
||||
}}
|
||||
onClearCategories={() => setSelectedCategories(["all"])}
|
||||
period={period}
|
||||
onClearPeriod={() => {
|
||||
setPeriod("all");
|
||||
setCustomStartDate(undefined);
|
||||
setCustomEndDate(undefined);
|
||||
}}
|
||||
accounts={data.accounts}
|
||||
categories={data.categories}
|
||||
customStartDate={customStartDate}
|
||||
customEndDate={customEndDate}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Vue d'ensemble */}
|
||||
<section className="mb-4 md:mb-8">
|
||||
@@ -963,7 +1203,7 @@ function ActiveFilters({
|
||||
|
||||
const selectedAccs = accounts.filter((a) => selectedAccounts.includes(a.id));
|
||||
const selectedCats = categories.filter((c) =>
|
||||
selectedCategories.includes(c.id),
|
||||
selectedCategories.includes(c.id)
|
||||
);
|
||||
const isUncategorized = selectedCategories.includes("uncategorized");
|
||||
|
||||
|
||||
Reference in New Issue
Block a user