Fix date parsing and add time period filters to Analytics dashboard

Co-authored-by: elisiariocouto <818914+elisiariocouto@users.noreply.github.com>

frontend/src/components/analytics/BalanceChart.tsx

@@ -59,11 +59,11 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
   const chartData = data
     .filter((balance) => balance.balance_type === "closingBooked")
     .map((balance) => ({
-      date: new Date(balance.reference_date).toLocaleDateString(),
+      date: new Date(balance.reference_date).toLocaleDateString('en-GB'), // DD/MM/YYYY format
       balance: balance.balance_amount,
       account_id: balance.account_id,
     }))
-    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
+    .sort((a, b) => new Date(a.date.split('/').reverse().join('/')).getTime() - new Date(b.date.split('/').reverse().join('/')).getTime());
 
   // Group by account and aggregate
   const accountBalances: { [key: string]: ChartDataPoint[] } = {};
@@ -86,7 +86,7 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
   });
 
   const finalData = Object.values(aggregatedData).sort(
-    (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
+    (a, b) => new Date(a.date.split('/').reverse().join('/')).getTime() - new Date(b.date.split('/').reverse().join('/')).getTime()
   );
 
   const colors = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6"];
@@ -117,8 +117,10 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
               dataKey="date"
               tick={{ fontSize: 12 }}
               tickFormatter={(value) => {
-                const date = new Date(value);
-                return date.toLocaleDateString(undefined, {
+                // Convert DD/MM/YYYY back to a proper date for formatting
+                const [day, month, year] = value.split('/');
+                const date = new Date(year, month - 1, day);
+                return date.toLocaleDateString('en-GB', {
                   month: "short",
                   day: "numeric",
                 });

frontend/src/components/analytics/MonthlyTrends.tsx

@@ -12,6 +12,7 @@ import apiClient from "../../lib/api";
 
 interface MonthlyTrendsProps {
   className?: string;
+  days?: number;
 }
 
 interface MonthlyData {
@@ -31,13 +32,12 @@ interface TooltipProps {
   label?: string;
 }
 
-export default function MonthlyTrends({ className }: MonthlyTrendsProps) {
-  // Get transactions for the last 12 months using analytics endpoint
+export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsProps) {
+  // Get transactions for the specified period using analytics endpoint
   const { data: transactions, isLoading } = useQuery({
-    queryKey: ["transactions", "monthly-trends"],
+    queryKey: ["transactions", "monthly-trends", days],
     queryFn: async () => {
-      // Get last 365 days of transactions for monthly trends
-      return await apiClient.getTransactionsForAnalytics(365);
+      return await apiClient.getTransactionsForAnalytics(days);
     },
   });
 

frontend/src/components/analytics/TimePeriodFilter.tsx

@@ -0,0 +1,39 @@
+import { Calendar } from "lucide-react";
+import type { TimePeriod } from "../../lib/timePeriods";
+import { TIME_PERIODS } from "../../lib/timePeriods";
+
+interface TimePeriodFilterProps {
+  selectedPeriod: TimePeriod;
+  onPeriodChange: (period: TimePeriod) => void;
+  className?: string;
+}
+
+export default function TimePeriodFilter({
+  selectedPeriod,
+  onPeriodChange,
+  className = "",
+}: TimePeriodFilterProps) {
+  return (
+    <div className={`flex items-center gap-4 ${className}`}>
+      <div className="flex items-center gap-2 text-gray-700">
+        <Calendar size={20} />
+        <span className="font-medium">Time Period:</span>
+      </div>
+      <div className="flex gap-2">
+        {TIME_PERIODS.map((period) => (
+          <button
+            key={period.value}
+            onClick={() => onPeriodChange(period)}
+            className={`px-4 py-2 text-sm font-medium rounded-md transition-colors ${
+              selectedPeriod.value === period.value
+                ? "bg-blue-600 text-white"
+                : "bg-gray-100 text-gray-700 hover:bg-gray-200"
+            }`}
+          >
+            {period.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/lib/timePeriods.ts

@@ -0,0 +1,19 @@
+export type TimePeriod = {
+  label: string;
+  days: number;
+  value: string;
+};
+
+function getDaysFromYearStart(): number {
+  const now = new Date();
+  const yearStart = new Date(now.getFullYear(), 0, 1);
+  const diffTime = now.getTime() - yearStart.getTime();
+  return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+}
+
+export const TIME_PERIODS: TimePeriod[] = [
+  { label: "Last 30 days", days: 30, value: "30d" },
+  { label: "Last 6 months", days: 180, value: "6m" },
+  { label: "Year to Date", days: getDaysFromYearStart(), value: "ytd" },
+  { label: "Last 365 days", days: 365, value: "365d" },
+];

frontend/src/routes/analytics.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
 import {
   CreditCard,
   TrendingUp,
@@ -13,12 +14,20 @@ import StatCard from "../components/analytics/StatCard";
 import BalanceChart from "../components/analytics/BalanceChart";
 import TransactionDistribution from "../components/analytics/TransactionDistribution";
 import MonthlyTrends from "../components/analytics/MonthlyTrends";
+import TimePeriodFilter from "../components/analytics/TimePeriodFilter";
+import type { TimePeriod } from "../lib/timePeriods";
+import { TIME_PERIODS } from "../lib/timePeriods";
 
 function AnalyticsDashboard() {
+  // Default to Last 365 days
+  const [selectedPeriod, setSelectedPeriod] = useState<TimePeriod>(
+    TIME_PERIODS.find((p) => p.value === "365d") || TIME_PERIODS[3]
+  );
+
   // Fetch analytics data
   const { data: stats, isLoading: statsLoading } = useQuery({
-    queryKey: ["transaction-stats"],
-    queryFn: () => apiClient.getTransactionStats(365), // Last year
+    queryKey: ["transaction-stats", selectedPeriod.days],
+    queryFn: () => apiClient.getTransactionStats(selectedPeriod.days),
   });
 
   const { data: accounts, isLoading: accountsLoading } = useQuery({
@@ -27,8 +36,8 @@ function AnalyticsDashboard() {
   });
 
   const { data: balances, isLoading: balancesLoading } = useQuery({
-    queryKey: ["historical-balances"],
-    queryFn: () => apiClient.getHistoricalBalances(365), // Get 1 year of history
+    queryKey: ["historical-balances", selectedPeriod.days],
+    queryFn: () => apiClient.getHistoricalBalances(selectedPeriod.days),
   });
 
   const isLoading = statsLoading || accountsLoading || balancesLoading;
@@ -66,6 +75,13 @@ function AnalyticsDashboard() {
         </p>
       </div>
 
+      {/* Time Period Filter */}
+      <TimePeriodFilter
+        selectedPeriod={selectedPeriod}
+        onPeriodChange={setSelectedPeriod}
+        className="bg-white rounded-lg shadow p-4 border border-gray-200"
+      />
+
       {/* Stats Cards */}
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
         <StatCard
@@ -133,7 +149,7 @@ function AnalyticsDashboard() {
 
       {/* Monthly Trends */}
       <div className="bg-white rounded-lg shadow p-6 border border-gray-200">
-        <MonthlyTrends />
+        <MonthlyTrends days={selectedPeriod.days} />
       </div>
 
       {/* Summary Section */}