Fix API endpoint configuration with environment-aware URLs

- Add environment-based API URL configuration (dev: localhost:8000, prod: api.pennyzo.com)
- Update PennyzoApiService to use centralized config with timeout settings
- Fix API status checker scripts to load .env variables using dotenv
- Add environment management scripts (set-env.ps1) with npm shortcuts
- Create comprehensive configuration testing and validation tools
- Add TypeScript definitions for Vite environment variables
- Update all documentation with new environment configuration instructions
- Install dotenv package for Node.js environment variable loading
- All APIs now correctly use environment-appropriate URLs automatically

src/config.ts

@@ -1,3 +1,24 @@
-export const API_BASE_URL =
-  (import.meta as any)?.env?.VITE_API_BASE_URL ||
-  'https://api.pennyzo.com/api/v1/general';
+// Environment detection
+const isDevelopment = import.meta.env.DEV;
+const isProduction = import.meta.env.PROD;
+
+// API Base URL configuration
+export const API_BASE_URL = 
+  import.meta.env.VITE_API_BASE_URL ||
+  (isDevelopment ? 'http://localhost:8000' : 'https://api.pennyzo.com/api/v1/general');
+
+// API Configuration
+export const API_CONFIG = {
+  BASE_URL: API_BASE_URL,
+  TIMEOUT: 30000, // 30 seconds
+  RETRY_ATTEMPTS: 3,
+  DEVELOPMENT_PORT: 8000,
+  PRODUCTION_URL: 'https://api.pennyzo.com/api/v1/general'
+};
+
+// Environment flags
+export const ENV = {
+  isDevelopment,
+  isProduction,
+  mode: import.meta.env.MODE || 'development'
+};

src/services/PennyzoApiService.ts

@@ -1,4 +1,5 @@
 import axios, { AxiosInstance, AxiosError, AxiosRequestConfig } from 'axios';
+import { API_CONFIG } from '../config';
 import type {
   HealthResponse,
   RegisterRequest,
@@ -28,12 +29,13 @@ export class PennyzoApiService {
   private apiClient: AxiosInstance;
   private accessToken: string | null = null;
   private readonly TOKEN_STORAGE_KEY = 'pennyzo_access_token';
-  private readonly BASE_URL = 'https://api.pennyzo.com/api/v1/general';
+  private readonly BASE_URL = API_CONFIG.BASE_URL;
 
   constructor() {
     // Create Axios instance with base configuration
     this.apiClient = axios.create({
       baseURL: this.BASE_URL,
+      timeout: API_CONFIG.TIMEOUT,
       headers: {
         'Content-Type': 'application/json',
         'Accept': 'application/json',

src/services/README.md

@@ -8,12 +8,22 @@ A comprehensive TypeScript class for handling all API interactions with the Penn
 - Automatic token handling for authenticated requests using Axios interceptors
 - Comprehensive error handling
 - TypeScript interfaces for request bodies and response payloads
+- Environment-aware API URL configuration
 - Singleton pattern for easy usage throughout the application
 
 ## Installation
 
 The service is already part of the Pennyzo Web project. It requires Axios, which is installed as a project dependency.
 
+## Configuration
+
+The service automatically detects the environment and uses the appropriate API URL:
+
+- **Development**: `http://localhost:8000` (when `import.meta.env.DEV` is true)
+- **Production**: `https://api.pennyzo.com/api/v1/general` (when `import.meta.env.PROD` is true)
+
+You can override the default by setting the `VITE_API_BASE_URL` environment variable in your `.env` file.
+
 ## API Methods
 
 ### System & Registration (Public)

src/vite-env.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL: string
+  readonly MODE: string
+  readonly DEV: boolean
+  readonly PROD: boolean
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}