respect organization time format settings in api tokens section

Author: Onatcer

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));
 }
 

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

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 {