fixing and styleing

src/app/services/api.service.ts

@@ -103,9 +103,12 @@ export class ApiService {
     );
   }
 
-  createSubcategory(categoryId: string, data: Partial<Subcategory>): Observable<Subcategory> {
-    if (environment.useMockData) return this.mockService.createSubcategory(categoryId, data);
-    return this.http.post<Subcategory>(`${this.API_BASE}/categories/${categoryId}/subcategories`, data).pipe(
+  createSubcategory(parentId: string, parentType: 'category' | 'subcategory', data: Partial<Subcategory>): Observable<Subcategory> {
+    if (environment.useMockData) return this.mockService.createSubcategory(parentId, data);
+    const endpoint = parentType === 'category'
+      ? `${this.API_BASE}/categories/${parentId}/subcategories`
+      : `${this.API_BASE}/subcategories/${parentId}/subcategories`;
+    return this.http.post<Subcategory>(endpoint, data).pipe(
       catchError(this.handleError)
     );
   }

src/app/services/mock-data.service.ts

@@ -273,7 +273,8 @@ export class MockDataService {
       visible: data.visible ?? true,
       priority: data.priority || 99,
       img: data.img,
-      categoryId: parentId,
+      categoryId: parentId, // will be root category ID after backend resolves; mock keeps direct parent for simplicity
+      parentId: parentId,
       itemCount: 0
     };