Standardized date formatting across components by introducing buildDate utility:

- Replaced duplicate date-handling logic in multiple components (e.g., `CountryProperties.vue`, `Rates.vue`, `ErrorLog.vue`) with centralized `buildDate` method from `common.js`.
- Improved date consistency and readability by adopting `YYYY/MM/DD` format with optional time support.

src/frontend/src/common.js

@@ -161,4 +161,19 @@ export class UrlSafeBase64 {
     }
 }
 
+export const buildDate = (date, time) => {
+    if (!date) return 'unkown';
+
+    const year = date.getFullYear();
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const day = date.getDate().toString().padStart(2, '0');
+
+    if (!time) return `${year}/${month}/${day}`;
+    const hours = time.getHours().toString().padStart(2, '0');
+    const minutes = time.getMinutes().toString().padStart(2, '0');
+    const seconds = time.getSeconds().toString().padStart(2, '0');
+    return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
+
+}
+
 

src/frontend/src/components/layout/bulkoperation/BulkOperation.vue

@@ -6,12 +6,12 @@
       </div>
       <div class="bulk-operation-info">
         <div>{{ operation.processing_type.toLowerCase() }} {{ operation.file_type.toLowerCase() }}</div>
-        <div class="bulk-operation-date">{{ operation.timestamp }}</div>
+        <div class="bulk-operation-date">{{ buildDate(operation.timestamp) }}</div>
       </div>
     </div>
     <div class="bulk-operation-status">
       <div v-if="operation.state === 'EXCEPTION'">
-        <tooltip  min-width="500px" :text="shortend(operation.error.message)" position="left">
+        <tooltip min-width="500px" :text="shortend(operation.error.message)" position="left">
           <basic-badge variant="exception">ERROR</basic-badge>
         </tooltip>
       </div>
@@ -41,6 +41,7 @@ import IconButton from "@/components/UI/IconButton.vue";
 import Tooltip from "@/components/UI/Tooltip.vue";
 import Spinner from "@/components/UI/Spinner.vue";
 import BasicBadge from "@/components/UI/BasicBadge.vue";
+import {buildDate} from "@/common.js";
 
 export default {
   name: "BulkOperation",
@@ -53,15 +54,13 @@ export default {
   },
   methods: {
     shortend(string) {
-      if(((string ?? null) === null) || string.length < 350)
+      if (((string ?? null) === null) || string.length < 350)
         return string;
 
-      return string.substring(0,350) + "..."
+      return string.substring(0, 350) + "..."
     },
     buildDate(date) {
-      if(date === null) return "not set";
-
-      return `${date[0]}-${date[1].toString().padStart(2, '0')}-${date[2].toString().padStart(2, '0')} ${date[3]?.toString().padStart(2, '0') ?? '00'}:${date[4]?.toString().padStart(2, '0') ?? '00'}:${date[5]?.toString().padStart(2, '0') ?? '00'}`
+      return buildDate(date, true);
     },
   },
   data() {

src/frontend/src/components/layout/config/BulkOperations.vue

@@ -119,6 +119,7 @@ import {useBulkOperationStore} from "@/store/bulkOperation.js";
 import BulkOperation from "@/components/layout/bulkoperation/BulkOperation.vue";
 import logger from "@/logger.js";
 import {useActiveUserStore} from "@/store/activeuser.js";
+import {buildDate} from "@/common.js";
 
 export default {
   name: "BulkOperations",
@@ -198,9 +199,7 @@ export default {
       }
     },
     buildDate(date) {
-      if (date === null) return "not set";
-
-      return `${date[0]}-${date[1].toString().padStart(2, '0')}-${date[2].toString().padStart(2, '0')} ${date[3]?.toString().padStart(2, '0') ?? '00'}:${date[4]?.toString().padStart(2, '0') ?? '00'}:${date[5]?.toString().padStart(2, '0') ?? '00'}`
+      return buildDate(date, true);
     },
     async fetchFile(id) {
       logger.info(`Fetching file ${id}`);

src/frontend/src/components/layout/config/CountryProperties.vue

@@ -73,6 +73,7 @@ import ModalDialog from "@/components/UI/ModalDialog.vue";
 import Dropdown from "@/components/UI/Dropdown.vue";
 import {usePropertiesStore} from "@/store/properties.js";
 import CollapsibleBox from "@/components/UI/CollapsibleBox.vue";
+import {buildDate} from "@/common.js";
 
 export default {
   name: "CountryProperties",
@@ -131,10 +132,7 @@ export default {
   },
   methods: {
     buildDate(date) {
-      if(date === null) return "not set";
-      return date;
-
-      // return `${date[0]}-${date[1].toString().padStart(2, '0')}-${date[2].toString().padStart(2, '0')} ${date[3]?.toString().padStart(2, '0') ?? '00'}:${date[4]?.toString().padStart(2, '0') ?? '00'}:${date[5]?.toString().padStart(2, '0') ?? '00'}`
+      return buildDate(date, false);
     },
     async saveProperty(property) {
       this.countryStore.setProperty(property);

src/frontend/src/components/layout/config/Properties.vue

@@ -55,6 +55,7 @@ import {useCountryStore} from "@/store/country.js";
 import CountryProperties from "@/components/layout/config/CountryProperties.vue";
 import Box from "@/components/UI/Box.vue";
 import StagedChanges from "@/components/layout/config/StagedChanges.vue";
+import {buildDate} from "@/common.js";
 
 export default {
   name: "Properties",
@@ -124,9 +125,7 @@ export default {
       this.propertiesStore.setProperty(property);
     },
     buildDate(date) {
-      if(date === null) return "not set";
-
-      return `${date[0]}-${date[1].toString().padStart(2, '0')}-${date[2].toString().padStart(2, '0')} ${date[3]?.toString().padStart(2, '0') ?? '00'}:${date[4]?.toString().padStart(2, '0') ?? '00'}:${date[5]?.toString().padStart(2, '0') ?? '00'}`
+      return buildDate(date, false);
     },
     deletePeriod() {
       if (!this.disableDeleteButton) {

src/frontend/src/components/layout/config/Rates.vue

@@ -57,6 +57,7 @@ import RadioOption from "@/components/UI/RadioOption.vue";
 import {useMatrixRateStore} from "@/store/matrixRate.js";
 import {useContainerRateStore} from "@/store/containerRate.js";
 import StagedRates from "@/components/layout/config/StagedRates.vue";
+import {buildDate} from "@/common.js";
 
 export default {
   name: "Rates",
@@ -184,9 +185,7 @@ export default {
   },
   methods: {
     buildDate(date) {
-      if(date === null) return "not set";
-
-      return `${date[0]}-${date[1].toString().padStart(2, '0')}-${date[2].toString().padStart(2, '0')} ${date[3]?.toString().padStart(2, '0') ?? '00'}:${date[4]?.toString().padStart(2, '0') ?? '00'}:${date[5]?.toString().padStart(2, '0') ?? '00'}`
+      return buildDate(date, false);
     },
     async fetch(query) {
 

src/frontend/src/main.js

@@ -73,8 +73,6 @@ app.component("PhHardDrives", PhHardDrives );
 app.use(router);
 
 
-//app.component('base-button', () => import('./components/UI/BasicButton.vue'));
-//app.component('base-badge', () => import('./components/UI/BasicBadge.vue'));
 setupErrorBuffer()
 startSessionRefresh();
 

src/frontend/src/pages/ErrorLog.vue

@@ -17,6 +17,7 @@ import {mapStores} from "pinia";
 import Modal from "@/components/UI/Modal.vue";
 import TraceView from "@/components/layout/TraceView.vue";
 import ErrorLogModal from "@/components/layout/ErrorLogModal.vue";
+import {buildDate} from "@/common.js";
 
 export default {
   name: "ErrorLog",
@@ -79,10 +80,7 @@ export default {
       return this.errorLogStore.getErrors;
     },
     buildDate(date) {
-      if(date === null) return "not set";
-
-      return date;
-      // return `${date[0]}-${date[1].toString().padStart(2, '0')}-${date[2].toString().padStart(2, '0')} ${date[3]?.toString().padStart(2, '0') ?? '00'}:${date[4]?.toString().padStart(2, '0') ?? '00'}:${date[5]?.toString().padStart(2, '0') ?? '00'}`
+      return buildDate(date, true);
     },
     showDetails(error) {
       console.log("click")

src/frontend/src/pages/Reporting.vue

@@ -55,6 +55,7 @@ import Spinner from "@/components/UI/Spinner.vue";
 import ReportChart from "@/components/UI/ReportChart.vue";
 import Report from "@/components/layout/report/Report.vue";
 import BasicBadge from "@/components/UI/BasicBadge.vue";
+import {buildDate} from "@/common.js";
 
 export default {
   name: "Reporting",
@@ -119,7 +120,7 @@ export default {
       this.showModal = true;
     },
     buildDate(date) {
-      return new Date(date).toLocaleDateString('en-EN')
+      return buildDate(date, false);
     },
     async closeModal(data) {
       if (data.action === 'accept') {