Skip to content

[Schedules 6/8] Schedules list page #22

@sre-helmcode

Description

@sre-helmcode

Implementation Order: 6 of 8

Depends on: #21 (types + sidebar)
Feature: Schedules — Recurring automated tasks for AI agent teams

Summary

Build the main Schedules list page showing all configured schedules as cards with status, frequency, and controls.

Page: src/pages/SchedulesListPage.tsx

Layout

┌─────────────────────────────────────────────────────────┐
│ Schedules                                  [+ Schedule] │
│                                                         │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 🟢 Weekly Tourism Post                    [toggle] │ │
│ │ Marketing Team · Every Monday at 9:00 AM (CET)     │ │
│ │ Last run: 2 days ago ✅ · Next: Mon Feb 28, 9:00 AM│ │
│ └─────────────────────────────────────────────────────┘ │
│                                                         │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ ⚪ Daily Security Report                   [toggle] │ │
│ │ SecOps Team · Every day at 6:00 PM (UTC)           │ │
│ │ Last run: never · Next: Today, 6:00 PM             │ │
│ └─────────────────────────────────────────────────────┘ │
│                                                         │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 🔴 Monthly Report Generator                [toggle] │ │
│ │ Analytics Team · 1st of every month at 8:00 AM     │ │
│ │ Last run: 3 days ago ❌ · Next: Mar 1, 8:00 AM    │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────┘

Card Content

  • Status indicator: Green dot (idle+enabled), gray dot (disabled), red dot (error), blue pulsing dot (running)
  • Name: Schedule name, clickable → navigates to detail page
  • Team: Team name (from API enriched data)
  • Frequency: Human-readable cron description (e.g., "Every Monday at 9:00 AM")
  • Timezone: Displayed in parentheses
  • Last run: Relative time + status emoji (✅ success, ❌ failed, ⏱️ timeout)
  • Next run: Formatted date/time
  • Toggle: Enable/disable switch (calls PATCH /toggle)

Cron to Human-Readable

Implement a utility function cronToHuman(expression: string): string that converts common patterns:

  • 0 9 * * 1 → "Every Monday at 9:00 AM"
  • 0 18 * * * → "Every day at 6:00 PM"
  • 0 8 1 * * → "1st of every month at 8:00 AM"
  • 0 */2 * * * → "Every 2 hours"
  • 30 9 * * 1-5 → "Weekdays at 9:30 AM"

Empty State

"No schedules configured. Create your first schedule to automate recurring tasks."

Actions

  • Click card → navigate to /schedules/:id (detail page)
  • Toggle switch → enable/disable inline
  • "Schedule" button → navigate to /schedules/new

Acceptance Criteria

  • SchedulesListPage component with schedule cards
  • Status indicators (green/gray/red/blue)
  • Human-readable cron display
  • Toggle enable/disable inline
  • Navigate to detail and create pages
  • Loading skeleton state
  • Empty state
  • Error handling with toast
  • Follows existing dark theme conventions
  • Unit tests

Metadata

Metadata

Assignees

Labels

featureNew feature or request

Type

No type

Projects

Status

Todo

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions