improvements are done

src/app/services/api.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable, Subject, timer } from 'rxjs';
-import { debounce, retry, catchError, tap } from 'rxjs/operators';
+import { debounce, retry, catchError, tap, map } from 'rxjs/operators';
 import { Project, Category, Subcategory, Item, ItemsListResponse } from '../models';
 import { MockDataService } from './mock-data.service';
 import { environment } from '../../environments/environment';
@@ -76,9 +76,11 @@ export class ApiService {
 
   // Subcategories
   getSubcategories(categoryId: string): Observable<Subcategory[]> {
-    if (environment.useMockData) return this.mockService.getCategory(categoryId).pipe(
-      tap(cat => cat.subcategories || [])
-    ) as any;
+    if (environment.useMockData) {
+      return this.mockService.getCategory(categoryId).pipe(
+        map(cat => cat.subcategories || [])
+      );
+    }
     return this.http.get<Subcategory[]>(`${this.API_BASE}/categories/${categoryId}/subcategories`).pipe(
       retry(2),
       catchError(this.handleError)
@@ -220,8 +222,51 @@ export class ApiService {
   }
 
   private handleError(error: any): Observable<never> {
-    console.error('API Error:', error);
-    throw error;
+    let errorMessage = 'An unexpected error occurred';
+    
+    if (error.error instanceof ErrorEvent) {
+      // Client-side or network error
+      errorMessage = `Network error: ${error.error.message}`;
+    } else if (error.status) {
+      // Backend returned an unsuccessful response code
+      switch (error.status) {
+        case 400:
+          errorMessage = error.error?.message || 'Invalid request';
+          break;
+        case 401:
+          errorMessage = 'Unauthorized. Please log in again.';
+          break;
+        case 403:
+          errorMessage = 'You do not have permission to perform this action';
+          break;
+        case 404:
+          errorMessage = 'Resource not found';
+          break;
+        case 409:
+          errorMessage = error.error?.message || 'Conflict: Resource already exists or has conflicts';
+          break;
+        case 422:
+          errorMessage = error.error?.message || 'Validation failed';
+          break;
+        case 500:
+          errorMessage = 'Server error. Please try again later.';
+          break;
+        case 503:
+          errorMessage = 'Service unavailable. Please try again later.';
+          break;
+        default:
+          errorMessage = error.error?.message || `Error: ${error.status} - ${error.statusText}`;
+      }
+    }
+    
+    console.error('API Error:', {
+      message: errorMessage,
+      status: error.status,
+      error: error.error,
+      url: error.url
+    });
+    
+    throw { message: errorMessage, status: error.status, originalError: error };
   }
 }