working 3 tier approach

src/app/services/tier.service.ts

@@ -0,0 +1,35 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+import { environment } from '../../environments/environment';
+import { Tier } from '../interfaces/tier';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TierService {
+  private http = inject(HttpClient);
+  private baseUrl = `${environment.apiBaseUrl}/api/tiers`;
+
+  /** Fetch all tiers ordered by display_order. */
+  getTiers(): Observable<Tier[]> {
+    return this.http.get<Tier[]>(this.baseUrl);
+  }
+
+  getTier(id: number): Observable<Tier> {
+    return this.http.get<Tier>(`${this.baseUrl}/${id}`);
+  }
+
+  createTier(payload: Omit<Tier, 'id'>): Observable<Tier> {
+    return this.http.post<Tier>(this.baseUrl, payload);
+  }
+
+  updateTier(id: number, payload: Partial<Tier>): Observable<Tier> {
+    return this.http.put<Tier>(`${this.baseUrl}/${id}`, payload);
+  }
+
+  deleteTier(id: number): Observable<void> {
+    return this.http.delete<void>(`${this.baseUrl}/${id}`);
+  }
+}