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/Notifications.tsx

@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useState } from "react";
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   Bell,
   MessageSquare,
@@ -9,24 +9,26 @@ import {
   AlertCircle,
   CheckCircle,
   Settings,
-  TestTube
-} from 'lucide-react';
-import { apiClient } from '../lib/api';
-import LoadingSpinner from './LoadingSpinner';
-import type { NotificationSettings, NotificationService } from '../types/api';
+  TestTube,
+} from "lucide-react";
+import { apiClient } from "../lib/api";
+import LoadingSpinner from "./LoadingSpinner";
+import type { NotificationSettings, NotificationService } from "../types/api";
 
 export default function Notifications() {
-  const [testService, setTestService] = useState('');
-  const [testMessage, setTestMessage] = useState('Test notification from Leggen');
+  const [testService, setTestService] = useState("");
+  const [testMessage, setTestMessage] = useState(
+    "Test notification from Leggen",
+  );
   const queryClient = useQueryClient();
 
   const {
     data: settings,
     isLoading: settingsLoading,
     error: settingsError,
-    refetch: refetchSettings
+    refetch: refetchSettings,
   } = useQuery<NotificationSettings>({
-    queryKey: ['notificationSettings'],
+    queryKey: ["notificationSettings"],
     queryFn: apiClient.getNotificationSettings,
   });
 
@@ -34,9 +36,9 @@ export default function Notifications() {
     data: services,
     isLoading: servicesLoading,
     error: servicesError,
-    refetch: refetchServices
+    refetch: refetchServices,
   } = useQuery<NotificationService[]>({
-    queryKey: ['notificationServices'],
+    queryKey: ["notificationServices"],
     queryFn: apiClient.getNotificationServices,
   });
 
@@ -44,18 +46,18 @@ export default function Notifications() {
     mutationFn: apiClient.testNotification,
     onSuccess: () => {
       // Could show a success toast here
-      console.log('Test notification sent successfully');
+      console.log("Test notification sent successfully");
     },
     onError: (error) => {
-      console.error('Failed to send test notification:', error);
+      console.error("Failed to send test notification:", error);
     },
   });
 
   const deleteServiceMutation = useMutation({
     mutationFn: apiClient.deleteNotificationService,
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['notificationSettings'] });
-      queryClient.invalidateQueries({ queryKey: ['notificationServices'] });
+      queryClient.invalidateQueries({ queryKey: ["notificationSettings"] });
+      queryClient.invalidateQueries({ queryKey: ["notificationServices"] });
     },
   });
 
@@ -73,9 +75,12 @@ export default function Notifications() {
         <div className="flex items-center justify-center text-center">
           <div>
             <AlertCircle className="h-12 w-12 text-red-400 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 mb-2">Failed to load notifications</h3>
+            <h3 className="text-lg font-medium text-gray-900 mb-2">
+              Failed to load notifications
+            </h3>
             <p className="text-gray-600 mb-4">
-              Unable to connect to the Leggen API. Make sure the server is running on localhost:8000.
+              Unable to connect to the Leggen API. Please check your
+              configuration and ensure the API server is running.
             </p>
             <button
               onClick={() => {
@@ -103,7 +108,11 @@ export default function Notifications() {
   };
 
   const handleDeleteService = (serviceName: string) => {
-    if (confirm(`Are you sure you want to delete the ${serviceName} notification service?`)) {
+    if (
+      confirm(
+        `Are you sure you want to delete the ${serviceName} notification service?`,
+      )
+    ) {
       deleteServiceMutation.mutate(serviceName);
     }
   };
@@ -114,7 +123,9 @@ export default function Notifications() {
       <div className="bg-white rounded-lg shadow p-6">
         <div className="flex items-center space-x-2 mb-4">
           <TestTube className="h-5 w-5 text-blue-600" />
-          <h3 className="text-lg font-medium text-gray-900">Test Notifications</h3>
+          <h3 className="text-lg font-medium text-gray-900">
+            Test Notifications
+          </h3>
         </div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -130,7 +141,7 @@ export default function Notifications() {
               <option value="">Select a service...</option>
               {services?.map((service) => (
                 <option key={service.name} value={service.name}>
-                  {service.name} {service.enabled ? '(Enabled)' : '(Disabled)'}
+                  {service.name} {service.enabled ? "(Enabled)" : "(Disabled)"}
                 </option>
               ))}
             </select>
@@ -157,7 +168,7 @@ export default function Notifications() {
             className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
           >
             <Send className="h-4 w-4 mr-2" />
-            {testMutation.isPending ? 'Sending...' : 'Send Test Notification'}
+            {testMutation.isPending ? "Sending..." : "Send Test Notification"}
           </button>
         </div>
       </div>
@@ -167,15 +178,21 @@ export default function Notifications() {
         <div className="px-6 py-4 border-b border-gray-200">
           <div className="flex items-center space-x-2">
             <Bell className="h-5 w-5 text-blue-600" />
-            <h3 className="text-lg font-medium text-gray-900">Notification Services</h3>
+            <h3 className="text-lg font-medium text-gray-900">
+              Notification Services
+            </h3>
           </div>
-          <p className="text-sm text-gray-600 mt-1">Manage your notification services</p>
+          <p className="text-sm text-gray-600 mt-1">
+            Manage your notification services
+          </p>
         </div>
 
         {!services || services.length === 0 ? (
           <div className="p-6 text-center">
             <Bell className="h-12 w-12 text-gray-400 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 mb-2">No notification services configured</h3>
+            <h3 className="text-lg font-medium text-gray-900 mb-2">
+              No notification services configured
+            </h3>
             <p className="text-gray-600">
               Configure notification services in your backend to receive alerts.
             </p>
@@ -183,13 +200,16 @@ export default function Notifications() {
         ) : (
           <div className="divide-y divide-gray-200">
             {services.map((service) => (
-              <div key={service.name} className="p-6 hover:bg-gray-50 transition-colors">
+              <div
+                key={service.name}
+                className="p-6 hover:bg-gray-50 transition-colors"
+              >
                 <div className="flex items-center justify-between">
                   <div className="flex items-center space-x-4">
                     <div className="p-3 bg-gray-100 rounded-full">
-                      {service.name.toLowerCase().includes('discord') ? (
+                      {service.name.toLowerCase().includes("discord") ? (
                         <MessageSquare className="h-6 w-6 text-gray-600" />
-                      ) : service.name.toLowerCase().includes('telegram') ? (
+                      ) : service.name.toLowerCase().includes("telegram") ? (
                         <Send className="h-6 w-6 text-gray-600" />
                       ) : (
                         <Bell className="h-6 w-6 text-gray-600" />
@@ -200,24 +220,28 @@ export default function Notifications() {
                         {service.name}
                       </h4>
                       <div className="flex items-center space-x-2 mt-1">
-                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                          service.enabled
-                            ? 'bg-green-100 text-green-800'
-                            : 'bg-red-100 text-red-800'
-                        }`}>
+                        <span
+                          className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                            service.enabled
+                              ? "bg-green-100 text-green-800"
+                              : "bg-red-100 text-red-800"
+                          }`}
+                        >
                           {service.enabled ? (
                             <CheckCircle className="h-3 w-3 mr-1" />
                           ) : (
                             <AlertCircle className="h-3 w-3 mr-1" />
                           )}
-                          {service.enabled ? 'Enabled' : 'Disabled'}
+                          {service.enabled ? "Enabled" : "Disabled"}
                         </span>
-                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
-                          service.configured
-                            ? 'bg-blue-100 text-blue-800'
-                            : 'bg-yellow-100 text-yellow-800'
-                        }`}>
-                          {service.configured ? 'Configured' : 'Not Configured'}
+                        <span
+                          className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                            service.configured
+                              ? "bg-blue-100 text-blue-800"
+                              : "bg-yellow-100 text-yellow-800"
+                          }`}
+                        >
+                          {service.configured ? "Configured" : "Not Configured"}
                         </span>
                       </div>
                     </div>
@@ -244,13 +268,17 @@ export default function Notifications() {
       <div className="bg-white rounded-lg shadow p-6">
         <div className="flex items-center space-x-2 mb-4">
           <Settings className="h-5 w-5 text-blue-600" />
-          <h3 className="text-lg font-medium text-gray-900">Notification Settings</h3>
+          <h3 className="text-lg font-medium text-gray-900">
+            Notification Settings
+          </h3>
         </div>
 
         {settings && (
           <div className="space-y-4">
             <div>
-              <h4 className="text-sm font-medium text-gray-700 mb-2">Filters</h4>
+              <h4 className="text-sm font-medium text-gray-700 mb-2">
+                Filters
+              </h4>
               <div className="bg-gray-50 rounded-md p-4">
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div>
@@ -259,9 +287,8 @@ export default function Notifications() {
                     </label>
                     <p className="text-sm text-gray-900">
                       {settings.filters.case_insensitive.length > 0
-                        ? settings.filters.case_insensitive.join(', ')
-                        : 'None'
-                      }
+                        ? settings.filters.case_insensitive.join(", ")
+                        : "None"}
                     </p>
                   </div>
                   <div>
@@ -269,10 +296,10 @@ export default function Notifications() {
                       Case Sensitive Filters
                     </label>
                     <p className="text-sm text-gray-900">
-                      {settings.filters.case_sensitive && settings.filters.case_sensitive.length > 0
-                        ? settings.filters.case_sensitive.join(', ')
-                        : 'None'
-                      }
+                      {settings.filters.case_sensitive &&
+                      settings.filters.case_sensitive.length > 0
+                        ? settings.filters.case_sensitive.join(", ")
+                        : "None"}
                     </p>
                   </div>
                 </div>
@@ -280,7 +307,10 @@ export default function Notifications() {
             </div>
 
             <div className="text-sm text-gray-600">
-              <p>Configure notification settings through your backend API to customize filters and service configurations.</p>
+              <p>
+                Configure notification settings through your backend API to
+                customize filters and service configurations.
+              </p>
             </div>
           </div>
         )}