feat: show missed tasks

resources/ts/components/TaskItem.vue

@@ -13,7 +13,12 @@ import { updateTask } from "@/api/tasks";
 const CronInput = defineAsyncComponent(
     () => import("@/components/CronInput.vue"),
 );
-import { isTemporary, taskCompleted, taskNextReset } from "@/lib/tasks";
+import {
+    isTemporary,
+    taskCompleted,
+    taskFutureReset,
+    taskNextReset,
+} from "@/lib/tasks";
 import { relativeTime } from "@/lib/dates";
 import { useAlertStore } from "@/stores/alerts";
 import { useI18n } from "vue-i18n";
@@ -23,7 +28,11 @@ const emit =
     defineEmits<(e: "clone" | "delete" | "updated", task: Task) => void>();
 
 const task = defineModel<Task>({ required: true });
-defineProps<{ showLastChecked: boolean; showNextReset: boolean }>();
+defineProps<{
+    showLastChecked: boolean;
+    showNextReset: boolean;
+    showMissed: boolean;
+}>();
 
 const editMode = ref<boolean>(false);
 const editName = ref<string>("");
@@ -33,6 +42,13 @@ const editNameInput = ref<HTMLInputElement | null>(null);
 
 const checked = computed<boolean>(() => taskCompleted(task.value));
 const nextReset = computed<Date | null>(() => taskNextReset(task.value));
+const futureReset = computed<Date | null>(() => taskFutureReset(task.value));
+const missed = computed<boolean>(
+    () =>
+        !checked.value &&
+        futureReset.value !== null &&
+        futureReset.value.getTime() < new Date().getTime(),
+);
 
 const i18n = useI18n();
 
@@ -157,6 +173,7 @@ watch(task, () => {
             </div>
             <div
                 class="cursor-pointer text-lg select-none"
+                :class="showMissed && missed ? 'text-error' : ''"
                 @click.prevent="onOpen"
             >
                 <div>{{ task.name }}</div>