From 6482d5b46575027ebfc54d23e7f565e8be27f652 Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Mon, 9 Jun 2025 21:01:40 +0100
Subject: [PATCH] refactor: yeet modal, start work on subpage for editing

---
 .../composables/servers/modules/scheduling.ts |  52 +-
 .../{scheduling.vue => scheduling/index.vue}  |  46 +-
 .../ui/src/components/base/TabbedContent.vue  | 161 +++++
 packages/ui/src/components/index.ts           |   4 +-
 .../servers/scheduling/ScheduleTaskModal.vue  | 549 ------------------
 packages/utils/servers/types/scheduling.ts    |   3 +-
 6 files changed, 204 insertions(+), 611 deletions(-)
 rename apps/frontend/src/pages/servers/manage/[id]/options/{scheduling.vue => scheduling/index.vue} (92%)
 create mode 100644 packages/ui/src/components/base/TabbedContent.vue
 delete mode 100644 packages/ui/src/components/servers/scheduling/ScheduleTaskModal.vue

diff --git a/apps/frontend/src/composables/servers/modules/scheduling.ts b/apps/frontend/src/composables/servers/modules/scheduling.ts
index 2957723a3..8f49aa12f 100644
--- a/apps/frontend/src/composables/servers/modules/scheduling.ts
+++ b/apps/frontend/src/composables/servers/modules/scheduling.ts
@@ -6,40 +6,40 @@ export class SchedulingModule extends ServerModule {
   tasks: ScheduledTask[] = [];
 
   async fetch(): Promise<void> {
-    this.tasks = await useServersFetch<ScheduledTask[]>(
-      `servers/${this.serverId}/options/schedules`,
-      { version: 1 },
-    );
+    // this.tasks = await useServersFetch<ScheduledTask[]>(
+    //   `servers/${this.serverId}/options/schedules`,
+    //   { version: 1 },
+    // );
   }
 
   async deleteTask(task: ScheduledTask): Promise<void> {
-    await useServersFetch(`servers/${this.serverId}/options/schedules`, {
-      method: "DELETE",
-      body: { title: task.title },
-      version: 1,
-    });
-    this.tasks = this.tasks.filter((t) => t.title !== task.title);
+    // await useServersFetch(`servers/${this.serverId}/options/schedules`, {
+    //   method: "DELETE",
+    //   body: { title: task.title },
+    //   version: 1,
+    // });
+    // this.tasks = this.tasks.filter((t) => t.title !== task.title);
   }
 
   async createTask(task: ScheduledTask): Promise<number> {
-    await useServersFetch(`servers/${this.serverId}/options/schedules`, {
-      method: "POST",
-      body: task,
-      version: 1,
-    });
-    this.tasks.push(task);
-    return this.tasks.length;
+    // await useServersFetch(`servers/${this.serverId}/options/schedules`, {
+    //   method: "POST",
+    //   body: task,
+    //   version: 1,
+    // });
+    // this.tasks.push(task);
+    // return this.tasks.length;
   }
 
   async editTask(taskTitle: string, updatedTask: Partial<ScheduledTask>): Promise<void> {
-    await useServersFetch(`servers/${this.serverId}/options/schedules`, {
-      method: "PATCH",
-      body: { title: taskTitle, ...updatedTask },
-      version: 1,
-    });
-    const index = this.tasks.findIndex((t) => t.title === taskTitle);
-    if (index !== -1) {
-      this.tasks[index] = { ...this.tasks[index], ...updatedTask };
-    }
+    // await useServersFetch(`servers/${this.serverId}/options/schedules`, {
+    //   method: "PATCH",
+    //   body: { title: taskTitle, ...updatedTask },
+    //   version: 1,
+    // });
+    // const index = this.tasks.findIndex((t) => t.title === taskTitle);
+    // if (index !== -1) {
+    //   this.tasks[index] = { ...this.tasks[index], ...updatedTask };
+    // }
   }
 }
diff --git a/apps/frontend/src/pages/servers/manage/[id]/options/scheduling.vue b/apps/frontend/src/pages/servers/manage/[id]/options/scheduling/index.vue
similarity index 92%
rename from apps/frontend/src/pages/servers/manage/[id]/options/scheduling.vue
rename to apps/frontend/src/pages/servers/manage/[id]/options/scheduling/index.vue
index fe6047622..9ffc14b97 100644
--- a/apps/frontend/src/pages/servers/manage/[id]/options/scheduling.vue
+++ b/apps/frontend/src/pages/servers/manage/[id]/options/scheduling/index.vue
@@ -6,10 +6,13 @@
           <div class="header__row">
             <h2 class="header__title text-2xl">Task Scheduling</h2>
             <div class="input-group">
-              <button class="iconified-button brand-button" @click="handleCreateTask">
+              <NuxtLink
+                :to="`/servers/manage/${route.params.id}/options/scheduling/new`"
+                class="iconified-button brand-button"
+              >
                 <PlusIcon />
                 Create Task
-              </button>
+              </NuxtLink>
             </div>
           </div>
 
@@ -129,9 +132,12 @@
                 <div>
                   <div class="flex gap-1">
                     <ButtonStyled icon-only circular>
-                      <button v-tooltip="'Edit task'" @click="handleTaskEdit(task)">
+                      <NuxtLink
+                        v-tooltip="'Edit task'"
+                        :to="`/servers/manage/${route.params.id}/options/scheduling/${encodeURIComponent(task.title)}`"
+                      >
                         <EditIcon />
-                      </button>
+                      </NuxtLink>
                     </ButtonStyled>
                     <ButtonStyled icon-only circular color="red">
                       <button
@@ -154,8 +160,6 @@
         </section>
       </div>
     </div>
-
-    <ScheduleTaskModal ref="scheduleModal" @save="handleTaskSave" />
   </div>
 </template>
 
@@ -172,7 +176,7 @@ import {
   SortAscendingIcon as AscendingIcon,
   SortDescendingIcon as DescendingIcon,
 } from "@modrinth/assets";
-import { Toggle, Checkbox, RaisedBadge, ButtonStyled, ScheduleTaskModal } from "@modrinth/ui";
+import { Toggle, Checkbox, RaisedBadge, ButtonStyled } from "@modrinth/ui";
 import cronstrue from "cronstrue";
 import type { ScheduledTask } from "@modrinth/utils";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
@@ -181,6 +185,8 @@ const props = defineProps<{
   server: ModrinthServer;
 }>();
 
+const route = useRoute();
+
 onBeforeMount(async () => {
   await props.server.scheduling.fetch();
 });
@@ -188,7 +194,6 @@ onBeforeMount(async () => {
 const selectedTasks = ref<ScheduledTask[]>([]);
 const sortBy = ref("Name");
 const descending = ref(false);
-const scheduleModal = ref();
 
 const tasks = computed(() => props.server.scheduling.tasks);
 
@@ -238,10 +243,6 @@ async function handleTaskToggle(task: ScheduledTask, enabled: boolean): Promise<
   }
 }
 
-function handleTaskEdit(task: ScheduledTask): void {
-  scheduleModal.value?.show(task);
-}
-
 async function handleTaskDelete(task: ScheduledTask): Promise<void> {
   if (confirm(`Are you sure you want to delete "${task.title}"?`)) {
     try {
@@ -254,10 +255,6 @@ async function handleTaskDelete(task: ScheduledTask): Promise<void> {
   }
 }
 
-function handleCreateTask(): void {
-  scheduleModal.value?.showNew();
-}
-
 async function handleBulkToggle(): Promise<void> {
   const enabledCount = selectedTasks.value.filter((t) => t.enabled).length;
   const shouldEnable = enabledCount < selectedTasks.value.length / 2;
@@ -288,23 +285,6 @@ async function handleBulkDelete(): Promise<void> {
   }
 }
 
-async function handleTaskSave(data: ScheduledTask): Promise<void> {
-  try {
-    if (scheduleModal.value?.mode === "edit") {
-      await props.server.scheduling.editTask(
-        scheduleModal.value.originalData?.title || data.title,
-        data,
-      );
-      console.log("Updated task:", data.title);
-    } else {
-      await props.server.scheduling.createTask(data);
-      console.log("Created task:", data.title);
-    }
-  } catch (error) {
-    console.error("Failed to save task:", error);
-  }
-}
-
 function updateSort(): void {
   // Trigger reactivity for sortedTasks
 }
diff --git a/packages/ui/src/components/base/TabbedContent.vue b/packages/ui/src/components/base/TabbedContent.vue
new file mode 100644
index 000000000..2fdc74745
--- /dev/null
+++ b/packages/ui/src/components/base/TabbedContent.vue
@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <div
+      class="card-shadow experimental-styles-within relative flex w-fit overflow-x-auto rounded-full bg-button-bg p-1 text-sm font-bold"
+    >
+      <button
+        v-for="(tab, index) in tabs"
+        :key="tab"
+        ref="tabElements"
+        class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full bg-transparent"
+        :class="{
+          'text-button-textSelected': activeTabIndex === index,
+          'text-contrast': activeTabIndex !== index,
+        }"
+        @click="setActiveTab(index)"
+      >
+        <span class="text-nowrap font-bold text-center mx-auto">{{ getTabLabel(tab) }}</span>
+      </button>
+
+      <div
+        :class="`tabs-transition pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1 bg-button-bgSelected`"
+        :style="{
+          left: sliderLeftPx,
+          top: sliderTopPx,
+          right: sliderRightPx,
+          bottom: sliderBottomPx,
+          opacity:
+            sliderLeft === 4 && sliderLeft === sliderRight ? 0 : activeTabIndex === -1 ? 0 : 1,
+        }"
+        aria-hidden="true"
+      />
+    </div>
+
+    <!-- Tab Content -->
+    <div class="tab-content mt-4">
+      <template v-for="(tab, index) in tabs" :key="tab">
+        <div v-show="activeTabIndex === index" class="tab-panel">
+          <slot :name="tab" />
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, nextTick } from 'vue'
+
+interface Props {
+  tabs: string[]
+  formatFunction?: (tab: string) => string
+  defaultTab?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  formatFunction: undefined,
+  defaultTab: undefined,
+})
+
+const activeTabIndex = ref(0)
+const tabElements = ref<HTMLElement[]>([])
+
+const sliderLeft = ref(4)
+const sliderTop = ref(4)
+const sliderRight = ref(4)
+const sliderBottom = ref(4)
+
+const sliderLeftPx = computed(() => `${sliderLeft.value}px`)
+const sliderTopPx = computed(() => `${sliderTop.value}px`)
+const sliderRightPx = computed(() => `${sliderRight.value}px`)
+const sliderBottomPx = computed(() => `${sliderBottom.value}px`)
+
+function getTabLabel(tab: string): string {
+  return props.formatFunction ? props.formatFunction(tab) : tab
+}
+
+function setActiveTab(index: number) {
+  activeTabIndex.value = index
+  updateSliderPosition()
+}
+
+function updateSliderPosition() {
+  nextTick(() => {
+    const el = tabElements.value[activeTabIndex.value]
+
+    if (!el || !el.offsetParent) return
+
+    const parent = el.offsetParent as HTMLElement
+
+    const newValues = {
+      left: el.offsetLeft,
+      top: el.offsetTop,
+      right: parent.offsetWidth - el.offsetLeft - el.offsetWidth,
+      bottom: parent.offsetHeight - el.offsetTop - el.offsetHeight,
+    }
+
+    if (sliderLeft.value === 4 && sliderRight.value === 4) {
+      // Initial position
+      sliderLeft.value = newValues.left
+      sliderRight.value = newValues.right
+      sliderTop.value = newValues.top
+      sliderBottom.value = newValues.bottom
+    } else {
+      const delay = 200
+
+      if (newValues.left < sliderLeft.value) {
+        sliderLeft.value = newValues.left
+        setTimeout(() => {
+          sliderRight.value = newValues.right
+        }, delay)
+      } else {
+        sliderRight.value = newValues.right
+        setTimeout(() => {
+          sliderLeft.value = newValues.left
+        }, delay)
+      }
+
+      if (newValues.top < sliderTop.value) {
+        sliderTop.value = newValues.top
+        setTimeout(() => {
+          sliderBottom.value = newValues.bottom
+        }, delay)
+      } else {
+        sliderBottom.value = newValues.bottom
+        setTimeout(() => {
+          sliderTop.value = newValues.top
+        }, delay)
+      }
+    }
+  })
+}
+
+onMounted(() => {
+  if (props.defaultTab) {
+    const defaultIndex = props.tabs.indexOf(props.defaultTab)
+    if (defaultIndex !== -1) {
+      activeTabIndex.value = defaultIndex
+    }
+  }
+  updateSliderPosition()
+})
+
+watch(activeTabIndex, () => {
+  updateSliderPosition()
+})
+</script>
+
+<style scoped>
+.tabs-transition {
+  transition:
+    all 150ms cubic-bezier(0.4, 0, 0.2, 1),
+    opacity 250ms cubic-bezier(0.5, 0, 0.2, 1) 50ms;
+}
+
+.card-shadow {
+  box-shadow: var(--shadow-card);
+}
+
+.tab-content {
+  min-height: 200px;
+}
+</style>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 4929fcb62..0dfd0a7c8 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -40,6 +40,7 @@ export { default as SimpleBadge } from './base/SimpleBadge.vue'
 export { default as Slider } from './base/Slider.vue'
 export { default as SmartClickable } from './base/SmartClickable.vue'
 export { default as StatItem } from './base/StatItem.vue'
+export { default as TabbedContent } from "./base/TabbedContent.vue"
 export { default as TagItem } from './base/TagItem.vue'
 export { default as TeleportDropdownMenu } from './base/TeleportDropdownMenu.vue'
 export { default as Timeline } from './base/Timeline.vue'
@@ -111,5 +112,4 @@ export { default as ThemeSelector } from './settings/ThemeSelector.vue'
 
 // Servers
 export { default as BackupWarning } from './servers/backups/BackupWarning.vue'
-export { default as ServersSpecs } from './billing/ServersSpecs.vue'
-export { default as ScheduleTaskModal } from "./servers/scheduling/ScheduleTaskModal.vue"
\ No newline at end of file
+export { default as ServersSpecs } from './billing/ServersSpecs.vue'
\ No newline at end of file
diff --git a/packages/ui/src/components/servers/scheduling/ScheduleTaskModal.vue b/packages/ui/src/components/servers/scheduling/ScheduleTaskModal.vue
deleted file mode 100644
index ed0c262b2..000000000
--- a/packages/ui/src/components/servers/scheduling/ScheduleTaskModal.vue
+++ /dev/null
@@ -1,549 +0,0 @@
-<template>
-  <NewModal
-    ref="modal"
-    :header="mode === 'edit' ? 'Edit Schedule' : 'Create Schedule'"
-    class="schedule-modal"
-  >
-    <div class="flex flex-col gap-3">
-      <div class="flex flex-col gap-2">
-        <label for="title">
-          <span class="text-lg font-semibold text-contrast">
-            Title
-            <span class="text-brand-red">*</span>
-          </span>
-        </label>
-        <input
-          id="title"
-          v-model="data.title"
-          type="text"
-          placeholder="Enter schedule title"
-          autocomplete="off"
-        />
-      </div>
-
-      <div class="flex flex-col gap-2">
-        <label for="action_kind">
-          <span class="text-lg font-semibold text-contrast">
-            Action Type
-            <span class="text-brand-red">*</span>
-          </span>
-        </label>
-        <DropdownSelect
-          id="action_kind"
-          v-model="data.action_kind"
-          :options="actionTypes"
-          name="Action Type"
-        />
-        <div class="text-sm text-secondary action-type-description">
-          {{ getActionTypeDescription(data.action_kind) }}
-        </div>
-      </div>
-
-      <div v-if="data.action_kind === 'game-command'" class="flex flex-col gap-2">
-        <label for="command">
-          <span class="text-lg font-semibold text-contrast">
-            Command
-            <span class="text-brand-red">*</span>
-          </span>
-        </label>
-        <input
-          id="command"
-          v-model="data.options.command"
-          type="text"
-          placeholder="/give @a diamond 64"
-          autocomplete="off"
-        />
-      </div>
-
-      <div class="flex flex-col gap-4">
-        <label class="text-lg font-semibold text-contrast">Schedule</label>
-
-        <RadioButtons v-model="scheduleType" :items="['daily', 'custom']" force-selection>
-          <template #default="{ item }">
-            <div class="flex items-center gap-2">
-              <ClockIcon v-if="item === 'daily'" class="h-4 w-4" />
-              <CodeIcon v-if="item === 'custom'" class="h-4 w-4" />
-              {{ item === 'daily' ? 'Every X day(s) at specific time' : 'Custom cron expression' }}
-            </div>
-          </template>
-        </RadioButtons>
-
-        <!-- Fixed width container for schedule cards -->
-        <div class="schedule-card-container">
-          <div v-if="scheduleType === 'daily'" class="card p-4 space-y-4">
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div class="flex flex-col gap-2">
-                <label for="dayInterval">
-                  <span class="text-lg font-semibold text-contrast">Every X day(s)</span>
-                </label>
-                <div class="flex items-center gap-2">
-                  <input
-                    id="dayInterval"
-                    v-model="dayInterval"
-                    type="text"
-                    inputmode="numeric"
-                    placeholder="1"
-                    class="w-20"
-                    maxlength="3"
-                    @input="handleDayIntervalChange"
-                  />
-                  <span class="text-sm text-secondary">
-                    day{{ parseInt(dayInterval || '1') > 1 ? 's' : '' }}
-                  </span>
-                </div>
-                <div class="text-xs text-secondary">1-365 days</div>
-              </div>
-              <div class="flex flex-col gap-2">
-                <label class="text-lg font-semibold text-contrast">At time</label>
-                <TimePicker v-model="selectedTime" placeholder="Select time" />
-              </div>
-            </div>
-            <div class="pt-2 border-t border-divider">
-              <p class="text-sm text-secondary">{{ getCronDescription(cronString) }}</p>
-            </div>
-          </div>
-
-          <div v-if="scheduleType === 'custom'" class="card p-4 space-y-4">
-            <div class="flex flex-col gap-2">
-              <label for="customCron">
-                <span class="text-lg font-semibold text-contrast">Cron Expression</span>
-              </label>
-              <div class="textarea-wrapper">
-                <textarea
-                  id="customCron"
-                  v-model="customCron"
-                  placeholder="0 0 9 * * *"
-                  class="font-mono"
-                  rows="2"
-                />
-              </div>
-              <div class="text-xs text-secondary">
-                Format: seconds minutes hours dayOfMonth month dayOfWeek
-              </div>
-              <div v-if="!isValidCron" class="text-xs text-brand-red">
-                Invalid cron format. Please use 6 space-separated values.
-              </div>
-            </div>
-            <div class="pt-2 border-t border-divider">
-              <p class="text-sm text-secondary">{{ getCronDescription(customCron) }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="flex flex-col gap-2">
-        <label for="warn_msg">
-          <span class="text-lg font-semibold text-contrast">Warning Message (Optional)</span>
-        </label>
-        <div class="textarea-wrapper">
-          <textarea
-            id="warn_msg"
-            v-model="data.warn_msg"
-            placeholder="/tellraw Warning message with {} placeholder"
-            rows="2"
-          />
-        </div>
-      </div>
-
-      <div v-if="data.warn_msg && data.warn_msg.trim() !== ''" class="flex flex-col gap-2">
-        <label class="text-lg font-semibold text-contrast">Warning Intervals</label>
-        <div class="flex gap-2">
-          <input v-model="newInterval" type="number" placeholder="Seconds" min="1" class="flex-1" />
-          <ButtonStyled
-            :disabled="!newInterval || (data.warn_intervals?.length || 0) >= 6"
-            @click="addWarningInterval"
-          >
-            <PlusIcon class="h-4 w-4" />
-          </ButtonStyled>
-        </div>
-        <!-- Fixed height container for warning intervals -->
-        <div class="warning-intervals-container">
-          <div
-            v-if="data.warn_intervals && data.warn_intervals.length > 0"
-            class="warning-intervals-content"
-          >
-            <RaisedBadge
-              v-for="(interval, index) in data.warn_intervals"
-              :key="index"
-              :text="formatInterval(interval)"
-              class="flex items-center gap-1"
-            >
-              <button
-                type="button"
-                class="ml-1 hover:text-brand-red"
-                @click="removeWarningInterval(index)"
-              >
-                <XIcon class="h-3 w-3" />
-              </button>
-            </RaisedBadge>
-          </div>
-        </div>
-        <p class="text-xs text-secondary">Maximum 6 intervals. Values in seconds.</p>
-      </div>
-
-      <div class="flex gap-2">
-        <ButtonStyled
-          color="brand"
-          :disabled="isLoading || !isValid || !hasChanges"
-          @click="handleSubmit"
-        >
-          <button>
-            <PlusIcon v-if="mode === 'new'" class="h-4 w-4" />
-            <EditIcon v-else class="h-4 w-4" />
-            {{ isLoading ? 'Saving...' : mode === 'edit' ? 'Update' : 'Create' }}
-          </button>
-        </ButtonStyled>
-        <ButtonStyled :disabled="isLoading" @click="modal?.hide()">
-          <button>
-            <XIcon class="h-4 w-4" />
-            Cancel
-          </button>
-        </ButtonStyled>
-      </div>
-    </div>
-  </NewModal>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import {
-  NewModal,
-  ButtonStyled,
-  DropdownSelect,
-  RaisedBadge,
-  TimePicker,
-  RadioButtons,
-} from '@modrinth/ui'
-import { XIcon, PlusIcon, EditIcon, ClockIcon, CodeIcon } from '@modrinth/assets'
-import cronstrue from 'cronstrue'
-import type { ScheduledTask } from '@modrinth/utils'
-
-interface TimeValue {
-  hour: string
-  minute: string
-}
-
-const emit = defineEmits<{
-  save: [data: ScheduledTask]
-}>()
-
-const modal = ref()
-const isLoading = ref(false)
-const mode = ref<'new' | 'edit'>('new')
-const originalData = ref<ScheduledTask | null>(null)
-
-const data = ref<ScheduledTask>({
-  title: '',
-  action_kind: 'game-command',
-  options: {},
-  enabled: true,
-  warn_msg: '',
-  warn_intervals: [],
-  every: '0 0 9 * * *',
-})
-
-const newInterval = ref('')
-
-const scheduleType = ref<'daily' | 'custom'>('daily')
-const dayInterval = ref('1')
-const selectedTime = ref<TimeValue>({ hour: '9', minute: '0' })
-const customCron = ref('0 0 9 * * *')
-
-const actionTypes = ref(['game-command', 'restart'])
-
-const cronString = computed(() => generateCronString())
-
-const isValidCron = computed(() => {
-  return scheduleType.value === 'custom' ? validateCustomCron(customCron.value) : true
-})
-
-const isValid = computed(() => {
-  if (!data.value.title.trim()) return false
-
-  if (!isValidCron.value) return false
-
-  if (
-    data.value.action_kind === 'game-command' &&
-    (!data.value.options.command || !data.value.options.command.trim())
-  ) {
-    return false
-  }
-
-  return true
-})
-
-const hasChanges = computed(() => {
-  if (mode.value === 'new') return true
-
-  if (!originalData.value) return false
-
-  if (data.value.title !== originalData.value.title) return true
-  if (data.value.action_kind !== originalData.value.action_kind) return true
-  if (data.value.every !== originalData.value.every) return true
-  if (data.value.warn_msg !== originalData.value.warn_msg) return true
-
-  if (
-    data.value.action_kind === 'game-command' &&
-    data.value.options.command !== originalData.value.options?.command
-  ) {
-    return true
-  }
-
-  const originalIntervals = originalData.value.warn_intervals || []
-  const currentIntervals = data.value.warn_intervals || []
-
-  if (originalIntervals.length !== currentIntervals.length) return true
-
-  for (let i = 0; i < originalIntervals.length; i++) {
-    if (originalIntervals[i] !== currentIntervals[i]) return true
-  }
-
-  return false
-})
-
-watch(
-  [scheduleType, dayInterval, selectedTime, customCron],
-  () => {
-    const newCron = generateCronString()
-    data.value.every = newCron
-  },
-  { deep: true },
-)
-
-function resetData() {
-  data.value = {
-    title: '',
-    action_kind: 'game-command',
-    options: {},
-    enabled: true,
-    warn_msg: '',
-    warn_intervals: [],
-    every: '0 0 9 * * *',
-  }
-  scheduleType.value = 'daily'
-  dayInterval.value = '1'
-  selectedTime.value = { hour: '9', minute: '0' }
-  customCron.value = '0 0 9 * * *'
-  originalData.value = null
-}
-
-function parseCronExpression(cron: string) {
-  const parts = cron.trim().split(/\s+/)
-  if (parts.length === 6) {
-    const [_seconds, minutes, hours, dayOfMonth, month, dayOfWeek] = parts
-
-    if (dayOfMonth.startsWith('*/') && month === '*' && dayOfWeek === '*') {
-      scheduleType.value = 'daily'
-      dayInterval.value = dayOfMonth.substring(2)
-      selectedTime.value = { hour: hours, minute: minutes }
-    } else if (dayOfMonth === '*' && month === '*' && dayOfWeek === '*') {
-      scheduleType.value = 'daily'
-      dayInterval.value = '1'
-      selectedTime.value = { hour: hours, minute: minutes }
-    } else {
-      scheduleType.value = 'custom'
-      customCron.value = cron
-    }
-  } else {
-    scheduleType.value = 'custom'
-    customCron.value = cron
-  }
-}
-
-function generateCronString(): string {
-  if (scheduleType.value === 'custom') {
-    return customCron.value
-  }
-
-  const minute = selectedTime.value.minute === '' ? '0' : selectedTime.value.minute
-  const hour = selectedTime.value.hour === '' ? '0' : selectedTime.value.hour
-  const days = dayInterval.value === '' ? '1' : dayInterval.value
-
-  if (days === '1') {
-    return `0 ${minute} ${hour} * * *`
-  } else {
-    return `0 ${minute} ${hour} */${days} * *`
-  }
-}
-
-function getCronDescription(cronExpression: string): string {
-  try {
-    const parts = cronExpression.trim().split(/\s+/)
-    if (parts.length === 6) {
-      const fiveFieldCron = parts.slice(1).join(' ')
-      return cronstrue.toString(fiveFieldCron, {
-        throwExceptionOnParseError: false,
-        verbose: false,
-        use24HourTimeFormat: true,
-      })
-    }
-    return cronstrue.toString(cronExpression, {
-      throwExceptionOnParseError: false,
-      verbose: false,
-      use24HourTimeFormat: true,
-    })
-  } catch {
-    return 'Invalid cron expression'
-  }
-}
-
-function handleDayIntervalChange(event: Event) {
-  const target = event.target as HTMLInputElement
-  const cleanValue = target.value.replace(/\D/g, '')
-  if (cleanValue === '' || (parseInt(cleanValue) > 0 && parseInt(cleanValue) <= 365)) {
-    dayInterval.value = cleanValue
-  }
-}
-
-function validateCustomCron(cron: string): boolean {
-  const parts = cron.trim().split(/\s+/)
-  return parts.length === 6
-}
-
-function addWarningInterval() {
-  const interval = parseInt(newInterval.value)
-  if (interval > 0 && data.value.warn_intervals && data.value.warn_intervals.length < 6) {
-    data.value.warn_intervals = [...(data.value.warn_intervals || []), interval].sort(
-      (a, b) => b - a,
-    )
-    newInterval.value = ''
-  }
-}
-
-function removeWarningInterval(index: number) {
-  data.value.warn_intervals = data.value.warn_intervals?.filter((_, i) => i !== index)
-}
-
-function formatInterval(seconds: number) {
-  if (seconds >= 60) {
-    const minutes = Math.floor(seconds / 60)
-    const remainingSeconds = seconds % 60
-    return remainingSeconds > 0 ? `${minutes}m ${remainingSeconds}s` : `${minutes}m`
-  }
-  return `${seconds}s`
-}
-
-function getActionTypeDescription(actionType: string): string {
-  switch (actionType) {
-    case 'game-command':
-      return 'Execute a custom command in the game server'
-    case 'restart':
-      return 'Restart the game server'
-    default:
-      return ''
-  }
-}
-
-async function handleSubmit() {
-  if (!isValid.value) return
-
-  isLoading.value = true
-
-  try {
-    const cleanData = {
-      ...data.value,
-      options: data.value.action_kind === 'restart' ? {} : data.value.options,
-      warn_msg: data.value.warn_msg || undefined,
-      warn_intervals: data.value.warn_intervals?.length ? data.value.warn_intervals : undefined,
-    }
-
-    emit('save', cleanData)
-    modal.value?.hide()
-  } catch (error) {
-    console.error('Failed to save schedule:', error)
-  } finally {
-    isLoading.value = false
-  }
-}
-
-function showNew(event?: Event) {
-  mode.value = 'new'
-  resetData()
-  modal.value?.show(event)
-}
-
-function show(task: ScheduledTask, event?: Event) {
-  mode.value = 'edit'
-
-  originalData.value = JSON.parse(JSON.stringify(task))
-
-  data.value = {
-    title: task.title,
-    action_kind: task.action_kind,
-    options: { ...task.options },
-    enabled: task.enabled,
-    warn_msg: task.warn_msg || '',
-    warn_intervals: task.warn_intervals || [],
-    every: task.every,
-  }
-
-  parseCronExpression(task.every)
-
-  modal.value?.show(event)
-}
-
-defineExpose({
-  show,
-  showNew,
-})
-</script>
-
-<style scoped lang="scss">
-.schedule-modal {
-  :deep(.modal-content) {
-    min-width: 600px;
-    max-width: 800px;
-    width: 90vw;
-  }
-}
-
-.card {
-  background-color: var(--color-raised-bg);
-  border: 1px solid var(--color-divider);
-  border-radius: var(--radius-card);
-}
-
-.schedule-card-container {
-  min-height: 200px;
-
-  .card {
-    width: 100%;
-  }
-}
-
-.warning-intervals-container {
-  min-height: 40px;
-  max-height: 120px;
-  overflow-y: auto;
-
-  .warning-intervals-content {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.25rem;
-  }
-}
-
-.action-type-description {
-  font-style: italic;
-  min-height: 1.25rem;
-}
-
-input {
-  width: 100%;
-}
-
-.textarea-wrapper {
-  width: 100%;
-}
-
-textarea {
-  min-height: 5rem;
-  width: 100%;
-}
-
-.flex.flex-col.gap-2,
-.flex.flex-col.gap-3,
-.flex.flex-col.gap-4 {
-  min-height: fit-content;
-}
-</style>
diff --git a/packages/utils/servers/types/scheduling.ts b/packages/utils/servers/types/scheduling.ts
index 850083b7f..3712142da 100644
--- a/packages/utils/servers/types/scheduling.ts
+++ b/packages/utils/servers/types/scheduling.ts
@@ -1,9 +1,10 @@
 export interface ScheduledTask {
+  id?: number
   title: string
   action_kind: 'game-command' | 'restart'
   options: { command?: string }
   enabled: boolean
   warn_msg?: string
-  warn_intervals?: number[]
+  warn_intervals: number[]
   every: string
 }