fix(ui): folder card does not show formatted created at and updated at dates

aminnausin · aminnausin · commit cc547c6df85d · 2025-12-10T19:29:44.000-05:00
diff --git a/resources/js/components/cards/FolderCard.vue b/resources/js/components/cards/FolderCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { FolderResource } from '@/types/resources';
 
-import { formatFileSize, handleStorageURL } from '@/service/util';
+import { formatFileSize, handleStorageURL, toFormattedDate } from '@/service/util';
 import { useAuthStore } from '@/stores/AuthStore';
 import { useAppStore } from '@/stores/AppStore';
 import { storeToRefs } from 'pinia';
@@ -75,9 +75,9 @@ const mediaType = computed(() => {
                     <section class="flex w-full items-center justify-between gap-4">
                         <h3
                             class="w-full truncate text-gray-900 dark:text-white"
-                            :title="`${data.id}: ${props.data.series?.title ?? props.data.name}\nDate: ${props.data.created_at}`"
+                            :title="`${data.id}: ${props.data.series?.title || props.data.name}\nCreated: ${toFormattedDate(props.data.created_at || '')}\nUpdated: ${toFormattedDate(props.data.updated_at || '')}\nScanned: ${toFormattedDate(props.data.scanned_at || '')}`"
                         >
-                            {{ props.data.series?.title ?? props.data.name }}
+                            {{ props.data.series?.title || props.data.name }}
                         </h3>
                         <div class="flex justify-end gap-1">
                             <ButtonCorner
diff --git a/resources/js/service/util.ts b/resources/js/service/util.ts
@@ -44,7 +44,7 @@ export function toTimeSpan(rawDate: Date | string, timeZoneName = ' EST', short?
 }
 
 export function toFormattedDate(
-    rawDate: Date,
+    rawDate: Date | string,
     toUpperCase: boolean = true,
     format: Intl.DateTimeFormatOptions = {
         year: 'numeric',
@@ -55,6 +55,11 @@ export function toFormattedDate(
         hour12: true,
     },
 ) {
+    if (!rawDate) return 'Unknown';
+    if (typeof rawDate === 'string') {
+        rawDate = new Date(rawDate);
+    }
+
     const result = rawDate
         .toLocaleString(
             ['en-CA'],
