refactor: updated days left in challenge component

Added days and hours, and fixed time zome issue

src/components/CurrentSavingChallenge.vue

 <script setup>
-import { ref } from 'vue'
+import {onBeforeMount, ref} from 'vue'
 import {Card} from "@/components/ui/card/index.js";
 
 /**
  * The category of the saving challenge
- * @type {Ref<UnwrapRef<string>>}
  */
 const category = ref('Kaffe')
 /**
  * The amount of money the user wants to spend
- * @type {Ref<UnwrapRef<number>>}
  */
 const amount = ref(200)
 /**
  * The goal amount the user wants to spend
- * @type {Ref<UnwrapRef<number>>}
  */
 const goal = ref(400)
 /**
  * The deadline for the saving challenge
- * @type {Ref<UnwrapRef<string>>}
  */
-const deadline = ref('2024-04-30')
+const deadline = ref('2024-05-29')
+
+/**
+ * The days left for the saving challenge
+ */
+const daysLeft = ref(0)
 /**
- * The number of days left until the deadline
- * @type {Ref<UnwrapRef<number>>}
+ * The hours left for the saving challenge
  */
-const daysLeft = updateDaysLeft()
+const hoursLeft = ref(0)
 
 /**
- * Updates the days left until the given deadline
- * @returns {number} The number of days left
+ * Set the time remaining for the saving challenge
  */
-function updateDaysLeft() {
-  //TODO: Feilhåndtering ugyldig dato?
-  const today = new Date()
-  const deadlineDate = new Date(deadline.value)
-  const diffTime = deadlineDate - today
-  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
-  return diffDays
+function setTimeRemaining(){
+  const endDate = new Date(deadline.value);
+  const offset = endDate.getTimezoneOffset();
+  const now = new Date();
+  now.setMinutes(now.getMinutes() - offset);
+  const total = endDate - now;
+
+  if (total < 0) {
+    daysLeft.value = 0;
+    hoursLeft.value = 0;
+    return;
+  }
+
+  const hours = Math.floor( (total/(1000*60*60)) % 24 );
+  const days = Math.floor( total/(1000*60*60*24) );
+  hoursLeft.value = hours;
+  daysLeft.value = days;
 }
 
+/**
+ * Set the time remaining when the component is mounted
+ */
+onBeforeMount(() => {
+  setTimeRemaining()
+})
 
 </script>
 
@@ -48,7 +63,7 @@ function updateDaysLeft() {
   <card>
     <div class="flex justify-between px-2.5">
       <p class="text-left">{{category}} </p>
-      <p class="text-right" @reset="updateDaysLeft">Innen {{daysLeft}} dager</p>
+      <p class="text-right" @reset="setTimeRemaining">Innen {{ daysLeft }}d {{ hoursLeft }}t</p>
     </div>
     <div class="flex justify-center">
       <p class="">Bruke mindre enn: </p>