better date interpretation

src/components/ManageSheets.vue

@@ -5,84 +5,51 @@
         Your <u v-if="items">{{ items.length }}</u> active archiver sheets
       </v-card-title>
 
-      <v-data-table
+      <v-data-table :headers="headers" item-key="name" no-data-text="No Active Sheets available" :items="items"
-        :headers="headers"
+        :loading="loading" items-per-page="25" hover>
-        item-key="name"
-        no-data-text="No Active Sheets available"
-        :items="items"
-        :loading="loading"
-        items-per-page="25"
-        hover
-      >
         <template v-slot:item.actions="{ item: data }">
-          <v-btn
+          <v-btn :disabled="!canArchiveNow(data.group_id) || loading" color="teal-lighten-1" size="small" icon
-            :disabled="!canArchiveNow(data.group_id) || loading"
+            class="mx-2" rounded @click="archiveSheetNow(data.id)"><v-icon>mdi-archive-outline</v-icon>
-            color="teal-lighten-1"
-            size="small"
-            icon
-            class="mx-2"
-            rounded
-            @click="archiveSheetNow(data.id)"
-            ><v-icon>mdi-archive-outline</v-icon>
 
-            <v-tooltip activator="parent" location="left"
+            <v-tooltip activator="parent" location="left">Archive Now!</v-tooltip>
-              >Archive Now!</v-tooltip
-            >
           </v-btn>
-          <v-btn
+          <v-btn color="green-lighten-1" size="small" icon class="mx-2" rounded
-            color="green-lighten-1"
+            :href="`https://docs.google.com/spreadsheets/d/${data.id}`" :disabled="loading"
-            size="small"
+            target="_blank"><v-icon>mdi-open-in-new</v-icon>
-            icon
+            <v-tooltip activator="parent" location="left">Open in new tab</v-tooltip>
-            class="mx-2"
-            rounded
-            :href="`https://docs.google.com/spreadsheets/d/${data.id}`"
-            :disabled="loading"
-            target="_blank"
-            ><v-icon>mdi-open-in-new</v-icon>
-            <v-tooltip activator="parent" location="left"
-              >Open in new tab</v-tooltip
-            >
           </v-btn>
-          <v-btn
+          <v-btn color="red-lighten-2" size="small" icon class="mx-2" :disabled="loading" rounded
-            color="red-lighten-2"
+            @click="removeSheet(data.id)"><v-icon>mdi-stop</v-icon>
-            size="small"
+            <v-tooltip activator="parent" location="left">Stop archiving, does not delete the spreadsheet
-            icon
+              itself.</v-tooltip>
-            class="mx-2"
-            :disabled="loading"
-            rounded
-            @click="removeSheet(data.id)"
-            ><v-icon>mdi-stop</v-icon>
-            <v-tooltip activator="parent" location="left"
-              >Stop archiving, does not delete the spreadsheet
-              itself.</v-tooltip
-            >
           </v-btn>
         </template>
         <template v-slot:item.name="{ item: data }">
           <strong :title="data.id">{{ data.name }}</strong>
         </template>
         <template v-slot:item.frequency="{ item: data }">
-          <v-chip
+          <v-chip :color="data.frequency == 'daily' ? 'teal-darken-3' : 'orange-darken-3'
-            :color="
+            " class="bg-white" prepend-icon="mdi-archive-clock-outline" variant="outlined">
-              data.frequency == 'daily' ? 'teal-darken-3' : 'orange-darken-3'
-            "
-            class="bg-white"
-            prepend-icon="mdi-archive-clock-outline"
-            variant="outlined"
-          >
             {{ data.frequency }}
           </v-chip>
         </template>
+        <template v-slot:item.created_at="{ item }">
+          <time :datetime="item?.created_at" :title="$moment(item?.created_at).format(
+            `MMMM Do YYYY, k:mm:ss`
+          )
+            ">{{ $moment(item?.created_at).fromNow() }}</time>
+        </template>
+        <template v-slot:item.last_url_archived_at="{ item }">
+          <time :datetime="item?.last_url_archived_at" :title="$moment(item?.last_url_archived_at).format(
+            `MMMM Do YYYY, k:mm:ss`
+          )
+            ">{{ $moment(item?.last_url_archived_at).fromNow() }}</time>
+        </template>
       </v-data-table>
     </v-card>
   </v-container>
 
-  <SnackBar
+  <SnackBar :message="snackbarMessage" :show="snackbar" :color="snackbarColor" @update:show="snackbar = $event" />
-    :message="snackbarMessage"
-    :show="snackbar"
-    :color="snackbarColor"
-    @update:show="snackbar = $event"
-  />
 </template>
 
 <script>