From 9a2af2e743e7ca67ca1f1d28fd110f0cb8d2bf15 Mon Sep 17 00:00:00 2001
From: Gregor Vostrak <gregor@solidtime.io>
Date: Wed, 14 May 2025 16:21:37 +0200
Subject: [PATCH] respect organization time format settings in api tokens
 section

---
 resources/css/app.css                                 | 2 +-
 resources/js/Pages/Profile/Partials/ApiTokensForm.vue | 9 ++++++---
 resources/js/packages/ui/src/utils/time.ts            | 5 +++--
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index b60d9752..8f40c4e6 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -44,7 +44,7 @@
     --theme-color-input-select-active: rgb(var(--color-accent-300));
     --theme-color-input-select-active-hover: rgb(var(--color-accent-200));
 
-    --color-accent-default: rgb(var(--color-accent-900));
+    --color-accent-default: rgba(var(--color-accent-300), 0.2);
     --color-accent-foreground: rgb(var(--color-accent-100));
 }
 
diff --git a/resources/js/Pages/Profile/Partials/ApiTokensForm.vue b/resources/js/Pages/Profile/Partials/ApiTokensForm.vue
index 9dabe169..a915e6a1 100644
--- a/resources/js/Pages/Profile/Partials/ApiTokensForm.vue
+++ b/resources/js/Pages/Profile/Partials/ApiTokensForm.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import FormSection from '@/Components/FormSection.vue';
 import PrimaryButton from '@/packages/ui/src/Buttons/PrimaryButton.vue';
-import {computed, ref} from 'vue';
+import {computed, ref, inject, type ComputedRef} from 'vue';
 import InputLabel from '@/packages/ui/src/Input/InputLabel.vue';
 import {
     api,
@@ -23,6 +23,7 @@ import {useNotificationsStore} from "@/utils/notification";
 import {useClipboard} from "@vueuse/core";
 import { formatDateTimeLocalized} from "../../../packages/ui/src/utils/time";
 import {ClockIcon} from "@heroicons/vue/20/solid";
+import type { Organization } from '@/packages/api/src';
 
 const queryClient = useQueryClient();
 
@@ -34,6 +35,8 @@ const newToken = ref('');
 
 const { copy, copied, isSupported } = useClipboard();
 
+const organization = inject<ComputedRef<Organization>>('organization');
+
 async function createApiToken(){
     await handleApiRequestNotifications(
         () =>
@@ -213,10 +216,10 @@ const revokeApiTokenMutation = useMutation({
                                     <div>{{ token.name }}</div>
                                     <div class="text-sm text-text-tertiary space-x-3">
                                         <span v-if="token.created_at">
-                                            Created at {{ formatDateTimeLocalized(token.created_at) }}
+                                            Created at {{ formatDateTimeLocalized(token.created_at, organization?.date_format, organization?.time_format) }}
                                         </span>
                                         <span v-if="token.expires_at">
-                                            Expires at {{ formatDateTimeLocalized(token.expires_at) }}
+                                            Expires at {{ formatDateTimeLocalized(token.expires_at, organization?.date_format, organization?.time_format) }}
                                         </span>
                                         <span v-if="token.revoked">
                                             Revoked
diff --git a/resources/js/packages/ui/src/utils/time.ts b/resources/js/packages/ui/src/utils/time.ts
index 4805f3be..d856ddac 100644
--- a/resources/js/packages/ui/src/utils/time.ts
+++ b/resources/js/packages/ui/src/utils/time.ts
@@ -146,8 +146,9 @@ export function formatDateLocalized(date: string, format: DateFormat = 'point-se
     return getLocalizedDayJs(date).format(dateFormatMap[format]);
 }
 
-export function formatDateTimeLocalized(date: string): string {
-    return getLocalizedDayJs(date).format('DD.MM.YYYY HH:mm');
+export function formatDateTimeLocalized(date: string, dateFormat?: DateFormat, timeFormat?: TimeFormat): string {
+    const format = `${dateFormatMap[dateFormat ?? 'point-separated-d-m-yyyy']} ${timeFormat === '12-hours' ? 'hh:mm A' : 'HH:mm'}`;
+    return getLocalizedDayJs(date).format(format);
 }
 
 export function formatWeek(date: string | null): string {