Add foundational API client, UI components, and state management setup

- Created `generate-api-client.sh` for OpenAPI-based TypeScript client generation.
- Added `src/lib/api` with Axios-based API client, error handling utilities, and placeholder for generated types.
- Implemented Zustand-based `authStore` for user authentication and token management.
- Integrated reusable UI components (e.g., `Dialog`, `Select`, `Textarea`, `Sheet`, `Separator`, `Checkbox`) using Radix UI and utility functions.
- Established groundwork for client-server integration, state management, and modular UI development.

frontend/src/lib/api/client.ts

@@ -0,0 +1,154 @@
+import axios, { AxiosError, AxiosRequestConfig, InternalAxiosRequestConfig } from 'axios';
+import { useAuthStore } from '@/stores/authStore';
+import { parseAPIError, type APIErrorResponse } from './errors';
+
+// Create Axios instance
+export const apiClient = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api/v1',
+  timeout: parseInt(process.env.NEXT_PUBLIC_API_TIMEOUT || '30000'),
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Request interceptor - Add authentication token
+apiClient.interceptors.request.use(
+  (config: InternalAxiosRequestConfig) => {
+    // Get access token from auth store
+    const accessToken = useAuthStore.getState().accessToken;
+
+    // Add Authorization header if token exists
+    if (accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+
+    // Log request in development
+    if (process.env.NODE_ENV === 'development' && process.env.NEXT_PUBLIC_DEBUG_API === 'true') {
+      console.log('🚀 API Request:', {
+        method: config.method?.toUpperCase(),
+        url: config.url,
+        headers: config.headers,
+        data: config.data,
+      });
+    }
+
+    return config;
+  },
+  (error: AxiosError) => {
+    console.error('Request interceptor error:', error);
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor - Handle errors and token refresh
+apiClient.interceptors.response.use(
+  (response) => {
+    // Log response in development
+    if (process.env.NODE_ENV === 'development' && process.env.NEXT_PUBLIC_DEBUG_API === 'true') {
+      console.log('✅ API Response:', {
+        status: response.status,
+        url: response.config.url,
+        data: response.data,
+      });
+    }
+
+    return response;
+  },
+  async (error: AxiosError<APIErrorResponse>) => {
+    const originalRequest = error.config as AxiosRequestConfig & { _retry?: boolean };
+
+    // Log error in development
+    if (process.env.NODE_ENV === 'development') {
+      console.error('❌ API Error:', {
+        status: error.response?.status,
+        url: error.config?.url,
+        message: error.message,
+        data: error.response?.data,
+      });
+    }
+
+    // Handle 401 Unauthorized - Token refresh logic
+    if (error.response?.status === 401 && originalRequest && !originalRequest._retry) {
+      originalRequest._retry = true;
+
+      try {
+        // Get refresh token
+        const refreshToken = useAuthStore.getState().refreshToken;
+
+        if (!refreshToken) {
+          // No refresh token - redirect to login
+          useAuthStore.getState().clearAuth();
+          if (typeof window !== 'undefined') {
+            window.location.href = '/login';
+          }
+          return Promise.reject(error);
+        }
+
+        // Attempt to refresh tokens
+        const response = await axios.post(
+          `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/auth/refresh`,
+          { refresh_token: refreshToken },
+          {
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          }
+        );
+
+        const { access_token, refresh_token } = response.data;
+
+        // Update tokens in store
+        useAuthStore.getState().setTokens(access_token, refresh_token);
+
+        // Retry original request with new token
+        if (originalRequest.headers) {
+          originalRequest.headers.Authorization = `Bearer ${access_token}`;
+        }
+
+        return apiClient.request(originalRequest);
+      } catch (refreshError) {
+        // Refresh failed - clear auth and redirect to login
+        console.error('Token refresh failed:', refreshError);
+        useAuthStore.getState().clearAuth();
+        if (typeof window !== 'undefined') {
+          window.location.href = '/login';
+        }
+        return Promise.reject(refreshError);
+      }
+    }
+
+    // Handle 403 Forbidden
+    if (error.response?.status === 403) {
+      console.warn('Access forbidden - insufficient permissions');
+      // You might want to show a toast here
+    }
+
+    // Handle 429 Too Many Requests
+    if (error.response?.status === 429) {
+      console.warn('Rate limit exceeded');
+      // You might want to show a toast with retry time
+      const retryAfter = error.response.headers['retry-after'];
+      if (retryAfter) {
+        console.log(`Retry after ${retryAfter} seconds`);
+      }
+    }
+
+    // Handle 500+ Server Errors
+    if (error.response?.status && error.response.status >= 500) {
+      console.error('Server error occurred');
+      // You might want to show a generic error toast
+    }
+
+    // Handle Network Errors
+    if (!error.response) {
+      console.error('Network error - check your connection');
+      // You might want to show a network error toast
+    }
+
+    // Parse and reject with structured error
+    const parsedErrors = parseAPIError(error);
+    return Promise.reject(parsedErrors);
+  }
+);
+
+export default apiClient;

frontend/src/lib/api/errors.ts

@@ -0,0 +1,174 @@
+import type { AxiosError } from 'axios';
+
+// Backend error format
+export interface APIError {
+  code: string;
+  message: string;
+  field?: string;
+}
+
+export interface APIErrorResponse {
+  success: false;
+  errors: APIError[];
+}
+
+// Error code to user-friendly message mapping
+export const ERROR_MESSAGES: Record<string, string> = {
+  // Authentication errors (AUTH_xxx)
+  'AUTH_001': 'Invalid email or password',
+  'AUTH_002': 'Account is inactive',
+  'AUTH_003': 'Invalid or expired token',
+  'AUTH_004': 'Session expired. Please login again',
+
+  // User errors (USER_xxx)
+  'USER_001': 'User not found',
+  'USER_002': 'This email is already registered',
+  'USER_003': 'Invalid user data',
+  'USER_004': 'Cannot delete your own account',
+
+  // Validation errors (VAL_xxx)
+  'VAL_001': 'Invalid input. Please check your data',
+  'VAL_002': 'Email format is invalid',
+  'VAL_003': 'Password does not meet requirements',
+  'VAL_004': 'Required field is missing',
+
+  // Organization errors (ORG_xxx)
+  'ORG_001': 'Organization name already exists',
+  'ORG_002': 'Organization not found',
+  'ORG_003': 'Cannot delete organization with members',
+
+  // Permission errors (PERM_xxx)
+  'PERM_001': 'Insufficient permissions',
+  'PERM_002': 'Admin access required',
+  'PERM_003': 'Cannot perform this action',
+
+  // Rate limiting (RATE_xxx)
+  'RATE_001': 'Too many requests. Please try again later',
+
+  // Session errors (SESSION_xxx)
+  'SESSION_001': 'Session not found',
+  'SESSION_002': 'Cannot revoke current session',
+  'SESSION_003': 'Session expired',
+
+  // Generic errors
+  'NETWORK_ERROR': 'Network error. Please check your connection',
+  'SERVER_ERROR': 'A server error occurred. Please try again later',
+  'UNKNOWN': 'An unexpected error occurred',
+  'FORBIDDEN': "You don't have permission to perform this action",
+  'NOT_FOUND': 'The requested resource was not found',
+  'RATE_LIMIT': 'Too many requests. Please slow down',
+};
+
+/**
+ * Parse API error response
+ * @param error AxiosError from API request
+ * @returns Array of structured APIError objects
+ */
+export function parseAPIError(error: AxiosError<APIErrorResponse>): APIError[] {
+  // Backend structured errors
+  if (error.response?.data?.errors && Array.isArray(error.response.data.errors)) {
+    return error.response.data.errors;
+  }
+
+  // Network errors (no response)
+  if (!error.response) {
+    return [
+      {
+        code: 'NETWORK_ERROR',
+        message: ERROR_MESSAGES['NETWORK_ERROR'] || 'Network error. Please check your connection',
+      },
+    ];
+  }
+
+  // HTTP status-based errors
+  const status = error.response.status;
+
+  if (status === 401) {
+    return [
+      {
+        code: 'AUTH_003',
+        message: ERROR_MESSAGES['AUTH_003'] || 'Invalid or expired token',
+      },
+    ];
+  }
+
+  if (status === 403) {
+    return [
+      {
+        code: 'FORBIDDEN',
+        message: ERROR_MESSAGES['FORBIDDEN'] || "You don't have permission to perform this action",
+      },
+    ];
+  }
+
+  if (status === 404) {
+    return [
+      {
+        code: 'NOT_FOUND',
+        message: ERROR_MESSAGES['NOT_FOUND'] || 'The requested resource was not found',
+      },
+    ];
+  }
+
+  if (status === 429) {
+    return [
+      {
+        code: 'RATE_LIMIT',
+        message: ERROR_MESSAGES['RATE_LIMIT'] || 'Too many requests. Please slow down',
+      },
+    ];
+  }
+
+  if (status >= 500) {
+    return [
+      {
+        code: 'SERVER_ERROR',
+        message: ERROR_MESSAGES['SERVER_ERROR'] || 'A server error occurred. Please try again later',
+      },
+    ];
+  }
+
+  // Fallback error
+  return [
+    {
+      code: 'UNKNOWN',
+      message: error.message || ERROR_MESSAGES['UNKNOWN'] || 'An unexpected error occurred',
+    },
+  ];
+}
+
+/**
+ * Get user-friendly error message from error code
+ * @param code Error code from backend
+ * @returns User-friendly error message
+ */
+export function getErrorMessage(code: string): string {
+  return ERROR_MESSAGES[code] || ERROR_MESSAGES['UNKNOWN'];
+}
+
+/**
+ * Extract field-specific errors for forms
+ * @param errors Array of APIError objects
+ * @returns Map of field names to error messages
+ */
+export function getFieldErrors(errors: APIError[]): Record<string, string> {
+  const fieldErrors: Record<string, string> = {};
+
+  errors.forEach((error) => {
+    if (error.field) {
+      fieldErrors[error.field] = error.message || getErrorMessage(error.code);
+    }
+  });
+
+  return fieldErrors;
+}
+
+/**
+ * Get first non-field error message (general error)
+ * @param errors Array of APIError objects
+ * @returns First general error message or undefined
+ */
+export function getGeneralError(errors: APIError[]): string | undefined {
+  const generalError = errors.find((error) => !error.field);
+  return generalError ? generalError.message || getErrorMessage(generalError.code) : undefined;
+}

frontend/src/lib/api/generated/index.ts

@@ -0,0 +1,8 @@
+// This file will be auto-generated by running: npm run generate:api
+// Make sure the backend is running before generating the API client
+//
+// To generate: npm run generate:api
+//
+// This placeholder prevents import errors before generation
+
+export {}

frontend/src/lib/api/hooks/index.ts

@@ -0,0 +1,5 @@
+// React Query hooks for API calls
+// Examples: useUsers, useAuth, useOrganizations, etc.
+// See docs/API_INTEGRATION.md for patterns and examples
+
+export {};

frontend/src/lib/auth/index.ts

@@ -0,0 +1,4 @@
+// Authentication utilities
+// Examples: Token management, auth helpers, session utilities, etc.
+
+export {};

frontend/src/lib/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

frontend/src/lib/utils/index.ts

@@ -0,0 +1,4 @@
+// General utility functions
+// Re-export cn utility and other helpers
+
+export { cn } from './cn';