Bump version to 0.6.0 — Reports enhancements and comment visibility fix

- Add table/chart toggle for Trends, By Category, and Over Time reports
- Add "Show amounts" toggle to display values on chart elements
- Add filter panel with category checkboxes and source dropdown
- Add source filter at SQL level for all chart report queries
- Add sticky headers on Dynamic Report and Budget vs Actual tables
- Add interactive hover: dimmed non-hovered bars, filtered tooltip, legend hover
- Fix comment icon color to match split indicator (orange) (#7)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## [Unreleased]
 
+## [0.6.0]
+
+### Added
+- Reports: toggle between table and chart view for Trends, By Category, and Over Time tabs
+- Reports: "Show amounts" toggle displays values directly on chart bars and area curves
+- Reports: filter panel with category checkboxes (search, select all/none) and source dropdown
+- Reports: source filter applies at SQL level for accurate filtered totals
+- Reports: sticky table headers on all report tables (Dynamic Report, Budget vs Actual)
+- Reports: interactive hover — dimmed non-hovered bars, tooltip filtered to hovered category
+- Reports: legend hover highlights category across all months (Over Time chart)
+
+### Fixed
+- Transaction table: comment icon now turns orange (like split icon) when a note is present (#7)
+
 ## [0.5.0]
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "simpl_result_scaffold",
   "private": true,
-  "version": "0.5.0",
+  "version": "0.6.0",
   "license": "GPL-3.0-only",
   "type": "module",
   "scripts": {

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Simpl Resultat",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "identifier": "com.simpl.resultat",
   "build": {
     "beforeDevCommand": "npm run dev",

src/components/reports/BudgetVsActualTable.tsx

@@ -142,43 +142,43 @@ export default function BudgetVsActualTable({ data }: BudgetVsActualTableProps)
           {subtotalsOnTop ? t("reports.subtotalsOnTop") : t("reports.subtotalsOnBottom")}
         </button>
       </div>
-      <div className="overflow-x-auto">
+      <div className="overflow-x-auto overflow-y-auto" style={{ maxHeight: "calc(100vh - 220px)" }}>
       <table className="w-full text-sm">
-        <thead>
+        <thead className="sticky top-0 z-20">
-          <tr className="border-b border-[var(--border)]">
+          <tr className="border-b border-[var(--border)] bg-[var(--card)]">
-            <th rowSpan={2} className="text-left px-3 py-2 font-medium text-[var(--muted-foreground)] align-bottom">
+            <th rowSpan={2} className="text-left px-3 py-2 font-medium text-[var(--muted-foreground)] align-bottom bg-[var(--card)]">
               {t("budget.category")}
             </th>
-            <th colSpan={4} className="text-center px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)]">
+            <th colSpan={4} className="text-center px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)] bg-[var(--card)]">
               {t("reports.bva.monthly")}
             </th>
-            <th colSpan={4} className="text-center px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)]">
+            <th colSpan={4} className="text-center px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)] bg-[var(--card)]">
               {t("reports.bva.ytd")}
             </th>
           </tr>
-          <tr className="border-b border-[var(--border)]">
+          <tr className="border-b border-[var(--border)] bg-[var(--card)]">
-            <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)]">
+            <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)] bg-[var(--card)]">
               {t("budget.actual")}
             </th>
-            <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)]">
+            <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
               {t("budget.planned")}
             </th>
-            <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)]">
+            <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
               {t("reports.bva.dollarVar")}
             </th>
-            <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)]">
+            <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
               {t("reports.bva.pctVar")}
             </th>
-            <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)]">
+            <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)] bg-[var(--card)]">
               {t("budget.actual")}
             </th>
-            <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)]">
+            <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
               {t("budget.planned")}
             </th>
-            <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)]">
+            <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
               {t("reports.bva.dollarVar")}
             </th>
-            <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)]">
+            <th className="text-right px-3 py-1 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
               {t("reports.bva.pctVar")}
             </th>
           </tr>

src/components/reports/CategoryBarChart.tsx

@@ -8,6 +8,7 @@ import {
   Tooltip,
   ResponsiveContainer,
   Cell,
+  LabelList,
 } from "recharts";
 import { Eye } from "lucide-react";
 import type { CategoryBreakdownItem } from "../../shared/types";
@@ -23,6 +24,7 @@ interface CategoryBarChartProps {
   onToggleHidden: (categoryName: string) => void;
   onShowAll: () => void;
   onViewDetails: (item: CategoryBreakdownItem) => void;
+  showAmounts?: boolean;
 }
 
 export default function CategoryBarChart({
@@ -31,9 +33,11 @@ export default function CategoryBarChart({
   onToggleHidden,
   onShowAll,
   onViewDetails,
+  showAmounts,
 }: CategoryBarChartProps) {
   const { t } = useTranslation();
   const hoveredRef = useRef<CategoryBreakdownItem | null>(null);
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number; item: CategoryBreakdownItem } | null>(null);
 
   const visibleData = data.filter((d) => !hiddenCategories.has(d.category_name));
@@ -112,11 +116,21 @@ export default function CategoryBarChart({
                 <Cell
                   key={index}
                   fill={getPatternFill("cat-bar", index, item.category_color)}
-                  onMouseEnter={() => { hoveredRef.current = item; }}
+                  fillOpacity={hoveredIndex === null || hoveredIndex === index ? 1 : 0.3}
-                  onMouseLeave={() => { hoveredRef.current = null; }}
+                  onMouseEnter={() => { hoveredRef.current = item; setHoveredIndex(index); }}
+                  onMouseLeave={() => { hoveredRef.current = null; setHoveredIndex(null); }}
                   cursor="context-menu"
+                  style={{ transition: "fill-opacity 150ms" }}
                 />
               ))}
+              {showAmounts && (
+                <LabelList
+                  dataKey="total"
+                  position="right"
+                  formatter={(v: unknown) => cadFormatter(Number(v))}
+                  style={{ fill: "var(--foreground)", fontSize: 11 }}
+                />
+              )}
             </Bar>
           </BarChart>
         </ResponsiveContainer>

src/components/reports/CategoryOverTimeChart.tsx

@@ -9,6 +9,7 @@ import {
   ResponsiveContainer,
   Legend,
   CartesianGrid,
+  LabelList,
 } from "recharts";
 import { Eye } from "lucide-react";
 import type { CategoryOverTimeData, CategoryBreakdownItem } from "../../shared/types";
@@ -30,6 +31,7 @@ interface CategoryOverTimeChartProps {
   onToggleHidden: (categoryName: string) => void;
   onShowAll: () => void;
   onViewDetails: (item: CategoryBreakdownItem) => void;
+  showAmounts?: boolean;
 }
 
 export default function CategoryOverTimeChart({
@@ -38,9 +40,11 @@ export default function CategoryOverTimeChart({
   onToggleHidden,
   onShowAll,
   onViewDetails,
+  showAmounts,
 }: CategoryOverTimeChartProps) {
   const { t } = useTranslation();
   const hoveredRef = useRef<string | null>(null);
+  const [hoveredCategory, setHoveredCategory] = useState<string | null>(null);
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number; name: string } | null>(null);
 
   const visibleCategories = data.categories.filter((name) => !hiddenCategories.has(name));
@@ -109,7 +113,10 @@ export default function CategoryOverTimeChart({
               width={80}
             />
             <Tooltip
-              formatter={(value: number | undefined) => cadFormatter(value ?? 0)}
+              formatter={(value: unknown, name: unknown) => {
+                if (hoveredCategory && name !== hoveredCategory) return [null, null];
+                return [cadFormatter(Number(value) || 0), String(name)];
+              }}
               labelFormatter={(label) => formatMonth(String(label))}
               contentStyle={{
                 backgroundColor: "var(--card)",
@@ -119,18 +126,36 @@ export default function CategoryOverTimeChart({
               }}
               labelStyle={{ color: "var(--foreground)" }}
               itemStyle={{ color: "var(--foreground)" }}
+              filterNull
+            />
+            <Legend
+              onMouseEnter={(e) => {
+                if (e && e.dataKey) setHoveredCategory(String(e.dataKey));
+              }}
+              onMouseLeave={() => setHoveredCategory(null)}
+              wrapperStyle={{ cursor: "pointer" }}
             />
-            <Legend />
             {categoryEntries.map((c) => (
               <Bar
                 key={c.name}
                 dataKey={c.name}
                 stackId="stack"
                 fill={getPatternFill("cat-time", c.index, c.color)}
-                onMouseEnter={() => { hoveredRef.current = c.name; }}
+                fillOpacity={hoveredCategory === null || hoveredCategory === c.name ? 1 : 0.2}
-                onMouseLeave={() => { hoveredRef.current = null; }}
+                onMouseEnter={() => { hoveredRef.current = c.name; setHoveredCategory(c.name); }}
+                onMouseLeave={() => { hoveredRef.current = null; setHoveredCategory(null); }}
                 cursor="context-menu"
+                style={{ transition: "fill-opacity 150ms" }}
+              >
+                {showAmounts && (
+                  <LabelList
+                    dataKey={c.name}
+                    position="center"
+                    formatter={(v: unknown) => Number(v) ? cadFormatter(Number(v)) : ""}
+                    style={{ fill: "#fff", fontSize: 10, fontWeight: 600, textShadow: "0 1px 2px rgba(0,0,0,0.5)" }}
                   />
+                )}
+              </Bar>
             ))}
           </BarChart>
         </ResponsiveContainer>

src/components/reports/CategoryOverTimeTable.tsx

@@ -0,0 +1,111 @@
+import { useTranslation } from "react-i18next";
+import type { CategoryOverTimeData } from "../../shared/types";
+
+const cadFormatter = (value: number) =>
+  new Intl.NumberFormat("en-CA", { style: "currency", currency: "CAD", maximumFractionDigits: 0 }).format(value);
+
+function formatMonth(month: string): string {
+  const [year, m] = month.split("-");
+  const date = new Date(Number(year), Number(m) - 1);
+  return date.toLocaleDateString("default", { month: "short", year: "2-digit" });
+}
+
+interface CategoryOverTimeTableProps {
+  data: CategoryOverTimeData;
+  hiddenCategories?: Set<string>;
+}
+
+export default function CategoryOverTimeTable({ data, hiddenCategories }: CategoryOverTimeTableProps) {
+  const { t } = useTranslation();
+
+  if (data.data.length === 0) {
+    return (
+      <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-8 text-center text-[var(--muted-foreground)]">
+        {t("dashboard.noData")}
+      </div>
+    );
+  }
+
+  const visibleCategories = hiddenCategories?.size
+    ? data.categories.filter((name) => !hiddenCategories.has(name))
+    : data.categories;
+
+  const months = data.data.map((d) => d.month);
+
+  return (
+    <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl overflow-hidden">
+      <div className="overflow-x-auto overflow-y-auto" style={{ maxHeight: "calc(100vh - 220px)" }}>
+        <table className="w-full text-sm whitespace-nowrap">
+          <thead className="sticky top-0 z-20">
+            <tr className="border-b border-[var(--border)] bg-[var(--card)]">
+              <th className="text-left px-3 py-2 font-medium text-[var(--muted-foreground)] bg-[var(--card)] sticky left-0 z-30 min-w-[140px]">
+                {t("budget.category")}
+              </th>
+              {months.map((month) => (
+                <th key={month} className="text-right px-3 py-2 font-medium text-[var(--muted-foreground)] bg-[var(--card)] min-w-[90px]">
+                  {formatMonth(month)}
+                </th>
+              ))}
+              <th className="text-right px-3 py-2 font-medium text-[var(--muted-foreground)] bg-[var(--card)] border-l border-[var(--border)] min-w-[90px]">
+                {t("common.total")}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {visibleCategories.map((category) => {
+              const rowTotal = data.data.reduce((sum, d) => sum + ((d as Record<string, unknown>)[category] as number || 0), 0);
+              return (
+                <tr key={category} className="border-b border-[var(--border)]/50">
+                  <td className="px-3 py-1.5 sticky left-0 bg-[var(--card)] z-10">
+                    <span className="flex items-center gap-2">
+                      <span
+                        className="w-2.5 h-2.5 rounded-full shrink-0"
+                        style={{ backgroundColor: data.colors[category] }}
+                      />
+                      {category}
+                    </span>
+                  </td>
+                  {months.map((month) => {
+                    const monthData = data.data.find((d) => d.month === month);
+                    const value = (monthData as Record<string, unknown>)?.[category] as number || 0;
+                    return (
+                      <td key={month} className="text-right px-3 py-1.5">
+                        {value ? cadFormatter(value) : "—"}
+                      </td>
+                    );
+                  })}
+                  <td className="text-right px-3 py-1.5 font-semibold border-l border-[var(--border)]/50">
+                    {cadFormatter(rowTotal)}
+                  </td>
+                </tr>
+              );
+            })}
+            <tr className="border-t-2 border-[var(--border)] font-bold bg-[var(--muted)]/20">
+              <td className="px-3 py-2 sticky left-0 bg-[var(--muted)]/20 z-10">{t("common.total")}</td>
+              {months.map((month) => {
+                const monthData = data.data.find((d) => d.month === month);
+                const monthTotal = visibleCategories.reduce(
+                  (sum, cat) => sum + ((monthData as Record<string, unknown>)?.[cat] as number || 0),
+                  0,
+                );
+                return (
+                  <td key={month} className="text-right px-3 py-2">
+                    {cadFormatter(monthTotal)}
+                  </td>
+                );
+              })}
+              <td className="text-right px-3 py-2 border-l border-[var(--border)]/50">
+                {cadFormatter(
+                  visibleCategories.reduce(
+                    (sum, cat) => sum + data.data.reduce((s, d) => s + ((d as Record<string, unknown>)[cat] as number || 0), 0),
+                    0,
+                  ),
+                )}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

src/components/reports/CategoryTable.tsx

@@ -0,0 +1,74 @@
+import { useTranslation } from "react-i18next";
+import type { CategoryBreakdownItem } from "../../shared/types";
+
+const cadFormatter = (value: number) =>
+  new Intl.NumberFormat("en-CA", { style: "currency", currency: "CAD", maximumFractionDigits: 0 }).format(value);
+
+interface CategoryTableProps {
+  data: CategoryBreakdownItem[];
+  hiddenCategories?: Set<string>;
+}
+
+export default function CategoryTable({ data, hiddenCategories }: CategoryTableProps) {
+  const { t } = useTranslation();
+
+  const visibleData = hiddenCategories?.size
+    ? data.filter((d) => !hiddenCategories.has(d.category_name))
+    : data;
+
+  if (visibleData.length === 0) {
+    return (
+      <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-8 text-center text-[var(--muted-foreground)]">
+        {t("dashboard.noData")}
+      </div>
+    );
+  }
+
+  const grandTotal = visibleData.reduce((sum, row) => sum + row.total, 0);
+
+  return (
+    <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl overflow-hidden">
+      <div className="overflow-x-auto overflow-y-auto" style={{ maxHeight: "calc(100vh - 220px)" }}>
+        <table className="w-full text-sm">
+          <thead className="sticky top-0 z-20">
+            <tr className="border-b border-[var(--border)] bg-[var(--card)]">
+              <th className="text-left px-3 py-2 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
+                {t("budget.category")}
+              </th>
+              <th className="text-right px-3 py-2 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
+                {t("common.total")}
+              </th>
+              <th className="text-right px-3 py-2 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
+                %
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {visibleData.map((row) => (
+              <tr key={row.category_id ?? "uncategorized"} className="border-b border-[var(--border)]/50">
+                <td className="px-3 py-1.5">
+                  <span className="flex items-center gap-2">
+                    <span
+                      className="w-2.5 h-2.5 rounded-full shrink-0"
+                      style={{ backgroundColor: row.category_color }}
+                    />
+                    {row.category_name}
+                  </span>
+                </td>
+                <td className="text-right px-3 py-1.5">{cadFormatter(row.total)}</td>
+                <td className="text-right px-3 py-1.5 text-[var(--muted-foreground)]">
+                  {grandTotal !== 0 ? `${((row.total / grandTotal) * 100).toFixed(1)}%` : "—"}
+                </td>
+              </tr>
+            ))}
+            <tr className="border-t-2 border-[var(--border)] font-bold bg-[var(--muted)]/20">
+              <td className="px-3 py-2">{t("common.total")}</td>
+              <td className="text-right px-3 py-2">{cadFormatter(grandTotal)}</td>
+              <td className="text-right px-3 py-2 text-[var(--muted-foreground)]">100%</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

src/components/reports/DynamicReportTable.tsx

@@ -149,18 +149,18 @@ export default function DynamicReportTable({ config, result }: DynamicReportTabl
           </button>
         </div>
       )}
-      <div className="overflow-x-auto">
+      <div className="overflow-x-auto overflow-y-auto" style={{ maxHeight: "calc(100vh - 220px)" }}>
         <table className="w-full text-sm">
-          <thead>
+          <thead className="sticky top-0 z-20">
-            <tr className="border-b border-[var(--border)]">
+            <tr className="border-b border-[var(--border)] bg-[var(--card)]">
               {rowDims.map((dim) => (
-                <th key={dim} className="text-left px-3 py-2 font-medium text-[var(--muted-foreground)]">
+                <th key={dim} className="text-left px-3 py-2 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
                   {fieldLabel(dim)}
                 </th>
               ))}
               {colValues.map((colVal) =>
                 measures.map((m) => (
-                  <th key={`${colVal}-${m}`} className="text-right px-3 py-2 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)]">
+                  <th key={`${colVal}-${m}`} className="text-right px-3 py-2 font-medium text-[var(--muted-foreground)] border-l border-[var(--border)] bg-[var(--card)]">
                     {colDims.length > 0 ? (measures.length > 1 ? `${colLabel(colVal)} — ${measureLabel(m)}` : colLabel(colVal)) : measureLabel(m)}
                   </th>
                 ))

src/components/reports/MonthlyTrendsChart.tsx

@@ -7,6 +7,7 @@ import {
   Tooltip,
   ResponsiveContainer,
   CartesianGrid,
+  LabelList,
 } from "recharts";
 import type { MonthlyTrendItem } from "../../shared/types";
 
@@ -21,9 +22,10 @@ function formatMonth(month: string): string {
 
 interface MonthlyTrendsChartProps {
   data: MonthlyTrendItem[];
+  showAmounts?: boolean;
 }
 
-export default function MonthlyTrendsChart({ data }: MonthlyTrendsChartProps) {
+export default function MonthlyTrendsChart({ data, showAmounts }: MonthlyTrendsChartProps) {
   const { t } = useTranslation();
 
   if (data.length === 0) {
@@ -80,7 +82,16 @@ export default function MonthlyTrendsChart({ data }: MonthlyTrendsChartProps) {
             stroke="var(--positive)"
             fill="url(#gradientIncome)"
             strokeWidth={2}
+          >
+            {showAmounts && (
+              <LabelList
+                dataKey="income"
+                position="top"
+                formatter={(v: unknown) => cadFormatter(Number(v))}
+                style={{ fill: "var(--positive)", fontSize: 10, fontWeight: 600 }}
               />
+            )}
+          </Area>
           <Area
             type="monotone"
             dataKey="expenses"
@@ -88,7 +99,16 @@ export default function MonthlyTrendsChart({ data }: MonthlyTrendsChartProps) {
             stroke="var(--negative)"
             fill="url(#gradientExpenses)"
             strokeWidth={2}
+          >
+            {showAmounts && (
+              <LabelList
+                dataKey="expenses"
+                position="bottom"
+                formatter={(v: unknown) => cadFormatter(Number(v))}
+                style={{ fill: "var(--negative)", fontSize: 10, fontWeight: 600 }}
               />
+            )}
+          </Area>
         </AreaChart>
       </ResponsiveContainer>
     </div>

src/components/reports/MonthlyTrendsTable.tsx

@@ -0,0 +1,77 @@
+import { useTranslation } from "react-i18next";
+import type { MonthlyTrendItem } from "../../shared/types";
+
+const cadFormatter = (value: number) =>
+  new Intl.NumberFormat("en-CA", { style: "currency", currency: "CAD", maximumFractionDigits: 0 }).format(value);
+
+function formatMonth(month: string): string {
+  const [year, m] = month.split("-");
+  const date = new Date(Number(year), Number(m) - 1);
+  return date.toLocaleDateString("default", { month: "short", year: "2-digit" });
+}
+
+interface MonthlyTrendsTableProps {
+  data: MonthlyTrendItem[];
+}
+
+export default function MonthlyTrendsTable({ data }: MonthlyTrendsTableProps) {
+  const { t } = useTranslation();
+
+  if (data.length === 0) {
+    return (
+      <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl p-8 text-center text-[var(--muted-foreground)]">
+        {t("dashboard.noData")}
+      </div>
+    );
+  }
+
+  const totals = data.reduce(
+    (acc, row) => ({ income: acc.income + row.income, expenses: acc.expenses + row.expenses }),
+    { income: 0, expenses: 0 },
+  );
+
+  return (
+    <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl overflow-hidden">
+      <div className="overflow-x-auto overflow-y-auto" style={{ maxHeight: "calc(100vh - 220px)" }}>
+        <table className="w-full text-sm">
+          <thead className="sticky top-0 z-20">
+            <tr className="border-b border-[var(--border)] bg-[var(--card)]">
+              <th className="text-left px-3 py-2 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
+                {t("reports.pivot.month")}
+              </th>
+              <th className="text-right px-3 py-2 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
+                {t("dashboard.income")}
+              </th>
+              <th className="text-right px-3 py-2 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
+                {t("dashboard.expenses")}
+              </th>
+              <th className="text-right px-3 py-2 font-medium text-[var(--muted-foreground)] bg-[var(--card)]">
+                {t("dashboard.net")}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {data.map((row) => (
+              <tr key={row.month} className="border-b border-[var(--border)]/50">
+                <td className="px-3 py-1.5">{formatMonth(row.month)}</td>
+                <td className="text-right px-3 py-1.5 text-[var(--positive)]">{cadFormatter(row.income)}</td>
+                <td className="text-right px-3 py-1.5 text-[var(--negative)]">{cadFormatter(row.expenses)}</td>
+                <td className={`text-right px-3 py-1.5 ${row.income - row.expenses >= 0 ? "text-[var(--positive)]" : "text-[var(--negative)]"}`}>
+                  {cadFormatter(row.income - row.expenses)}
+                </td>
+              </tr>
+            ))}
+            <tr className="border-t-2 border-[var(--border)] font-bold bg-[var(--muted)]/20">
+              <td className="px-3 py-2">{t("common.total")}</td>
+              <td className="text-right px-3 py-2 text-[var(--positive)]">{cadFormatter(totals.income)}</td>
+              <td className="text-right px-3 py-2 text-[var(--negative)]">{cadFormatter(totals.expenses)}</td>
+              <td className={`text-right px-3 py-2 ${totals.income - totals.expenses >= 0 ? "text-[var(--positive)]" : "text-[var(--negative)]"}`}>
+                {cadFormatter(totals.income - totals.expenses)}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

src/components/reports/ReportFilterPanel.tsx

@@ -0,0 +1,135 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Filter, Search } from "lucide-react";
+import type { ImportSource } from "../../shared/types";
+
+interface ReportFilterPanelProps {
+  categories: { name: string; color: string }[];
+  hiddenCategories: Set<string>;
+  onToggleHidden: (name: string) => void;
+  onShowAll: () => void;
+  sources: ImportSource[];
+  selectedSourceId: number | null;
+  onSourceChange: (id: number | null) => void;
+}
+
+export default function ReportFilterPanel({
+  categories,
+  hiddenCategories,
+  onToggleHidden,
+  onShowAll,
+  sources,
+  selectedSourceId,
+  onSourceChange,
+}: ReportFilterPanelProps) {
+  const { t } = useTranslation();
+  const [search, setSearch] = useState("");
+  const [collapsed, setCollapsed] = useState(false);
+
+  const filtered = search
+    ? categories.filter((c) => c.name.toLowerCase().includes(search.toLowerCase()))
+    : categories;
+
+  const allVisible = hiddenCategories.size === 0;
+  const allHidden = hiddenCategories.size === categories.length;
+
+  return (
+    <div className="w-56 shrink-0 sticky top-4 self-start space-y-3">
+      {/* Source filter */}
+      {sources.length > 1 && (
+        <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl overflow-hidden">
+          <div className="px-3 py-2.5 text-sm font-medium text-[var(--foreground)] flex items-center gap-2">
+            <Filter size={14} className="text-[var(--muted-foreground)]" />
+            {t("transactions.table.source")}
+          </div>
+          <div className="border-t border-[var(--border)] px-2 py-2">
+            <select
+              value={selectedSourceId ?? ""}
+              onChange={(e) => onSourceChange(e.target.value ? Number(e.target.value) : null)}
+              className="w-full px-2 py-1.5 text-xs rounded-lg border border-[var(--border)] bg-[var(--background)] text-[var(--foreground)] focus:outline-none focus:ring-1 focus:ring-[var(--primary)]"
+            >
+              <option value="">{t("transactions.filters.allSources")}</option>
+              {sources.map((s) => (
+                <option key={s.id} value={s.id}>{s.name}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+      )}
+
+      {/* Category filter */}
+      {categories.length > 0 && <div className="bg-[var(--card)] border border-[var(--border)] rounded-xl overflow-hidden">
+        <button
+          onClick={() => setCollapsed(!collapsed)}
+          className="w-full flex items-center gap-2 px-3 py-2.5 text-sm font-medium text-[var(--foreground)] hover:bg-[var(--muted)] transition-colors"
+        >
+          <Filter size={14} className="text-[var(--muted-foreground)]" />
+          {t("reports.filters.title")}
+          <span className="ml-auto text-xs text-[var(--muted-foreground)]">
+            {categories.length - hiddenCategories.size}/{categories.length}
+          </span>
+        </button>
+
+        {!collapsed && (
+          <div className="border-t border-[var(--border)]">
+            <div className="px-2 py-2">
+              <div className="relative">
+                <Search size={13} className="absolute left-2 top-1/2 -translate-y-1/2 text-[var(--muted-foreground)]" />
+                <input
+                  type="text"
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  placeholder={t("reports.filters.search")}
+                  className="w-full pl-7 pr-2 py-1.5 text-xs rounded-lg border border-[var(--border)] bg-[var(--background)] text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:outline-none focus:ring-1 focus:ring-[var(--primary)]"
+                />
+              </div>
+            </div>
+
+            <div className="px-2 pb-1 flex gap-1">
+              <button
+                onClick={onShowAll}
+                disabled={allVisible}
+                className="text-xs px-2 py-0.5 rounded bg-[var(--muted)] text-[var(--muted-foreground)] hover:bg-[var(--border)] transition-colors disabled:opacity-40"
+              >
+                {t("reports.filters.all")}
+              </button>
+              <button
+                onClick={() => categories.forEach((c) => { if (!hiddenCategories.has(c.name)) onToggleHidden(c.name); })}
+                disabled={allHidden}
+                className="text-xs px-2 py-0.5 rounded bg-[var(--muted)] text-[var(--muted-foreground)] hover:bg-[var(--border)] transition-colors disabled:opacity-40"
+              >
+                {t("reports.filters.none")}
+              </button>
+            </div>
+
+            <div className="max-h-64 overflow-y-auto px-2 pb-2 space-y-0.5">
+              {filtered.map((cat) => {
+                const visible = !hiddenCategories.has(cat.name);
+                return (
+                  <label
+                    key={cat.name}
+                    className="flex items-center gap-2 px-1.5 py-1 rounded hover:bg-[var(--muted)] cursor-pointer transition-colors"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={visible}
+                      onChange={() => onToggleHidden(cat.name)}
+                      className="rounded border-[var(--border)] text-[var(--primary)] focus:ring-[var(--primary)] h-3.5 w-3.5"
+                    />
+                    <span
+                      className="w-2 h-2 rounded-full shrink-0"
+                      style={{ backgroundColor: cat.color }}
+                    />
+                    <span className={`text-xs truncate ${visible ? "text-[var(--foreground)]" : "text-[var(--muted-foreground)] line-through"}`}>
+                      {cat.name}
+                    </span>
+                  </label>
+                );
+              })}
+            </div>
+          </div>
+        )}
+      </div>}
+    </div>
+  );
+}

src/components/transactions/TransactionTable.tsx

@@ -196,7 +196,7 @@ export default function TransactionTable({
                     onClick={() => toggleNotes(row)}
                     className={`p-1 rounded hover:bg-[var(--muted)] transition-colors ${
                       row.notes
-                        ? "text-[var(--primary)]"
+                        ? "text-orange-500"
                         : "text-[var(--muted-foreground)]"
                     }`}
                     title={t("transactions.notes.placeholder")}

src/hooks/useReports.ts

@@ -18,6 +18,7 @@ interface ReportsState {
   period: DashboardPeriod;
   customDateFrom: string;
   customDateTo: string;
+  sourceId: number | null;
   monthlyTrends: MonthlyTrendItem[];
   categorySpending: CategoryBreakdownItem[];
   categoryOverTime: CategoryOverTimeData;
@@ -42,7 +43,8 @@ type ReportsAction =
   | { type: "SET_BUDGET_VS_ACTUAL"; payload: BudgetVsActualRow[] }
   | { type: "SET_PIVOT_CONFIG"; payload: PivotConfig }
   | { type: "SET_PIVOT_RESULT"; payload: PivotResult }
-  | { type: "SET_CUSTOM_DATES"; payload: { dateFrom: string; dateTo: string } };
+  | { type: "SET_CUSTOM_DATES"; payload: { dateFrom: string; dateTo: string } }
+  | { type: "SET_SOURCE_ID"; payload: number | null };
 
 const now = new Date();
 const todayStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
@@ -53,6 +55,7 @@ const initialState: ReportsState = {
   period: "6months",
   customDateFrom: monthStartStr,
   customDateTo: todayStr,
+  sourceId: null,
   monthlyTrends: [],
   categorySpending: [],
   categoryOverTime: { categories: [], data: [], colors: {}, categoryIds: {} },
@@ -91,6 +94,8 @@ function reducer(state: ReportsState, action: ReportsAction): ReportsState {
       return { ...state, pivotResult: action.payload, isLoading: false };
     case "SET_CUSTOM_DATES":
       return { ...state, period: "custom" as DashboardPeriod, customDateFrom: action.payload.dateFrom, customDateTo: action.payload.dateTo };
+    case "SET_SOURCE_ID":
+      return { ...state, sourceId: action.payload };
     default:
       return state;
   }
@@ -152,6 +157,7 @@ export function useReports() {
     customFrom?: string,
     customTo?: string,
     pivotCfg?: PivotConfig,
+    srcId?: number | null,
   ) => {
     const fetchId = ++fetchIdRef.current;
     dispatch({ type: "SET_LOADING", payload: true });
@@ -161,21 +167,21 @@ export function useReports() {
       switch (tab) {
         case "trends": {
           const { dateFrom, dateTo } = computeDateRange(period, customFrom, customTo);
-          const data = await getMonthlyTrends(dateFrom, dateTo);
+          const data = await getMonthlyTrends(dateFrom, dateTo, srcId ?? undefined);
           if (fetchId !== fetchIdRef.current) return;
           dispatch({ type: "SET_MONTHLY_TRENDS", payload: data });
           break;
         }
         case "byCategory": {
           const { dateFrom, dateTo } = computeDateRange(period, customFrom, customTo);
-          const data = await getExpensesByCategory(dateFrom, dateTo);
+          const data = await getExpensesByCategory(dateFrom, dateTo, srcId ?? undefined);
           if (fetchId !== fetchIdRef.current) return;
           dispatch({ type: "SET_CATEGORY_SPENDING", payload: data });
           break;
         }
         case "overTime": {
           const { dateFrom, dateTo } = computeDateRange(period, customFrom, customTo);
-          const data = await getCategoryOverTime(dateFrom, dateTo);
+          const data = await getCategoryOverTime(dateFrom, dateTo, undefined, srcId ?? undefined);
           if (fetchId !== fetchIdRef.current) return;
           dispatch({ type: "SET_CATEGORY_OVER_TIME", payload: data });
           break;
@@ -207,8 +213,8 @@ export function useReports() {
   }, []);
 
   useEffect(() => {
-    fetchData(state.tab, state.period, state.budgetYear, state.budgetMonth, state.customDateFrom, state.customDateTo, state.pivotConfig);
+    fetchData(state.tab, state.period, state.budgetYear, state.budgetMonth, state.customDateFrom, state.customDateTo, state.pivotConfig, state.sourceId);
-  }, [state.tab, state.period, state.budgetYear, state.budgetMonth, state.customDateFrom, state.customDateTo, state.pivotConfig, fetchData]);
+  }, [state.tab, state.period, state.budgetYear, state.budgetMonth, state.customDateFrom, state.customDateTo, state.pivotConfig, state.sourceId, fetchData]);
 
   const setTab = useCallback((tab: ReportTab) => {
     dispatch({ type: "SET_TAB", payload: tab });
@@ -239,5 +245,9 @@ export function useReports() {
     dispatch({ type: "SET_PIVOT_CONFIG", payload: config });
   }, []);
 
-  return { state, setTab, setPeriod, setCustomDates, navigateBudgetMonth, setPivotConfig };
+  const setSourceId = useCallback((id: number | null) => {
+    dispatch({ type: "SET_SOURCE_ID", payload: id });
+  }, []);
+
+  return { state, setTab, setPeriod, setCustomDates, navigateBudgetMonth, setPivotConfig, setSourceId };
 }

src/i18n/locales/en.json

@@ -17,6 +17,7 @@
     "balance": "Balance",
     "income": "Income",
     "expenses": "Expenses",
+    "net": "Net",
     "noData": "No data available. Start by importing your bank statements.",
     "expensesByCategory": "Expenses by Category",
     "recentTransactions": "Recent Transactions",
@@ -353,6 +354,12 @@
       "showAmounts": "Show amounts",
       "hideAmounts": "Hide amounts"
     },
+    "filters": {
+      "title": "Categories",
+      "search": "Search...",
+      "all": "All",
+      "none": "None"
+    },
     "bva": {
       "monthly": "Monthly",
       "ytd": "Year-to-Date",

src/i18n/locales/fr.json

@@ -17,6 +17,7 @@
     "balance": "Solde",
     "income": "Revenus",
     "expenses": "Dépenses",
+    "net": "Net",
     "noData": "Aucune donnée disponible. Commencez par importer vos relevés bancaires.",
     "expensesByCategory": "Dépenses par catégorie",
     "recentTransactions": "Transactions récentes",
@@ -353,6 +354,12 @@
       "showAmounts": "Afficher les montants",
       "hideAmounts": "Masquer les montants"
     },
+    "filters": {
+      "title": "Catégories",
+      "search": "Rechercher...",
+      "all": "Toutes",
+      "none": "Aucune"
+    },
     "bva": {
       "monthly": "Mensuel",
       "ytd": "Cumul annuel",

src/pages/ReportsPage.tsx

@@ -1,15 +1,21 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useMemo, useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { Hash, Table, BarChart3 } from "lucide-react";
 import { useReports } from "../hooks/useReports";
 import { PageHelp } from "../components/shared/PageHelp";
-import type { ReportTab, CategoryBreakdownItem, DashboardPeriod } from "../shared/types";
+import type { ReportTab, CategoryBreakdownItem, DashboardPeriod, ImportSource } from "../shared/types";
+import { getAllSources } from "../services/importSourceService";
 import PeriodSelector from "../components/dashboard/PeriodSelector";
 import MonthNavigator from "../components/budget/MonthNavigator";
 import MonthlyTrendsChart from "../components/reports/MonthlyTrendsChart";
+import MonthlyTrendsTable from "../components/reports/MonthlyTrendsTable";
 import CategoryBarChart from "../components/reports/CategoryBarChart";
+import CategoryTable from "../components/reports/CategoryTable";
 import CategoryOverTimeChart from "../components/reports/CategoryOverTimeChart";
+import CategoryOverTimeTable from "../components/reports/CategoryOverTimeTable";
 import BudgetVsActualTable from "../components/reports/BudgetVsActualTable";
 import DynamicReport from "../components/reports/DynamicReport";
+import ReportFilterPanel from "../components/reports/ReportFilterPanel";
 import TransactionDetailModal from "../components/shared/TransactionDetailModal";
 
 const TABS: ReportTab[] = ["trends", "byCategory", "overTime", "budgetVsActual", "dynamic"];
@@ -43,10 +49,19 @@ function computeDateRange(
 
 export default function ReportsPage() {
   const { t } = useTranslation();
-  const { state, setTab, setPeriod, setCustomDates, navigateBudgetMonth, setPivotConfig } = useReports();
+  const { state, setTab, setPeriod, setCustomDates, navigateBudgetMonth, setPivotConfig, setSourceId } = useReports();
+  const [sources, setSources] = useState<ImportSource[]>([]);
+
+  useEffect(() => {
+    getAllSources().then(setSources);
+  }, []);
 
   const [hiddenCategories, setHiddenCategories] = useState<Set<string>>(new Set());
   const [detailModal, setDetailModal] = useState<CategoryBreakdownItem | null>(null);
+  const [showAmounts, setShowAmounts] = useState(() => localStorage.getItem("reports-show-amounts") === "true");
+  const [viewMode, setViewMode] = useState<"chart" | "table">(() =>
+    (localStorage.getItem("reports-view-mode") as "chart" | "table") || "chart"
+  );
 
   const toggleHidden = useCallback((name: string) => {
     setHiddenCategories((prev) => {
@@ -65,6 +80,22 @@ export default function ReportsPage() {
 
   const { dateFrom, dateTo } = computeDateRange(state.period, state.customDateFrom, state.customDateTo);
 
+  const filterCategories = useMemo(() => {
+    if (state.tab === "byCategory") {
+      return state.categorySpending.map((c) => ({ name: c.category_name, color: c.category_color }));
+    }
+    if (state.tab === "overTime") {
+      return state.categoryOverTime.categories.map((name) => ({
+        name,
+        color: state.categoryOverTime.colors[name] || "#9ca3af",
+      }));
+    }
+    return [];
+  }, [state.tab, state.categorySpending, state.categoryOverTime]);
+
+  const hasCategories = ["byCategory", "overTime"].includes(state.tab) && filterCategories.length > 0;
+  const showFilterPanel = hasCategories || (state.tab === "trends" && sources.length > 1);
+
   return (
     <div className={state.isLoading ? "opacity-50 pointer-events-none" : ""}>
       <div className="relative flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
@@ -89,7 +120,7 @@ export default function ReportsPage() {
         )}
       </div>
 
-      <div className="flex gap-2 mb-6 flex-wrap">
+      <div className="flex gap-2 mb-6 flex-wrap items-center">
         {TABS.map((tab) => (
           <button
             key={tab}
@@ -103,6 +134,54 @@ export default function ReportsPage() {
             {t(`reports.${tab}`)}
           </button>
         ))}
+        {["trends", "byCategory", "overTime"].includes(state.tab) && (
+          <>
+            <div className="mx-1 h-6 w-px bg-[var(--border)]" />
+            {([
+              { mode: "chart" as const, icon: <BarChart3 size={14} />, label: t("reports.pivot.viewChart") },
+              { mode: "table" as const, icon: <Table size={14} />, label: t("reports.pivot.viewTable") },
+            ]).map(({ mode, icon, label }) => (
+              <button
+                key={mode}
+                onClick={() => {
+                  setViewMode(mode);
+                  localStorage.setItem("reports-view-mode", mode);
+                }}
+                className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+                  mode === viewMode
+                    ? "bg-[var(--primary)] text-white"
+                    : "bg-[var(--card)] border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--muted)]"
+                }`}
+              >
+                {icon}
+                {label}
+              </button>
+            ))}
+            {viewMode === "chart" && (
+              <>
+                <div className="mx-1 h-6 w-px bg-[var(--border)]" />
+                <button
+                  onClick={() => {
+                    setShowAmounts((prev) => {
+                      const next = !prev;
+                      localStorage.setItem("reports-show-amounts", String(next));
+                      return next;
+                    });
+                  }}
+                  className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+                    showAmounts
+                      ? "bg-[var(--primary)] text-white"
+                      : "bg-[var(--card)] border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--muted)]"
+                  }`}
+                  title={showAmounts ? t("reports.detail.hideAmounts") : t("reports.detail.showAmounts")}
+                >
+                  <Hash size={14} />
+                  {showAmounts ? t("reports.detail.hideAmounts") : t("reports.detail.showAmounts")}
+                </button>
+              </>
+            )}
+          </>
+        )}
       </div>
 
       {state.error && (
@@ -111,24 +190,42 @@ export default function ReportsPage() {
         </div>
       )}
 
-      {state.tab === "trends" && <MonthlyTrendsChart data={state.monthlyTrends} />}
+      <div className={showFilterPanel ? "flex gap-4 items-start" : ""}>
+        <div className={showFilterPanel ? "flex-1 min-w-0" : ""}>
+          {state.tab === "trends" && (
+            viewMode === "chart" ? (
+              <MonthlyTrendsChart data={state.monthlyTrends} showAmounts={showAmounts} />
+            ) : (
+              <MonthlyTrendsTable data={state.monthlyTrends} />
+            )
+          )}
           {state.tab === "byCategory" && (
+            viewMode === "chart" ? (
               <CategoryBarChart
                 data={state.categorySpending}
                 hiddenCategories={hiddenCategories}
                 onToggleHidden={toggleHidden}
                 onShowAll={showAll}
                 onViewDetails={viewDetails}
+                showAmounts={showAmounts}
               />
+            ) : (
+              <CategoryTable data={state.categorySpending} hiddenCategories={hiddenCategories} />
+            )
           )}
           {state.tab === "overTime" && (
+            viewMode === "chart" ? (
               <CategoryOverTimeChart
                 data={state.categoryOverTime}
                 hiddenCategories={hiddenCategories}
                 onToggleHidden={toggleHidden}
                 onShowAll={showAll}
                 onViewDetails={viewDetails}
+                showAmounts={showAmounts}
               />
+            ) : (
+              <CategoryOverTimeTable data={state.categoryOverTime} hiddenCategories={hiddenCategories} />
+            )
           )}
           {state.tab === "budgetVsActual" && (
             <BudgetVsActualTable data={state.budgetVsActual} />
@@ -140,6 +237,19 @@ export default function ReportsPage() {
               onConfigChange={setPivotConfig}
             />
           )}
+        </div>
+        {showFilterPanel && (
+          <ReportFilterPanel
+            categories={filterCategories}
+            hiddenCategories={hiddenCategories}
+            onToggleHidden={toggleHidden}
+            onShowAll={showAll}
+            sources={sources}
+            selectedSourceId={state.sourceId}
+            onSourceChange={setSourceId}
+          />
+        )}
+      </div>
 
       {detailModal && (
         <TransactionDetailModal

src/services/dashboardService.ts

@@ -53,7 +53,8 @@ export async function getDashboardSummary(
 
 export async function getExpensesByCategory(
   dateFrom?: string,
-  dateTo?: string
+  dateTo?: string,
+  sourceId?: number,
 ): Promise<CategoryBreakdownItem[]> {
   const db = await getDb();
 
@@ -71,6 +72,11 @@ export async function getExpensesByCategory(
     params.push(dateTo);
     paramIndex++;
   }
+  if (sourceId != null) {
+    whereClauses.push(`t.source_id = $${paramIndex}`);
+    params.push(sourceId);
+    paramIndex++;
+  }
 
   const whereSQL = `WHERE ${whereClauses.join(" AND ")}`;
 

src/services/reportService.ts

@@ -12,7 +12,8 @@ import type {
 
 export async function getMonthlyTrends(
   dateFrom?: string,
-  dateTo?: string
+  dateTo?: string,
+  sourceId?: number,
 ): Promise<MonthlyTrendItem[]> {
   const db = await getDb();
 
@@ -30,6 +31,11 @@ export async function getMonthlyTrends(
     params.push(dateTo);
     paramIndex++;
   }
+  if (sourceId != null) {
+    whereClauses.push(`source_id = $${paramIndex}`);
+    params.push(sourceId);
+    paramIndex++;
+  }
 
   const whereSQL =
     whereClauses.length > 0 ? `WHERE ${whereClauses.join(" AND ")}` : "";
@@ -50,7 +56,8 @@ export async function getMonthlyTrends(
 export async function getCategoryOverTime(
   dateFrom?: string,
   dateTo?: string,
-  topN: number = 8
+  topN: number = 8,
+  sourceId?: number,
 ): Promise<CategoryOverTimeData> {
   const db = await getDb();
 
@@ -68,6 +75,11 @@ export async function getCategoryOverTime(
     params.push(dateTo);
     paramIndex++;
   }
+  if (sourceId != null) {
+    whereClauses.push(`t.source_id = $${paramIndex}`);
+    params.push(sourceId);
+    paramIndex++;
+  }
 
   const whereSQL = `WHERE ${whereClauses.join(" AND ")}`;