# API & Utilities Organization

This directory contains the API client and utility functions used throughout the application.

## Directory Structure

```
lib/
├─ api.ts                # Main API entry point
├─ api-client.ts         # Client-side API functions
├─ server-api.ts         # Server-side API functions
├─ services/             # Service modules
│  ├─ index.ts           # Service re-exports
│  ├─ product-service.ts # Product API
│  ├─ shipping-service.ts # Shipping API
│  └─ stats-service.ts   # Statistics API
├─ utils/                # Utility functions
│  └─ index.ts           # Utility re-exports
├─ types.ts              # Common TypeScript types
├─ utils.ts              # General utilities
├─ auth-utils.ts         # Authentication utilities
└─ styles.ts             # Styling utilities
```

## API Structure

- `api.ts` - The main API entry point that re-exports all API functionality
- `api-client.ts` - Client-side API functions and types
- `server-api.ts` - Server-side API functions (for server components in the app/ directory)

## How to Use

### In Client Components

```typescript
// Import what you need from the main API module
import { clientFetch, getCustomers, getProducts } from '@/lib/api';

// Example usage
const customers = await getCustomers(1, 25);
const products = await getProducts(1, 10);
```

### In Server Components (app/ directory only)

```typescript
// Server functions only work in Server Components in the app/ directory
import { getCustomersServer } from '@/lib/api';

// In a Server Component
export default async function Page() {
  const customers = await getCustomersServer(1, 25);
  // ...
}
```

## Server Components Compatibility

The server-side API functions (`fetchServer`, `getCustomersServer`, etc.) can **only** be used in Server Components within the app/ directory. They will throw an error if used in:

- Client Components
- The pages/ directory
- Any code that runs in the browser

This is because they rely on Next.js server-only features like the `cookies()` function from `next/headers`.

## Utilities

For utilities, you can either import specific functions or use the utils index:

```typescript
// Import specific utilities
import { cn } from '@/lib/utils';
import { getAuthToken } from '@/lib/auth-utils';

// Or import from the utils index
import { cn, getAuthToken } from '@/lib/utils';
```

## Backward Compatibility

For backward compatibility, many functions are also re-exported from their original locations.