diff --git a/Frontend-Learner/pages/browse/discovery.vue b/Frontend-Learner/pages/browse/discovery.vue
index 36e7dad6..ee8c8035 100644
--- a/Frontend-Learner/pages/browse/discovery.vue
+++ b/Frontend-Learner/pages/browse/discovery.vue
@@ -180,19 +180,19 @@ onMounted(async () => {
   <div class="bg-[#F8F9FA] dark:bg-[#020617] min-h-screen p-4 md:p-8 transition-colors duration-300">
     <div class="max-w-[1240px] mx-auto">
         <!-- ส่วนของการค้นหาคอร์ส (Catalog View) -->
-        <div v-if="!showDetail" class="bg-white dark:!bg-slate-900 rounded-[2rem] p-6 md:p-8 shadow-[0_2px_15px_rgb(0,0,0,0.02)] border border-slate-100 dark:!border-slate-800 min-h-[500px] mb-12 transition-colors">
+        <div v-if="!showDetail" class="bg-white dark:bg-slate-900 rounded-[2rem] p-6 md:p-8 shadow-[0_2px_15px_rgb(0,0,0,0.02)] border border-slate-100 dark:border-slate-800 min-h-[500px] mb-12">
             
             <!-- ส่วนหัวและการค้นหา -->
             <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
-               <h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-[#f8fafc] tracking-tight">{{ $t('discovery.title') }}</h2>
+               <h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">{{ $t('discovery.title') }}</h2>
                <div class="flex flex-wrap sm:flex-nowrap items-center gap-3 w-full md:w-auto">
                   <div class="relative w-full sm:w-[260px] flex-1">
                      <q-icon name="search" size="18px" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400" />
                      <input v-model="searchQuery" class="w-full bg-slate-100 dark:bg-slate-800 border-none rounded-xl py-2.5 pl-11 pr-4 text-sm font-medium text-slate-700 dark:text-slate-200 placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500/20 outline-none transition-all shadow-sm" :placeholder="$t('discovery.searchPlaceholder')" />
                   </div>
                   <div class="flex items-center gap-2 shrink-0">
-                     <button @click="viewMode = 'grid'" :class="viewMode === 'grid' ? 'bg-[#E9EFFD] dark:!bg-blue-900/40 text-[#3B6BE8] dark:!text-blue-400 border-[#3B6BE8] dark:!border-blue-400' : 'bg-white border-slate-200 dark:!bg-slate-800 dark:!border-slate-700 text-slate-400 dark:!text-slate-300 hover:bg-slate-50 dark:hover:!bg-slate-700'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="grid_view" size="20px" /></button>
-                     <button @click="viewMode = 'list'" :class="viewMode === 'list' ? 'bg-[#E9EFFD] dark:!bg-blue-900/40 text-[#3B6BE8] dark:!text-blue-400 border-[#3B6BE8] dark:!border-blue-400' : 'bg-white border-slate-200 dark:!bg-slate-800 dark:!border-slate-700 text-slate-400 dark:!text-slate-300 hover:bg-slate-50 dark:hover:!bg-slate-700'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="view_list" size="20px" /></button>
+                     <button @click="viewMode = 'grid'" :class="viewMode === 'grid' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="grid_view" size="20px" /></button>
+                     <button @click="viewMode = 'list'" :class="viewMode === 'list' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="view_list" size="20px" /></button>
                   </div>
                </div>
             </div>
@@ -203,17 +203,17 @@ onMounted(async () => {
                 <div class="flex flex-wrap items-center gap-3 w-full xl:w-auto">
                    <button 
                      @click="activeCategory = 'all'"
-                     :class="activeCategory === 'all' ? 'bg-[#E9EFFD] dark:!bg-blue-900/40 text-[#3B6BE8] dark:!text-blue-400 border-transparent font-bold' : 'bg-white dark:!bg-slate-800 border-slate-200 dark:!border-slate-700 text-slate-800 dark:!text-slate-200 hover:border-slate-300 dark:hover:!border-slate-600 font-medium'"
+                     :class="activeCategory === 'all' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-transparent font-bold' : 'bg-white dark:bg-transparent border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-300 hover:border-slate-300 font-medium'"
                      class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none">
-                     <q-icon name="check_circle_outline" size="18px" :class="activeCategory === 'all' ? 'text-[#3B6BE8] dark:!text-blue-400' : 'text-slate-400 dark:!text-slate-400'"/> {{ $t('discovery.allCategory') }}
+                     <q-icon name="check_circle_outline" size="18px" :class="activeCategory === 'all' ? 'text-[#3B6BE8]' : 'text-slate-400'"/> {{ $t('discovery.allCategory') }}
                    </button>
                    
                    <button 
                      v-for="cat in categories" :key="cat.id"
                      @click="activeCategory = cat.id"
-                     :class="activeCategory === cat.id ? 'bg-[#E9EFFD] dark:!bg-blue-900/40 text-[#3B6BE8] dark:!text-blue-400 border-transparent font-bold' : 'bg-white dark:!bg-slate-800 border-slate-200 dark:!border-slate-700 text-slate-800 dark:!text-slate-200 hover:border-slate-300 dark:hover:!border-slate-600 font-medium'"
-                     class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none">
-                     <q-icon :name="getCategoryIcon(cat.name)" size="18px" :class="activeCategory === cat.id ? 'text-[#3B6BE8] dark:!text-blue-400' : 'text-slate-600 dark:!text-slate-400'"/>
+                     :class="activeCategory === cat.id ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-transparent font-bold' : 'bg-white dark:bg-transparent border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-300 hover:border-slate-300 font-medium'"
+                     class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none bg-transparent">
+                     <q-icon :name="getCategoryIcon(cat.name)" size="18px" :class="activeCategory === cat.id ? 'text-[#3B6BE8]' : 'text-slate-600 dark:text-slate-400'"/>
                      {{ getLocalizedText(cat.name) }}
                    </button>
                 </div>
@@ -229,7 +229,7 @@ onMounted(async () => {
             <div v-else-if="filteredCourses.length > 0">
                <!-- GRID VIEW -->
                <div v-if="viewMode === 'grid'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-                  <div v-for="course in filteredCourses" :key="course.id" class="flex flex-col rounded-[1.5rem] bg-white dark:!bg-slate-900 border border-slate-100 dark:!border-slate-800 overflow-hidden shadow-[0_2px_10px_rgb(0,0,0,0.03)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-all duration-300 group cursor-pointer" @click="selectCourse(course.id)">
+                  <div v-for="course in filteredCourses" :key="course.id" class="flex flex-col rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 overflow-hidden shadow-[0_2px_10px_rgb(0,0,0,0.03)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-all duration-300 group cursor-pointer" @click="selectCourse(course.id)">
                      <!-- Thumbnail -->
                      <div class="relative w-full aspect-[16/10] bg-slate-100 dark:bg-slate-800 overflow-hidden">
                         <img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
@@ -240,7 +240,7 @@ onMounted(async () => {
                      
                      <!-- Body -->
                      <div class="p-5 flex flex-col flex-1">
-                        <h3 class="font-bold text-slate-900 dark:text-[#f8fafc] text-[15px] leading-snug line-clamp-2 mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{{ getLocalizedText(course.title) }}</h3>
+                        <h3 class="font-bold text-slate-900 dark:text-white text-[15px] leading-snug line-clamp-2 mb-2">{{ getLocalizedText(course.title) }}</h3>
                         
 
                         
@@ -248,7 +248,8 @@ onMounted(async () => {
                             <div class="font-[900] text-[18px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
                                 {{ course.formatted_price }}
                             </div>
-                            <button class="w-[38px] h-[38px] rounded-full bg-slate-50 dark:!bg-slate-800 text-slate-400 dark:!text-slate-300 flex items-center justify-center hover:bg-blue-50 hover:text-blue-600 dark:hover:!bg-slate-700 dark:hover:!text-blue-400 border border-slate-100 dark:!border-slate-700 transition-colors shadow-sm outline-none">
+                            <!-- Eye icon circle button -->
+                            <button class="w-[38px] h-[38px] rounded-full bg-slate-50 dark:bg-slate-800 text-slate-400 dark:text-slate-500 flex items-center justify-center hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-slate-700 border border-slate-100 dark:border-slate-700 transition-colors shadow-sm outline-none">
                                 <q-icon name="visibility" size="18px" />
                             </button>
                         </div>
@@ -258,7 +259,7 @@ onMounted(async () => {
 
                <!-- LIST VIEW -->
                <div v-else class="flex flex-col gap-5">
-                  <div v-for="course in filteredCourses" :key="course.id" class="flex flex-col sm:flex-row rounded-[1.5rem] bg-white dark:!bg-slate-900 border border-slate-100 dark:!border-slate-800 p-3 sm:p-4 gap-4 sm:gap-6 shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all duration-300 group cursor-pointer" @click="selectCourse(course.id)">
+                  <div v-for="course in filteredCourses" :key="course.id" class="flex flex-col sm:flex-row rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 p-3 sm:p-4 gap-4 sm:gap-6 shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all duration-300 group cursor-pointer" @click="selectCourse(course.id)">
                      <div class="relative w-full sm:w-[260px] aspect-[16/10] sm:aspect-auto sm:h-[160px] rounded-[1rem] bg-slate-100 dark:bg-slate-800 overflow-hidden shrink-0">
                         <img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
                         <div v-if="course.category_name" class="absolute top-3 left-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1.5 rounded-full shadow-sm" style="border-radius: 9999px; padding: 4px 12px;">
@@ -267,14 +268,14 @@ onMounted(async () => {
                      </div>
                      <div class="flex flex-col flex-1 py-1">
                         <div class="flex-1">
-                            <h3 class="font-bold text-slate-900 dark:text-[#f8fafc] text-[16px] md:text-[18px] leading-snug line-clamp-2 md:line-clamp-1 mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{{ getLocalizedText(course.title) }}</h3>
+                            <h3 class="font-bold text-slate-900 dark:text-white text-[16px] md:text-[18px] leading-snug line-clamp-2 md:line-clamp-1 mb-2">{{ getLocalizedText(course.title) }}</h3>
 
                         </div>
                         <div class="mt-4 sm:mt-auto flex items-center justify-between">
                             <div class="font-[900] text-[20px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
                                 {{ course.formatted_price }}
                             </div>
-                            <button class="px-6 py-2 rounded-full bg-slate-50 text-slate-600 dark:!bg-slate-800 dark:!text-slate-300 font-bold text-[13px] flex items-center gap-2 hover:bg-blue-50 hover:text-blue-600 dark:hover:!bg-slate-700 dark:hover:!text-blue-400 border border-slate-100 dark:!border-slate-700 transition-colors">
+                            <button class="px-6 py-2 rounded-full bg-slate-50 text-slate-600 dark:bg-slate-800 dark:text-slate-300 font-bold text-[13px] flex items-center gap-2 hover:bg-blue-50 border border-slate-100 dark:border-slate-700 hover:text-blue-600 transition-colors">
                                 <q-icon name="visibility" size="16px" /> {{ $t('discovery.viewDetails') }}
                             </button>
                         </div>
@@ -289,9 +290,9 @@ onMounted(async () => {
             </div>
 
             <!-- Empty State -->
-            <div v-else class="flex flex-col items-center justify-center py-20 bg-white dark:!bg-slate-900/50 rounded-3xl border border-dashed border-slate-200 dark:!border-slate-800">
+            <div v-else class="flex flex-col items-center justify-center py-20 bg-white dark:bg-slate-900/40 rounded-3xl border border-dashed border-slate-200 dark:border-slate-800">
                <q-icon name="search_off" size="64px" class="text-slate-300 dark:text-slate-600 mb-4" />
-               <h3 class="text-xl font-bold text-slate-900 dark:!text-white mb-2">{{ $t("discovery.emptyTitle") }}</h3>
+               <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t("discovery.emptyTitle") }}</h3>
                <p class="text-slate-500 dark:text-slate-400 text-center max-w-md">{{ $t("discovery.emptyDesc") }}</p>
                <button class="mt-6 font-bold text-blue-600 hover:text-blue-700 transition-colors" @click="searchQuery = ''; activeCategory = 'all';">
                   {{ $t("discovery.showAll") }}
diff --git a/frontend_management/components/course/AnnouncementsTab.vue b/frontend_management/components/course/AnnouncementsTab.vue
index ab094e2f..aa529d46 100644
--- a/frontend_management/components/course/AnnouncementsTab.vue
+++ b/frontend_management/components/course/AnnouncementsTab.vue
@@ -449,7 +449,10 @@ const deleteAttachment = async (attachmentId: number) => {
   }
 };
 
-// Date formatting function is auto-imported from utils/date.ts
+const formatDate = (dateStr: string) => {
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('th-TH', { day: 'numeric', month: 'short', year: 'numeric' });
+};
 
 const formatFileSize = (bytes: number) => {
   if (bytes < 1024) return bytes + ' B';
diff --git a/frontend_management/components/course/ApprovalHistoryTab.vue b/frontend_management/components/course/ApprovalHistoryTab.vue
index 335845b3..f1dd8942 100644
--- a/frontend_management/components/course/ApprovalHistoryTab.vue
+++ b/frontend_management/components/course/ApprovalHistoryTab.vue
@@ -20,7 +20,7 @@
           v-for="item in history"
           :key="item.id"
           :title="titleMap[item.action] || item.action"
-          :subtitle="formatDateTime(item.created_at)"
+          :subtitle="formatDate(item.created_at)"
           :color="colorMap[item.action] || 'grey'"
           :icon="iconMap[item.action] || 'circle'"
         >
@@ -91,7 +91,12 @@ const getActorName = (item: ApprovalHistory) => {
   return actor.username || actor.email || 'Unknown User';
 };
 
-// Date formatting function is auto-imported from utils/date.ts
+const formatDate = (dateString: string) => {
+  return new Date(dateString).toLocaleString('th-TH', {
+    dateStyle: 'medium',
+    timeStyle: 'short'
+  });
+};
 
 onMounted(() => {
   fetchHistory();
diff --git a/frontend_management/components/course/QuizResultsTab.vue b/frontend_management/components/course/QuizResultsTab.vue
index c69ebe97..eef37e63 100644
--- a/frontend_management/components/course/QuizResultsTab.vue
+++ b/frontend_management/components/course/QuizResultsTab.vue
@@ -450,7 +450,14 @@ const openStudentDetail = async (studentId: number) => {
 
 const formatDate = (dateStr: string) => {
   if (!dateStr) return '-';
-  return formatDateTime(dateStr);
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('th-TH', { 
+    day: 'numeric', 
+    month: 'short', 
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
 };
 
 // Lifecycle
diff --git a/frontend_management/components/course/StudentsTab.vue b/frontend_management/components/course/StudentsTab.vue
index 1cd742b1..9a8f4416 100644
--- a/frontend_management/components/course/StudentsTab.vue
+++ b/frontend_management/components/course/StudentsTab.vue
@@ -404,7 +404,8 @@ const getStudentStatusLabel = (status: string) => {
 };
 
 const formatEnrollDate = (dateStr: string) => {
-  return formatDate(dateStr);
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('th-TH', { day: 'numeric', month: 'short', year: 'numeric' });
 };
 
 const getLessonTypeIcon = (type: string) => {
@@ -435,7 +436,8 @@ const formatVideoTime = (seconds: number) => {
 
 const formatCompletedDate = (dateStr: string | null) => {
   if (!dateStr) return '-';
-  return formatDate(dateStr);
+  const date = new Date(dateStr);
+  return date.toLocaleDateString('th-TH', { day: 'numeric', month: 'short' });
 };
 
 // Fetch on mount
diff --git a/frontend_management/pages/admin/audit-log/index.vue b/frontend_management/pages/admin/audit-log/index.vue
index 8038014e..1214298e 100644
--- a/frontend_management/pages/admin/audit-log/index.vue
+++ b/frontend_management/pages/admin/audit-log/index.vue
@@ -136,7 +136,7 @@
       <!-- Created At Custom Column -->
       <template v-slot:body-cell-created_at="props">
         <q-td :props="props">
-            {{ formatDateTime(props.value) }}
+            {{ formatDate(props.value) }}
         </q-td>
       </template>
 
@@ -169,7 +169,7 @@
             </div>
              <div>
               <div class="text-subtitle2 text-grey">Date & Time</div>
-              <div>{{ formatDateTime(selectedLog.created_at) }}</div>
+              <div>{{ formatDate(selectedLog.created_at) }}</div>
             </div>
 
             <div>
@@ -241,7 +241,7 @@
 </template>
 
 <script setup lang="ts">
-import { useQuasar, type QTableColumn } from 'quasar';
+import { useQuasar } from 'quasar';
 import { adminService, type AuditLog, type AuditLogStats } from '~/services/admin.service';
 
 definePageMeta({
@@ -284,15 +284,15 @@ const pagination = ref({
 });
 
 // Table setup
-const columns: QTableColumn[] = [
-  { name: 'id', label: 'ID', field: 'id', align: 'left' as const, style: 'width: 60px' },
-  { name: 'action', label: 'Action', field: 'action', align: 'left' as const },
-  { name: 'user', label: 'User', field: 'user', align: 'left' as const },
-  { name: 'entity_type', label: 'Entity Type', field: 'entity_type', align: 'left' as const },
-  { name: 'entity_id', label: 'Entity ID', field: 'entity_id', align: 'left' as const },
+const columns = [
+  { name: 'id', label: 'ID', field: 'id', align: 'left', style: 'width: 60px' },
+  { name: 'action', label: 'Action', field: 'action', align: 'left' },
+  { name: 'user', label: 'User', field: 'user', align: 'left' },
+  { name: 'entity_type', label: 'Entity Type', field: 'entity_type', align: 'left' },
+  { name: 'entity_id', label: 'Entity ID', field: 'entity_id', align: 'left' },
 
-  { name: 'created_at', label: 'Date & Time', field: 'created_at', align: 'left' as const },
-  { name: 'actions', label: '', field: 'actions', align: 'center' as const }
+  { name: 'created_at', label: 'Date & Time', field: 'created_at', align: 'left' },
+  { name: 'actions', label: '', field: 'actions', align: 'center' }
 ];
 
 // Actions options (for filtering)
@@ -416,7 +416,10 @@ const tryFormatJson = (str: string | null) => {
     }
 };
 
-// Date formatting function is auto-imported from utils/date.ts
+const formatDate = (date: string) => {
+  if (!date) return '-';
+  return new Date(date).toLocaleString('th-TH');
+};
 
 const ACTION_COLOR_MAP: Record<string, string> = {
   DELETE: 'negative',
@@ -450,12 +453,10 @@ onMounted(() => {
 :deep(input[type=number]::-webkit-outer-spin-button),
 :deep(input[type=number]::-webkit-inner-spin-button) {
   -webkit-appearance: none;
-  appearance: none;
   margin: 0;
 }
 
 :deep(input[type=number]) {
   -moz-appearance: textfield;
-  appearance: textfield;
 }
 </style>
diff --git a/frontend_management/pages/admin/categories/index.vue b/frontend_management/pages/admin/categories/index.vue
index a909a66f..02648abe 100644
--- a/frontend_management/pages/admin/categories/index.vue
+++ b/frontend_management/pages/admin/categories/index.vue
@@ -233,7 +233,13 @@ const fetchCategories = async () => {
   }
 };
 
-// Date formatting function is auto-imported from utils/date.ts
+const formatDate = (date: string) => {
+  return new Date(date).toLocaleDateString('th-TH', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit'
+  });
+};
 
 const resetForm = () => {
   form.value = {
diff --git a/frontend_management/pages/admin/courses/[id].vue b/frontend_management/pages/admin/courses/[id].vue
index 38bc7612..07c78cf3 100644
--- a/frontend_management/pages/admin/courses/[id].vue
+++ b/frontend_management/pages/admin/courses/[id].vue
@@ -356,7 +356,23 @@ const getActionColor = (action: string) => {
   return colors[action] || 'grey';
 };
 
-// Date formatting functions are auto-imported from utils/date.ts
+const formatDate = (date: string) => {
+  return new Date(date).toLocaleDateString('th-TH', {
+    day: 'numeric',
+    month: 'short',
+    year: '2-digit'
+  });
+};
+
+const formatDateTime = (date: string) => {
+  return new Date(date).toLocaleDateString('th-TH', {
+    day: 'numeric',
+    month: 'short',
+    year: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+};
 
 const confirmApprove = () => {
   if (!course.value) return;
diff --git a/frontend_management/pages/admin/courses/pending.vue b/frontend_management/pages/admin/courses/pending.vue
index a12b174a..e5871eb9 100644
--- a/frontend_management/pages/admin/courses/pending.vue
+++ b/frontend_management/pages/admin/courses/pending.vue
@@ -135,7 +135,7 @@
                 <div v-if="course.latest_submission" class="mt-3 text-sm text-gray-500">
                   <q-icon name="send" size="16px" class="mr-1" />
                   ส่งโดย {{ course.latest_submission.submitter.username }} 
-                  เมื่อ {{ formatDateTime(course.latest_submission.created_at) }}
+                  เมื่อ {{ formatDate(course.latest_submission.created_at) }}
                 </div>
               </div>
 
@@ -203,7 +203,7 @@
         <template v-slot:body-cell-submitted_at="props">
           <q-td :props="props">
             <div v-if="props.row.latest_submission">
-               <div class="text-xs">{{ formatDateTime(props.row.latest_submission.created_at) }}</div>
+               <div class="text-xs">{{ formatDate(props.row.latest_submission.created_at) }}</div>
                <div class="text-xs text-gray-500">โดย {{ props.row.latest_submission.submitter.username }}</div>
             </div>
             <span v-else>-</span>
@@ -298,7 +298,15 @@ const getPrimaryInstructor = (course: PendingCourse) => {
   return primary?.user.username || course.creator.username;
 };
 
-// Date formatting function is auto-imported from utils/date.ts
+const formatDate = (date: string) => {
+  return new Date(date).toLocaleDateString('th-TH', {
+    day: 'numeric',
+    month: 'short',
+    year: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit'
+  });
+};
 
 const viewCourse = (course: PendingCourse) => {
   router.push(`/admin/courses/${course.id}`);
diff --git a/frontend_management/pages/admin/index.vue b/frontend_management/pages/admin/index.vue
index 6dd6cc34..e4e6b968 100644
--- a/frontend_management/pages/admin/index.vue
+++ b/frontend_management/pages/admin/index.vue
@@ -136,7 +136,7 @@
                     <p class="text-xs text-gray-500 truncate">โดย {{ course.creator.username }}</p>
                 </div>
                 <div class="text-xs text-gray-400 whitespace-nowrap">
-                    {{ formatDateStr(course.created_at) }}
+                    {{ formatDate(course.created_at) }}
                 </div>
             </div>
         </div>
@@ -170,7 +170,7 @@
                         <span class="text-gray-600 mx-1">{{ formatAction(log.action) }}</span>
                         <span class="text-primary-700 font-medium">{{ log.entity_type }} #{{ log.entity_id }}</span>
                     </p>
-                    <p class="text-xs text-gray-400 mt-0.5">{{ formatDateStr(log.created_at) }}</p>
+                    <p class="text-xs text-gray-400 mt-0.5">{{ formatDate(log.created_at) }}</p>
                 </div>
             </div>
         </div>
@@ -254,7 +254,14 @@ const fetchDashboardData = async () => {
 };
 
 // Utilities
-const formatDateStr = (date: string) => formatDateTime(date);
+const formatDate = (date: string) => {
+    return new Date(date).toLocaleDateString('th-TH', {
+        day: 'numeric',
+        month: 'short',
+        hour: '2-digit',
+        minute: '2-digit'
+    });
+};
 
 const getActionIcon = (action: string) => {
     if (action.includes('create')) return 'add_circle';
diff --git a/frontend_management/pages/admin/profile/index.vue b/frontend_management/pages/admin/profile/index.vue
index 8a876162..32dee306 100644
--- a/frontend_management/pages/admin/profile/index.vue
+++ b/frontend_management/pages/admin/profile/index.vue
@@ -301,7 +301,7 @@
 
 <script setup lang="ts">
 import { useQuasar } from 'quasar';
-import { userService } from '~/services/user.service';
+import { userService, type UserProfileResponse } from '~/services/user.service';
 import { authService } from '~/services/auth.service';
 
 definePageMeta({
@@ -368,8 +368,20 @@ const getRoleLabel = (role: string) => {
   return labels[role] || role;
 };
 
-// Use formatting utilities from utils/date.ts
-// Format functions are auto-imported
+const formatDate = (date: string, includeTime = true) => {
+  const options: Intl.DateTimeFormatOptions = {
+    day: 'numeric',
+    month: 'short',
+    year: '2-digit'
+  };
+
+  if (includeTime) {
+    options.hour = '2-digit';
+    options.minute = '2-digit';
+  }
+
+  return new Date(date).toLocaleDateString('th-TH', options);
+};
 
 // Avatar upload
 const avatarInputRef = ref<HTMLInputElement | null>(null);
@@ -413,8 +425,8 @@ const handleAvatarUpload = async (event: Event) => {
   try {
     const response = await userService.uploadAvatar(file);
     
-    // Force refresh profile cache and update local state
-    await fetchProfile(true);
+    // Re-fetch profile to get presigned URL from backend
+    await fetchProfile();
     
     $q.notify({
       type: 'positive',
@@ -445,8 +457,8 @@ const handleUpdateProfile = async () => {
       phone: editForm.value.phone || null
     });
     
-    // Force refresh profile cache and update local state
-    await fetchProfile(true);
+    // Refresh profile data from API
+    await fetchProfile();
     
     $q.notify({
       type: 'positive',
@@ -534,29 +546,25 @@ watch(showEditModal, (newVal) => {
   }
 });
 
-// Helper to map fullProfile to local profile state
-const mapProfileData = (data: typeof authStore.fullProfile) => {
-  if (!data) return;
-  profile.value = {
-    fullName: `${data.profile.first_name} ${data.profile.last_name}`,
-    email: data.email,
-    emailVerified: !!data.email_verified_at,
-    username: data.username,
-    phone: data.profile.phone || '',
-    role: data.role.code,
-    roleName: data.role.name.th,
-    avatar: '',
-    avatarUrl: data.profile.avatar_url,
-    createdAt: data.created_at
-  };
-};
-
-// Fetch profile — uses auth store cache, force=true to refresh
-const fetchProfile = async (force = false) => {
+// Fetch profile from API
+const fetchProfile = async () => {
   loading.value = true;
   try {
-    await authStore.fetchUserProfile(force);
-    mapProfileData(authStore.fullProfile);
+    const data = await userService.getProfile();
+    
+    // Map API response to profile
+    profile.value = {
+      fullName: `${data.profile.first_name} ${data.profile.last_name}`,
+      email: data.email,
+      emailVerified: !!data.email_verified_at,
+      username: data.username,
+      phone: data.profile.phone || '',
+      role: data.role.code,
+      roleName: data.role.name.th,
+      avatar: '',
+      avatarUrl: data.profile.avatar_url,
+      createdAt: data.created_at
+    };
   } catch (error) {
     $q.notify({
       type: 'negative',
@@ -568,7 +576,7 @@ const fetchProfile = async (force = false) => {
   }
 };
 
-// Load profile on mount (uses cache if available)
+// Load profile on mount
 onMounted(() => {
   fetchProfile();
 });
diff --git a/frontend_management/pages/admin/users/index.vue b/frontend_management/pages/admin/users/index.vue
index bbf6fac2..8635e0c3 100644
--- a/frontend_management/pages/admin/users/index.vue
+++ b/frontend_management/pages/admin/users/index.vue
@@ -324,7 +324,13 @@ const getRoleBadgeColor = (roleCode: string) => {
   return colors[roleCode] || 'grey';
 };
 
-// Date formatting function is auto-imported from utils/date.ts
+const formatDate = (date: string) => {
+  return new Date(date).toLocaleDateString('th-TH', {
+    day: 'numeric',
+    month: 'short',
+    year: '2-digit'
+  });
+};
 
 const viewUser = (user: AdminUserResponse) => {
   selectedUser.value = user;
diff --git a/frontend_management/pages/instructor/courses/index.vue b/frontend_management/pages/instructor/courses/index.vue
index 946162f0..43b17b11 100644
--- a/frontend_management/pages/instructor/courses/index.vue
+++ b/frontend_management/pages/instructor/courses/index.vue
@@ -449,7 +449,13 @@ const getStatusLabel = (status: string) => {
   return labels[status] || status;
 };
 
-// Date formatting function is auto-imported from utils/date.ts
+const formatDate = (date: string) => {
+  return new Date(date).toLocaleDateString('th-TH', {
+    day: 'numeric',
+    month: 'short',
+    year: '2-digit'
+  });
+};
 // Clone Dialog
 const cloneDialog = ref(false);
 const cloneLoading = ref(false);
diff --git a/frontend_management/pages/instructor/index.vue b/frontend_management/pages/instructor/index.vue
index d53015d7..16411da0 100644
--- a/frontend_management/pages/instructor/index.vue
+++ b/frontend_management/pages/instructor/index.vue
@@ -64,21 +64,21 @@
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
       <q-card class="p-6 text-center">
         <div class="text-4xl font-bold text-primary-600 mb-2">
-          {{ stats.totalCourses }}
+          {{ instructorStore.stats.totalCourses }}
         </div>
         <div class="text-gray-600">หลักสูตรทั้งหมด</div>
       </q-card>
 
       <q-card class="p-6 text-center">
         <div class="text-4xl font-bold text-secondary-600 mb-2">
-          {{ stats.totalStudents }}
+          {{ instructorStore.stats.totalStudents }}
         </div>
         <div class="text-gray-600">ผู้เรียนทั้งหมด</div>
       </q-card>
 
       <q-card class="p-6 text-center">
         <div class="text-4xl font-bold text-accent-600 mb-2">
-          {{ stats.completedStudents }}
+          {{ instructorStore.stats.completedStudents }}
         </div>
         <div class="text-gray-600">เรียนจบแล้ว</div>
       </q-card>
@@ -96,28 +96,28 @@
                 <q-icon name="check_circle" color="green" size="24px" />
                 <span class="font-medium text-gray-700">เผยแพร่แล้ว</span>
               </div>
-              <span class="text-2xl font-bold text-green-600">{{ courseStatusCounts.approved }}</span>
+              <span class="text-2xl font-bold text-green-600">{{ instructorStore.courseStatusCounts.approved }}</span>
             </div>
             <div class="flex items-center justify-between p-3 bg-orange-50 rounded-lg">
               <div class="flex items-center gap-3">
                 <q-icon name="hourglass_empty" color="orange" size="24px" />
                 <span class="font-medium text-gray-700">รอตรวจสอบ</span>
               </div>
-              <span class="text-2xl font-bold text-orange-600">{{ courseStatusCounts.pending }}</span>
+              <span class="text-2xl font-bold text-orange-600">{{ instructorStore.courseStatusCounts.pending }}</span>
             </div>
             <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
               <div class="flex items-center gap-3">
                 <q-icon name="edit_note" color="grey" size="24px" />
                 <span class="font-medium text-gray-700">แบบร่าง</span>
               </div>
-              <span class="text-2xl font-bold text-gray-600">{{ courseStatusCounts.draft }}</span>
+              <span class="text-2xl font-bold text-gray-600">{{ instructorStore.courseStatusCounts.draft }}</span>
             </div>
-            <div v-if="courseStatusCounts.rejected > 0" class="flex items-center justify-between p-3 bg-red-50 rounded-lg">
+            <div v-if="instructorStore.courseStatusCounts.rejected > 0" class="flex items-center justify-between p-3 bg-red-50 rounded-lg">
               <div class="flex items-center gap-3">
                 <q-icon name="cancel" color="red" size="24px" />
                 <span class="font-medium text-gray-700">ถูกปฏิเสธ</span>
               </div>
-              <span class="text-2xl font-bold text-red-600">{{ courseStatusCounts.rejected }}</span>
+              <span class="text-2xl font-bold text-red-600">{{ instructorStore.courseStatusCounts.rejected }}</span>
             </div>
           </div>
         </q-card-section>
@@ -138,7 +138,7 @@
 
           <div class="space-y-4">
             <q-card
-              v-for="course in recentCourses"
+              v-for="course in instructorStore.recentCourses"
               :key="course.id"
               class="cursor-pointer hover:shadow-md transition"
               @click="router.push(`/instructor/courses/${course.id}`)"
@@ -172,7 +172,6 @@
 
 <script setup lang="ts">
 import { useQuasar } from 'quasar';
-import { instructorService } from '~/services/instructor.service';
 
 definePageMeta({
   layout: 'instructor',
@@ -180,32 +179,10 @@ definePageMeta({
 });
 
 const authStore = useAuthStore();
+const instructorStore = useInstructorStore();
 const router = useRouter();
 const $q = useQuasar();
 
-// Dashboard local state
-const stats = ref({
-  totalCourses: 0,
-  totalStudents: 0,
-  completedStudents: 0
-});
-
-const courseStatusCounts = ref({
-  approved: 0,
-  pending: 0,
-  draft: 0,
-  rejected: 0
-});
-
-const recentCourses = ref<{
-  id: number;
-  title: string;
-  students: number;
-  lessons: number;
-  icon: string;
-  thumbnail: string | null;
-}[]>([]);
-
 // Navigation functions
 const goToProfile = () => {
   router.push('/instructor/profile');
@@ -235,41 +212,9 @@ const handleLogout = () => {
   });
 };
 
-// Fetch dashboard data
-const fetchDashboardData = async () => {
-  try {
-    const [courses, studentStats] = await Promise.all([
-      instructorService.getCourses(),
-      instructorService.getMyStudentsStats()
-    ]);
-
-    stats.value.totalCourses = courses.length;
-    stats.value.totalStudents = studentStats.total_students;
-    stats.value.completedStudents = studentStats.total_completed;
-
-    courseStatusCounts.value = {
-      approved: courses.filter(c => c.status === 'APPROVED').length,
-      pending: courses.filter(c => c.status === 'PENDING').length,
-      draft: courses.filter(c => c.status === 'DRAFT').length,
-      rejected: courses.filter(c => c.status === 'REJECTED').length
-    };
-
-    recentCourses.value = courses.slice(0, 3).map(course => ({
-      id: course.id,
-      title: course.title.th,
-      students: 0,
-      lessons: 0,
-      icon: 'book',
-      thumbnail: course.thumbnail_url || null
-    }));
-  } catch (error) {
-    console.error('Failed to fetch dashboard data:', error);
-  }
-};
-
-// Fetch data on mount
+// Fetch dashboard data on mount
 onMounted(() => {
+  instructorStore.fetchDashboardData();
   authStore.fetchUserProfile();
-  fetchDashboardData();
 });
 </script>
diff --git a/frontend_management/pages/instructor/profile/index.vue b/frontend_management/pages/instructor/profile/index.vue
index 6a36b365..6a602a39 100644
--- a/frontend_management/pages/instructor/profile/index.vue
+++ b/frontend_management/pages/instructor/profile/index.vue
@@ -301,7 +301,7 @@
 
 <script setup lang="ts">
 import { useQuasar } from 'quasar';
-import { userService } from '~/services/user.service';
+import { userService, type UserProfileResponse } from '~/services/user.service';
 import { authService } from '~/services/auth.service';
 
 definePageMeta({
@@ -368,8 +368,20 @@ const getRoleLabel = (role: string) => {
   return labels[role] || role;
 };
 
-// Use formatting utilities from utils/date.ts
-// Format functions are auto-imported
+const formatDate = (date: string, includeTime = true) => {
+  const options: Intl.DateTimeFormatOptions = {
+    day: 'numeric',
+    month: 'short',
+    year: '2-digit'
+  };
+
+  if (includeTime) {
+    options.hour = '2-digit';
+    options.minute = '2-digit';
+  }
+
+  return new Date(date).toLocaleDateString('th-TH', options);
+};
 
 // Avatar upload
 const avatarInputRef = ref<HTMLInputElement | null>(null);
@@ -413,8 +425,8 @@ const handleAvatarUpload = async (event: Event) => {
   try {
     const response = await userService.uploadAvatar(file);
     
-    // Force refresh profile cache and update local state
-    await fetchProfile(true);
+    // Re-fetch profile to get presigned URL from backend
+    await fetchProfile();
     
     $q.notify({
       type: 'positive',
@@ -445,8 +457,8 @@ const handleUpdateProfile = async () => {
       phone: editForm.value.phone || null
     });
     
-    // Force refresh profile cache and update local state
-    await fetchProfile(true);
+    // Refresh profile data from API
+    await fetchProfile();
     
     $q.notify({
       type: 'positive',
@@ -534,29 +546,25 @@ watch(showEditModal, (newVal) => {
   }
 });
 
-// Helper to map fullProfile to local profile state
-const mapProfileData = (data: typeof authStore.fullProfile) => {
-  if (!data) return;
-  profile.value = {
-    fullName: `${data.profile.first_name} ${data.profile.last_name}`,
-    email: data.email,
-    emailVerified: !!data.email_verified_at,
-    username: data.username,
-    phone: data.profile.phone || '',
-    role: data.role.code,
-    roleName: data.role.name.th,
-    avatar: '',
-    avatarUrl: data.profile.avatar_url,
-    createdAt: data.created_at
-  };
-};
-
-// Fetch profile — uses auth store cache, force=true to refresh
-const fetchProfile = async (force = false) => {
+// Fetch profile from API
+const fetchProfile = async () => {
   loading.value = true;
   try {
-    await authStore.fetchUserProfile(force);
-    mapProfileData(authStore.fullProfile);
+    const data = await userService.getProfile();
+    
+    // Map API response to profile
+    profile.value = {
+      fullName: `${data.profile.first_name} ${data.profile.last_name}`,
+      email: data.email,
+      emailVerified: !!data.email_verified_at,
+      username: data.username,
+      phone: data.profile.phone || '',
+      role: data.role.code,
+      roleName: data.role.name.th,
+      avatar: '',
+      avatarUrl: data.profile.avatar_url,
+      createdAt: data.created_at
+    };
   } catch (error) {
     $q.notify({
       type: 'negative',
@@ -568,7 +576,7 @@ const fetchProfile = async (force = false) => {
   }
 };
 
-// Load profile on mount (uses cache if available)
+// Load profile on mount
 onMounted(() => {
   fetchProfile();
 });
diff --git a/frontend_management/stores/auth.ts b/frontend_management/stores/auth.ts
index c789eaf3..3858242a 100644
--- a/frontend_management/stores/auth.ts
+++ b/frontend_management/stores/auth.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { authService } from '~/services/auth.service';
-import { userService, type UserProfileResponse } from '~/services/user.service';
+import { userService } from '~/services/user.service';
 
 interface User {
     id: string;
@@ -15,8 +15,7 @@ export const useAuthStore = defineStore('auth', {
     state: () => ({
         user: null as User | null,
         token: null as string | null,
-        isAuthenticated: false,
-        fullProfile: null as UserProfileResponse | null
+        isAuthenticated: false
     }),
 
     getters: {
@@ -62,7 +61,6 @@ export const useAuthStore = defineStore('auth', {
             this.user = null;
             this.token = null;
             this.isAuthenticated = false;
-            this.fullProfile = null;
 
             // Clear cookies
             const tokenCookie = useCookie('token');
@@ -128,16 +126,10 @@ export const useAuthStore = defineStore('auth', {
             }
         },
 
-        async fetchUserProfile(force = false) {
-            // Skip if already cached (unless force refresh)
-            if (!force && this.fullProfile) return;
-
+        async fetchUserProfile() {
             try {
                 const response = await userService.getProfile();
 
-                // Cache raw API response
-                this.fullProfile = response;
-
                 // Update local user state
                 this.user = {
                     id: response.id.toString(),
diff --git a/frontend_management/stores/instructor.ts b/frontend_management/stores/instructor.ts
new file mode 100644
index 00000000..cf8e2152
--- /dev/null
+++ b/frontend_management/stores/instructor.ts
@@ -0,0 +1,89 @@
+import { defineStore } from 'pinia';
+import { instructorService } from '~/services/instructor.service';
+
+interface Course {
+    id: number;
+    title: string;
+    students: number;
+    lessons: number;
+    icon: string;
+    thumbnail: string | null;
+}
+
+interface DashboardStats {
+    totalCourses: number;
+    totalStudents: number;
+    completedStudents: number;
+}
+
+interface CourseStatusCounts {
+    approved: number;
+    pending: number;
+    draft: number;
+    rejected: number;
+}
+
+export const useInstructorStore = defineStore('instructor', {
+    state: () => ({
+        stats: {
+            totalCourses: 0,
+            totalStudents: 0,
+            completedStudents: 0
+        } as DashboardStats,
+
+        courseStatusCounts: {
+            approved: 0,
+            pending: 0,
+            draft: 0,
+            rejected: 0
+        } as CourseStatusCounts,
+
+        recentCourses: [] as Course[],
+        loading: false
+    }),
+
+    getters: {
+        getDashboardStats: (state) => state.stats,
+        getRecentCourses: (state) => state.recentCourses
+    },
+
+    actions: {
+        async fetchDashboardData() {
+            this.loading = true;
+            try {
+                // Fetch courses and student stats in parallel
+                const [courses, studentStats] = await Promise.all([
+                    instructorService.getCourses(),
+                    instructorService.getMyStudentsStats()
+                ]);
+
+                // Update student stats from dedicated API
+                this.stats.totalCourses = courses.length;
+                this.stats.totalStudents = studentStats.total_students;
+                this.stats.completedStudents = studentStats.total_completed;
+
+                // Update course status counts
+                this.courseStatusCounts = {
+                    approved: courses.filter(c => c.status === 'APPROVED').length,
+                    pending: courses.filter(c => c.status === 'PENDING').length,
+                    draft: courses.filter(c => c.status === 'DRAFT').length,
+                    rejected: courses.filter(c => c.status === 'REJECTED').length
+                };
+
+                // Build recent courses list (first 3) from existing data
+                this.recentCourses = courses.slice(0, 3).map(course => ({
+                    id: course.id,
+                    title: course.title.th,
+                    students: 0,
+                    lessons: 0,
+                    icon: 'book',
+                    thumbnail: course.thumbnail_url || null
+                }));
+            } catch (error) {
+                console.error('Failed to fetch dashboard data:', error);
+            } finally {
+                this.loading = false;
+            }
+        }
+    }
+});
diff --git a/frontend_management/test_result/README.md b/frontend_management/test_result/README.md
new file mode 100644
index 00000000..1e4ca7db
--- /dev/null
+++ b/frontend_management/test_result/README.md
@@ -0,0 +1,36 @@
+# 📊 Test Results Index
+
+> รวม link ไปยังหน้ารายงานผลการทดสอบแต่ละส่วน
+
+---
+
+## 🔐 Auth
+
+| ชื่อกลุ่มทดสอบ | Link |
+|---|---|
+| Login Page Tests | [เปิดผลทดสอบ](./auth/Login_Page_Tests/index.html) |
+| Register Page Tests | [เปิดผลทดสอบ](./auth/Register_Page_Tests/index.html) |
+
+---
+
+## 👨‍💼 Admin
+
+| ชื่อกลุ่มทดสอบ | Link |
+|---|---|
+| Dashboard Tests | [เปิดผลทดสอบ](./Admin/Dashboard_Tests/index.html) |
+| Categories Page Tests | [เปิดผลทดสอบ](./Admin/Categories_Page_Tests/index.html) |
+| Audit Log Page Tests | [เปิดผลทดสอบ](./Admin/Audit_Log_Page_Tests/index.html) |
+| Pending Courses Page Tests | [เปิดผลทดสอบ](./Admin/Pending_Courses_Page_Tests/index.html) |
+| Recommended Courses Page Tests | [เปิดผลทดสอบ](./Admin/Recommended_Courses_Page_Tests/index.html) |
+| Users Page Tests | [เปิดผลทดสอบ](./Admin/Users_Page_Tests/index.html) |
+
+---
+
+## 👨‍🏫 Instructor
+
+| ชื่อกลุ่มทดสอบ | Link |
+|---|---|
+| Dashboard Tests | [เปิดผลทดสอบ](./Instructor/Dashboard_Tests/index.html) |
+| Courses List Page Tests | [เปิดผลทดสอบ](./Instructor/Courses_List_Page_Tests/index.html) |
+| Create Course & Structure Tests | [เปิดผลทดสอบ](./Instructor/Create_Course_&_Structure_Tests/index.html) |
+| Course Detail Tabs Tests | [เปิดผลทดสอบ](./Instructor/Course_Detail_Tabs_Tests/index.html) |
diff --git a/frontend_management/utils/date.ts b/frontend_management/utils/date.ts
deleted file mode 100644
index 1ce80cda..00000000
--- a/frontend_management/utils/date.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Format a date string into Thai locale format (Date only)
- * Example: 10 ม.ค. 67
- */
-export const formatDate = (date: string | Date | null | undefined): string => {
-    if (!date) return '-';
-
-    const d = typeof date === 'string' ? new Date(date) : date;
-
-    return d.toLocaleDateString('th-TH', {
-        day: 'numeric',
-        month: 'short',
-        year: '2-digit'
-    });
-};
-
-/**
- * Format a date string into Thai locale format (Date and Time)
- * Example: 10 ม.ค. 67 14:30
- */
-export const formatDateTime = (date: string | Date | null | undefined): string => {
-    if (!date) return '-';
-
-    const d = typeof date === 'string' ? new Date(date) : date;
-
-    return d.toLocaleDateString('th-TH', {
-        day: 'numeric',
-        month: 'short',
-        year: '2-digit',
-        hour: '2-digit',
-        minute: '2-digit'
-    });
-};