feat: integrate monthly chart with collapsible feature in transactions page; update transaction period to default to last 3 months
This commit is contained in:
Julien Froidefond
@@ -1,8 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback } from "react";
|
||||
import { useCallback, useState } from "react";
|
||||
import { PageLayout, PageHeader } from "@/components/layout";
|
||||
import { RefreshCw } from "lucide-react";
|
||||
import { RefreshCw, Maximize2, Minimize2 } from "lucide-react";
|
||||
import {
|
||||
TransactionFilters,
|
||||
TransactionBulkActions,
|
||||
@@ -13,15 +13,24 @@ import {
|
||||
} from "@/components/transactions";
|
||||
import { RuleCreateDialog } from "@/components/rules";
|
||||
import { OFXImportDialog } from "@/components/import/ofx-import-dialog";
|
||||
import { MonthlyChart } from "@/components/statistics";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Upload } from "lucide-react";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { useTransactionsPage } from "@/hooks/use-transactions-page";
|
||||
import { useTransactionMutations } from "@/hooks/use-transaction-mutations";
|
||||
import { useTransactionRules } from "@/hooks/use-transaction-rules";
|
||||
import { useTransactionsChartData } from "@/hooks/use-transactions-chart-data";
|
||||
|
||||
export default function TransactionsPage() {
|
||||
const queryClient = useQueryClient();
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
|
||||
// Main page state and logic
|
||||
const {
|
||||
@@ -88,6 +97,17 @@ export default function TransactionsPage() {
|
||||
metadata,
|
||||
});
|
||||
|
||||
// Chart data
|
||||
const { monthlyData, isLoading: isLoadingChart } = useTransactionsChartData({
|
||||
selectedAccounts,
|
||||
selectedCategories,
|
||||
period,
|
||||
customStartDate,
|
||||
customEndDate,
|
||||
showReconciled,
|
||||
searchQuery,
|
||||
});
|
||||
|
||||
const invalidateAll = useCallback(() => {
|
||||
invalidateTransactions();
|
||||
queryClient.invalidateQueries({ queryKey: ["banking-metadata"] });
|
||||
@@ -98,7 +118,7 @@ export default function TransactionsPage() {
|
||||
handleBulkReconcile(reconciled, selectedTransactions);
|
||||
clearSelection();
|
||||
},
|
||||
[handleBulkReconcile, selectedTransactions, clearSelection],
|
||||
[handleBulkReconcile, selectedTransactions, clearSelection]
|
||||
);
|
||||
|
||||
const handleBulkSetCategoryWithClear = useCallback(
|
||||
@@ -106,7 +126,7 @@ export default function TransactionsPage() {
|
||||
handleBulkSetCategory(categoryId, selectedTransactions);
|
||||
clearSelection();
|
||||
},
|
||||
[handleBulkSetCategory, selectedTransactions, clearSelection],
|
||||
[handleBulkSetCategory, selectedTransactions, clearSelection]
|
||||
);
|
||||
|
||||
const filteredTransactions = transactionsData?.transactions || [];
|
||||
@@ -179,6 +199,21 @@ export default function TransactionsPage() {
|
||||
transactionsForCategoryFilter={transactionsForCategoryFilter}
|
||||
/>
|
||||
|
||||
{!isLoadingChart && monthlyData.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<MonthlyChart
|
||||
data={monthlyData}
|
||||
formatCurrency={formatCurrency}
|
||||
collapsible
|
||||
defaultExpanded={true}
|
||||
showDots={
|
||||
period !== "all" &&
|
||||
(period === "12months" || monthlyData.length <= 12)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<TransactionBulkActions
|
||||
selectedCount={selectedTransactions.size}
|
||||
categories={metadata.categories}
|
||||
@@ -192,6 +227,19 @@ export default function TransactionsPage() {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex-1" />
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setIsFullscreen(true)}
|
||||
className="gap-2"
|
||||
>
|
||||
<Maximize2 className="w-4 h-4" />
|
||||
Plein écran
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<TransactionTable
|
||||
transactions={filteredTransactions}
|
||||
accounts={metadata.accounts}
|
||||
@@ -224,6 +272,74 @@ export default function TransactionsPage() {
|
||||
</>
|
||||
)}
|
||||
|
||||
<Dialog open={isFullscreen} onOpenChange={setIsFullscreen}>
|
||||
<DialogContent
|
||||
className="!max-w-none !max-h-none !w-full !h-full !p-0 flex flex-col !rounded-none !translate-x-0 !translate-y-0 !top-0 !left-0 !right-0 !bottom-0 !m-0"
|
||||
showCloseButton={false}
|
||||
style={{
|
||||
width: "100vw",
|
||||
height: "100vh",
|
||||
maxWidth: "100vw",
|
||||
maxHeight: "100vh",
|
||||
}}
|
||||
>
|
||||
<DialogHeader className="px-6 pt-6 pb-4 border-b shrink-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<DialogTitle>Transactions</DialogTitle>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsFullscreen(false)}
|
||||
className="gap-2"
|
||||
>
|
||||
<Minimize2 className="w-4 h-4" />
|
||||
Réduire
|
||||
</Button>
|
||||
</div>
|
||||
</DialogHeader>
|
||||
<div className="flex-1 overflow-auto px-6 pb-6 min-h-0">
|
||||
<div className="mb-4">
|
||||
<TransactionBulkActions
|
||||
selectedCount={selectedTransactions.size}
|
||||
categories={metadata.categories}
|
||||
onReconcile={handleBulkReconcileWithClear}
|
||||
onSetCategory={handleBulkSetCategoryWithClear}
|
||||
/>
|
||||
</div>
|
||||
<TransactionTable
|
||||
transactions={filteredTransactions}
|
||||
accounts={metadata.accounts}
|
||||
categories={metadata.categories}
|
||||
selectedTransactions={selectedTransactions}
|
||||
sortField={sortField}
|
||||
sortOrder={sortOrder}
|
||||
onSortChange={onSortChange}
|
||||
onToggleSelectAll={onToggleSelectAll}
|
||||
onToggleSelectTransaction={onToggleSelectTransaction}
|
||||
onToggleReconciled={toggleReconciled}
|
||||
onMarkReconciled={markReconciled}
|
||||
onSetCategory={setCategory}
|
||||
onCreateRule={handleCreateRule}
|
||||
onDelete={deleteTransaction}
|
||||
formatCurrency={formatCurrency}
|
||||
formatDate={formatDate}
|
||||
updatingTransactionIds={updatingTransactionIds}
|
||||
duplicateIds={duplicateIds}
|
||||
highlightDuplicates={showDuplicates}
|
||||
/>
|
||||
<div className="mt-4">
|
||||
<TransactionPagination
|
||||
page={page}
|
||||
pageSize={pageSize}
|
||||
total={totalTransactions}
|
||||
hasMore={hasMore}
|
||||
onPageChange={onPageChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<RuleCreateDialog
|
||||
open={ruleDialogOpen}
|
||||
onOpenChange={setRuleDialogOpen}
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ChevronDown, ChevronUp } from "lucide-react";
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
@@ -11,6 +14,11 @@ import {
|
||||
ResponsiveContainer,
|
||||
Legend,
|
||||
} from "recharts";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
|
||||
interface MonthlyChartData {
|
||||
month: string;
|
||||
@@ -22,54 +30,117 @@ interface MonthlyChartData {
|
||||
interface MonthlyChartProps {
|
||||
data: MonthlyChartData[];
|
||||
formatCurrency: (amount: number) => string;
|
||||
collapsible?: boolean;
|
||||
defaultExpanded?: boolean;
|
||||
showDots?: boolean;
|
||||
}
|
||||
|
||||
export function MonthlyChart({ data, formatCurrency }: MonthlyChartProps) {
|
||||
export function MonthlyChart({
|
||||
data,
|
||||
formatCurrency,
|
||||
collapsible = false,
|
||||
defaultExpanded = true,
|
||||
showDots = true,
|
||||
}: MonthlyChartProps) {
|
||||
const [isExpanded, setIsExpanded] = useState(defaultExpanded);
|
||||
|
||||
const chartContent = (
|
||||
<>
|
||||
{data.length > 0 ? (
|
||||
<div className="h-[300px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={data}>
|
||||
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
||||
<XAxis dataKey="month" className="text-xs" />
|
||||
<YAxis
|
||||
className="text-xs"
|
||||
width={80}
|
||||
tickFormatter={(v) => {
|
||||
// Format compact pour les grandes valeurs
|
||||
if (Math.abs(v) >= 1000) {
|
||||
return `${(v / 1000).toFixed(1)}k€`;
|
||||
}
|
||||
return `${v.toFixed(0)}€`;
|
||||
}}
|
||||
tick={{ fill: "var(--muted-foreground)" }}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value: number) => formatCurrency(value)}
|
||||
labelFormatter={(label) => label}
|
||||
contentStyle={{
|
||||
backgroundColor: "var(--card)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
/>
|
||||
<Legend />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="revenus"
|
||||
name="Revenus"
|
||||
stroke="#22c55e"
|
||||
strokeWidth={2}
|
||||
dot={showDots ? { fill: "#22c55e", r: 4 } : false}
|
||||
activeDot={showDots ? { r: 6 } : false}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="depenses"
|
||||
name="Dépenses"
|
||||
stroke="#ef4444"
|
||||
strokeWidth={2}
|
||||
dot={showDots ? { fill: "#ef4444", r: 4 } : false}
|
||||
activeDot={showDots ? { r: 6 } : false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-[300px] flex items-center justify-center text-muted-foreground">
|
||||
Pas de données pour cette période
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
if (!collapsible) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Revenus vs Dépenses par mois</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>{chartContent}</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Revenus vs Dépenses par mois</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{data.length > 0 ? (
|
||||
<div className="h-[300px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={data}>
|
||||
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
||||
<XAxis dataKey="month" className="text-xs" />
|
||||
<YAxis
|
||||
className="text-xs"
|
||||
width={80}
|
||||
tickFormatter={(v) => {
|
||||
// Format compact pour les grandes valeurs
|
||||
if (Math.abs(v) >= 1000) {
|
||||
return `${(v / 1000).toFixed(1)}k€`;
|
||||
}
|
||||
return `${Math.round(v)}€`;
|
||||
}}
|
||||
tick={{ fill: "var(--muted-foreground)" }}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value: number) => formatCurrency(value)}
|
||||
labelFormatter={(label) => label}
|
||||
contentStyle={{
|
||||
backgroundColor: "var(--card)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
/>
|
||||
<Legend />
|
||||
<Bar dataKey="revenus" fill="#22c55e" radius={[4, 4, 0, 0]} />
|
||||
<Bar dataKey="depenses" fill="#ef4444" radius={[4, 4, 0, 0]} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-[300px] flex items-center justify-center text-muted-foreground">
|
||||
Pas de données pour cette période
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
<Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 py-3 px-6">
|
||||
<CardTitle className="text-base font-semibold">
|
||||
Revenus vs Dépenses par mois
|
||||
</CardTitle>
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="h-8">
|
||||
{isExpanded ? (
|
||||
<>
|
||||
<ChevronUp className="w-4 h-4 mr-1" />
|
||||
Réduire
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChevronDown className="w-4 h-4 mr-1" />
|
||||
Afficher
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
</CardHeader>
|
||||
<CollapsibleContent>
|
||||
<CardContent className="pt-0">{chartContent}</CardContent>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
328
hooks/use-transactions-balance-chart.ts
Normal file
328
hooks/use-transactions-balance-chart.ts
Normal file
@@ -0,0 +1,328 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { useTransactions } from "@/lib/hooks";
|
||||
import { useBankingMetadata } from "@/lib/hooks";
|
||||
import type { TransactionsPaginatedParams } from "@/services/banking.service";
|
||||
import type { Account } from "@/lib/types";
|
||||
|
||||
interface BalanceChartDataPoint {
|
||||
date: string;
|
||||
[key: string]: string | number;
|
||||
}
|
||||
|
||||
interface UseTransactionsBalanceChartParams {
|
||||
selectedAccounts: string[];
|
||||
selectedCategories: string[];
|
||||
period: "1month" | "3months" | "6months" | "12months" | "custom" | "all";
|
||||
customStartDate?: Date;
|
||||
customEndDate?: Date;
|
||||
showReconciled: string;
|
||||
searchQuery: string;
|
||||
}
|
||||
|
||||
export function useTransactionsBalanceChart({
|
||||
selectedAccounts,
|
||||
selectedCategories,
|
||||
period,
|
||||
customStartDate,
|
||||
customEndDate,
|
||||
showReconciled,
|
||||
searchQuery,
|
||||
}: UseTransactionsBalanceChartParams) {
|
||||
const { data: metadata } = useBankingMetadata();
|
||||
|
||||
// Calculate start date based on period
|
||||
const startDate = useMemo(() => {
|
||||
const now = new Date();
|
||||
switch (period) {
|
||||
case "1month":
|
||||
return new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
||||
case "3months":
|
||||
return new Date(now.getFullYear(), now.getMonth() - 3, 1);
|
||||
case "6months":
|
||||
return new Date(now.getFullYear(), now.getMonth() - 6, 1);
|
||||
case "12months":
|
||||
return new Date(now.getFullYear(), now.getMonth() - 12, 1);
|
||||
case "custom":
|
||||
return customStartDate || new Date(0);
|
||||
default:
|
||||
return new Date(0);
|
||||
}
|
||||
}, [period, customStartDate]);
|
||||
|
||||
// Calculate end date (only for custom period)
|
||||
const endDate = useMemo(() => {
|
||||
if (period === "custom" && customEndDate) {
|
||||
return customEndDate;
|
||||
}
|
||||
return undefined;
|
||||
}, [period, customEndDate]);
|
||||
|
||||
// Build params for fetching all transactions (no pagination)
|
||||
const chartParams = useMemo<TransactionsPaginatedParams>(() => {
|
||||
const params: TransactionsPaginatedParams = {
|
||||
limit: 10000, // Large limit to get all transactions
|
||||
offset: 0,
|
||||
sortField: "date",
|
||||
sortOrder: "asc", // Ascending for balance calculation
|
||||
};
|
||||
|
||||
if (startDate && period !== "all") {
|
||||
params.startDate = startDate.toISOString().split("T")[0];
|
||||
}
|
||||
if (endDate) {
|
||||
params.endDate = endDate.toISOString().split("T")[0];
|
||||
}
|
||||
if (!selectedAccounts.includes("all")) {
|
||||
params.accountIds = selectedAccounts;
|
||||
}
|
||||
if (!selectedCategories.includes("all")) {
|
||||
if (selectedCategories.includes("uncategorized")) {
|
||||
params.includeUncategorized = true;
|
||||
} else {
|
||||
params.categoryIds = selectedCategories;
|
||||
}
|
||||
}
|
||||
if (searchQuery) {
|
||||
params.search = searchQuery;
|
||||
}
|
||||
if (showReconciled !== "all") {
|
||||
params.isReconciled = showReconciled === "reconciled";
|
||||
}
|
||||
|
||||
return params;
|
||||
}, [
|
||||
startDate,
|
||||
endDate,
|
||||
selectedAccounts,
|
||||
selectedCategories,
|
||||
searchQuery,
|
||||
showReconciled,
|
||||
period,
|
||||
]);
|
||||
|
||||
// Build params for fetching transactions before startDate (for initial balance)
|
||||
const beforeStartDateParams = useMemo<TransactionsPaginatedParams>(() => {
|
||||
if (period === "all" || !startDate) {
|
||||
return { limit: 0, offset: 0 }; // Don't fetch if no start date
|
||||
}
|
||||
|
||||
const params: TransactionsPaginatedParams = {
|
||||
limit: 10000,
|
||||
offset: 0,
|
||||
sortField: "date",
|
||||
sortOrder: "asc",
|
||||
endDate: new Date(startDate.getTime() - 1).toISOString().split("T")[0], // Day before startDate
|
||||
};
|
||||
|
||||
if (!selectedAccounts.includes("all")) {
|
||||
params.accountIds = selectedAccounts;
|
||||
}
|
||||
if (!selectedCategories.includes("all")) {
|
||||
if (selectedCategories.includes("uncategorized")) {
|
||||
params.includeUncategorized = true;
|
||||
} else {
|
||||
params.categoryIds = selectedCategories;
|
||||
}
|
||||
}
|
||||
if (searchQuery) {
|
||||
params.search = searchQuery;
|
||||
}
|
||||
if (showReconciled !== "all") {
|
||||
params.isReconciled = showReconciled === "reconciled";
|
||||
}
|
||||
|
||||
return params;
|
||||
}, [
|
||||
startDate,
|
||||
selectedAccounts,
|
||||
selectedCategories,
|
||||
searchQuery,
|
||||
showReconciled,
|
||||
period,
|
||||
]);
|
||||
|
||||
// Fetch transactions before startDate for initial balance calculation
|
||||
const { data: beforeStartDateData } = useTransactions(
|
||||
beforeStartDateParams,
|
||||
!!metadata && period !== "all" && !!startDate
|
||||
);
|
||||
|
||||
// Fetch all filtered transactions for chart
|
||||
const { data: transactionsData, isLoading } = useTransactions(
|
||||
chartParams,
|
||||
!!metadata
|
||||
);
|
||||
|
||||
// Calculate balance chart data
|
||||
const chartData = useMemo(() => {
|
||||
if (!transactionsData || !metadata) {
|
||||
return {
|
||||
aggregatedData: [],
|
||||
perAccountData: [],
|
||||
};
|
||||
}
|
||||
|
||||
const transactions = transactionsData.transactions;
|
||||
const accounts = metadata.accounts;
|
||||
|
||||
// Sort transactions by date
|
||||
const sortedTransactions = [...transactions].sort(
|
||||
(a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
|
||||
);
|
||||
|
||||
// Calculate starting balance: initialBalance + transactions before startDate
|
||||
let runningBalance = 0;
|
||||
const accountsToUse = selectedAccounts.includes("all")
|
||||
? accounts
|
||||
: accounts.filter((acc: Account) => selectedAccounts.includes(acc.id));
|
||||
|
||||
// Start with initial balances
|
||||
runningBalance = accountsToUse.reduce(
|
||||
(sum: number, acc: Account) => sum + (acc.initialBalance || 0),
|
||||
0
|
||||
);
|
||||
|
||||
// Add transactions before startDate if we have them
|
||||
if (beforeStartDateData?.transactions) {
|
||||
const beforeStartTransactions = beforeStartDateData.transactions.filter(
|
||||
(t) => {
|
||||
const transactionDate = new Date(t.date);
|
||||
return transactionDate < startDate;
|
||||
}
|
||||
);
|
||||
beforeStartTransactions.forEach((t) => {
|
||||
runningBalance += t.amount;
|
||||
});
|
||||
}
|
||||
|
||||
const aggregatedBalanceByDate = new Map<string, number>();
|
||||
|
||||
// Calculate balance evolution
|
||||
sortedTransactions.forEach((t) => {
|
||||
runningBalance += t.amount;
|
||||
aggregatedBalanceByDate.set(t.date, runningBalance);
|
||||
});
|
||||
|
||||
const aggregatedBalanceData: BalanceChartDataPoint[] = Array.from(
|
||||
aggregatedBalanceByDate.entries()
|
||||
).map(([date, balance]) => ({
|
||||
date: new Date(date).toLocaleDateString("fr-FR", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
}),
|
||||
solde: Math.round(balance),
|
||||
}));
|
||||
|
||||
// Per account balance calculation
|
||||
const accountBalances = new Map<string, Map<string, number>>();
|
||||
accounts.forEach((account: Account) => {
|
||||
accountBalances.set(account.id, new Map());
|
||||
});
|
||||
|
||||
// Calculate running balance per account
|
||||
const accountRunningBalances = new Map<string, number>();
|
||||
accounts.forEach((account: Account) => {
|
||||
accountRunningBalances.set(account.id, account.initialBalance || 0);
|
||||
});
|
||||
|
||||
// Add transactions before startDate per account
|
||||
if (beforeStartDateData?.transactions) {
|
||||
const beforeStartTransactions = beforeStartDateData.transactions.filter(
|
||||
(t) => {
|
||||
const transactionDate = new Date(t.date);
|
||||
return transactionDate < startDate;
|
||||
}
|
||||
);
|
||||
beforeStartTransactions.forEach((t) => {
|
||||
const currentBalance = accountRunningBalances.get(t.accountId) || 0;
|
||||
accountRunningBalances.set(t.accountId, currentBalance + t.amount);
|
||||
});
|
||||
}
|
||||
|
||||
// Filter transactions by account if needed
|
||||
const transactionsForAccounts = selectedAccounts.includes("all")
|
||||
? sortedTransactions
|
||||
: sortedTransactions.filter((t) =>
|
||||
selectedAccounts.includes(t.accountId)
|
||||
);
|
||||
|
||||
transactionsForAccounts.forEach((t) => {
|
||||
const currentBalance = accountRunningBalances.get(t.accountId) || 0;
|
||||
const newBalance = currentBalance + t.amount;
|
||||
accountRunningBalances.set(t.accountId, newBalance);
|
||||
|
||||
const accountDates = accountBalances.get(t.accountId);
|
||||
if (accountDates) {
|
||||
accountDates.set(t.date, newBalance);
|
||||
}
|
||||
});
|
||||
|
||||
// Merge all dates and create data points
|
||||
const allDates = new Set<string>();
|
||||
accountBalances.forEach((dates) => {
|
||||
dates.forEach((_, date) => allDates.add(date));
|
||||
});
|
||||
|
||||
const sortedDates = Array.from(allDates).sort();
|
||||
const lastBalances = new Map<string, number>();
|
||||
accounts.forEach((account: Account) => {
|
||||
// Start with initial balance + transactions before startDate
|
||||
let accountStartingBalance = account.initialBalance || 0;
|
||||
if (beforeStartDateData?.transactions) {
|
||||
const beforeStartTransactions = beforeStartDateData.transactions.filter(
|
||||
(t) => {
|
||||
const transactionDate = new Date(t.date);
|
||||
return transactionDate < startDate && t.accountId === account.id;
|
||||
}
|
||||
);
|
||||
beforeStartTransactions.forEach((t) => {
|
||||
accountStartingBalance += t.amount;
|
||||
});
|
||||
}
|
||||
lastBalances.set(account.id, accountStartingBalance);
|
||||
});
|
||||
|
||||
const perAccountBalanceData: BalanceChartDataPoint[] = sortedDates.map(
|
||||
(date) => {
|
||||
const point: BalanceChartDataPoint = {
|
||||
date: new Date(date).toLocaleDateString("fr-FR", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
}),
|
||||
};
|
||||
|
||||
accounts.forEach((account: Account) => {
|
||||
const accountDates = accountBalances.get(account.id);
|
||||
if (accountDates?.has(date)) {
|
||||
lastBalances.set(account.id, accountDates.get(date)!);
|
||||
}
|
||||
point[account.id] = Math.round(lastBalances.get(account.id) || 0);
|
||||
});
|
||||
|
||||
return point;
|
||||
}
|
||||
);
|
||||
|
||||
return {
|
||||
aggregatedData: aggregatedBalanceData,
|
||||
perAccountData: perAccountBalanceData,
|
||||
};
|
||||
}, [
|
||||
transactionsData,
|
||||
beforeStartDateData,
|
||||
metadata,
|
||||
selectedAccounts,
|
||||
startDate,
|
||||
]);
|
||||
|
||||
return {
|
||||
aggregatedData: chartData.aggregatedData,
|
||||
perAccountData: chartData.perAccountData,
|
||||
accounts: metadata?.accounts || [],
|
||||
isLoading,
|
||||
};
|
||||
}
|
||||
200
hooks/use-transactions-chart-data.ts
Normal file
200
hooks/use-transactions-chart-data.ts
Normal file
@@ -0,0 +1,200 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo } from "react";
|
||||
import { useTransactions } from "@/lib/hooks";
|
||||
import { useBankingMetadata } from "@/lib/hooks";
|
||||
import type { TransactionsPaginatedParams } from "@/services/banking.service";
|
||||
import type { Category } from "@/lib/types";
|
||||
|
||||
interface MonthlyChartData {
|
||||
month: string;
|
||||
revenus: number;
|
||||
depenses: number;
|
||||
solde: number;
|
||||
}
|
||||
|
||||
interface CategoryChartData {
|
||||
name: string;
|
||||
value: number;
|
||||
color: string;
|
||||
icon: string;
|
||||
categoryId: string | null;
|
||||
}
|
||||
|
||||
interface UseTransactionsChartDataParams {
|
||||
selectedAccounts: string[];
|
||||
selectedCategories: string[];
|
||||
period: "1month" | "3months" | "6months" | "12months" | "custom" | "all";
|
||||
customStartDate?: Date;
|
||||
customEndDate?: Date;
|
||||
showReconciled: string;
|
||||
searchQuery: string;
|
||||
}
|
||||
|
||||
export function useTransactionsChartData({
|
||||
selectedAccounts,
|
||||
selectedCategories,
|
||||
period,
|
||||
customStartDate,
|
||||
customEndDate,
|
||||
showReconciled,
|
||||
searchQuery,
|
||||
}: UseTransactionsChartDataParams) {
|
||||
const { data: metadata } = useBankingMetadata();
|
||||
|
||||
// Calculate start date based on period
|
||||
const startDate = useMemo(() => {
|
||||
const now = new Date();
|
||||
switch (period) {
|
||||
case "1month":
|
||||
return new Date(now.getFullYear(), now.getMonth() - 1, 1);
|
||||
case "3months":
|
||||
return new Date(now.getFullYear(), now.getMonth() - 3, 1);
|
||||
case "6months":
|
||||
return new Date(now.getFullYear(), now.getMonth() - 6, 1);
|
||||
case "12months":
|
||||
return new Date(now.getFullYear(), now.getMonth() - 12, 1);
|
||||
case "custom":
|
||||
return customStartDate || new Date(0);
|
||||
default:
|
||||
return new Date(0);
|
||||
}
|
||||
}, [period, customStartDate]);
|
||||
|
||||
// Calculate end date (only for custom period)
|
||||
const endDate = useMemo(() => {
|
||||
if (period === "custom" && customEndDate) {
|
||||
return customEndDate;
|
||||
}
|
||||
return undefined;
|
||||
}, [period, customEndDate]);
|
||||
|
||||
// Build params for fetching all transactions (no pagination)
|
||||
const chartParams = useMemo<TransactionsPaginatedParams>(() => {
|
||||
const params: TransactionsPaginatedParams = {
|
||||
limit: 10000, // Large limit to get all transactions
|
||||
offset: 0,
|
||||
sortField: "date",
|
||||
sortOrder: "asc",
|
||||
};
|
||||
|
||||
if (startDate && period !== "all") {
|
||||
params.startDate = startDate.toISOString().split("T")[0];
|
||||
}
|
||||
if (endDate) {
|
||||
params.endDate = endDate.toISOString().split("T")[0];
|
||||
}
|
||||
if (!selectedAccounts.includes("all")) {
|
||||
params.accountIds = selectedAccounts;
|
||||
}
|
||||
if (!selectedCategories.includes("all")) {
|
||||
if (selectedCategories.includes("uncategorized")) {
|
||||
params.includeUncategorized = true;
|
||||
} else {
|
||||
params.categoryIds = selectedCategories;
|
||||
}
|
||||
}
|
||||
if (searchQuery) {
|
||||
params.search = searchQuery;
|
||||
}
|
||||
if (showReconciled !== "all") {
|
||||
params.isReconciled = showReconciled === "reconciled";
|
||||
}
|
||||
|
||||
return params;
|
||||
}, [
|
||||
startDate,
|
||||
endDate,
|
||||
selectedAccounts,
|
||||
selectedCategories,
|
||||
searchQuery,
|
||||
showReconciled,
|
||||
period,
|
||||
]);
|
||||
|
||||
// Fetch all filtered transactions for chart
|
||||
const { data: transactionsData, isLoading } = useTransactions(
|
||||
chartParams,
|
||||
!!metadata
|
||||
);
|
||||
|
||||
// Calculate monthly chart data
|
||||
const monthlyData = useMemo(() => {
|
||||
if (!transactionsData || !metadata) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const transactions = transactionsData.transactions;
|
||||
|
||||
// Monthly breakdown
|
||||
const monthlyMap = new Map<string, { income: number; expenses: number }>();
|
||||
transactions.forEach((t) => {
|
||||
const monthKey = t.date.substring(0, 7);
|
||||
const current = monthlyMap.get(monthKey) || { income: 0, expenses: 0 };
|
||||
if (t.amount >= 0) {
|
||||
current.income += t.amount;
|
||||
} else {
|
||||
current.expenses += Math.abs(t.amount);
|
||||
}
|
||||
monthlyMap.set(monthKey, current);
|
||||
});
|
||||
|
||||
const monthlyChartData: MonthlyChartData[] = Array.from(
|
||||
monthlyMap.entries()
|
||||
)
|
||||
.sort((a, b) => a[0].localeCompare(b[0]))
|
||||
.map(([month, values]) => ({
|
||||
month: new Date(month + "-01").toLocaleDateString("fr-FR", {
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
}),
|
||||
revenus: values.income,
|
||||
depenses: values.expenses,
|
||||
solde: values.income - values.expenses,
|
||||
}));
|
||||
|
||||
return monthlyChartData;
|
||||
}, [transactionsData]);
|
||||
|
||||
// Calculate category chart data (expenses only)
|
||||
const categoryData = useMemo(() => {
|
||||
if (!transactionsData || !metadata) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const transactions = transactionsData.transactions;
|
||||
const categoryTotals = new Map<string, number>();
|
||||
|
||||
transactions
|
||||
.filter((t) => t.amount < 0)
|
||||
.forEach((t) => {
|
||||
const catId = t.categoryId || "uncategorized";
|
||||
const current = categoryTotals.get(catId) || 0;
|
||||
categoryTotals.set(catId, current + Math.abs(t.amount));
|
||||
});
|
||||
|
||||
const categoryChartData: CategoryChartData[] = Array.from(
|
||||
categoryTotals.entries()
|
||||
)
|
||||
.map(([categoryId, total]) => {
|
||||
const category = metadata.categories.find((c: Category) => c.id === categoryId);
|
||||
return {
|
||||
name: category?.name || "Non catégorisé",
|
||||
value: Math.round(total),
|
||||
color: category?.color || "#94a3b8",
|
||||
icon: category?.icon || "HelpCircle",
|
||||
categoryId: categoryId === "uncategorized" ? null : categoryId,
|
||||
};
|
||||
})
|
||||
.sort((a, b) => b.value - a.value);
|
||||
|
||||
return categoryChartData;
|
||||
}, [transactionsData, metadata]);
|
||||
|
||||
return {
|
||||
monthlyData,
|
||||
categoryData,
|
||||
isLoading,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -29,7 +29,7 @@ export function useTransactionsPage() {
|
||||
"all",
|
||||
]);
|
||||
const [showReconciled, setShowReconciled] = useState<string>("all");
|
||||
const [period, setPeriod] = useState<Period>("all");
|
||||
const [period, setPeriod] = useState<Period>("3months");
|
||||
const [customStartDate, setCustomStartDate] = useState<Date | undefined>(
|
||||
undefined,
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user