feat(frontend): Complete shadcn/ui migration with dark mode support and analytics updates.

- Convert all analytics components to use shadcn Card and semantic colors
- Update RawTransactionModal with proper shadcn styling and theme support
- Fix all remaining hardcoded colors to use CSS variables (bg-card, text-foreground, etc.)
- Ensure consistent theming across light/dark modes for all components
- Add custom tooltips with semantic colors for chart components

🤖 Generated with [Claude Code](https://claude.ai/code)

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

frontend/src/components/analytics/BalanceChart.tsx

@@ -27,22 +27,39 @@ interface AggregatedDataPoint {
   [key: string]: string | number;
 }
 
-export default function BalanceChart({ data, accounts, className }: BalanceChartProps) {
+interface TooltipProps {
+  active?: boolean;
+  payload?: Array<{
+    name: string;
+    value: number;
+    color: string;
+  }>;
+  label?: string;
+}
+
+export default function BalanceChart({
+  data,
+  accounts,
+  className,
+}: BalanceChartProps) {
   // Create a lookup map for account info
-  const accountMap = accounts.reduce((map, account) => {
-    map[account.id] = account;
-    return map;
-  }, {} as Record<string, Account>);
+  const accountMap = accounts.reduce(
+    (map, account) => {
+      map[account.id] = account;
+      return map;
+    },
+    {} as Record<string, Account>,
+  );
 
   // Helper function to get bank name from institution_id
   const getBankName = (institutionId: string): string => {
     const bankMapping: Record<string, string> = {
-      'REVOLUT_REVOLT21': 'Revolut',
-      'NUBANK_NUPBBR25': 'Nu Pagamentos',
-      'BANCOBPI_BBPIPTPL': 'Banco BPI',
+      REVOLUT_REVOLT21: "Revolut",
+      NUBANK_NUPBBR25: "Nu Pagamentos",
+      BANCOBPI_BBPIPTPL: "Banco BPI",
       // Add more mappings as needed
     };
-    return bankMapping[institutionId] || institutionId.split('_')[0];
+    return bankMapping[institutionId] || institutionId.split("_")[0];
   };
 
   // Helper function to create display name for account
@@ -50,20 +67,24 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
     const account = accountMap[accountId];
     if (account) {
       const bankName = getBankName(account.institution_id);
-      const accountName = account.name || `Account ${accountId.split('-')[1]}`;
+      const accountName = account.name || `Account ${accountId.split("-")[1]}`;
       return `${bankName} - ${accountName}`;
     }
-    return `Account ${accountId.split('-')[1]}`;
+    return `Account ${accountId.split("-")[1]}`;
   };
   // Process balance data for the chart
   const chartData = data
     .filter((balance) => balance.balance_type === "closingBooked")
     .map((balance) => ({
-      date: new Date(balance.reference_date).toLocaleDateString('en-GB'), // DD/MM/YYYY format
+      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.split('/').reverse().join('/')).getTime() - new Date(b.date.split('/').reverse().join('/')).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,18 +107,37 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
   });
 
   const finalData = Object.values(aggregatedData).sort(
-    (a, b) => new Date(a.date.split('/').reverse().join('/')).getTime() - new Date(b.date.split('/').reverse().join('/')).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"];
 
+  const CustomTooltip = ({ active, payload, label }: TooltipProps) => {
+    if (active && payload && payload.length) {
+      return (
+        <div className="bg-card p-3 border rounded shadow-lg">
+          <p className="font-medium text-foreground">Date: {label}</p>
+          {payload.map((entry, index) => (
+            <p key={index} style={{ color: entry.color }}>
+              {getAccountDisplayName(entry.name)}: €
+              {entry.value.toLocaleString()}
+            </p>
+          ))}
+        </div>
+      );
+    }
+    return null;
+  };
+
   if (finalData.length === 0) {
     return (
       <div className={className}>
-        <h3 className="text-lg font-medium text-gray-900 mb-4">
+        <h3 className="text-lg font-medium text-foreground mb-4">
           Balance Progress
         </h3>
-        <div className="h-80 flex items-center justify-center text-gray-500">
+        <div className="h-80 flex items-center justify-center text-muted-foreground">
           No balance data available
         </div>
       </div>
@@ -106,7 +146,7 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
 
   return (
     <div className={className}>
-      <h3 className="text-lg font-medium text-gray-900 mb-4">
+      <h3 className="text-lg font-medium text-foreground mb-4">
         Balance Progress Over Time
       </h3>
       <div className="h-80">
@@ -118,9 +158,9 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
               tick={{ fontSize: 12 }}
               tickFormatter={(value) => {
                 // Convert DD/MM/YYYY back to a proper date for formatting
-                const [day, month, year] = value.split('/');
+                const [day, month, year] = value.split("/");
                 const date = new Date(year, month - 1, day);
-                return date.toLocaleDateString('en-GB', {
+                return date.toLocaleDateString("en-GB", {
                   month: "short",
                   day: "numeric",
                 });
@@ -130,13 +170,7 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
               tick={{ fontSize: 12 }}
               tickFormatter={(value) => `€${value.toLocaleString()}`}
             />
-            <Tooltip
-              formatter={(value: number, name: string) => [
-                `€${value.toLocaleString()}`,
-                getAccountDisplayName(name),
-              ]}
-              labelFormatter={(label) => `Date: ${label}`}
-            />
+            <Tooltip content={<CustomTooltip />} />
             <Legend />
             {Object.keys(accountBalances).map((accountId, index) => (
               <Area
@@ -154,4 +188,4 @@ export default function BalanceChart({ data, accounts, className }: BalanceChart
       </div>
     </div>
   );
-}
+}

frontend/src/components/analytics/MonthlyTrends.tsx

@@ -15,7 +15,6 @@ interface MonthlyTrendsProps {
   days?: number;
 }
 
-
 interface TooltipProps {
   active?: boolean;
   payload?: Array<{
@@ -26,7 +25,10 @@ interface TooltipProps {
   label?: string;
 }
 
-export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsProps) {
+export default function MonthlyTrends({
+  className,
+  days = 365,
+}: MonthlyTrendsProps) {
   // Get pre-calculated monthly stats from the new endpoint
   const { data: monthlyData, isLoading } = useQuery({
     queryKey: ["monthly-stats", days],
@@ -49,11 +51,11 @@ export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsPr
   if (isLoading) {
     return (
       <div className={className}>
-        <h3 className="text-lg font-medium text-gray-900 mb-4">
+        <h3 className="text-lg font-medium text-foreground mb-4">
           Monthly Spending Trends
         </h3>
         <div className="h-80 flex items-center justify-center">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
         </div>
       </div>
     );
@@ -62,10 +64,10 @@ export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsPr
   if (displayData.length === 0) {
     return (
       <div className={className}>
-        <h3 className="text-lg font-medium text-gray-900 mb-4">
+        <h3 className="text-lg font-medium text-foreground mb-4">
           Monthly Spending Trends
         </h3>
-        <div className="h-80 flex items-center justify-center text-gray-500">
+        <div className="h-80 flex items-center justify-center text-muted-foreground">
           No transaction data available
         </div>
       </div>
@@ -75,8 +77,8 @@ export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsPr
   const CustomTooltip = ({ active, payload, label }: TooltipProps) => {
     if (active && payload && payload.length) {
       return (
-        <div className="bg-white p-3 border rounded shadow-lg">
-          <p className="font-medium">{label}</p>
+        <div className="bg-card p-3 border rounded shadow-lg">
+          <p className="font-medium text-foreground">{label}</p>
           {payload.map((entry, index) => (
             <p key={index} style={{ color: entry.color }}>
               {entry.name}: €{Math.abs(entry.value).toLocaleString()}
@@ -98,12 +100,15 @@ export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsPr
 
   return (
     <div className={className}>
-      <h3 className="text-lg font-medium text-gray-900 mb-4">
+      <h3 className="text-lg font-medium text-foreground mb-4">
         {getTitle(days)}
       </h3>
       <div className="h-80">
         <ResponsiveContainer width="100%" height="100%">
-          <BarChart data={displayData} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+          <BarChart
+            data={displayData}
+            margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
+          >
             <CartesianGrid strokeDasharray="3 3" />
             <XAxis
               dataKey="month"
@@ -122,7 +127,7 @@ export default function MonthlyTrends({ className, days = 365 }: MonthlyTrendsPr
           </BarChart>
         </ResponsiveContainer>
       </div>
-      <div className="mt-4 flex justify-center space-x-6 text-sm">
+      <div className="mt-4 flex justify-center space-x-6 text-sm text-foreground">
         <div className="flex items-center">
           <div className="w-3 h-3 bg-green-500 rounded mr-2" />
           <span>Income</span>

frontend/src/components/analytics/StatCard.tsx

@@ -1,5 +1,6 @@
 import type { LucideIcon } from "lucide-react";
-import clsx from "clsx";
+import { Card, CardContent } from "../ui/card";
+import { cn } from "../../lib/utils";
 
 interface StatCardProps {
   title: string;
@@ -22,43 +23,44 @@ export default function StatCard({
   className,
 }: StatCardProps) {
   return (
-    <div
-      className={clsx(
-        "bg-white rounded-lg shadow p-6 border border-gray-200",
-        className
-      )}
-    >
-      <div className="flex items-center">
-        <div className="flex-shrink-0">
-          <Icon className="h-8 w-8 text-blue-600" />
-        </div>
-        <div className="ml-5 w-0 flex-1">
-          <dl>
-            <dt className="text-sm font-medium text-gray-500 truncate">
-              {title}
-            </dt>
-            <dd className="flex items-baseline">
-              <div className="text-2xl font-semibold text-gray-900">
-                {value}
-              </div>
-              {trend && (
-                <div
-                  className={clsx(
-                    "ml-2 flex items-baseline text-sm font-semibold",
-                    trend.isPositive ? "text-green-600" : "text-red-600"
-                  )}
-                >
-                  {trend.isPositive ? "+" : ""}
-                  {trend.value}%
+    <Card className={cn(className)}>
+      <CardContent className="p-6">
+        <div className="flex items-center">
+          <div className="flex-shrink-0">
+            <Icon className="h-8 w-8 text-primary" />
+          </div>
+          <div className="ml-5 w-0 flex-1">
+            <dl>
+              <dt className="text-sm font-medium text-muted-foreground truncate">
+                {title}
+              </dt>
+              <dd className="flex items-baseline">
+                <div className="text-2xl font-semibold text-foreground">
+                  {value}
                 </div>
+                {trend && (
+                  <div
+                    className={cn(
+                      "ml-2 flex items-baseline text-sm font-semibold",
+                      trend.isPositive
+                        ? "text-green-600 dark:text-green-400"
+                        : "text-red-600 dark:text-red-400",
+                    )}
+                  >
+                    {trend.isPositive ? "+" : ""}
+                    {trend.value}%
+                  </div>
+                )}
+              </dd>
+              {subtitle && (
+                <dd className="text-sm text-muted-foreground mt-1">
+                  {subtitle}
+                </dd>
               )}
-            </dd>
-            {subtitle && (
-              <dd className="text-sm text-gray-600 mt-1">{subtitle}</dd>
-            )}
-          </dl>
+            </dl>
+          </div>
         </div>
-      </div>
-    </div>
+      </CardContent>
+    </Card>
   );
-}
+}

frontend/src/components/analytics/TimePeriodFilter.tsx

@@ -1,4 +1,5 @@
 import { Calendar } from "lucide-react";
+import { Button } from "../ui/button";
 import type { TimePeriod } from "../../lib/timePeriods";
 import { TIME_PERIODS } from "../../lib/timePeriods";
 
@@ -15,25 +16,24 @@ export default function TimePeriodFilter({
 }: TimePeriodFilterProps) {
   return (
     <div className={`flex items-center gap-4 ${className}`}>
-      <div className="flex items-center gap-2 text-gray-700">
+      <div className="flex items-center gap-2 text-foreground">
         <Calendar size={20} />
         <span className="font-medium">Time Period:</span>
       </div>
       <div className="flex gap-2">
         {TIME_PERIODS.map((period) => (
-          <button
+          <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"
-            }`}
+            variant={
+              selectedPeriod.value === period.value ? "default" : "outline"
+            }
+            size="sm"
           >
             {period.label}
-          </button>
+          </Button>
         ))}
       </div>
     </div>
   );
-}
+}

frontend/src/components/analytics/TransactionDistribution.tsx

@@ -33,27 +33,27 @@ export default function TransactionDistribution({
   // Helper function to get bank name from institution_id
   const getBankName = (institutionId: string): string => {
     const bankMapping: Record<string, string> = {
-      'REVOLUT_REVOLT21': 'Revolut',
-      'NUBANK_NUPBBR25': 'Nu Pagamentos',
-      'BANCOBPI_BBPIPTPL': 'Banco BPI',
+      REVOLUT_REVOLT21: "Revolut",
+      NUBANK_NUPBBR25: "Nu Pagamentos",
+      BANCOBPI_BBPIPTPL: "Banco BPI",
       // TODO: Add more bank mappings as needed
     };
-    return bankMapping[institutionId] || institutionId.split('_')[0];
+    return bankMapping[institutionId] || institutionId.split("_")[0];
   };
 
   // Helper function to create display name for account
   const getAccountDisplayName = (account: Account): string => {
     const bankName = getBankName(account.institution_id);
-    const accountName = account.name || `Account ${account.id.split('-')[1]}`;
+    const accountName = account.name || `Account ${account.id.split("-")[1]}`;
     return `${bankName} - ${accountName}`;
   };
 
   // Create pie chart data from account balances
   const pieData: PieDataPoint[] = accounts.map((account, index) => {
     const primaryBalance = account.balances?.[0]?.amount || 0;
-    
+
     const colors = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6"];
-    
+
     return {
       name: getAccountDisplayName(account),
       value: primaryBalance,
@@ -66,10 +66,10 @@ export default function TransactionDistribution({
   if (pieData.length === 0 || totalBalance === 0) {
     return (
       <div className={className}>
-        <h3 className="text-lg font-medium text-gray-900 mb-4">
+        <h3 className="text-lg font-medium text-foreground mb-4">
           Account Distribution
         </h3>
-        <div className="h-80 flex items-center justify-center text-gray-500">
+        <div className="h-80 flex items-center justify-center text-muted-foreground">
           No account data available
         </div>
       </div>
@@ -81,12 +81,12 @@ export default function TransactionDistribution({
       const data = payload[0].payload;
       const percentage = ((data.value / totalBalance) * 100).toFixed(1);
       return (
-        <div className="bg-white p-3 border rounded shadow-lg">
-          <p className="font-medium">{data.name}</p>
-          <p className="text-blue-600">
+        <div className="bg-card p-3 border rounded shadow-lg">
+          <p className="font-medium text-foreground">{data.name}</p>
+          <p className="text-primary">
             Balance: €{data.value.toLocaleString()}
           </p>
-          <p className="text-gray-600">{percentage}% of total</p>
+          <p className="text-muted-foreground">{percentage}% of total</p>
         </div>
       );
     }
@@ -95,7 +95,7 @@ export default function TransactionDistribution({
 
   return (
     <div className={className}>
-      <h3 className="text-lg font-medium text-gray-900 mb-4">
+      <h3 className="text-lg font-medium text-foreground mb-4">
         Account Balance Distribution
       </h3>
       <div className="h-80">
@@ -125,18 +125,23 @@ export default function TransactionDistribution({
       </div>
       <div className="mt-4 grid grid-cols-1 gap-2">
         {pieData.map((item, index) => (
-          <div key={index} className="flex items-center justify-between text-sm">
+          <div
+            key={index}
+            className="flex items-center justify-between text-sm"
+          >
             <div className="flex items-center">
               <div
                 className="w-3 h-3 rounded-full mr-2"
                 style={{ backgroundColor: item.color }}
               />
-              <span className="text-gray-700">{item.name}</span>
+              <span className="text-foreground">{item.name}</span>
             </div>
-            <span className="font-medium">€{item.value.toLocaleString()}</span>
+            <span className="font-medium text-foreground">
+              €{item.value.toLocaleString()}
+            </span>
           </div>
         ))}
       </div>
     </div>
   );
-}
+}