@7365admin1/layer-common 4.97.1-staging.577 → 4.97.1-staging.579

package/components/ScheduleTaskForm.vue

@@ -1,12 +1,17 @@
+<!--
+  ADD / EDIT AN EXTRA VISIT - four short steps: What, Where, When, Who is told.
+
+  The last step shows one sentence saying exactly what will be created
+  ("Adds 1 extra visit to 3 areas (24 units) at 08:00 every weekday ... next:
+  Wed 21 Oct"). The form checks what the server checks (utils/schedule-task.ts)
+  so a schedule that would never run is caught before saving; whatever the
+  server still refuses is shown in its own words.
+-->
 <template>
-  <v-dialog v-model="show" max-width="680" persistent>
+  <v-dialog v-model="show" max-width="760" persistent scrollable>
     <v-card class="screen-modal">
       <v-card-title class="d-flex align-center">
-        {{
-          props.mode === "edit"
-            ? "Edit Schedule Task"
-            : "Create Schedule Task"
-        }}
+        {{ props.mode === "edit" ? "Edit Extra Visit" : "Add Extra Visit" }}
         <v-spacer />
         <v-btn
           icon="mdi-close"
@@ -19,253 +24,340 @@
       </v-card-title>
 
       <v-card-text class="screen-modal__body">
-        <v-form ref="formRef" v-model="valid">
-          <v-row dense>
-            <v-col cols="12">
-              <InputLabel for="title" title="Title" required />
-              <v-text-field
-                id="title"
-                v-model="subject"
-                variant="outlined"
-                density="comfortable"
-                class="filter-field mb-4"
-                placeholder="Enter task title"
-                hide-details="auto"
+        <v-stepper
+          v-model="step"
+          flat
+          hide-actions
+          elevation="0"
+          class="st-stepper"
+        >
+          <v-stepper-header class="st-stepper__header">
+            <template v-for="(label, i) in STEP_LABELS" :key="label">
+              <v-stepper-item
+                :title="label"
+                :value="i + 1"
+                :complete="step > i + 1"
+                :error="showErrors && stepHasError(i + 1)"
+                editable
               />
-            </v-col>
-
-            <v-col cols="12">
-              <InputLabel for="date-range" title="Select Dates" required />
-              <div class="task-form__panel mb-4">
-                <v-date-picker
-                  v-model="pickerDates"
+              <v-divider v-if="i < STEP_LABELS.length - 1" />
+            </template>
+          </v-stepper-header>
+
+          <v-stepper-window>
+            <!-- 1. WHAT -->
+            <v-stepper-window-item :value="1">
+              <div class="st-step">
+                <p class="st-step__help">
+                  Give the extra visit a name staff will recognise, and say
+                  what they should do.
+                </p>
+                <InputLabel for="title" title="Title" required />
+                <v-text-field
+                  id="title"
+                  v-model="subject"
+                  variant="outlined"
+                  density="comfortable"
+                  class="filter-field mb-4"
+                  placeholder="For example: Midday toilet round"
+                  :error-messages="fieldError('title')"
+                  hide-details="auto"
+                />
+                <InputLabel for="description" title="Instructions" />
+                <v-textarea
+                  id="description"
+                  v-model="description"
+                  variant="outlined"
+                  density="comfortable"
+                  class="filter-field"
+                  rows="3"
+                  placeholder="Optional. Anything staff should know for this visit."
+                  hide-details="auto"
+                />
+              </div>
+            </v-stepper-window-item>
+
+            <!-- 2. WHERE -->
+            <v-stepper-window-item :value="2">
+              <div class="st-step">
+                <p class="st-step__help">
+                  Pick the areas that get the extra visit. Every unit in an
+                  area is added to the checklist.
+                </p>
+                <InputLabel for="selected-areas" title="Areas" required />
+                <v-select
+                  id="selected-areas"
+                  v-model="selectedAreas"
+                  :items="areasList"
+                  item-title="name"
+                  item-value="value"
+                  return-object
                   multiple
-                  :show-current="false"
-                  color="primary"
-                  elevation="0"
-                  width="100%"
-                  class="ma-0"
+                  variant="outlined"
+                  density="comfortable"
+                  class="filter-field mb-2"
+                  :loading="loadingAreas"
+                  placeholder="Choose one or more areas"
+                  :error-messages="fieldError('areas')"
+                  hide-details="auto"
+                  chips
+                  closable-chips
                 />
-                <v-divider class="my-3" />
-                <div class="task-form__hint mb-2">
-                  {{ selectedDates.length }} date(s) selected
-                </div>
                 <div
-                  v-if="selectedDates.length > 0"
-                  class="d-flex flex-wrap ga-2"
+                  v-if="!loadingAreas && areasList.length === 0"
+                  class="st-step__help"
+                >
+                  There are no Areas on this site yet. Add Areas and Units
+                  first, then come back.
+                </div>
+
+                <v-list
+                  v-if="selectedAreas.length"
+                  density="compact"
+                  class="st-areas"
                 >
-                  <v-chip
-                    v-for="date in selectedDates"
-                    :key="date"
-                    size="small"
-                    closable
-                    @click:close="removeDate(date)"
+                  <v-list-item
+                    v-for="area in selectedAreas"
+                    :key="areaKey(area)"
+                    :title="area.name"
                   >
-                    {{ date }}
-                  </v-chip>
+                    <template #append>
+                      <v-progress-circular
+                        v-if="!(areaKey(area) in fetchedAreaUnits)"
+                        size="14"
+                        width="2"
+                        indeterminate
+                        color="primary"
+                      />
+                      <StatusChip
+                        v-else-if="unitCountOf(area) === 0"
+                        status="Paused"
+                        :dot="false"
+                        label="No units - skipped"
+                      />
+                      <StatusChip
+                        v-else
+                        tone="neutral"
+                        :dot="false"
+                        :label="`${unitCountOf(area)} unit${
+                          unitCountOf(area) === 1 ? '' : 's'
+                        }`"
+                      />
+                    </template>
+                  </v-list-item>
+                </v-list>
+                <v-alert
+                  v-if="emptyAreaNames.length"
+                  type="warning"
+                  variant="tonal"
+                  density="compact"
+                  class="mt-3"
+                >
+                  {{ emptyAreaNames.join(", ") }}
+                  {{ emptyAreaNames.length === 1 ? "has" : "have" }} no Units,
+                  so nothing is added there. Add Units to the area first.
+                </v-alert>
+              </div>
+            </v-stepper-window-item>
+
+            <!-- 3. WHEN -->
+            <v-stepper-window-item :value="3">
+              <div class="st-step">
+                <p class="st-step__help">
+                  Choose the time, and whether it happens once or repeats.
+                  Times are Singapore time.
+                </p>
+                <v-row dense>
+                  <v-col cols="12" sm="6">
+                    <InputLabel for="schedule-time" title="Time" required />
+                    <v-text-field
+                      id="schedule-time"
+                      v-model="scheduleTime"
+                      type="time"
+                      variant="outlined"
+                      density="comfortable"
+                      class="filter-field"
+                      prepend-inner-icon="mdi-clock-outline"
+                      :error-messages="fieldError('time')"
+                      hide-details="auto"
+                    />
+                  </v-col>
+                  <v-col cols="12" sm="6">
+                    <InputLabel for="repeat" title="Repeat" required />
+                    <v-select
+                      id="repeat"
+                      v-model="repeat"
+                      :items="REPEAT_OPTIONS"
+                      item-title="title"
+                      item-value="value"
+                      variant="outlined"
+                      density="comfortable"
+                      class="filter-field"
+                      hide-details="auto"
+                    />
+                  </v-col>
+                </v-row>
+
+                <!-- Once: pick the day(s) -->
+                <div v-if="repeat === 'none'" class="mt-4">
+                  <InputLabel title="Day" required />
+                  <div class="st-panel">
+                    <v-date-picker
+                      v-model="pickerDates"
+                      multiple
+                      :min="today"
+                      :show-current="false"
+                      color="primary"
+                      elevation="0"
+                      width="100%"
+                      class="ma-0"
+                    />
+                    <div class="st-step__help mt-2">
+                      {{ selectedDates.length }} day(s) selected.
+                    </div>
+                  </div>
+                  <div v-if="fieldError('dates').length" class="st-error">
+                    {{ fieldError("dates")[0] }}
+                  </div>
                 </div>
-                <div v-else class="task-form__hint">
-                  No dates selected. Click on the calendar to select dates.
+
+                <!-- Repeating -->
+                <div v-else class="mt-4">
+                  <div v-if="repeat === 'weekly'" class="mb-4">
+                    <InputLabel title="On these days" required />
+                    <v-btn-toggle
+                      v-model="daysOfWeek"
+                      multiple
+                      density="comfortable"
+                      color="primary"
+                      variant="outlined"
+                      divided
+                    >
+                      <v-btn
+                        v-for="d in WEEK_DAYS"
+                        :key="d.value"
+                        :value="d.value"
+                        class="text-none"
+                      >
+                        {{ d.title }}
+                      </v-btn>
+                    </v-btn-toggle>
+                    <div v-if="fieldError('daysOfWeek').length" class="st-error">
+                      {{ fieldError("daysOfWeek")[0] }}
+                    </div>
+                  </div>
+                  <v-row dense>
+                    <v-col cols="12" sm="6">
+                      <InputLabel for="start-date" title="Starts on" required />
+                      <v-text-field
+                        id="start-date"
+                        v-model="startDate"
+                        type="date"
+                        :min="today"
+                        variant="outlined"
+                        density="comfortable"
+                        class="filter-field"
+                        :error-messages="fieldError('startDate')"
+                        hide-details="auto"
+                      />
+                    </v-col>
+                    <v-col cols="12" sm="6">
+                      <InputLabel for="end-date" title="Ends on (optional)" />
+                      <v-text-field
+                        id="end-date"
+                        v-model="endDate"
+                        type="date"
+                        :min="startDate || today"
+                        variant="outlined"
+                        density="comfortable"
+                        class="filter-field"
+                        clearable
+                        hint="Leave empty to keep repeating"
+                        persistent-hint
+                        :error-messages="fieldError('endDate')"
+                      />
+                    </v-col>
+                  </v-row>
+                  <div v-if="repeat === 'monthly'" class="st-step__help mt-2">
+                    Runs on the same day of the month as the start date. On
+                    the 31st it runs on the last day of shorter months.
+                  </div>
                 </div>
               </div>
-            </v-col>
-
-            <v-col cols="12">
-              <InputLabel for="schedule-time" title="Time" required />
-              <v-text-field
-                id="schedule-time"
-                v-model="scheduleTime"
-                type="time"
-                variant="outlined"
-                density="comfortable"
-                class="filter-field mb-4"
-                hide-details="auto"
-                prepend-inner-icon="mdi-clock-outline"
-              />
-            </v-col>
-
-            <v-col cols="12">
-              <InputLabel for="selected-areas" title="Select Areas" required />
-              <v-select
-                id="selected-areas"
-                v-model="selectedAreas"
-                :items="areasList"
-                item-title="name"
-                item-value="value"
-                return-object
-                multiple
-                variant="outlined"
-                density="comfortable"
-                class="filter-field mb-4"
-                :loading="loadingAreas"
-                placeholder="Choose one or more areas"
-                hide-details="auto"
-                chips
-                closable-chips
-              >
-                <template v-slot:selection="{ item, index }">
-                  <v-chip
-                    v-if="index < 3"
-                    size="small"
-                    closable
-                    @click:close="selectedAreas.splice(index, 1)"
-                  >
-                    {{ item.title }}
-                  </v-chip>
-                  <span
-                    v-if="index === 3"
-                    class="task-form__hint align-self-center"
-                  >
-                    (+{{ selectedAreas.length - 3 }} others)
-                  </span>
-                </template>
-              </v-select>
-            </v-col>
-
-            <v-col v-if="selectedAreas.length > 0" cols="12">
-              <InputLabel title="Units Under Selected Areas" />
-              <v-card variant="outlined" rounded class="mb-4">
-                <v-list density="compact" nav>
-                  <template
-                    v-for="(area, idx) in selectedAreas"
-                    :key="area.value || area._id"
-                  >
-                    <v-divider v-if="idx > 0" />
+            </v-stepper-window-item>
+
+            <!-- 4. WHO IS TOLD + SUMMARY -->
+            <v-stepper-window-item :value="4">
+              <div class="st-step">
+                <v-alert
+                  type="info"
+                  variant="tonal"
+                  density="comfortable"
+                  class="mb-4"
+                  title="Who is told"
+                >
+                  Staff on this site get a push notification when the extra
+                  visit is added to their checklist.
+                </v-alert>
 
-                    <v-list-item
-                      rounded="0"
-                      class="px-3"
-                      @click="toggleArea(area.value || area._id)"
-                    >
-                      <template #prepend>
-                        <v-icon size="18" color="medium-emphasis">
-                          {{
-                            openAreas.includes(area.value || area._id)
-                              ? "mdi-chevron-down"
-                              : "mdi-chevron-right"
-                          }}
-                        </v-icon>
-                      </template>
-
-                      <v-list-item-title class="text-body-2 font-weight-medium">
-                        {{ area.name }}
-                      </v-list-item-title>
-
-                      <template #append>
-                        <v-progress-circular
-                          v-if="
-                            loadingUnits &&
-                            !(area.value || area._id in fetchedAreaUnits)
-                          "
-                          size="14"
-                          width="2"
-                          indeterminate
-                          color="primary"
-                        />
-                        <v-chip
-                          v-else
-                          size="x-small"
-                          variant="tonal"
-                          color="primary"
-                        >
-                          {{
-                            (fetchedAreaUnits[area.value || area._id] || [])
-                              .length
-                          }}
-                        </v-chip>
-                      </template>
-                    </v-list-item>
-
-                    <v-expand-transition>
-                      <div v-show="openAreas.includes(area.value || area._id)">
-                        <v-card-text class="pt-1 pb-3 px-3">
-                          <div
-                            v-if="
-                              loadingUnits &&
-                              !(area.value || area._id in fetchedAreaUnits)
-                            "
-                            class="d-flex flex-wrap ga-2"
-                          >
-                            <v-skeleton-loader
-                              v-for="n in 4"
-                              :key="n"
-                              type="chip"
-                              width="80"
-                            />
-                          </div>
-
-                          <div
-                            v-else-if="
-                              (fetchedAreaUnits[area.value || area._id] || [])
-                                .length > 0
-                            "
-                            class="d-flex flex-wrap ga-1"
-                          >
-                            <v-chip
-                              v-for="unit in fetchedAreaUnits[
-                                area.value || area._id
-                              ]"
-                              :key="unit.unit"
-                              size="small"
-                              variant="tonal"
-                            >
-                              {{ unit.name }}
-                            </v-chip>
-                          </div>
-
-                          <span v-else class="task-form__hint">
-                            No units configured
-                          </span>
-                        </v-card-text>
-                      </div>
-                    </v-expand-transition>
-                  </template>
-                </v-list>
-              </v-card>
-            </v-col>
-
-            <v-col cols="12">
-              <InputLabel for="description" title="Task Description" />
-              <v-textarea
-                id="description"
-                v-model="description"
-                variant="outlined"
-                density="comfortable"
-                class="filter-field mb-2"
-                rows="4"
-                placeholder="Add additional details about this task..."
-                hide-details="auto"
-              />
-            </v-col>
-          </v-row>
-        </v-form>
+                <div class="st-summary">
+                  <div class="st-summary__label">This will:</div>
+                  <div class="st-summary__text">{{ summary }}</div>
+                </div>
+                <div v-if="fieldError('never').length" class="st-error mt-2">
+                  {{ fieldError("never")[0] }}
+                </div>
+                <v-alert
+                  v-if="serverError"
+                  type="error"
+                  variant="tonal"
+                  density="comfortable"
+                  class="mt-4"
+                >
+                  {{ serverError }}
+                </v-alert>
+              </div>
+            </v-stepper-window-item>
+          </v-stepper-window>
+        </v-stepper>
       </v-card-text>
 
       <v-card-actions class="screen-modal__footer">
-        <v-row no-gutters>
-          <v-col cols="6" class="pr-2">
-            <v-btn
-              block
-              variant="outlined"
-              class="text-none screen-btn-ghost"
-              @click="close"
-              :disabled="submitting"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-          <v-col cols="6" class="pl-2">
-            <v-btn
-              block
-              variant="flat"
-              class="text-none screen-btn-primary"
-              @click="submitTask"
-              :loading="submitting"
-            >
-              {{ props.mode === "edit" ? "Save Changes" : "Add Schedule Task" }}
-            </v-btn>
-          </v-col>
-        </v-row>
+        <v-btn
+          variant="outlined"
+          class="text-none screen-btn-ghost"
+          :disabled="submitting"
+          @click="close"
+        >
+          Cancel
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          v-if="step > 1"
+          variant="outlined"
+          class="text-none screen-btn-ghost"
+          :disabled="submitting"
+          @click="step -= 1"
+        >
+          Back
+        </v-btn>
+        <v-btn
+          v-if="step < STEP_LABELS.length"
+          variant="flat"
+          class="text-none screen-btn-primary"
+          @click="goNext"
+        >
+          Next
+        </v-btn>
+        <v-btn
+          v-else
+          variant="flat"
+          class="text-none screen-btn-primary"
+          :loading="submitting"
+          @click="submitTask"
+        >
+          {{ props.mode === "edit" ? "Save Changes" : "Add Extra Visit" }}
+        </v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>
@@ -276,6 +368,15 @@
 <script setup lang="ts">
 import useAreas from "../composables/useAreas";
 import useScheduleTask from "../composables/useScheduleTask";
+import {
+  REPEAT_OPTIONS,
+  WEEK_DAYS,
+  buildSummary,
+  sgtToday,
+  validateSchedule,
+  type TRepeat,
+  type TScheduleErrors,
+} from "../utils/schedule-task";
 
 const props = defineProps({
   mode: {
@@ -303,72 +404,33 @@ const { getAreas, getAreaById } = useAreas();
 const { createScheduleTask, updateScheduleTask, getScheduleTaskById } =
   useScheduleTask();
 
-const formRef = ref<HTMLFormElement | null>(null);
-const valid = ref(false);
+// --- state: everything is declared before any watcher or computed reads it ---
+const STEP_LABELS = ["What", "Where", "When", "Who is told"];
+const step = ref(1);
+const showErrors = ref(false);
 const submitting = ref(false);
 const loadingTask = ref(false);
+const serverError = ref("");
 
+const today = sgtToday();
 const subject = ref("");
 const description = ref("");
 const scheduleTime = ref("08:00");
+const repeat = ref<TRepeat>("none");
 const pickerDates = ref<Date[]>([]);
-const selectedDates = computed(() =>
-  pickerDates.value.map((d) => toLocalISO(d)).sort()
-);
+const daysOfWeek = ref<number[]>([]);
+const startDate = ref("");
+const endDate = ref("");
 
 const selectedAreas = ref<any[]>([]);
-const loadingUnits = ref(false);
+const areasList = ref<any[]>([]);
 const fetchedAreaUnits = ref<Record<string, { name: string; unit: string }[]>>(
-  {}
-);
-const openAreas = ref<string[]>([]);
-
-const selectedAreaIds = computed(() =>
-  selectedAreas.value.map((a: any) => a.value || a._id)
+  {},
 );
 
-watch(selectedAreaIds, async (ids, prevIds) => {
-  openAreas.value = ids.slice();
-
-  const toFetch = ids.filter(
-    (id) => !prevIds?.includes(id) && !(id in fetchedAreaUnits.value)
-  );
-
-  if (!toFetch.length) return;
-
-  loadingUnits.value = true;
-  try {
-    await Promise.all(
-      toFetch.map(async (id) => {
-        try {
-          const result = await getAreaById(id);
-          fetchedAreaUnits.value[id] = result?.units || [];
-        } catch {
-          fetchedAreaUnits.value[id] = [];
-        }
-      })
-    );
-  } finally {
-    loadingUnits.value = false;
-  }
-});
-
 const message = ref("");
 const messageSnackbar = ref(false);
 const messageColor = ref("success");
-const areasList = ref<any[]>([]);
-
-const generateDateRange = (start: Date, end: Date): Date[] => {
-  const dates: Date[] = [];
-  const current = new Date(start);
-
-  while (current <= end) {
-    dates.push(new Date(current));
-    current.setDate(current.getDate() + 1);
-  }
-
-  return dates;
-};
 
 const toLocalISO = (d: Date): string => {
   const y = d.getFullYear();
@@ -377,11 +439,53 @@ const toLocalISO = (d: Date): string => {
   return `${y}-${m}-${day}`;
 };
 
-const removeDate = (dateISO: string) => {
-  pickerDates.value = pickerDates.value.filter(
-    (d) => toLocalISO(d) !== dateISO
-  );
+// A date the server sent ("2026-10-21") as a local calendar day, with no time zone shift.
+const fromISODate = (s: string) => {
+  const [y, m, d] = s.split("-").map(Number);
+  return new Date(y, m - 1, d);
+};
+
+const selectedDates = computed(() =>
+  pickerDates.value.map((d) => toLocalISO(d)).sort(),
+);
+
+const areaKey = (a: any): string => a.value || a._id;
+const unitCountOf = (a: any) => (fetchedAreaUnits.value[areaKey(a)] || []).length;
+const emptyAreaNames = computed(() =>
+  selectedAreas.value
+    .filter(
+      (a) => areaKey(a) in fetchedAreaUnits.value && unitCountOf(a) === 0,
+    )
+    .map((a) => a.name),
+);
+const totalUnits = computed(() =>
+  selectedAreas.value.reduce((n, a) => n + unitCountOf(a), 0),
+);
+
+const formState = computed(() => ({
+  title: subject.value,
+  time: scheduleTime.value,
+  repeat: repeat.value,
+  dates: selectedDates.value,
+  daysOfWeek: daysOfWeek.value,
+  startDate: startDate.value,
+  endDate: repeat.value === "none" ? "" : endDate.value || "",
+  areaCount: selectedAreas.value.length,
+}));
+
+const errors = computed<TScheduleErrors>(() => validateSchedule(formState.value));
+const summary = computed(() => buildSummary(formState.value, totalUnits.value));
+
+const STEP_FIELDS: Record<number, (keyof TScheduleErrors)[]> = {
+  1: ["title"],
+  2: ["areas"],
+  3: ["time", "dates", "daysOfWeek", "startDate", "endDate"],
+  4: ["never"],
 };
+const stepHasError = (n: number) =>
+  STEP_FIELDS[n].some((f) => !!errors.value[f]);
+const fieldError = (f: keyof TScheduleErrors): string[] =>
+  showErrors.value && errors.value[f] ? [errors.value[f] as string] : [];
 
 const showMessage = (text: string, color: string = "success") => {
   message.value = text;
@@ -389,23 +493,53 @@ const showMessage = (text: string, color: string = "success") => {
   messageSnackbar.value = true;
 };
 
-const toggleArea = (id: string) => {
-  const idx = openAreas.value.indexOf(id);
-  if (idx === -1) {
-    openAreas.value.push(id);
-  } else {
-    openAreas.value.splice(idx, 1);
+function goNext() {
+  if (stepHasError(step.value)) {
+    showErrors.value = true;
+    return;
   }
-};
+  step.value += 1;
+}
+
+// --- watchers (after the state above) ---
+watch(repeat, (r) => {
+  // A repeat needs a start day; default it to today so the form is valid straight away.
+  if (r !== "none" && !startDate.value) startDate.value = today;
+});
+
+const selectedAreaIds = computed(() => selectedAreas.value.map(areaKey));
+
+watch(selectedAreaIds, async (ids, prevIds) => {
+  const toFetch = ids.filter(
+    (id) => !prevIds?.includes(id) && !(id in fetchedAreaUnits.value),
+  );
+  if (!toFetch.length) return;
+  await Promise.all(
+    toFetch.map(async (id) => {
+      try {
+        const result = await getAreaById(id);
+        fetchedAreaUnits.value[id] = result?.units || [];
+      } catch {
+        fetchedAreaUnits.value[id] = [];
+      }
+    }),
+  );
+});
 
 const resetForm = () => {
+  step.value = 1;
+  showErrors.value = false;
+  serverError.value = "";
   subject.value = "";
   description.value = "";
   scheduleTime.value = "08:00";
+  repeat.value = "none";
   pickerDates.value = [];
+  daysOfWeek.value = [];
+  startDate.value = "";
+  endDate.value = "";
   selectedAreas.value = [];
   fetchedAreaUnits.value = {};
-  openAreas.value = [];
 };
 
 const setFormFromTask = (task: any) => {
@@ -414,28 +548,23 @@ const setFormFromTask = (task: any) => {
   subject.value = task.title || "";
   description.value = task.description || "";
   scheduleTime.value = task.time || "08:00";
-
-  const toISODate = (d: any) => {
-    if (!d) return null;
-    try {
-      const dt = new Date(d);
-      if (isNaN(dt.getTime())) return null;
-      return dt.toISOString().slice(0, 10);
-    } catch (e) {
-      return null;
-    }
-  };
-
-  // Handle dates array from task
-  if (task.dates && Array.isArray(task.dates) && task.dates.length > 0) {
-    pickerDates.value = task.dates.map((d: string) => new Date(d));
-  } else if (task.startDate || task.endDate) {
-    // Fallback for old format (startDate/endDate)
-    const start = toISODate(task.startDate || task.start);
-    const end = toISODate(task.endDate || task.end);
-    if (start && end) {
-      pickerDates.value = generateDateRange(new Date(start), new Date(end));
+  repeat.value = (task.repeat || "none") as TRepeat;
+  daysOfWeek.value = Array.isArray(task.daysOfWeek) ? [...task.daysOfWeek] : [];
+  startDate.value = task.startDate || "";
+  endDate.value = task.endDate || "";
+
+  if (Array.isArray(task.dates) && task.dates.length > 0) {
+    pickerDates.value = task.dates.map(fromISODate);
+  } else if (repeat.value === "none" && task.startDate && task.endDate) {
+    // Oldest format: a start..end range. Expand it to the days it meant.
+    const days: Date[] = [];
+    const last = fromISODate(task.endDate);
+    for (const d = fromISODate(task.startDate); d <= last; d.setDate(d.getDate() + 1)) {
+      days.push(new Date(d));
     }
+    pickerDates.value = days;
+    startDate.value = "";
+    endDate.value = "";
   }
 
   selectedAreas.value = Array.isArray(task.areas)
@@ -454,7 +583,7 @@ const { data: getAreasReq, pending: loadingAreas } = await useLazyAsyncData(
   {
     watch: [show, () => props.site],
     immediate: false,
-  }
+  },
 );
 
 watchEffect(() => {
@@ -488,8 +617,8 @@ const loadTaskData = async () => {
   } catch (error: any) {
     if ((props.taskData as any)?.title) setFormFromTask(props.taskData);
     showMessage(
-      error?.data?.message || "Failed to load schedule task",
-      "error"
+      error?.data?.message || "Could not load this extra visit.",
+      "error",
     );
   } finally {
     loadingTask.value = false;
@@ -497,17 +626,31 @@ const loadTaskData = async () => {
 };
 
 const submitTask = async () => {
+  serverError.value = "";
+  if (Object.keys(errors.value).length) {
+    // Jump to the first step with a problem and show it.
+    showErrors.value = true;
+    step.value = [1, 2, 3, 4].find(stepHasError) || step.value;
+    return;
+  }
+
   submitting.value = true;
   try {
+    const repeating = repeat.value !== "none";
     const payload = {
-      title: subject.value,
+      title: subject.value.trim(),
       time: scheduleTime.value,
-      dates: selectedDates.value, // Array of YYYY-MM-DD strings
       description: description.value?.trim() || "",
       areas: selectedAreas.value.map((area: any) => ({
         name: area.name || area.title || "",
         value: area._id || area.value || area,
       })),
+      repeat: repeat.value,
+      // null clears a field the server may already hold (edit); on create it is ignored.
+      dates: repeating ? [] : selectedDates.value,
+      daysOfWeek: repeat.value === "weekly" ? daysOfWeek.value : null,
+      startDate: repeating ? startDate.value : null,
+      endDate: repeating && endDate.value ? endDate.value : null,
     };
 
     let response;
@@ -526,20 +669,18 @@ const submitTask = async () => {
 
     showMessage(
       response?.message ||
-        `Schedule task ${
-          props.mode === "edit" ? "updated" : "created"
-        } successfully`,
-      "success"
+        `Extra visit ${props.mode === "edit" ? "updated" : "added"}.`,
+      "success",
     );
 
     emit("saved");
     emit("refresh");
     close();
   } catch (error: any) {
-    showMessage(
-      error?.data?.message || "Failed to submit schedule task",
-      "error"
-    );
+    // The server's own plain-English message (permission, validation, ...).
+    serverError.value =
+      error?.data?.message || "Could not save this extra visit. Please try again.";
+    showMessage(serverError.value, "error");
   } finally {
     submitting.value = false;
   }
@@ -552,38 +693,64 @@ const close = () => {
 
 watch(
   [show, () => props.mode, () => props.taskData],
-  async ([isOpen, mode, taskData]) => {
+  async ([isOpen, mode]) => {
     if (isOpen && mode === "edit") {
       await loadTaskData();
     } else if (!isOpen) {
       resetForm();
     }
   },
-  { immediate: false }
+  { immediate: false },
 );
 </script>
 
 <style scoped>
-/* Was `<v-sheet border rounded color="grey-lighten-5">` - a fixed light grey
-   that stayed light on the dark theme. The design has no calendar panel, so
-   this is the estate's own card surface and border, nothing invented. */
-.task-form__panel {
+.st-step {
+  padding: 16px 4px 4px;
+}
+.st-step__help {
+  margin: 0 0 12px;
+  font-size: var(--fs-chip-lg);
+  font-weight: 600;
+  color: var(--text2);
+}
+.st-error {
+  margin-top: 6px;
+  font-size: var(--fs-chip-lg);
+  font-weight: 600;
+  color: rgb(var(--v-theme-error));
+}
+.st-panel {
   padding: 16px;
   border: 1px solid var(--border);
   border-radius: var(--r-inner);
   background: var(--card);
 }
-
-/* Replaces `text-caption text-disabled` / `text-medium-emphasis` / `text-grey`,
-   three different Vuetify greys doing the same job.
-
-   `--text2`, not `--muted`: the design is silent on this hint line, and `--muted`
-   at 12px measured 3.24:1 on the light card. That pairing would have been OURS,
-   not the design's, so it is fixed here with an existing token rather than
-   recorded. `--text2` measures 8.2:1. */
-.task-form__hint {
+.st-areas {
+  margin-top: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: transparent;
+}
+.st-summary {
+  padding: 16px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
+  background: var(--card);
+}
+.st-summary__label {
+  margin-bottom: 4px;
   font-size: var(--fs-chip-lg);
-  font-weight: 600;
+  font-weight: 700;
   color: var(--text2);
 }
+.st-summary__text {
+  font-size: 15px;
+  font-weight: 600;
+}
+.st-stepper,
+.st-stepper__header {
+  background: transparent;
+  box-shadow: none;
+}
 </style>