From 1a683fbacf32da12a68fbbc284d578738d268ebf Mon Sep 17 00:00:00 2001
From: Klemek <klemek.dev@proton.me>
Date: Fri, 10 Jul 2026 11:52:36 +0200
Subject: [PATCH] feat: last checked and next refresh

---
 README.md                            |  7 +++++--
 bun.lock                             |  3 +++
 package.json                         |  1 +
 resources/ts/components/TaskItem.vue | 13 +++++++++++--
 resources/ts/components/TaskList.vue | 27 ++++++++++++++++++++++++++-
 resources/ts/lib/cron.ts             |  2 +-
 resources/ts/lib/dates.ts            |  6 ++++++
 resources/ts/lib/tasks.ts            | 24 ++++++++++++++----------
 8 files changed, 67 insertions(+), 16 deletions(-)
 create mode 100644 resources/ts/lib/dates.ts

diff --git a/README.md b/README.md
index a4c5cf2..6825025 100644
--- a/README.md
+++ b/README.md
@@ -7,13 +7,16 @@
 - [x] clone task
 - [x] delete task
 - [ ] list option: sort
-- [ ] list option: show last completion
-- [ ] list option: show next refresh
+- [x] list option: show last completion
+- [x] list option: show next refresh
+- [ ] list option: move completed below
 - [ ] list option: hide completed
+- [ ] options in cookies
 - [ ] list per URL
 - [ ] Empty list message
 - [ ] home screen
 - [ ] change lang
+- [ ] lang in cookies
 - [ ] toasts
 - [ ] handle errors
 - [ ] simple view
diff --git a/bun.lock b/bun.lock
index a1edf66..a488ecd 100644
--- a/bun.lock
+++ b/bun.lock
@@ -6,6 +6,7 @@
       "dependencies": {
         "@lucide/vue": "^1.23.0",
         "cron-parser": "^5.6.1",
+        "date-fns": "^4.4.0",
         "vue": "^3.5.38",
       },
       "devDependencies": {
@@ -420,6 +421,8 @@
 
     "daisyui": ["daisyui@5.6.6", "", {}, "sha512-UFiuIZYucF7ylrnY3PT1SqwaEbVB10mqTZRyeRchZk0bud+HihYLLhXdxGDVmR/ftrM9G9YVr9FFPRVVIZJ5hA=="],
 
+    "date-fns": ["date-fns@4.4.0", "", {}, "sha512-+1UMbeh68lH1SegH83CGWwpb6OHHbpSgr3+s5Eww5M4CAgswBpoWS0AjTOfEJ33HiYKz1hdj/KTFprzXHmq/6w=="],
+
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
     "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
diff --git a/package.json b/package.json
index fca18c5..a6863d2 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "dependencies": {
         "@lucide/vue": "^1.23.0",
         "cron-parser": "^5.6.1",
+        "date-fns": "^4.4.0",
         "vue": "^3.5.38"
     },
     "devDependencies": {
diff --git a/resources/ts/components/TaskItem.vue b/resources/ts/components/TaskItem.vue
index 1bf2729..2e9fc78 100644
--- a/resources/ts/components/TaskItem.vue
+++ b/resources/ts/components/TaskItem.vue
@@ -4,11 +4,13 @@ import type { Task } from "@/types";
 import { Copy, Trash, Save, X } from "@lucide/vue";
 import { updateTask } from "@/api/tasks";
 import CronInput from "@/components/CronInput.vue";
-import { taskCompleted } from "@/lib/tasks";
+import { taskCompleted, taskNextReset } from "@/lib/tasks";
+import { relativeTime } from "@/lib/dates";
 
 const emit = defineEmits<(e: 'clone' | 'delete', task: Task) => void>();
 
 const task = defineModel<Task>({ required: true });
+defineProps<{ showLastChecked: boolean; showNextReset: boolean }>();
 
 const editMode = ref<boolean>(false);
 const editName = ref<string>('');
@@ -16,6 +18,7 @@ const editCron = ref<string|null>(null);
 const refreshKey = ref<number>(0);
 
 const checked = computed<boolean>(() => taskCompleted(task.value));
+const nextReset = computed<Date | null>(() => taskNextReset(task.value));
 
 function onClose() {
     editMode.value = false;
@@ -80,7 +83,13 @@ watch(task, () => {
             class="cursor-pointer text-lg select-none"
             @click.prevent="editMode = true"
         >
-            {{ task.name }}
+            <div>{{ task.name }}</div>
+            <div v-if="showLastChecked && !checked && task.check_date" class="font-light text-xs italic">
+                Checked {{ relativeTime(task.check_date) }}
+            </div>
+            <div v-if="showNextReset && checked && nextReset" class="font-light text-xs italic">
+                Resets {{ relativeTime(nextReset) }}
+            </div>
         </div>
         <template v-else>
             <div class="flex flex-col gap-2">
diff --git a/resources/ts/components/TaskList.vue b/resources/ts/components/TaskList.vue
index 09b57e8..cac1002 100644
--- a/resources/ts/components/TaskList.vue
+++ b/resources/ts/components/TaskList.vue
@@ -8,6 +8,8 @@ import TaskItem from "@/components/TaskItem.vue";
 const taskInput = ref<string>("");
 const tasks = ref<Task[]>([]);
 const list = ref<string>("test");
+const showLastChecked = ref<boolean>(false);
+const showNextReset = ref<boolean>(false);
 
 function fetchTasks() {
     void getTasks(list.value)
@@ -53,7 +55,14 @@ onBeforeMount(fetchTasks);
 <template>
     <ul class="list ">
         <li v-for="(task, i) in tasks" :key="task.id">
-            <task-item v-if="tasks[i]" v-model="tasks[i]" @clone="onCloneTask" @delete="onDeleteTask" />
+            <task-item
+                v-if="tasks[i]"
+                v-model="tasks[i]"
+                :show-last-checked="showLastChecked"
+                :show-next-reset="showNextReset"
+                @clone="onCloneTask"
+                @delete="onDeleteTask"
+            />
         </li>
         <li class="list-row">
             <div class="list-col-grow">
@@ -76,4 +85,20 @@ onBeforeMount(fetchTasks);
             </div>
         </li>
     </ul>
+    <div class="collapse collapse-arrow  font-light text-sm">
+      <input type="checkbox" />
+      <div class="collapse-title">Options</div>
+      <div class="collapse-content text-sm">
+          <fieldset class="fieldset flex flex-col gap-2">
+            <label class="label">
+              <input v-model="showLastChecked" type="checkbox" class="checkbox" />
+              Show last checked time
+            </label>
+            <label class="label">
+              <input v-model="showNextReset" type="checkbox" class="checkbox" />
+              Show next reset time
+            </label>
+          </fieldset>
+      </div>
+    </div>
 </template>
diff --git a/resources/ts/lib/cron.ts b/resources/ts/lib/cron.ts
index f7ca64b..7e58c54 100644
--- a/resources/ts/lib/cron.ts
+++ b/resources/ts/lib/cron.ts
@@ -1,6 +1,6 @@
 
 import { CronType } from "@/enums";
-import CronExpressionParser from "cron-parser";
+import {CronExpressionParser} from "cron-parser";
 
 export function parseCron(cron: string | null): { type: CronType, value: number } {
     let value: RegExpMatchArray | null;
diff --git a/resources/ts/lib/dates.ts b/resources/ts/lib/dates.ts
new file mode 100644
index 0000000..bcc36c3
--- /dev/null
+++ b/resources/ts/lib/dates.ts
@@ -0,0 +1,6 @@
+import { formatDistanceToNow } from "date-fns";
+
+
+export function relativeTime(date: Date): string {
+    return formatDistanceToNow(date, {addSuffix: true, includeSeconds: false});
+}
diff --git a/resources/ts/lib/tasks.ts b/resources/ts/lib/tasks.ts
index d54dfb6..41c6c23 100644
--- a/resources/ts/lib/tasks.ts
+++ b/resources/ts/lib/tasks.ts
@@ -1,5 +1,5 @@
 import type { RawTask, Task } from "@/types";
-import CronExpressionParser from "cron-parser";
+import {CronExpressionParser} from "cron-parser";
 
 export function parseTask(task: RawTask): Task {
     return {
@@ -13,18 +13,22 @@ export function parseTask(task: RawTask): Task {
     };
 }
 
-export function taskCompleted(task: Task): boolean {
-    if (task.check_date === null) {
-        return false;
-    }
-    if (task.reset_cron === null) {
-        return true;
+export function taskNextReset(task: Task): Date | null {
+    if (task.check_date === null || task.reset_cron === null) {
+        return null;
     }
     try {
         const interval = CronExpressionParser.parse(task.reset_cron, {currentDate: task.check_date});
-        const nextDate = interval.next();
-        return nextDate.getTime() > (new Date()).getTime();
+        return interval.next().toDate();
     } catch {
-        return false;
+        return null;
     }
 }
+
+export function taskCompleted(task: Task): boolean {
+    const nextReset = taskNextReset(task);
+    if (nextReset === null) {
+        return task.check_date !== null;
+    }
+    return nextReset.getTime() > (new Date()).getTime();
+}