Pennyzo-Frontend/API_ENDPOINT_FIXES.md

# API Endpoint Configuration Fixes

This document summarizes the fixes applied to correctly configure API endpoints and URLs throughout the Pennyzo Web application.

## Issues Identified

Based on the provided configuration showing localhost:8000 settings and CORS origins, the following issues were identified and fixed:

1. **Hardcoded Production URLs**: All API services were using hardcoded production URLs
2. **No Environment-Based Configuration**: No support for development vs production environments
3. **Missing Environment Variables**: No .env configuration for different environments
4. **Inconsistent API Endpoints**: Different files using different base URLs

## Fixes Applied

### 1. Environment-Aware Configuration (`src/config.ts`)

**Before:**

```typescript
export const API_BASE_URL = "https://api.pennyzo.com/api/v1/general";
```

**After:**

```typescript
// 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,
  RETRY_ATTEMPTS: 3,
  DEVELOPMENT_PORT: 8000,
  PRODUCTION_URL: "https://api.pennyzo.com/api/v1/general",
};
```

### 2. Updated PennyzoApiService (`src/services/PennyzoApiService.ts`)

**Changes:**

- Now imports and uses `API_CONFIG` from config file
- Automatically detects environment and uses appropriate URL
- Added configurable timeout settings

```typescript
import { API_CONFIG } from "../config";

// In constructor:
this.apiClient = axios.create({
  baseURL: API_CONFIG.BASE_URL,
  timeout: API_CONFIG.TIMEOUT,
  // ...
});
```

### 3. Updated API Status Checker Scripts

**Both scripts now use environment-based URLs:**

```javascript
const BASE_URL =
  process.env.API_BASE_URL ||
  process.env.VITE_API_BASE_URL ||
  (process.env.NODE_ENV === "production"
    ? "https://api.pennyzo.com/api/v1/general"
    : "http://localhost:8000");
```

### 4. Environment Configuration Files

**Created `.env` (development default):**

```env
VITE_API_BASE_URL=http://localhost:8000
NODE_ENV=development
DEBUG=true
LOG_LEVEL=INFO
```

**Updated `.env.example`:**

```env
# Development (default)
VITE_API_BASE_URL=http://localhost:8000

# Production
# VITE_API_BASE_URL=https://api.pennyzo.com/api/v1/general

NODE_ENV=development
DEBUG=true
LOG_LEVEL=INFO
```

### 5. TypeScript Environment Definitions

**Created `src/vite-env.d.ts`:**

```typescript
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_BASE_URL: string;
  readonly MODE: string;
  readonly DEV: boolean;
  readonly PROD: boolean;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}
```

### 6. Environment Management Script (`scripts/set-env.ps1`)

**Features:**

- Switch between development and production environments
- Automatically configure appropriate API URLs
- Show current configuration
- Validate environment selections

**Usage:**

```powershell
npm run env:dev    # Set localhost:8000
npm run env:prod   # Set api.pennyzo.com
npm run env:show   # Show current config
```

### 7. Updated npm Scripts (`package.json`)

**Added environment management scripts:**

```json
{
  "env:dev": "powershell -ExecutionPolicy Bypass -File scripts/set-env.ps1 dev",
  "env:prod": "powershell -ExecutionPolicy Bypass -File scripts/set-env.ps1 prod",
  "env:show": "powershell -ExecutionPolicy Bypass -File scripts/set-env.ps1 -Show"
}
```

## URL Mappings

| Environment | API Base URL                             | Usage                    |
| ----------- | ---------------------------------------- | ------------------------ |
| Development | `http://localhost:8000`                  | Local development server |
| Production  | `https://api.pennyzo.com/api/v1/general` | Production API           |

## CORS Configuration Alignment

The configuration now aligns with the CORS settings shown in the attachment:

**Allowed Origins (Development):**

- `http://localhost:3000` (React default)
- `http://127.0.0.1:3000`
- `http://localhost:5173` (Vite default)
- `http://127.0.0.1:5173`

**Trusted Hosts:**

- `localhost`
- `127.0.0.1`

## Benefits of the Fixes

1. **Environment Separation**: Clear distinction between dev and prod environments
2. **Easy Configuration**: Simple npm scripts to switch environments
3. **Consistent URLs**: All services use the same configuration source
4. **Development Friendly**: Defaults to localhost for development
5. **Type Safety**: TypeScript definitions for environment variables
6. **Documentation**: Clear documentation of all endpoints and configurations

## Usage Instructions

### For Development

```bash
# Set development environment
npm run env:dev

# Start development server
npm run dev

# Test API connectivity
npm run api:check
```

### For Production

```bash
# Set production environment
npm run env:prod

# Build for production
npm run build

# Test production API
npm run api:check
```

### Checking Current Configuration

```bash
npm run env:show
```

All API services, status checkers, and the main application now use environment-aware configuration and will automatically connect to the appropriate backend server based on the current environment setting.