From 4773ce3dd79be0ba516e17e3abecb698406f3163 Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Sun, 1 Sep 2024 16:43:17 -0300
Subject: [PATCH 01/19] Update npm dependencies

---
 package-lock.json | 32 ++++++++++++++++----------------
 package.json      |  6 +++---
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 10d15d8..fe2ef49 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@playwright/test": "^1.46.1",
         "@stylistic/eslint-plugin": "^2.7.2",
         "@supabase/supabase-js": "^2.45.3",
-        "@types/node": "^22.5.1",
+        "@types/node": "^22.5.2",
         "@vitejs/plugin-vue": "^5.1.3",
         "@vitest/coverage-v8": "^2.0.5",
         "@vue/test-utils": "^2.4.6",
@@ -26,7 +26,7 @@
         "eslint-plugin-tailwindcss": "^3.17.4",
         "google-protobuf": "^3.21.4",
         "gsap": "^3.12.5",
-        "happy-dom": "^15.7.0",
+        "happy-dom": "^15.7.3",
         "nuxt": "^3.13.0",
         "protobufjs": "^7.4.0",
         "protobufjs-cli": "^1.1.3",
@@ -34,7 +34,7 @@
         "typescript": "^5.5.4",
         "typescript-eslint": "^8.3.0",
         "vitest": "^2.0.5",
-        "vue-tsc": "^2.1.2"
+        "vue-tsc": "^2.1.4"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -3720,9 +3720,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "22.5.1",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.1.tgz",
-      "integrity": "sha512-KkHsxej0j9IW1KKOOAA/XBA0z08UFSrRQHErzEfA3Vgq57eXIMYboIlHJuYIfd+lwCQjtKqUu3UnmKbtUc9yRw==",
+      "version": "22.5.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.2.tgz",
+      "integrity": "sha512-acJsPTEqYqulZS/Yp/S3GgeE6GZ0qYODUR8aVr/DkhHQ8l9nd4j5x1/ZJy9/gHrRlFMqkO6i0I3E27Alu4jjPg==",
       "dev": true,
       "dependencies": {
         "undici-types": "~6.19.2"
@@ -4556,9 +4556,9 @@
       }
     },
     "node_modules/@vue/language-core": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.1.2.tgz",
-      "integrity": "sha512-tt2J7C+l0J/T5PaLhJ0jvCCi0JNwu3e8azWTYxW3jmAW5B/dac0g5UxmI7l59CQgCGFotqUqI3tXjfZgoWNtog==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.1.4.tgz",
+      "integrity": "sha512-i8pfAgNjTNjabBX1xRsuV6aRw2E8bdQXwd5H8m3cUkTVJju3QN5nfdoXET0uK+yXsuloNJPzo6PXFujRRPNmMA==",
       "dev": true,
       "dependencies": {
         "@volar/language-core": "~2.4.1",
@@ -8050,9 +8050,9 @@
       }
     },
     "node_modules/happy-dom": {
-      "version": "15.7.0",
-      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-15.7.0.tgz",
-      "integrity": "sha512-tH48xarc37FLrtpNWuA89xw4IS1dxNrfzI8ehiafkj3kM3JSCMknuigKv2unDPRzd2C9Hv7ZDPkqPiBCvIz2Dg==",
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-15.7.3.tgz",
+      "integrity": "sha512-w3RUaYNXFJX5LiNVhOJLK4GqCB1bFj1FvELtpon3HrN8gUpS09V0Vvm4/BBRRj7mLUE1+ch8PKv1JxEp/0IHjA==",
       "dev": true,
       "dependencies": {
         "entities": "^4.5.0",
@@ -15115,13 +15115,13 @@
       }
     },
     "node_modules/vue-tsc": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.2.tgz",
-      "integrity": "sha512-PH1BDxWT3eaPhl73elyZj6DV0nR3K4IFoUM1sGzMXXQneovVUwHQytdSyAHiED5MtEINGSHpL/Hs9ch+c/tDTw==",
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.1.4.tgz",
+      "integrity": "sha512-XTzMXQcsixAvNbpou/9qngEsZawaiJRZH3Ja+lfgRfv2A1TJv9vnZ/Kyv7XxPqv/TaZVFSnjGpM87VbWIg6yQg==",
       "dev": true,
       "dependencies": {
         "@volar/typescript": "~2.4.1",
-        "@vue/language-core": "2.1.2",
+        "@vue/language-core": "2.1.4",
         "semver": "^7.5.4"
       },
       "bin": {
diff --git a/package.json b/package.json
index 05c2cfa..12ab247 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "@playwright/test": "^1.46.1",
     "@stylistic/eslint-plugin": "^2.7.2",
     "@supabase/supabase-js": "^2.45.3",
-    "@types/node": "^22.5.1",
+    "@types/node": "^22.5.2",
     "@vitejs/plugin-vue": "^5.1.3",
     "@vitest/coverage-v8": "^2.0.5",
     "@vue/test-utils": "^2.4.6",
@@ -37,7 +37,7 @@
     "eslint-plugin-tailwindcss": "^3.17.4",
     "google-protobuf": "^3.21.4",
     "gsap": "^3.12.5",
-    "happy-dom": "^15.7.0",
+    "happy-dom": "^15.7.3",
     "nuxt": "^3.13.0",
     "protobufjs": "^7.4.0",
     "protobufjs-cli": "^1.1.3",
@@ -45,7 +45,7 @@
     "typescript": "^5.5.4",
     "typescript-eslint": "^8.3.0",
     "vitest": "^2.0.5",
-    "vue-tsc": "^2.1.2"
+    "vue-tsc": "^2.1.4"
   },
   "overrides": {
     "uri-js": "npm:uri-js-replace",

From 87443139af77f29eeac798e7c946cd318b9df54e Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Sun, 1 Sep 2024 21:43:59 -0300
Subject: [PATCH 02/19] Introduce the auth, list, and storage composables for
 the worklog tracker

---
 .../worklog-tracker/useWorklogAuth.ts         | 41 ++++++++++++
 .../worklog-tracker/useWorklogList.ts         | 39 +++++++++++
 .../worklog-tracker/useWorklogStorage.ts      | 66 +++++++++++++++++++
 3 files changed, 146 insertions(+)
 create mode 100644 components/applications/worklog-tracker/useWorklogAuth.ts
 create mode 100644 components/applications/worklog-tracker/useWorklogList.ts
 create mode 100644 components/applications/worklog-tracker/useWorklogStorage.ts

diff --git a/components/applications/worklog-tracker/useWorklogAuth.ts b/components/applications/worklog-tracker/useWorklogAuth.ts
new file mode 100644
index 0000000..135e087
--- /dev/null
+++ b/components/applications/worklog-tracker/useWorklogAuth.ts
@@ -0,0 +1,41 @@
+import { ref } from 'vue'
+
+import { useCookie } from '#app'
+
+export function useWorklogAuth() {
+  const authCookie = useCookie('authenticated')
+  const authenticated = ref(Boolean(authCookie.value))
+
+  async function login(email: string, password: string) {
+    const response = await fetch('/api/worklog-tracker/worklogs/auth', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: email,
+        password: password
+      }),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+
+    if (response.status !== 204) {
+      throw new Error('Failed to authenticate')
+    }
+
+    authenticated.value = true
+  }
+
+  async function logout() {
+    await fetch('/api/worklog-tracker/worklogs/auth', {
+      method: 'DELETE'
+    })
+
+    authenticated.value = false
+  }
+
+  return {
+    authenticated,
+    login,
+    logout
+  }
+}
diff --git a/components/applications/worklog-tracker/useWorklogList.ts b/components/applications/worklog-tracker/useWorklogList.ts
new file mode 100644
index 0000000..e6a2f67
--- /dev/null
+++ b/components/applications/worklog-tracker/useWorklogList.ts
@@ -0,0 +1,39 @@
+import { shallowReactive } from 'vue'
+
+import type { WorklogItem } from '~/composables/server/worklog-tracker/types/worklogItem'
+
+export function useWorklogList() {
+  const value = shallowReactive<WorklogItem[]>([])
+
+  function add(item: WorklogItem) {
+    value.push(item)
+  }
+
+  function update(item: WorklogItem) {
+    const index = value.findIndex(x => x.id === item.id)
+
+    if (index > -1) {
+      value[index] = item
+    }
+  }
+
+  function remove(item: WorklogItem) {
+    const index = value.indexOf(item)
+
+    if (index > -1) {
+      value.splice(index, 1)
+    }
+  }
+
+  function load(items: WorklogItem[]) {
+    value.splice(0, value.length, ...items)
+  }
+
+  return {
+    value,
+    add,
+    update,
+    load,
+    remove
+  }
+}
diff --git a/components/applications/worklog-tracker/useWorklogStorage.ts b/components/applications/worklog-tracker/useWorklogStorage.ts
new file mode 100644
index 0000000..2abae16
--- /dev/null
+++ b/components/applications/worklog-tracker/useWorklogStorage.ts
@@ -0,0 +1,66 @@
+import { WorklogItem } from '~/composables/server/worklog-tracker/types/worklogItem'
+
+const url = '/api/worklog-tracker/worklogs'
+
+function transformWorklogItem(worklogItem: WorklogItem): WorklogItem {
+  // TODO: Refactor this. It shouldn't be necessary to transform the date.
+  return new WorklogItem(
+    worklogItem.ticket,
+    worklogItem.content,
+    new Date(worklogItem.startTime),
+    new Date(worklogItem.endTime),
+    worklogItem.id,
+    worklogItem.issueId
+  )
+}
+
+export function useWorklogStorage() {
+  async function load(): Promise<WorklogItem[]> {
+    const response = await fetch(url)
+    const items = await response.json() as WorklogItem[]
+
+    return items.map(transformWorklogItem)
+  }
+
+  async function save(worklogItem: WorklogItem): Promise<WorklogItem> {
+    const response = await fetch(url, {
+      method: 'POST',
+      body: JSON.stringify(worklogItem),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+
+    const result = await response.json()
+
+    return transformWorklogItem(result)
+  }
+
+  async function remove(worklogItem: WorklogItem): Promise<void> {
+    const query = new URLSearchParams({
+      issueId: worklogItem.issueId,
+      worklogId: worklogItem.id
+    })
+
+    await fetch(`${url}?${query.toString()}`, {
+      method: 'DELETE'
+    })
+  }
+
+  async function update(worklogItem: WorklogItem): Promise<void> {
+    await fetch(url, {
+      method: 'PUT',
+      body: JSON.stringify(worklogItem),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+  }
+
+  return {
+    load,
+    save,
+    remove,
+    update
+  }
+}

From ccf3da7bc287747ee527ae242d8b16c31d426255 Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Sun, 1 Sep 2024 21:44:10 -0300
Subject: [PATCH 03/19] Introduce the `WlWorklogAuthForm` component

---
 .../worklog-tracker/WlWorklogAuthForm.vue     | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 components/applications/worklog-tracker/WlWorklogAuthForm.vue

diff --git a/components/applications/worklog-tracker/WlWorklogAuthForm.vue b/components/applications/worklog-tracker/WlWorklogAuthForm.vue
new file mode 100644
index 0000000..4dbf6c8
--- /dev/null
+++ b/components/applications/worklog-tracker/WlWorklogAuthForm.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="flex items-center justify-center">
+    <form class="flex flex-col gap-3 rounded border p-3" @submit.prevent="listeners.submit">
+      <p class="text-2xl">Sign In</p>
+      <label for="email">Email</label>
+      <WlInput id="email" v-model="email" label="Email" placeholder="example@example.com"/>
+      <label for="password">Password</label>
+      <WlInput id="password" v-model="password" label="Password" type="password" placeholder="••••••••"/>
+      <WlButton variant="primary" type="submit">Login</WlButton>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import WlButton from '~/components/experiments/forms-input/buttons/WlButton.vue'
+import WlInput from '~/components/experiments/forms-input/input/WlInput.vue'
+
+type Emits = {
+  (e: 'login', email: string, password: string): void
+}
+
+const emit = defineEmits<Emits>()
+
+const email = ref('')
+const password = ref('')
+
+const listeners = {
+  async submit(): Promise<void> {
+    emit('login', email.value, password.value)
+  }
+}
+</script>

From 4f41bf4540942620a6e707b2f67307c9aba45201 Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Sun, 1 Sep 2024 21:44:23 -0300
Subject: [PATCH 04/19] Introduce the `WlWorklogDetailsForm` component

---
 .../worklog-tracker/WlWorklogDetailsForm.vue  | 119 ++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 components/applications/worklog-tracker/WlWorklogDetailsForm.vue

diff --git a/components/applications/worklog-tracker/WlWorklogDetailsForm.vue b/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
new file mode 100644
index 0000000..36cdc4b
--- /dev/null
+++ b/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="flex flex-col gap-3 rounded border p-3">
+    <div class="flex gap-3">
+      <WlInput v-model="ticket" placeholder="DEV-XXX" class="w-40"/>
+      <div class="flex grow flex-col gap-1">
+        <textarea
+            v-model="content"
+            class="max-h-40 min-h-10 overflow-y-hidden rounded border bg-slate-200 px-3 py-2 outline-0 focus:border-slate-400 dark:bg-slate-800"
+            placeholder="Enter worklog here..."
+            :rows="worklogLines"
+        />
+        <div class="flex gap-1 text-xs">
+          <a href="#" class="rounded bg-slate-700 px-2 py-1" @click="listeners.testdome3849">TESTDOME-3849</a>
+          <a href="#" class="rounded bg-slate-700 px-2 py-1" @click="listeners.testdome5928">TESTDOME-5928</a>
+          <a href="#" class="rounded bg-slate-700 px-2 py-1" @click="listeners.clear">Clear</a>
+        </div>
+      </div>
+      <WlTimeInput v-model="startTime" :step="60"/>
+      <WlTimeInput v-model="endTime" :step="60"/>
+      <span class="w-16 text-center">{{ worklogDuration }}</span>
+    </div>
+    <div class="flex gap-3">
+      <template v-if="edit">
+        <WlButton variant="primary" @click="listeners.save">Save</WlButton>
+        <WlButton variant="secondary" @click="listeners.remove">Remove</WlButton>
+      </template>
+      <template v-else>
+        <WlButton variant="primary" @click="listeners.save">Save</WlButton>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import WlButton from '~/components/experiments/forms-input/buttons/WlButton.vue'
+import WlInput from '~/components/experiments/forms-input/input/WlInput.vue'
+import WlTimeInput from '~/components/experiments/forms-input/input/WlTimeInput.vue'
+import type { WorklogItem } from '~/composables/server/worklog-tracker/types/worklogItem'
+import { useWorklogDuration } from '~/composables/server/worklog-tracker/useWorklogDuration'
+import { useWorklogNow } from '~/composables/server/worklog-tracker/useWorklogNow'
+
+type Props = {
+  item: WorklogItem;
+  edit: boolean;
+}
+
+type Emits = {
+  (e: 'save', item: WorklogItem): void;
+  (e: 'remove'): void;
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const worklogNow = useWorklogNow()
+
+const ticket = ref('')
+const content = ref('')
+const startTime = ref(worklogNow.get())
+const endTime = ref(worklogNow.get())
+
+const worklogLines = computed(() => props.item.content.split('\n').length)
+const worklogDuration = useWorklogDuration(() => [startTime.value, endTime.value])
+
+const listeners = {
+  save(): void {
+    if (!methods.validateSave()) {
+      return
+    }
+
+    emit('save', props.item)
+  },
+  remove(): void {
+    emit('remove')
+  },
+  testdome3849(): void {
+    ticket.value = 'TESTDOME-3849'
+    content.value = '- Check multiple mentions from Jira, Docs, and Gmail\n- Plan tasks for the day'
+  },
+  testdome5928(): void {
+    ticket.value = 'TESTDOME-5928'
+    content.value = 'Platform team daily meeting'
+  },
+  clear(): void {
+    ticket.value = ''
+    content.value = ''
+  }
+}
+
+const methods = {
+  validateSave(): boolean {
+    const errors: string[] = []
+
+    if (props.item.ticket.trim().length === 0) {
+      errors.push('Ticket is required')
+    }
+
+    if (props.item.content.trim().length === 0) {
+      errors.push('Content is required')
+    }
+
+    if (props.item.startTime.getTime() === props.item.endTime.getTime()) {
+      errors.push('Start time and end time must be different')
+    }
+
+    if (props.item.startTime.getTime() > props.item.endTime.getTime()) {
+      errors.push('Start time must be before end time')
+    }
+
+    if (errors.length > 0) {
+      alert(errors.join('\n'))
+    }
+
+    return errors.length === 0
+  }
+}
+</script>

From f4ac203d5bf2962a01d330915b3f63453831d6a7 Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Sun, 1 Sep 2024 21:45:06 -0300
Subject: [PATCH 05/19] Introduce the `WlWorklogList*` components

---
 .../worklog-tracker/WlWorklogList.vue         | 35 ++++++++++++++
 .../worklog-tracker/WlWorklogListItem.vue     | 47 +++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 components/applications/worklog-tracker/WlWorklogList.vue
 create mode 100644 components/applications/worklog-tracker/WlWorklogListItem.vue

diff --git a/components/applications/worklog-tracker/WlWorklogList.vue b/components/applications/worklog-tracker/WlWorklogList.vue
new file mode 100644
index 0000000..c646f09
--- /dev/null
+++ b/components/applications/worklog-tracker/WlWorklogList.vue
@@ -0,0 +1,35 @@
+<template>
+  <template v-if="props.items.length > 0">
+    <p class="text-right">{{ totalDuration }}</p>
+    <ul>
+      <WlWorklogListItem v-for="item in props.items" :key="item.id" :item="item" @click="listeners.click(item)"/>
+    </ul>
+  </template>
+  <p v-else>No worklogs found.</p>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import WlWorklogListItem from '~/components/applications/worklog-tracker/WlWorklogListItem.vue'
+import type { WorklogItem } from '~/composables/server/worklog-tracker/types/worklogItem'
+
+type Props = {
+  items: WorklogItem[]
+}
+
+type Emits = {
+  (e: 'select', item: WorklogItem): void
+}
+
+const props = defineProps<Props>()
+const emits = defineEmits<Emits>()
+
+const totalDuration = computed(() => '0 min')
+
+const listeners = {
+  click(item: WorklogItem): void {
+    emits('select', item)
+  }
+}
+</script>
diff --git a/components/applications/worklog-tracker/WlWorklogListItem.vue b/components/applications/worklog-tracker/WlWorklogListItem.vue
new file mode 100644
index 0000000..a816d7b
--- /dev/null
+++ b/components/applications/worklog-tracker/WlWorklogListItem.vue
@@ -0,0 +1,47 @@
+<template>
+  <li
+class="flex cursor-pointer border-x border-t first:rounded-t last:rounded-b last:border-b"
+      @click="listeners.click"
+  >
+    <span class="border-r p-3">{{ props.item.ticket }}</span>
+    <span class="grow whitespace-pre-wrap border-r p-3">{{ props.item.content }}</span>
+    <span class="border-r p-3">{{ formattedDates.start }} - {{ formattedDates.end }}</span>
+    <span class="p-3">{{ duration }}</span>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import type { WorklogItem } from '~/composables/server/worklog-tracker/types/worklogItem'
+import { useWorklogDuration } from '~/composables/server/worklog-tracker/useWorklogDuration'
+
+type Props = {
+  item: WorklogItem
+}
+
+type Emits = {
+  (e: 'click'): void
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<Emits>()
+
+const formattedDates = computed(() => ({
+  start: props.item.startTime.toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit'
+  }),
+  end: props.item.endTime.toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}))
+const duration = useWorklogDuration(() => [props.item.startTime, props.item.endTime])
+
+const listeners = {
+  click(): void {
+    emit('click')
+  }
+}
+</script>

From ea67927a253c370de5e2fbc7be392aca6ac520d2 Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Sun, 1 Sep 2024 21:45:20 -0300
Subject: [PATCH 06/19] Introduce the `WlWorklogTracker` component (entry
 point)

---
 .../worklog-tracker/WlWorklogTracker.vue      | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 components/applications/worklog-tracker/WlWorklogTracker.vue

diff --git a/components/applications/worklog-tracker/WlWorklogTracker.vue b/components/applications/worklog-tracker/WlWorklogTracker.vue
new file mode 100644
index 0000000..232db77
--- /dev/null
+++ b/components/applications/worklog-tracker/WlWorklogTracker.vue
@@ -0,0 +1,78 @@
+<template>
+  <template v-if="worklogAuth.authenticated.value">
+    <div class="flex justify-between">
+      <h1 class="text-2xl">Worklog Tracker</h1>
+      <a href="#" class="underline" @click="listeners.logout">Logout</a>
+    </div>
+    <WlWorklogDetailsForm
+        :item="item"
+        :edit="isEditing"
+        @save="listeners.save"
+        @remove="listeners.remove"
+    />
+    <WlWorklogList :items="worklogList.value" @select="listeners.select"/>
+  </template>
+  <WlWorklogAuthForm v-else @login="listeners.login"/>
+</template>
+
+<script setup lang="ts">
+import { useHead } from '@vueuse/head'
+import { onMounted, ref } from 'vue'
+
+import { useWorklogAuth } from '~/components/applications/worklog-tracker/useWorklogAuth'
+import { useWorklogList } from '~/components/applications/worklog-tracker/useWorklogList'
+import { useWorklogStorage } from '~/components/applications/worklog-tracker/useWorklogStorage'
+import WlWorklogAuthForm from '~/components/applications/worklog-tracker/WlWorklogAuthForm.vue'
+import WlWorklogDetailsForm from '~/components/applications/worklog-tracker/WlWorklogDetailsForm.vue'
+import WlWorklogList from '~/components/applications/worklog-tracker/WlWorklogList.vue'
+import { WorklogItem } from '~/composables/server/worklog-tracker/types/worklogItem'
+
+useHead({
+  title: 'Worklog Tracker'
+})
+
+const worklogAuth = useWorklogAuth()
+const worklogList = useWorklogList()
+const worklogStorage = useWorklogStorage()
+
+onMounted(async () => {
+  const items = await worklogStorage.load()
+  worklogList.load(items)
+
+  if (worklogList.value.length > 0) {
+    item.value.startTime = worklogList.value[worklogList.value.length - 1].endTime
+  }
+})
+
+const item = ref(new WorklogItem())
+const isEditing = ref(false)
+
+const listeners = {
+  async save(newItem: WorklogItem): Promise<void> {
+    if (isEditing.value) {
+      await worklogStorage.update(newItem)
+      worklogList.update(newItem)
+    } else {
+      const savedItem = await worklogStorage.save(newItem)
+      worklogList.add(savedItem)
+    }
+
+    item.value.startTime = worklogList.value[worklogList.value.length - 1].endTime
+    isEditing.value = false
+  },
+  async remove(): Promise<void> {
+    await worklogStorage.remove(item.value)
+    worklogList.remove(item.value)
+  },
+  select(selectedItem: WorklogItem): void {
+    item.value = selectedItem
+    isEditing.value = true
+  },
+  login(email: string, password: string): void {
+    worklogAuth.login(email, password)
+  },
+  logout(): void {
+    worklogAuth.logout()
+  }
+}
+</script>

From 58c09a86c2c0ac52388a424eac87b448e77537fa Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Sun, 1 Sep 2024 21:55:06 -0300
Subject: [PATCH 07/19] Introduce the `WorklogItem` class

---
 .../worklog-tracker/types/worklogItem.ts      | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 composables/server/worklog-tracker/types/worklogItem.ts

diff --git a/composables/server/worklog-tracker/types/worklogItem.ts b/composables/server/worklog-tracker/types/worklogItem.ts
new file mode 100644
index 0000000..4b46ba9
--- /dev/null
+++ b/composables/server/worklog-tracker/types/worklogItem.ts
@@ -0,0 +1,28 @@
+import { useWorklogNow } from '~/composables/server/worklog-tracker/useWorklogNow'
+
+const worklogNow = useWorklogNow()
+
+export class WorklogItem {
+  public ticket: string
+  public content: string
+  public startTime: Date
+  public endTime: Date
+  public id: string
+  public issueId: string
+
+  constructor(
+    ticket = '',
+    content = '',
+    startTime = worklogNow.get(),
+    endTime = worklogNow.get(),
+    workogId = '',
+    issueId = ''
+  ) {
+    this.ticket = ticket
+    this.content = content
+    this.startTime = startTime
+    this.endTime = endTime
+    this.id = workogId
+    this.issueId = issueId
+  }
+}

From 384baceff6697a66f11b58aee407b480ac82498c Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Sun, 1 Sep 2024 21:56:34 -0300
Subject: [PATCH 08/19] Introduce the auth, duration, now, storage, and
 Supabase server composables

---
 .../server/worklog-tracker/useWorklogAuth.ts  |  38 ++++
 .../worklog-tracker/useWorklogDuration.ts     |  19 ++
 .../server/worklog-tracker/useWorklogNow.ts   |  13 ++
 .../worklog-tracker/useWorklogStorage.ts      | 203 ++++++++++++++++++
 .../useWorklogSupabaseClient.ts               |  19 ++
 5 files changed, 292 insertions(+)
 create mode 100644 composables/server/worklog-tracker/useWorklogAuth.ts
 create mode 100644 composables/server/worklog-tracker/useWorklogDuration.ts
 create mode 100644 composables/server/worklog-tracker/useWorklogNow.ts
 create mode 100644 composables/server/worklog-tracker/useWorklogStorage.ts
 create mode 100644 composables/server/worklog-tracker/useWorklogSupabaseClient.ts

diff --git a/composables/server/worklog-tracker/useWorklogAuth.ts b/composables/server/worklog-tracker/useWorklogAuth.ts
new file mode 100644
index 0000000..5cf776c
--- /dev/null
+++ b/composables/server/worklog-tracker/useWorklogAuth.ts
@@ -0,0 +1,38 @@
+import { deleteCookie, getCookie, type H3Event, setResponseStatus } from 'h3'
+import { setCookie } from 'h3'
+
+const millisecondsPerHour = 1000 * 60 * 60
+
+export function useWorklogAuth() {
+  function setCredentials(event: H3Event, credentialsId: string) {
+    setCookie(event, 'credentials_id', credentialsId, {
+      httpOnly: true,
+      secure: true,
+      expires: new Date(Date.now() + (millisecondsPerHour * 8)),
+    })
+    setCookie(event, 'authenticated', 'true', { secure: true })
+  }
+
+  function removeCredentials(event: H3Event) {
+    deleteCookie(event, 'credentials_id', { secure: true })
+    deleteCookie(event, 'authenticated', { secure: true })
+  }
+
+  function getCredentials(event: H3Event): string {
+    const credentialsId = getCookie(event, 'credentials_id')
+
+    if (!credentialsId) {
+      setResponseStatus(event, 401)
+
+      throw new Error('Authentication required')
+    }
+
+    return credentialsId
+  }
+
+  return {
+    setCredentials,
+    removeCredentials,
+    getCredentials
+  }
+}
diff --git a/composables/server/worklog-tracker/useWorklogDuration.ts b/composables/server/worklog-tracker/useWorklogDuration.ts
new file mode 100644
index 0000000..23960a2
--- /dev/null
+++ b/composables/server/worklog-tracker/useWorklogDuration.ts
@@ -0,0 +1,19 @@
+import type { ComputedGetter } from 'vue'
+import { computed } from 'vue'
+
+export function useWorklogDuration(dates: ComputedGetter<[Date, Date]>) {
+  return computed(() => {
+    const [start, end] = dates()
+
+    const durationMinutes = Math.round((end.getTime() - start.getTime()) / 1000 / 60)
+
+    if (durationMinutes < 60) {
+      return `${durationMinutes} min`
+    }
+
+    const hours = Math.floor(durationMinutes / 60)
+    const minutes = durationMinutes % 60
+
+    return `${hours} hrs ${minutes} min`
+  })
+}
diff --git a/composables/server/worklog-tracker/useWorklogNow.ts b/composables/server/worklog-tracker/useWorklogNow.ts
new file mode 100644
index 0000000..23584c0
--- /dev/null
+++ b/composables/server/worklog-tracker/useWorklogNow.ts
@@ -0,0 +1,13 @@
+export function useWorklogNow() {
+  function get() {
+    const now = new Date()
+
+    now.setSeconds(0)
+
+    return now
+  }
+
+  return {
+    get
+  }
+}
diff --git a/composables/server/worklog-tracker/useWorklogStorage.ts b/composables/server/worklog-tracker/useWorklogStorage.ts
new file mode 100644
index 0000000..b218ce9
--- /dev/null
+++ b/composables/server/worklog-tracker/useWorklogStorage.ts
@@ -0,0 +1,203 @@
+import { WorklogItem } from '~/composables/server/worklog-tracker/types/worklogItem'
+import { useWorklogSupabaseClient } from '~/composables/server/worklog-tracker/useWorklogSupabaseClient'
+
+function getWorklogUrl(ticket: string): string {
+  return 'https://gemmeus.atlassian.net/rest/api/3/issue/' + ticket + '/worklog'
+}
+
+const supabaseClient = useWorklogSupabaseClient()
+
+export function useWorklogStorage() {
+  async function load(credentialsId: string, date: Date): Promise<WorklogItem[]> {
+    const startOfDay = new Date(date.setHours(0, 0, 0, 0))
+    const endOfDay = new Date(date.setHours(24, 0, 0, 0))
+
+    const result = await supabaseClient
+      .from('worklogs')
+      .select('*')
+      .eq('credential_id', credentialsId)
+      .filter('started_at', 'gte', startOfDay.toISOString())
+      .filter('started_at', 'lt', endOfDay.toISOString())
+
+    if (!result.data || result.data.length === 0) {
+      return []
+    }
+
+    return result.data.map(x => new WorklogItem(
+      x.ticket,
+      x.content,
+      new Date(x.started_at),
+      new Date(x.ended_at),
+      x.id,
+      x.issue_id
+    ))
+  }
+
+  async function save(worklogItem: WorklogItem, credentialsId: string): Promise<WorklogItem> {
+    const {
+      email,
+      password
+    } = await getCredentials(credentialsId)
+
+    const startTime = new Date(worklogItem.startTime)
+    const endTime = new Date(worklogItem.endTime)
+
+    const startTimeString = startTime.toISOString().replace('Z', '-0000')
+    const timeSpentSeconds = Math.floor((endTime.getTime() - startTime.getTime()) / 1000)
+    const payload = {
+      'comment': {
+        'content': [
+          {
+            'content': [
+              {
+                'text': worklogItem.content,
+                'type': 'text'
+              }
+            ],
+            'type': 'paragraph'
+          }
+        ],
+        'type': 'doc',
+        'version': 1
+      },
+      'started': startTimeString,
+      'timeSpentSeconds': timeSpentSeconds
+    }
+
+    const response = await fetch(getWorklogUrl(worklogItem.ticket), {
+      method: 'POST',
+      body: JSON.stringify(payload),
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Basic ${btoa(email + ':' + password)}`
+      }
+    })
+
+    if (response.status !== 201) {
+      throw new Error('Failed to create worklog')
+    }
+
+    const jiraResponseBody = await response.json() as { id: string; issueId: string; }
+
+    const result = await supabaseClient.from('worklogs').insert({
+      id: jiraResponseBody.id,
+      issue_id: jiraResponseBody.issueId,
+      ticket: worklogItem.ticket,
+      content: worklogItem.content,
+      started_at: worklogItem.startTime,
+      ended_at: worklogItem.endTime,
+      credential_id: credentialsId
+    })
+
+    console.log(result)
+
+    return new WorklogItem(
+      worklogItem.ticket,
+      worklogItem.content,
+      worklogItem.startTime,
+      worklogItem.endTime,
+      jiraResponseBody.id,
+      jiraResponseBody.issueId
+    )
+  }
+
+  async function remove(issueId: string, worklogId: string, credentialsId: string): Promise<void> {
+    const {
+      email,
+      password
+    } = await getCredentials(credentialsId)
+
+    const response = await fetch(getWorklogUrl(issueId) + '/' + worklogId + '?adjustEstimate=leave', {
+      method: 'DELETE',
+      headers: {
+        'Authorization': `Basic ${btoa(email + ':' + password)}`
+      }
+    })
+
+    if (response.status !== 204) {
+      throw new Error('Failed to remove worklog')
+    }
+
+    await supabaseClient.from('worklogs').delete().eq('id', worklogId)
+  }
+
+  async function update(worklogItem: WorklogItem, credentialsId: string): Promise<void> {
+    const {
+      email,
+      password
+    } = await getCredentials(credentialsId)
+
+    const startTime = new Date(worklogItem.startTime)
+    const endTime = new Date(worklogItem.endTime)
+
+    const startTimeString = startTime.toISOString().replace('Z', '-0000')
+    const timeSpentSeconds = Math.floor((endTime.getTime() - startTime.getTime()) / 1000)
+
+    const payload = {
+      'comment': {
+        'content': [
+          {
+            'content': [
+              {
+                'text': worklogItem.content,
+                'type': 'text'
+              }
+            ],
+            'type': 'paragraph'
+          }
+        ],
+        'type': 'doc',
+        'version': 1
+      },
+      'started': startTimeString,
+      'timeSpentSeconds': timeSpentSeconds
+    }
+
+    const response = await fetch(getWorklogUrl(worklogItem.ticket) + '/' + worklogItem.id, {
+      method: 'PUT',
+      body: JSON.stringify(payload),
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Basic ${btoa(email + ':' + password)}`
+      }
+    })
+
+    if (response.status !== 200) {
+      throw new Error('Failed to update worklog')
+    }
+
+    const jiraResponseBody = await response.json() as { id: string; issueId: string; }
+
+    await supabaseClient.from('worklogs')
+      .update({
+        id: jiraResponseBody.id,
+        issue_id: jiraResponseBody.issueId,
+        ticket: worklogItem.ticket,
+        content: worklogItem.content,
+        started_at: worklogItem.startTime,
+        ended_at: worklogItem.endTime
+      })
+      .eq('id', jiraResponseBody.id)
+  }
+
+  async function getCredentials(credentialsId: string): Promise<{ email: string, password: string }> {
+    return supabaseClient
+      .from('credentials')
+      .select('email, password')
+      .eq('id', credentialsId)
+      .single()
+      .then(x => {
+        return {
+          email: x.data!.email,
+          password: x.data!.password
+        }
+      })
+  }
+
+  return {
+    save,
+    load,
+    remove,
+    update
+  }
+}
diff --git a/composables/server/worklog-tracker/useWorklogSupabaseClient.ts b/composables/server/worklog-tracker/useWorklogSupabaseClient.ts
new file mode 100644
index 0000000..d20e30d
--- /dev/null
+++ b/composables/server/worklog-tracker/useWorklogSupabaseClient.ts
@@ -0,0 +1,19 @@
+import { createClient } from '@supabase/supabase-js'
+
+import { useAppConfig } from '#imports'
+
+const config = useAppConfig()
+
+const supabaseClient = createClient(
+  config.supabase.url,
+  config.supabase.key,
+  {
+    db: {
+      schema: 'worklog_tracker'
+    }
+  }
+)
+
+export function useWorklogSupabaseClient() {
+  return supabaseClient
+}

From 8b82336cf9a17bbccabfc925f439eb62565667a3 Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Sun, 1 Sep 2024 21:56:48 -0300
Subject: [PATCH 09/19] Introduce the server authentication routes

---
 .../worklogs/auth/index.delete.ts             |  9 ++++++
 .../worklogs/auth/index.post.ts               | 30 +++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 server/api/worklog-tracker/worklogs/auth/index.delete.ts
 create mode 100644 server/api/worklog-tracker/worklogs/auth/index.post.ts

diff --git a/server/api/worklog-tracker/worklogs/auth/index.delete.ts b/server/api/worklog-tracker/worklogs/auth/index.delete.ts
new file mode 100644
index 0000000..2eb03b3
--- /dev/null
+++ b/server/api/worklog-tracker/worklogs/auth/index.delete.ts
@@ -0,0 +1,9 @@
+import { defineEventHandler } from 'h3'
+
+import { useWorklogAuth } from '~/composables/server/worklog-tracker/useWorklogAuth'
+
+export default defineEventHandler(async (event) => {
+  const auth = useWorklogAuth()
+
+  auth.removeCredentials(event)
+})
diff --git a/server/api/worklog-tracker/worklogs/auth/index.post.ts b/server/api/worklog-tracker/worklogs/auth/index.post.ts
new file mode 100644
index 0000000..ac42438
--- /dev/null
+++ b/server/api/worklog-tracker/worklogs/auth/index.post.ts
@@ -0,0 +1,30 @@
+import { defineEventHandler, readBody, setResponseStatus } from 'h3'
+
+import { useWorklogAuth } from '~/composables/server/worklog-tracker/useWorklogAuth'
+import { useWorklogSupabaseClient } from '~/composables/server/worklog-tracker/useWorklogSupabaseClient'
+
+const supabaseClient = useWorklogSupabaseClient()
+
+export default defineEventHandler(async (event) => {
+  const {
+    email,
+    password
+  } = await readBody(event, { strict: true })
+
+  const existingCredentials = await supabaseClient
+    .from('credentials')
+    .select('*')
+    .eq('email', email)
+    .eq('password', password)
+    .single()
+
+  if (!existingCredentials.data) {
+    setResponseStatus(event, 401)
+
+    return
+  }
+
+  const auth = useWorklogAuth()
+
+  auth.setCredentials(event, existingCredentials.data.id)
+})

From e31e5d16d89d2e9863557c9be4342fa5e35ccf8b Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Sun, 1 Sep 2024 21:56:58 -0300
Subject: [PATCH 10/19] Introduce the server worklog management routes

---
 .../worklog-tracker/worklogs/index.delete.ts  | 27 +++++++++++++++++++
 .../api/worklog-tracker/worklogs/index.get.ts | 22 +++++++++++++++
 .../worklog-tracker/worklogs/index.post.ts    | 16 +++++++++++
 .../api/worklog-tracker/worklogs/index.put.ts | 16 +++++++++++
 4 files changed, 81 insertions(+)
 create mode 100644 server/api/worklog-tracker/worklogs/index.delete.ts
 create mode 100644 server/api/worklog-tracker/worklogs/index.get.ts
 create mode 100644 server/api/worklog-tracker/worklogs/index.post.ts
 create mode 100644 server/api/worklog-tracker/worklogs/index.put.ts

diff --git a/server/api/worklog-tracker/worklogs/index.delete.ts b/server/api/worklog-tracker/worklogs/index.delete.ts
new file mode 100644
index 0000000..634f9d4
--- /dev/null
+++ b/server/api/worklog-tracker/worklogs/index.delete.ts
@@ -0,0 +1,27 @@
+import { defineEventHandler, getQuery } from 'h3'
+
+import { useWorklogAuth } from '~/composables/server/worklog-tracker/useWorklogAuth'
+import { useWorklogStorage } from '~/composables/server/worklog-tracker/useWorklogStorage'
+
+const storage = useWorklogStorage()
+
+export default defineEventHandler(async (event) => {
+  const query = getQuery(event)
+  const issueId = query.issueId
+  const worklogId = query.worklogId
+
+  if (typeof issueId !== 'string' || typeof worklogId !== 'string' ||
+    issueId.trim().length === 0 || worklogId.trim().length === 0) {
+    throw new Error('Invalid query')
+  }
+
+  const auth = useWorklogAuth()
+  const credentialsId = auth.getCredentials(event)
+
+  await storage.remove(issueId, worklogId, credentialsId)
+
+  return {
+    status: 204,
+    valid: query
+  }
+})
diff --git a/server/api/worklog-tracker/worklogs/index.get.ts b/server/api/worklog-tracker/worklogs/index.get.ts
new file mode 100644
index 0000000..28a2db1
--- /dev/null
+++ b/server/api/worklog-tracker/worklogs/index.get.ts
@@ -0,0 +1,22 @@
+import { defineEventHandler, getQuery } from 'h3'
+
+import { useWorklogAuth } from '~/composables/server/worklog-tracker/useWorklogAuth'
+import { useWorklogStorage } from '~/composables/server/worklog-tracker/useWorklogStorage'
+
+const storage = useWorklogStorage()
+
+export default defineEventHandler(async (event) => {
+  const auth = useWorklogAuth()
+  const credentialsId = auth.getCredentials(event)
+
+  const query = getQuery(event)
+  let rawDate = query.date?.toString()
+
+  if (!rawDate) {
+    rawDate = new Date().toISOString()
+  }
+
+  const date = new Date(new Date(rawDate).setHours(0, 0, 0, 0))
+
+  return await storage.load(credentialsId, date)
+})
diff --git a/server/api/worklog-tracker/worklogs/index.post.ts b/server/api/worklog-tracker/worklogs/index.post.ts
new file mode 100644
index 0000000..6c4d047
--- /dev/null
+++ b/server/api/worklog-tracker/worklogs/index.post.ts
@@ -0,0 +1,16 @@
+import { defineEventHandler, readBody } from 'h3'
+
+import type { WorklogItem } from '~/composables/server/worklog-tracker/types/worklogItem'
+import { useWorklogAuth } from '~/composables/server/worklog-tracker/useWorklogAuth'
+import { useWorklogStorage } from '~/composables/server/worklog-tracker/useWorklogStorage'
+
+const storage = useWorklogStorage()
+
+export default defineEventHandler(async (event) => {
+  const worklogItem = await readBody<WorklogItem>(event, { strict: true })
+
+  const auth = useWorklogAuth()
+  const credentialsId = auth.getCredentials(event)
+
+  return await storage.save(worklogItem, credentialsId)
+})
diff --git a/server/api/worklog-tracker/worklogs/index.put.ts b/server/api/worklog-tracker/worklogs/index.put.ts
new file mode 100644
index 0000000..b644ab1
--- /dev/null
+++ b/server/api/worklog-tracker/worklogs/index.put.ts
@@ -0,0 +1,16 @@
+import { defineEventHandler, readBody } from 'h3'
+
+import type { WorklogItem } from '~/composables/server/worklog-tracker/types/worklogItem'
+import { useWorklogAuth } from '~/composables/server/worklog-tracker/useWorklogAuth'
+import { useWorklogStorage } from '~/composables/server/worklog-tracker/useWorklogStorage'
+
+const storage = useWorklogStorage()
+
+export default defineEventHandler(async (event) => {
+  const worklogItem = await readBody<WorklogItem>(event, { strict: true })
+
+  const auth = useWorklogAuth()
+  const credentialsId = auth.getCredentials(event)
+
+  return await storage.update(worklogItem, credentialsId)
+})

From a2f6fefc71eb3693b236c6f21f6d0d432f677b0f Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Sun, 1 Sep 2024 21:57:08 -0300
Subject: [PATCH 11/19] Introduce the Worklog Tracker application

---
 pages/applications/index.vue                 |  5 +++++
 pages/applications/worklog-tracker/index.vue | 12 ++++++++++++
 2 files changed, 17 insertions(+)
 create mode 100644 pages/applications/worklog-tracker/index.vue

diff --git a/pages/applications/index.vue b/pages/applications/index.vue
index c3f1d77..e179cb1 100644
--- a/pages/applications/index.vue
+++ b/pages/applications/index.vue
@@ -8,6 +8,11 @@
               <span>Pomodoro</span>
             </WlCard>
           </li>
+          <li>
+            <WlCard to="/applications/worklog-tracker">
+              <span>Worklog Tracker</span>
+            </WlCard>
+          </li>
           <li>
             <WlCard>
               <span>Chat</span>
diff --git a/pages/applications/worklog-tracker/index.vue b/pages/applications/worklog-tracker/index.vue
new file mode 100644
index 0000000..87cbc12
--- /dev/null
+++ b/pages/applications/worklog-tracker/index.vue
@@ -0,0 +1,12 @@
+<template>
+  <NuxtLayout name="home">
+    <WlContainer class="flex flex-col gap-3 p-3">
+      <WlWorklogTracker/>
+    </WlContainer>
+  </NuxtLayout>
+</template>
+
+<script setup lang="ts">
+import WlWorklogTracker from '~/components/applications/worklog-tracker/WlWorklogTracker.vue'
+import WlContainer from '~/components/shared/layout/WlContainer.vue'
+</script>

From a34c3a69638db87de331c394767c223cb7a5e455 Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Sun, 1 Sep 2024 23:53:30 -0300
Subject: [PATCH 12/19] Fix validation rules in `WlWorklogDetailsForm`

---
 .../applications/worklog-tracker/WlWorklogDetailsForm.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/applications/worklog-tracker/WlWorklogDetailsForm.vue b/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
index 36cdc4b..70509ca 100644
--- a/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
+++ b/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
@@ -93,19 +93,19 @@ const methods = {
   validateSave(): boolean {
     const errors: string[] = []
 
-    if (props.item.ticket.trim().length === 0) {
+    if (ticket.value.trim().length === 0) {
       errors.push('Ticket is required')
     }
 
-    if (props.item.content.trim().length === 0) {
+    if (content.value.trim().length === 0) {
       errors.push('Content is required')
     }
 
-    if (props.item.startTime.getTime() === props.item.endTime.getTime()) {
+    if (startTime.value.getTime() === endTime.value.getTime()) {
       errors.push('Start time and end time must be different')
     }
 
-    if (props.item.startTime.getTime() > props.item.endTime.getTime()) {
+    if (startTime.value.getTime() > endTime.value.getTime()) {
       errors.push('Start time must be before end time')
     }
 

From 409059bcd7c1b70290603a746f14370f347aca98 Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Mon, 2 Sep 2024 00:01:39 -0300
Subject: [PATCH 13/19] Fix bugs in the `WlWorklogDetailsForm` component after
 changing to separate values not to change the property

---
 .../applications/worklog-tracker/WlWorklogDetailsForm.vue     | 4 ++--
 components/applications/worklog-tracker/WlWorklogTracker.vue  | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/applications/worklog-tracker/WlWorklogDetailsForm.vue b/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
index 70509ca..647d61c 100644
--- a/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
+++ b/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
@@ -37,7 +37,7 @@ import { computed, ref } from 'vue'
 import WlButton from '~/components/experiments/forms-input/buttons/WlButton.vue'
 import WlInput from '~/components/experiments/forms-input/input/WlInput.vue'
 import WlTimeInput from '~/components/experiments/forms-input/input/WlTimeInput.vue'
-import type { WorklogItem } from '~/composables/server/worklog-tracker/types/worklogItem'
+import { WorklogItem } from '~/composables/server/worklog-tracker/types/worklogItem'
 import { useWorklogDuration } from '~/composables/server/worklog-tracker/useWorklogDuration'
 import { useWorklogNow } from '~/composables/server/worklog-tracker/useWorklogNow'
 
@@ -70,7 +70,7 @@ const listeners = {
       return
     }
 
-    emit('save', props.item)
+    emit('save', new WorklogItem(ticket.value, content.value, startTime.value, endTime.value))
   },
   remove(): void {
     emit('remove')
diff --git a/components/applications/worklog-tracker/WlWorklogTracker.vue b/components/applications/worklog-tracker/WlWorklogTracker.vue
index 232db77..3a6ac00 100644
--- a/components/applications/worklog-tracker/WlWorklogTracker.vue
+++ b/components/applications/worklog-tracker/WlWorklogTracker.vue
@@ -63,6 +63,7 @@ const listeners = {
   async remove(): Promise<void> {
     await worklogStorage.remove(item.value)
     worklogList.remove(item.value)
+    isEditing.value = false
   },
   select(selectedItem: WorklogItem): void {
     item.value = selectedItem

From 69c75a52f9191a656439420f10f6917e8e90133b Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Mon, 2 Sep 2024 00:02:31 -0300
Subject: [PATCH 14/19] Fix `worklogLines` in the `WlWorklogDetailsForm`
 component

---
 .../applications/worklog-tracker/WlWorklogDetailsForm.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/applications/worklog-tracker/WlWorklogDetailsForm.vue b/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
index 647d61c..bff1fcd 100644
--- a/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
+++ b/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
@@ -61,7 +61,7 @@ const content = ref('')
 const startTime = ref(worklogNow.get())
 const endTime = ref(worklogNow.get())
 
-const worklogLines = computed(() => props.item.content.split('\n').length)
+const worklogLines = computed(() => content.value.split('\n').length)
 const worklogDuration = useWorklogDuration(() => [startTime.value, endTime.value])
 
 const listeners = {

From 74521f8a834141e578de5a936ad1abc8d6b11e23 Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Mon, 2 Sep 2024 00:05:18 -0300
Subject: [PATCH 15/19] Update values when selecting item in the
 `WlWorklogList` component

---
 .../worklog-tracker/WlWorklogDetailsForm.vue         | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/components/applications/worklog-tracker/WlWorklogDetailsForm.vue b/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
index bff1fcd..b5e7c10 100644
--- a/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
+++ b/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 
 import WlButton from '~/components/experiments/forms-input/buttons/WlButton.vue'
 import WlInput from '~/components/experiments/forms-input/input/WlInput.vue'
@@ -64,6 +64,16 @@ const endTime = ref(worklogNow.get())
 const worklogLines = computed(() => content.value.split('\n').length)
 const worklogDuration = useWorklogDuration(() => [startTime.value, endTime.value])
 
+watch(
+    () => props.item,
+    (newItem) => {
+      ticket.value = newItem.ticket
+      content.value = newItem.content
+      startTime.value = newItem.startTime
+      endTime.value = newItem.endTime
+    }
+)
+
 const listeners = {
   save(): void {
     if (!methods.validateSave()) {

From dc6546f9aa36be7458f4e1b6798552ece93f8d71 Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Mon, 2 Sep 2024 00:08:28 -0300
Subject: [PATCH 16/19] Include worklogId and issueId in in the `@save` event
 of the `WlWorklogDetailsForm` component

---
 .../applications/worklog-tracker/WlWorklogDetailsForm.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/applications/worklog-tracker/WlWorklogDetailsForm.vue b/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
index b5e7c10..601a04f 100644
--- a/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
+++ b/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
@@ -80,7 +80,7 @@ const listeners = {
       return
     }
 
-    emit('save', new WorklogItem(ticket.value, content.value, startTime.value, endTime.value))
+    emit('save', new WorklogItem(ticket.value, content.value, startTime.value, endTime.value, props.item.id, props.item.issueId))
   },
   remove(): void {
     emit('remove')

From b4faf09bcc3c4ad217557ebd39ccd20bf21be2ea Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Mon, 2 Sep 2024 00:11:50 -0300
Subject: [PATCH 17/19] Load worklogs after login in the `WlWorklogTracker`
 component

---
 .../worklog-tracker/WlWorklogTracker.vue      | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/components/applications/worklog-tracker/WlWorklogTracker.vue b/components/applications/worklog-tracker/WlWorklogTracker.vue
index 3a6ac00..ebb023d 100644
--- a/components/applications/worklog-tracker/WlWorklogTracker.vue
+++ b/components/applications/worklog-tracker/WlWorklogTracker.vue
@@ -35,14 +35,7 @@ const worklogAuth = useWorklogAuth()
 const worklogList = useWorklogList()
 const worklogStorage = useWorklogStorage()
 
-onMounted(async () => {
-  const items = await worklogStorage.load()
-  worklogList.load(items)
-
-  if (worklogList.value.length > 0) {
-    item.value.startTime = worklogList.value[worklogList.value.length - 1].endTime
-  }
-})
+onMounted(() => methods.loadWorklogs())
 
 const item = ref(new WorklogItem())
 const isEditing = ref(false)
@@ -63,17 +56,31 @@ const listeners = {
   async remove(): Promise<void> {
     await worklogStorage.remove(item.value)
     worklogList.remove(item.value)
+
+    item.value = new WorklogItem()
     isEditing.value = false
   },
   select(selectedItem: WorklogItem): void {
     item.value = selectedItem
     isEditing.value = true
   },
-  login(email: string, password: string): void {
-    worklogAuth.login(email, password)
+  async login(email: string, password: string): Promise<void> {
+    await worklogAuth.login(email, password)
+    await methods.loadWorklogs()
   },
   logout(): void {
     worklogAuth.logout()
   }
 }
+
+const methods = {
+  async loadWorklogs(): Promise<void> {
+    const items = await worklogStorage.load()
+    worklogList.load(items)
+
+    if (worklogList.value.length > 0) {
+      item.value.startTime = worklogList.value[worklogList.value.length - 1].endTime
+    }
+  }
+}
 </script>

From 665c236ce9ec3659f1d2941be260b995b16aebb1 Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Mon, 2 Sep 2024 22:13:28 -0300
Subject: [PATCH 18/19] Implement closing the edit mode in the worklog form

---
 .../worklog-tracker/WlWorklogDetailsForm.vue          |  5 +++++
 .../applications/worklog-tracker/WlWorklogTracker.vue | 11 +++++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/applications/worklog-tracker/WlWorklogDetailsForm.vue b/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
index 601a04f..eb57319 100644
--- a/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
+++ b/components/applications/worklog-tracker/WlWorklogDetailsForm.vue
@@ -23,6 +23,7 @@
       <template v-if="edit">
         <WlButton variant="primary" @click="listeners.save">Save</WlButton>
         <WlButton variant="secondary" @click="listeners.remove">Remove</WlButton>
+        <WlButton variant="secondary" @click="listeners.close">Close</WlButton>
       </template>
       <template v-else>
         <WlButton variant="primary" @click="listeners.save">Save</WlButton>
@@ -49,6 +50,7 @@ type Props = {
 type Emits = {
   (e: 'save', item: WorklogItem): void;
   (e: 'remove'): void;
+  (e: 'close'): void;
 }
 
 const props = defineProps<Props>()
@@ -85,6 +87,9 @@ const listeners = {
   remove(): void {
     emit('remove')
   },
+  close(): void {
+    emit('close')
+  },
   testdome3849(): void {
     ticket.value = 'TESTDOME-3849'
     content.value = '- Check multiple mentions from Jira, Docs, and Gmail\n- Plan tasks for the day'
diff --git a/components/applications/worklog-tracker/WlWorklogTracker.vue b/components/applications/worklog-tracker/WlWorklogTracker.vue
index ebb023d..cdf24f3 100644
--- a/components/applications/worklog-tracker/WlWorklogTracker.vue
+++ b/components/applications/worklog-tracker/WlWorklogTracker.vue
@@ -9,6 +9,7 @@
         :edit="isEditing"
         @save="listeners.save"
         @remove="listeners.remove"
+        @close="listeners.close"
     />
     <WlWorklogList :items="worklogList.value" @select="listeners.select"/>
   </template>
@@ -50,15 +51,21 @@ const listeners = {
       worklogList.add(savedItem)
     }
 
-    item.value.startTime = worklogList.value[worklogList.value.length - 1].endTime
-    isEditing.value = false
+    listeners.close()
   },
   async remove(): Promise<void> {
     await worklogStorage.remove(item.value)
     worklogList.remove(item.value)
 
+    listeners.close()
+  },
+  close(): void {
     item.value = new WorklogItem()
     isEditing.value = false
+
+    if (worklogList.value.length > 0) {
+      item.value.startTime = worklogList.value[worklogList.value.length - 1].endTime
+    }
   },
   select(selectedItem: WorklogItem): void {
     item.value = selectedItem

From 510a58b919ceb8c9835af6f3fca0f1bc1cb55efa Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Mon, 2 Sep 2024 22:35:26 -0300
Subject: [PATCH 19/19] Implement the date picker when viewing the worklogs

---
 .../worklog-tracker/WlWorklogTracker.vue        | 17 +++++++++++++++--
 .../worklog-tracker/useWorklogStorage.ts        |  8 ++++++--
 .../worklog-tracker/useWorklogToday.ts          | 13 +++++++++++++
 .../server/worklog-tracker/useWorklogStorage.ts |  5 +++--
 4 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 components/applications/worklog-tracker/useWorklogToday.ts

diff --git a/components/applications/worklog-tracker/WlWorklogTracker.vue b/components/applications/worklog-tracker/WlWorklogTracker.vue
index cdf24f3..458c316 100644
--- a/components/applications/worklog-tracker/WlWorklogTracker.vue
+++ b/components/applications/worklog-tracker/WlWorklogTracker.vue
@@ -2,7 +2,10 @@
   <template v-if="worklogAuth.authenticated.value">
     <div class="flex justify-between">
       <h1 class="text-2xl">Worklog Tracker</h1>
-      <a href="#" class="underline" @click="listeners.logout">Logout</a>
+      <div class="flex items-center gap-3">
+        <WlDateInput v-model="date" @change="listeners.updateDate"/>
+        <a href="#" class="underline" @click="listeners.logout">Logout</a>
+      </div>
     </div>
     <WlWorklogDetailsForm
         :item="item"
@@ -23,9 +26,11 @@ import { onMounted, ref } from 'vue'
 import { useWorklogAuth } from '~/components/applications/worklog-tracker/useWorklogAuth'
 import { useWorklogList } from '~/components/applications/worklog-tracker/useWorklogList'
 import { useWorklogStorage } from '~/components/applications/worklog-tracker/useWorklogStorage'
+import { useWorklogToday } from '~/components/applications/worklog-tracker/useWorklogToday'
 import WlWorklogAuthForm from '~/components/applications/worklog-tracker/WlWorklogAuthForm.vue'
 import WlWorklogDetailsForm from '~/components/applications/worklog-tracker/WlWorklogDetailsForm.vue'
 import WlWorklogList from '~/components/applications/worklog-tracker/WlWorklogList.vue'
+import WlDateInput from '~/components/experiments/forms-input/input/WlDateInput.vue'
 import { WorklogItem } from '~/composables/server/worklog-tracker/types/worklogItem'
 
 useHead({
@@ -35,14 +40,22 @@ useHead({
 const worklogAuth = useWorklogAuth()
 const worklogList = useWorklogList()
 const worklogStorage = useWorklogStorage()
+const worklogToday = useWorklogToday()
 
 onMounted(() => methods.loadWorklogs())
 
 const item = ref(new WorklogItem())
 const isEditing = ref(false)
+const date = ref(worklogToday.get())
 
 const listeners = {
+  updateDate(): void {
+    methods.loadWorklogs()
+  },
   async save(newItem: WorklogItem): Promise<void> {
+    newItem.startTime.setFullYear(date.value.getFullYear(), date.value.getMonth(), date.value.getDate())
+    newItem.endTime.setFullYear(date.value.getFullYear(), date.value.getMonth(), date.value.getDate())
+
     if (isEditing.value) {
       await worklogStorage.update(newItem)
       worklogList.update(newItem)
@@ -82,7 +95,7 @@ const listeners = {
 
 const methods = {
   async loadWorklogs(): Promise<void> {
-    const items = await worklogStorage.load()
+    const items = await worklogStorage.load(date.value)
     worklogList.load(items)
 
     if (worklogList.value.length > 0) {
diff --git a/components/applications/worklog-tracker/useWorklogStorage.ts b/components/applications/worklog-tracker/useWorklogStorage.ts
index 2abae16..659e0bb 100644
--- a/components/applications/worklog-tracker/useWorklogStorage.ts
+++ b/components/applications/worklog-tracker/useWorklogStorage.ts
@@ -15,8 +15,12 @@ function transformWorklogItem(worklogItem: WorklogItem): WorklogItem {
 }
 
 export function useWorklogStorage() {
-  async function load(): Promise<WorklogItem[]> {
-    const response = await fetch(url)
+  async function load(date: Date): Promise<WorklogItem[]> {
+    const query = new URLSearchParams({
+      date: date.toLocaleDateString()
+    })
+
+    const response = await fetch(`${url}?${query}`)
     const items = await response.json() as WorklogItem[]
 
     return items.map(transformWorklogItem)
diff --git a/components/applications/worklog-tracker/useWorklogToday.ts b/components/applications/worklog-tracker/useWorklogToday.ts
new file mode 100644
index 0000000..2888867
--- /dev/null
+++ b/components/applications/worklog-tracker/useWorklogToday.ts
@@ -0,0 +1,13 @@
+export function useWorklogToday() {
+  function get() {
+    const now = new Date()
+
+    now.setHours(0, 0, 0, 0)
+
+    return now
+  }
+
+  return {
+    get
+  }
+}
diff --git a/composables/server/worklog-tracker/useWorklogStorage.ts b/composables/server/worklog-tracker/useWorklogStorage.ts
index b218ce9..61d6a75 100644
--- a/composables/server/worklog-tracker/useWorklogStorage.ts
+++ b/composables/server/worklog-tracker/useWorklogStorage.ts
@@ -9,8 +9,9 @@ const supabaseClient = useWorklogSupabaseClient()
 
 export function useWorklogStorage() {
   async function load(credentialsId: string, date: Date): Promise<WorklogItem[]> {
-    const startOfDay = new Date(date.setHours(0, 0, 0, 0))
-    const endOfDay = new Date(date.setHours(24, 0, 0, 0))
+    const startOfDay = date
+    const endOfDay = new Date(date)
+    endOfDay.setHours(endOfDay.getHours() + 24)
 
     const result = await supabaseClient
       .from('worklogs')