corrosion-admin-panel/frontend/src/views/admin/SchedulesView.vue

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useApi } from '@/composables/useApi'
import { safeDate } from '@/utils/formatters'
import Panel from '@/components/ds/data/Panel.vue'
import Button from '@/components/ds/core/Button.vue'
import Badge from '@/components/ds/core/Badge.vue'
import IconButton from '@/components/ds/core/IconButton.vue'
import Input from '@/components/ds/forms/Input.vue'
import Select from '@/components/ds/forms/Select.vue'
import EmptyState from '@/components/ds/feedback/EmptyState.vue'

interface ScheduledTask {
  id: string
  task_name: string
  task_type: 'restart' | 'announcement' | 'command' | 'plugin_reload'
  cron_expression: string
  timezone: string
  is_active: boolean
  next_run: string | null
  task_config: Record<string, unknown>
}

const api = useApi()
const tasks = ref<ScheduledTask[]>([])
const isLoading = ref(false)
const showModal = ref(false)
const editingTask = ref<ScheduledTask | null>(null)

const formData = ref({
  task_name: '',
  task_type: 'restart' as 'restart' | 'announcement' | 'command' | 'plugin_reload',
  cron_expression: '0 0 * * *',
  timezone: 'UTC',
  task_config: '{}',
})

const timezones = ['UTC', 'America/New_York', 'America/Chicago', 'America/Denver', 'America/Los_Angeles', 'Europe/London', 'Europe/Paris', 'Asia/Tokyo']

const TASK_TYPE_OPTIONS = [
  { value: 'restart', label: 'Restart' },
  { value: 'announcement', label: 'Announcement' },
  { value: 'command', label: 'Command' },
  { value: 'plugin_reload', label: 'Plugin reload' },
]

async function fetchTasks() {
  isLoading.value = true
  try {
    tasks.value = await api.get<ScheduledTask[]>('/schedules/tasks')
  } finally {
    isLoading.value = false
  }
}

function openCreateModal() {
  editingTask.value = null
  formData.value = {
    task_name: '',
    task_type: 'restart',
    cron_expression: '0 0 * * *',
    timezone: 'UTC',
    task_config: '{}',
  }
  showModal.value = true
}

function openEditModal(task: ScheduledTask) {
  editingTask.value = task
  formData.value = {
    task_name: task.task_name,
    task_type: task.task_type,
    cron_expression: task.cron_expression,
    timezone: task.timezone,
    task_config: JSON.stringify(task.task_config, null, 2),
  }
  showModal.value = true
}

async function saveTask() {
  try {
    const payload = {
      ...formData.value,
      task_config: JSON.parse(formData.value.task_config),
    }

    if (editingTask.value) {
      await api.put(`/schedules/tasks/${editingTask.value.id}`, payload)
    } else {
      await api.post('/schedules/tasks', payload)
    }

    showModal.value = false
    await fetchTasks()
  } catch (err) {
    alert(err instanceof Error ? err.message : 'Failed to save task')
  }
}

async function deleteTask(id: string) {
  if (!confirm('Delete this scheduled task?')) return
  await api.del(`/schedules/tasks/${id}`)
  await fetchTasks()
}

async function toggleActive(task: ScheduledTask) {
  await api.put(`/schedules/tasks/${task.id}`, { is_active: !task.is_active })
  await fetchTasks()
}

function taskTypeLabel(type: string): string {
  return type.replace('_', ' ')
}

onMounted(() => {
  fetchTasks()
})
</script>

<template>
  <div class="schedules">
    <!-- Page head -->
    <div class="page__head">
      <div>
        <div class="t-eyebrow">Operations</div>
        <h1 class="page__title">Scheduled tasks</h1>
      </div>
      <Button icon="plus" @click="openCreateModal">New task</Button>
    </div>

    <!-- Tasks table -->
    <Panel :flush-body="true" title="Tasks">
      <div v-if="isLoading" class="loading-row">
        <span class="cc-btn__spin" style="width:20px;height:20px;border-width:2.5px;" />
      </div>

      <EmptyState
        v-else-if="tasks.length === 0"
        icon="calendar-clock"
        title="No scheduled tasks"
        description="Create tasks to automate restarts, announcements, and commands."
      >
        <template #action>
          <Button icon="plus" size="sm" @click="openCreateModal">New task</Button>
        </template>
      </EmptyState>

      <table v-else class="cc-table">
        <thead>
          <tr>
            <th>Task name</th>
            <th>Type</th>
            <th>Schedule</th>
            <th>Timezone</th>
            <th>Next run</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="task in tasks" :key="task.id">
            <td class="td-primary">{{ task.task_name }}</td>
            <td class="td-cap">{{ taskTypeLabel(task.task_type) }}</td>
            <td class="td-mono">{{ task.cron_expression }}</td>
            <td>{{ task.timezone }}</td>
            <td class="td-mono">{{ safeDate(task.next_run, '—') }}</td>
            <td>
              <Badge :tone="task.is_active ? 'online' : 'neutral'">
                {{ task.is_active ? 'Active' : 'Paused' }}
              </Badge>
            </td>
            <td>
              <div class="row-actions">
                <IconButton
                  icon="power"
                  size="sm"
                  :label="task.is_active ? 'Pause' : 'Activate'"
                  @click="toggleActive(task)"
                />
                <IconButton
                  icon="pencil"
                  size="sm"
                  label="Edit"
                  @click="openEditModal(task)"
                />
                <IconButton
                  icon="trash-2"
                  variant="danger"
                  size="sm"
                  label="Delete"
                  @click="deleteTask(task.id)"
                />
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </Panel>
  </div>

  <!-- Create / Edit Modal -->
  <Teleport to="body">
    <div
      v-if="showModal"
      class="modal-backdrop"
      @click.self="showModal = false"
    >
      <div class="modal">
        <div class="modal__head">
          <h2 class="modal__title">{{ editingTask ? 'Edit task' : 'New task' }}</h2>
          <IconButton icon="x" label="Close" @click="showModal = false" />
        </div>

        <div class="modal__body">
          <Input
            v-model="formData.task_name"
            label="Task name"
            placeholder="Daily restart"
          />

          <Select
            v-model="formData.task_type"
            label="Task type"
            :options="TASK_TYPE_OPTIONS"
          />

          <Input
            v-model="formData.cron_expression"
            label="Cron expression"
            placeholder="0 0 * * *"
            :mono="true"
            hint="Example: 0 0 * * * = daily at midnight"
          />

          <Select
            v-model="formData.timezone"
            label="Timezone"
            :options="timezones"
          />

          <div class="cc-field">
            <span class="cc-field__label">Task config (JSON)</span>
            <textarea
              v-model="formData.task_config"
              rows="4"
              placeholder='{"message": "Server restarting..."}'
              class="cc-textarea cc-textarea--mono"
            />
          </div>
        </div>

        <div class="modal__foot">
          <Button variant="secondary" @click="showModal = false">Cancel</Button>
          <Button @click="saveTask">{{ editingTask ? 'Update' : 'Create' }}</Button>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<style scoped>
.schedules {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Page head */
.page__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.page__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-top: 4px;
}

/* Loading row */
.loading-row {
  display: flex;
  justify-content: center;
  padding: 40px;
}

/* Table */
.cc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.cc-table thead tr {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-inset);
}
.cc-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.cc-table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition-colors);
}
.cc-table tbody tr:last-child { border-bottom: 0; }
.cc-table tbody tr:hover { background: var(--surface-hover); }
.cc-table td {
  padding: 11px 16px;
  color: var(--text-secondary);
  vertical-align: middle;
}
.td-primary { color: var(--text-primary); font-weight: 500; }
.td-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.td-cap { text-transform: capitalize; }

.row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  padding: 16px;
}
.modal {
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl, 0 24px 60px rgba(0,0,0,.45));
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
}
.modal__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
}
.modal__body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-subtle);
}

/* Textarea */
.cc-textarea {
  width: 100%;
  padding: 9px 11px;
  background: var(--surface-inset);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--ring-default);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  resize: vertical;
  outline: 0;
  transition: var(--transition-colors);
  box-sizing: border-box;
}
.cc-textarea::placeholder { color: var(--text-muted); }
.cc-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
.cc-textarea--mono { font-family: var(--font-mono); font-size: var(--text-xs); }
</style>