Scheduler Frontend

Prompt file imported from gbaghdasaryan1/notiflow-server (.github/prompts/scheduler-frontend.prompt.md). Copyright stays with the author.

You are working against a NestJS backend that exposes authenticated scheduler endpoints.

Backend scheduler APIs (JWT-protected):

• POST /scheduler/schedule
  • Body (ScheduleNotificationDto):
    • templateId: string
    • customerId: string
    • delay?: number // milliseconds until send
    • scheduledAt?: string | Date // absolute time; backend converts to delay
    • data?: Record<string, any> // template variables
• POST /recurring
  • Body (CreateRecurringDto):
    • templateId: string
    • customerId: string
    • type: 'daily' | 'weekly' | 'monthly' | 'interval'
    • interval?: number // ms (for interval type)
    • dayOfWeek?: number // 0-6
    • dayOfMonth?: number

Task: Create the "scheduler" part of the frontend (UI, API layer, and TypeScript types) for this backend.

Follow these steps:

1. Types and API client

   • Define TypeScript interfaces mirroring the backend DTOs for requests and typical responses.
   • Implement a small typed API client for:
     • scheduleNotification(body: ScheduleNotificationRequest): Promise<...> → POST /scheduler/schedule
     • createRecurring(body: CreateRecurringRequest): Promise<...> → POST /recurring
   • Assume JWT auth is already handled; accept a generic fetch/HTTP wrapper or use the caller's convention (based on the user description) and include proper error handling.

2. Scheduler UI components

   • Implement a main Scheduler component suitable for the described stack (e.g. React component if React is mentioned).
   • Include UX for:
     • Selecting a template (by id) and customer (by id) via props or callbacks.
     • Choosing between one-off and recurring scheduling.
     • For one-off: either a delay in minutes/hours or a specific date/time (convert to ISO string before sending).
     • For recurring: select type and the applicable fields (interval, dayOfWeek, dayOfMonth) with simple, clear controls.
   • Wire the form submission to the typed API client functions.
   • Show basic loading, success, and error states.

3. Integration guidance

   • At the end, briefly explain:
     • Where to place these files in a typical project structure for the specified stack (e.g. features/scheduler/ with api.ts, types.ts, SchedulerForm.tsx).
     • Any assumptions you made about routing, auth, and date handling.

Constraints:

• Keep code idiomatic for the described frontend stack (React, Next.js, etc.).
• Prefer clear, beginner-friendly code and naming over clever abstractions.
• Do not change the backend contract; only adapt to it from the frontend.