From aeececd0013572fd3dd669e734e503a5b56e7ad2 Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Sat, 17 May 2025 19:56:28 +0530
Subject: [PATCH] fix(activity-log): Improve loading state layout and set
 default items per page to 15

---
 .../admin/activity-log/ActivityLog.vue        | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/frontend/src/features/admin/activity-log/ActivityLog.vue b/frontend/src/features/admin/activity-log/ActivityLog.vue
index 013b19ad..c9ebe6e2 100644
--- a/frontend/src/features/admin/activity-log/ActivityLog.vue
+++ b/frontend/src/features/admin/activity-log/ActivityLog.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen flex flex-col w-full">
+  <div class="min-h-screen flex flex-col">
     <div class="flex flex-wrap gap-4 pb-4">
       <div class="flex items-center gap-2 mb-4">
         <!-- Filter Popover -->
@@ -63,16 +63,23 @@
         </Popover>
       </div>
 
-      <div v-if="loading" class="flex flex-col gap-4 w-full">
-        <Card v-for="i in perPage" :key="i" class="p-4 flex-shrink-0">
-          <div class="flex items-center gap-4">
-            <Skeleton class="h-10 w-10 rounded-full" />
-            <div class="space-y-2 w-full">
-              <Skeleton class="h-3 w-[160px]" />
-              <Skeleton class="h-3 w-[140px]" />
-            </div>
+      <div v-if="loading" class="w-full">
+        <div class="flex border-b border-border p-4 font-medium bg-gray-50">
+          <div class="flex-1 text-muted-foreground">{{ t('form.field.name') }}</div>
+          <div class="w-[200px] text-muted-foreground">{{ t('form.field.date') }}</div>
+          <div class="w-[150px] text-muted-foreground">{{ t('globals.terms.ipAddress') }}</div>
+        </div>
+        <div v-for="i in perPage" :key="i" class="flex border-b border-border py-3 px-4">
+          <div class="flex-1">
+            <Skeleton class="h-4 w-[90%]" />
           </div>
-        </Card>
+          <div class="w-[200px]">
+            <Skeleton class="h-4 w-[120px]" />
+          </div>
+          <div class="w-[150px]">
+            <Skeleton class="h-4 w-[100px]" />
+          </div>
+        </div>
       </div>
 
       <template v-else>
@@ -99,7 +106,6 @@
               <SelectValue :placeholder="perPage" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem :value="10">10</SelectItem>
               <SelectItem :value="15">15</SelectItem>
               <SelectItem :value="30">30</SelectItem>
               <SelectItem :value="50">50</SelectItem>
@@ -191,7 +197,7 @@ const activityLogs = ref([])
 const { t } = useI18n()
 const loading = ref(true)
 const page = ref(1)
-const perPage = ref(10)
+const perPage = ref(15)
 const orderByField = ref('activity_logs.created_at')
 const orderByDirection = ref('desc')
 const totalCount = ref(0)