Parse timestamps using day.js

package.json

@@ -15,6 +15,7 @@
     "@tauri-apps/plugin-shell": "^2",
     "@tauri-apps/plugin-sql": "~2",
     "clusterize.js": "^1.0.0",
+    "dayjs": "^1.11.13",
     "vue": "^3.3.4",
     "vue-router": "4"
   },

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       clusterize.js:
         specifier: ^1.0.0
         version: 1.0.0
+      dayjs:
+        specifier: ^1.11.13
+        version: 1.11.13
       vue:
         specifier: ^3.3.4
         version: 3.5.12(typescript@5.6.3)
@@ -581,6 +584,9 @@ packages:
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  dayjs@1.11.13:
+    resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
+
   de-indent@1.0.2:
     resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
 
@@ -1429,6 +1435,8 @@ snapshots:
 
   csstype@3.1.3: {}
 
+  dayjs@1.11.13: {}
+
   de-indent@1.0.2: {}
 
   didyoumean@1.2.2: {}

src/pages/GeneralLedgerView.vue

@@ -54,6 +54,8 @@
 <script setup lang="ts">
 	import Clusterize from 'clusterize.js';
 	
+	import dayjs from 'dayjs';
+	
 	import { onUnmounted, ref } from 'vue';
 	
 	import { asCost } from '../amounts.ts';
@@ -86,7 +88,7 @@
 		for (const transaction of transactions) {
 			rows.push(
 				`<tr class="border-t border-gray-300">
-					<td class="py-0.5 pr-1 text-gray-900 lg:w-[12ex]">${ transaction.dt.split(' ')[0] }</td>
+					<td class="py-0.5 pr-1 text-gray-900 lg:w-[12ex]">${ dayjs(transaction.dt).format('YYYY-MM-DD') }</td>
 					<td class="py-0.5 px-1 text-gray-900" colspan="3">${ transaction.description }</td>
 					<td></td>
 					<td></td>

src/pages/TransactionsWithCommodityView.vue

@@ -41,6 +41,8 @@
 <script setup lang="ts">
 	import Clusterize from 'clusterize.js';
 	
+	import dayjs from 'dayjs';
+	
 	import { onMounted, onUnmounted, watch } from 'vue';
 	import { useRoute } from 'vue-router';
 	
@@ -78,7 +80,7 @@
 		for (const transaction of transactions) {
 			rows.push(
 				`<tr class="border-t border-gray-300">
-					<td class="py-0.5 pr-1 text-gray-900 lg:w-[12ex]">${ transaction.dt.split(' ')[0] }</td>
+					<td class="py-0.5 pr-1 text-gray-900 lg:w-[12ex]">${ dayjs(transaction.dt).format('YYYY-MM-DD') }</td>
 					<td class="py-0.5 px-1 text-gray-900">
 						${ transaction.description }
 						<!-- TODO: Edit button -->

src/pages/TransactionsWithoutCommodityView.vue

@@ -42,6 +42,8 @@
 <script setup lang="ts">
 	import Clusterize from 'clusterize.js';
 	
+	import dayjs from 'dayjs';
+	
 	import { onMounted, onUnmounted, watch } from 'vue';
 	import { useRoute } from 'vue-router';
 	
@@ -73,7 +75,7 @@
 				
 				rows.push(
 					`<tr class="border-t border-gray-300">
-						<td class="py-0.5 pr-1 text-gray-900 lg:w-[12ex]">${ transaction.dt.split(' ')[0] }</td>
+						<td class="py-0.5 pr-1 text-gray-900 lg:w-[12ex]">${ dayjs(transaction.dt).format('YYYY-MM-DD') }</td>
 						<td class="py-0.5 px-1 text-gray-900">
 							${ transaction.description }
 							<!-- TODO: Edit button -->
@@ -89,7 +91,7 @@
 				// Complex transaction
 				rows.push(
 					`<tr class="border-t border-gray-300">
-						<td class="py-0.5 pr-1 text-gray-900 lg:w-[12ex]">${ transaction.dt.split(' ')[0] }</td>
+						<td class="py-0.5 pr-1 text-gray-900 lg:w-[12ex]">${ dayjs(transaction.dt).format('YYYY-MM-DD') }</td>
 						<td colspan="2" class="py-0.5 px-1 text-gray-900">
 							${ transaction.description }
 							<!-- TODO: Edit button -->