working 3 tier approach

src/app/services/program.service.ts

@@ -0,0 +1,37 @@
+import { Injectable, inject } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+import { environment } from '../../environments/environment';
+import { Program } from '../interfaces/program';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ProgramService {
+  private http = inject(HttpClient);
+  private baseUrl = `${environment.apiBaseUrl}/api/programs`;
+
+  /** Fetch all programs, optionally filtered by day_of_week (1=Mon … 7=Sun). */
+  getPrograms(day?: number): Observable<Program[]> {
+    let params = new HttpParams();
+    if (day !== undefined) params = params.set('day', String(day));
+    return this.http.get<Program[]>(this.baseUrl, { params });
+  }
+
+  getProgram(id: number): Observable<Program> {
+    return this.http.get<Program>(`${this.baseUrl}/${id}`);
+  }
+
+  createProgram(payload: Omit<Program, 'id'>): Observable<Program> {
+    return this.http.post<Program>(this.baseUrl, payload);
+  }
+
+  updateProgram(id: number, payload: Partial<Program>): Observable<Program> {
+    return this.http.put<Program>(`${this.baseUrl}/${id}`, payload);
+  }
+
+  deleteProgram(id: number): Observable<void> {
+    return this.http.delete<void>(`${this.baseUrl}/${id}`);
+  }
+}