From f5a8ea72f1cacfc3cda6a53da9c12051d2dd6a38 Mon Sep 17 00:00:00 2001
From: Paulo Castellano <paulofcastellano@gmail.com>
Date: Sun, 29 Mar 2026 21:15:06 -0300
Subject: [PATCH] fix: use DatePicker component for API key expiration date

---
 resources/js/pages/settings/ApiKeys.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/resources/js/pages/settings/ApiKeys.vue b/resources/js/pages/settings/ApiKeys.vue
index 08ee04b6..2f13a72d 100644
--- a/resources/js/pages/settings/ApiKeys.vue
+++ b/resources/js/pages/settings/ApiKeys.vue
@@ -4,6 +4,7 @@ import { IconKey, IconCopy, IconTrash, IconPlus } from '@tabler/icons-vue';
 import { computed, ref, watch } from 'vue';
 
 import ConfirmDeleteModal from '@/components/ConfirmDeleteModal.vue';
+import DatePicker from '@/components/DatePicker.vue';
 import HeadingSmall from '@/components/HeadingSmall.vue';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
@@ -205,12 +206,12 @@ const closeTokenDialog = () => {
                     </p>
                 </div>
                 <div class="space-y-2">
-                    <Label for="token-expires">Expiration date (optional)</Label>
-                    <Input
-                        id="token-expires"
+                    <Label>Expiration date (optional)</Label>
+                    <DatePicker
+                        name="token-expires"
                         v-model="form.expires_at"
-                        type="date"
-                        :class="{ 'border-red-500': form.errors.expires_at }"
+                        :show-time="false"
+                        placeholder="No expiration"
                     />
                     <p v-if="form.errors.expires_at" class="text-sm text-red-500">
                         {{ form.errors.expires_at }}