feat(frontend): improved Dashboard.tsx, added transaction date

2026-03-22 15:12:08 +01:00 · 2025-10-22 17:37:11 +02:00
parent cddc1d3a9f
commit 82eb34c6e6
12 changed files with 921 additions and 48 deletions
--- a/7project/frontend/src/pages/CategoryPieChart.tsx
+++ b/7project/frontend/src/pages/CategoryPieChart.tsx
@@ -0,0 +1,100 @@
+// src/CategoryPieCharts.tsx (renamed from CategoryPieChart.tsx)
+import { useMemo } from 'react';
+import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { type Transaction, type Category } from '../api';
+
+const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#AF19FF', '#FF4242', '#8884d8', '#82ca9d'];
+
+// Helper component for a single pie chart
+function SinglePieChart({ data, title }: { data: { name: string; value: number }[]; title: string }) {
+  if (data.length === 0) {
+    return (
+      <div style={{ flex: 1, textAlign: 'center' }}>
+        <h4>{title}</h4>
+        <div>No data to display.</div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ flex: 1 }}>
+      <h4>{title}</h4>
+      <ResponsiveContainer width="100%" height={300}>
+        <PieChart>
+          <Pie
+            data={data}
+            cx="50%"
+            cy="50%"
+            labelLine={false}
+            outerRadius={80}
+            fill="#8884d8"
+            dataKey="value"
+            nameKey="name"
+            label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
+          >
+            {data.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+            ))}
+          </Pie>
+          <Tooltip formatter={(value) => new Intl.NumberFormat(undefined, { style: 'currency', currency: 'USD' }).format(value as number)} />
+          <Legend />
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+
+export default function CategoryPieCharts({ transactions, categories }: { transactions: Transaction[], categories: Category[] }) {
+
+  // Calculate expenses data
+  const expensesData = useMemo(() => {
+    const spendingMap = new Map<number, number>();
+
+    transactions.forEach(tx => {
+      // Expenses are typically negative amounts in your system
+      if (tx.amount < 0 && tx.category_ids.length > 0) {
+        tx.category_ids.forEach(catId => {
+          // Use absolute value for display on chart
+          spendingMap.set(catId, (spendingMap.get(catId) || 0) + Math.abs(tx.amount));
+        });
+      }
+    });
+
+    return Array.from(spendingMap.entries())
+      .map(([categoryId, total]) => ({
+        name: categories.find(c => c.id === categoryId)?.name || `Category #${categoryId}`,
+        value: total,
+      }))
+      .sort((a, b) => b.value - a.value); // Sort descending
+  }, [transactions, categories]);
+
+  // Calculate earnings data
+  const earningsData = useMemo(() => {
+    const incomeMap = new Map<number, number>();
+
+    transactions.forEach(tx => {
+      // Earnings are typically positive amounts in your system
+      if (tx.amount > 0 && tx.category_ids.length > 0) {
+        tx.category_ids.forEach(catId => {
+          incomeMap.set(catId, (incomeMap.get(catId) || 0) + tx.amount);
+        });
+      }
+    });
+
+    return Array.from(incomeMap.entries())
+      .map(([categoryId, total]) => ({
+        name: categories.find(c => c.id === categoryId)?.name || `Category #${categoryId}`,
+        value: total,
+      }))
+      .sort((a, b) => b.value - a.value); // Sort descending
+  }, [transactions, categories]);
+
+
+  return (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px', justifyContent: 'center' }}>
+      <SinglePieChart data={expensesData} title="Expenses by Category" />
+      <SinglePieChart data={earningsData} title="Earnings by Category" />
+    </div>
+  );
+}