feat: make API URL configurable and improve code quality

- Add configurable API URL support via environment variables
- Update nginx configuration with environment variable substitution
- Create nginx template for dynamic proxy configuration
- Update Docker configuration for environment variable handling
- Fix hardcoded localhost:8000 references in error messages
- Add proper TypeScript types for health check API
- Format all code with Prettier for consistency
- Update documentation with configuration instructions
- Improve error messages to be environment-agnostic
- Fix duplicate imports and type safety issues

BREAKING: API URL is now configurable via VITE_API_URL (dev) and API_BACKEND_URL (prod)

frontend/src/components/Dashboard.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import {
   CreditCard,
   TrendingUp,
@@ -11,60 +11,63 @@ import {
   BarChart3,
   Wifi,
   WifiOff,
-  Bell
-} from 'lucide-react';
-import { apiClient } from '../lib/api';
-import AccountsOverview from './AccountsOverview';
-import TransactionsList from './TransactionsList';
-import Notifications from './Notifications';
-import ErrorBoundary from './ErrorBoundary';
-import { cn } from '../lib/utils';
-import type { Account } from '../types/api';
+  Bell,
+} from "lucide-react";
+import { apiClient } from "../lib/api";
+import AccountsOverview from "./AccountsOverview";
+import TransactionsList from "./TransactionsList";
+import Notifications from "./Notifications";
+import ErrorBoundary from "./ErrorBoundary";
+import { cn } from "../lib/utils";
+import type { Account } from "../types/api";
 
-type TabType = 'overview' | 'transactions' | 'analytics' | 'notifications';
+type TabType = "overview" | "transactions" | "analytics" | "notifications";
 
 export default function Dashboard() {
-  const [activeTab, setActiveTab] = useState<TabType>('overview');
+  const [activeTab, setActiveTab] = useState<TabType>("overview");
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   const { data: accounts } = useQuery<Account[]>({
-    queryKey: ['accounts'],
+    queryKey: ["accounts"],
     queryFn: apiClient.getAccounts,
   });
 
-  const { data: healthStatus, isLoading: healthLoading, isError: healthError } = useQuery({
-    queryKey: ['health'],
+  const {
+    data: healthStatus,
+    isLoading: healthLoading,
+    isError: healthError,
+  } = useQuery({
+    queryKey: ["health"],
     queryFn: async () => {
-      const response = await fetch(`${import.meta.env.VITE_API_URL || 'http://localhost:8000'}/api/v1/health`);
-      if (!response.ok) {
-        throw new Error(`Health check failed: ${response.status}`);
-      }
-      return response.json();
+      return await apiClient.getHealth();
     },
     refetchInterval: 30000, // Check every 30 seconds
     retry: 3,
   });
 
   const navigation = [
-    { name: 'Overview', icon: Home, id: 'overview' as TabType },
-    { name: 'Transactions', icon: List, id: 'transactions' as TabType },
-    { name: 'Analytics', icon: BarChart3, id: 'analytics' as TabType },
-    { name: 'Notifications', icon: Bell, id: 'notifications' as TabType },
+    { name: "Overview", icon: Home, id: "overview" as TabType },
+    { name: "Transactions", icon: List, id: "transactions" as TabType },
+    { name: "Analytics", icon: BarChart3, id: "analytics" as TabType },
+    { name: "Notifications", icon: Bell, id: "notifications" as TabType },
   ];
 
-  const totalBalance = accounts?.reduce((sum, account) => {
-    // Get the first available balance from the balances array
-    const primaryBalance = account.balances?.[0]?.amount || 0;
-    return sum + primaryBalance;
-  }, 0) || 0;
+  const totalBalance =
+    accounts?.reduce((sum, account) => {
+      // Get the first available balance from the balances array
+      const primaryBalance = account.balances?.[0]?.amount || 0;
+      return sum + primaryBalance;
+    }, 0) || 0;
 
   return (
     <div className="flex h-screen bg-gray-100">
       {/* Sidebar */}
-      <div className={cn(
-        "fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0",
-        sidebarOpen ? "translate-x-0" : "-translate-x-full"
-      )}>
+      <div
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out lg:translate-x-0 lg:static lg:inset-0",
+          sidebarOpen ? "translate-x-0" : "-translate-x-full",
+        )}
+      >
         <div className="flex items-center justify-between h-16 px-6 border-b border-gray-200">
           <div className="flex items-center space-x-2">
             <CreditCard className="h-8 w-8 text-blue-600" />
@@ -91,7 +94,7 @@ export default function Dashboard() {
                   "flex items-center w-full px-3 py-2 text-sm font-medium rounded-md transition-colors",
                   activeTab === item.id
                     ? "bg-blue-100 text-blue-700"
-                    : "text-gray-700 hover:text-gray-900 hover:bg-gray-100"
+                    : "text-gray-700 hover:text-gray-900 hover:bg-gray-100",
                 )}
               >
                 <item.icon className="mr-3 h-5 w-5" />
@@ -105,13 +108,15 @@ export default function Dashboard() {
         <div className="px-6 py-4 border-t border-gray-200 mt-auto">
           <div className="bg-gray-50 rounded-lg p-4">
             <div className="flex items-center justify-between">
-              <span className="text-sm font-medium text-gray-600">Total Balance</span>
+              <span className="text-sm font-medium text-gray-600">
+                Total Balance
+              </span>
               <TrendingUp className="h-4 w-4 text-green-500" />
             </div>
             <p className="text-2xl font-bold text-gray-900 mt-1">
-              {new Intl.NumberFormat('en-US', {
-                style: 'currency',
-                currency: 'EUR',
+              {new Intl.NumberFormat("en-US", {
+                style: "currency",
+                currency: "EUR",
               }).format(totalBalance)}
             </p>
             <p className="text-sm text-gray-500 mt-1">
@@ -142,7 +147,7 @@ export default function Dashboard() {
                 <Menu className="h-6 w-6" />
               </button>
               <h2 className="text-lg font-semibold text-gray-900 lg:ml-0 ml-4">
-                {navigation.find(item => item.id === activeTab)?.name}
+                {navigation.find((item) => item.id === activeTab)?.name}
               </h2>
             </div>
             <div className="flex items-center space-x-2">
@@ -152,7 +157,7 @@ export default function Dashboard() {
                     <Activity className="h-4 w-4 text-yellow-500 animate-pulse" />
                     <span className="text-sm text-gray-600">Checking...</span>
                   </>
-                ) : healthError || !healthStatus?.success ? (
+                ) : healthError || healthStatus?.status !== "healthy" ? (
                   <>
                     <WifiOff className="h-4 w-4 text-red-500" />
                     <span className="text-sm text-red-500">Disconnected</span>
@@ -171,15 +176,19 @@ export default function Dashboard() {
         {/* Main content area */}
         <main className="flex-1 overflow-y-auto p-6">
           <ErrorBoundary>
-            {activeTab === 'overview' && <AccountsOverview />}
-            {activeTab === 'transactions' && <TransactionsList />}
-            {activeTab === 'analytics' && (
+            {activeTab === "overview" && <AccountsOverview />}
+            {activeTab === "transactions" && <TransactionsList />}
+            {activeTab === "analytics" && (
               <div className="bg-white rounded-lg shadow p-6">
-                <h3 className="text-lg font-medium text-gray-900 mb-4">Analytics</h3>
-                <p className="text-gray-600">Analytics dashboard coming soon...</p>
+                <h3 className="text-lg font-medium text-gray-900 mb-4">
+                  Analytics
+                </h3>
+                <p className="text-gray-600">
+                  Analytics dashboard coming soon...
+                </p>
               </div>
             )}
-            {activeTab === 'notifications' && <Notifications />}
+            {activeTab === "notifications" && <Notifications />}
           </ErrorBoundary>
         </main>
       </div>