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/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>
   );
-}
+}