refactor: centralize validation, error handling, and formatting logic

Extract shared auth logic and validation rules to shared/auth.ts
Introduce utility functions for HTTP errors and user input parsing
Standardize error messages and date formatting across the app

app/pages/management/users/index.vue

@@ -108,7 +108,7 @@
 
             <template #lastLoginAt-cell="{ row }">
               <span class="text-xs text-muted sm:text-sm">
-                {{ formatDate(row.original.lastLoginAt) }}
+                {{ formatDateTime(row.original.lastLoginAt, 'Never') }}
               </span>
             </template>
 
@@ -208,13 +208,19 @@
 import type { FormError, FormSubmitEvent } from '@nuxt/ui'
 
 import {
-  USERNAME_PATTERN,
+  hasValidFullName,
   isValidPhoneNumber,
+  isValidUsername,
+  normalizeFullName,
   normalizePhoneNumber,
+  normalizeUsername,
   type ManagedUser,
   type UserRole
 } from '~~/shared/auth'
 
+import { getErrorMessage } from '../../../utils/errors'
+import { formatDateTime } from '../../../utils/formatters'
+
 definePageMeta({
   middleware: 'super-admin'
 })
@@ -314,11 +320,11 @@ function closeEditor() {
 function validateUserForm(state: typeof userForm): FormError[] {
   const errors: FormError[] = []
 
-  if (state.fullName.trim().length < 2) {
+  if (!hasValidFullName(state.fullName)) {
     errors.push({ name: 'fullName', message: 'Enter a display name with at least 2 characters.' })
   }
 
-  if (!isEditMode.value && !USERNAME_PATTERN.test(state.username.trim().toLowerCase())) {
+  if (!isEditMode.value && !isValidUsername(state.username)) {
     errors.push({ name: 'username', message: 'Use 3 to 32 lowercase letters, numbers, dot, dash, or underscore.' })
   }
 
@@ -342,7 +348,7 @@ async function refreshUsers() {
   } catch (error: any) {
     toast.add({
       title: 'Unable to load users',
-      description: error?.data?.statusMessage || 'The user list could not be loaded.',
+      description: getErrorMessage(error, 'The user list could not be loaded.'),
       color: 'error',
       icon: 'i-lucide-circle-alert'
     })
@@ -365,7 +371,7 @@ async function saveUser(event: FormSubmitEvent<typeof userForm>) {
       await apiClient(`/api/admin/users/${editingUserId.value}`, {
         method: 'PATCH',
         body: {
-          fullName: userForm.fullName.trim(),
+          fullName: normalizeFullName(userForm.fullName),
           phoneNumber: normalizePhoneNumber(userForm.phoneNumber),
           role: userForm.role
         }
@@ -377,7 +383,7 @@ async function saveUser(event: FormSubmitEvent<typeof userForm>) {
 
       toast.add({
         title: 'User updated',
-        description: `${userForm.fullName.trim()} has been updated.`,
+        description: `${normalizeFullName(userForm.fullName)} has been updated.`,
         color: 'success',
         icon: 'i-lucide-check-circle-2'
       })
@@ -388,8 +394,8 @@ async function saveUser(event: FormSubmitEvent<typeof userForm>) {
       }>('/api/admin/users', {
         method: 'POST',
         body: {
-          fullName: userForm.fullName.trim(),
-          username: userForm.username.trim().toLowerCase(),
+          fullName: normalizeFullName(userForm.fullName),
+          username: normalizeUsername(userForm.username),
           phoneNumber: normalizePhoneNumber(userForm.phoneNumber),
           role: userForm.role
         }
@@ -410,7 +416,10 @@ async function saveUser(event: FormSubmitEvent<typeof userForm>) {
   } catch (error: any) {
     toast.add({
       title: isEditMode.value ? 'Update failed' : 'User creation failed',
-      description: error?.data?.statusMessage || (isEditMode.value ? 'Unable to update this user.' : 'Unable to create the new user.'),
+      description: getErrorMessage(
+        error,
+        isEditMode.value ? 'Unable to update this user.' : 'Unable to create the new user.'
+      ),
       color: 'error',
       icon: 'i-lucide-circle-alert'
     })
@@ -447,7 +456,7 @@ async function resetPassword(user: ManagedUser) {
   } catch (error: any) {
     toast.add({
       title: 'Reset failed',
-      description: error?.data?.statusMessage || 'Unable to reset this password.',
+      description: getErrorMessage(error, 'Unable to reset this password.'),
       color: 'error',
       icon: 'i-lucide-circle-alert'
     })
@@ -455,15 +464,4 @@ async function resetPassword(user: ManagedUser) {
     resettingUserId.value = null
   }
 }
-
-function formatDate(value: string | null) {
-  if (!value) {
-    return 'Never'
-  }
-
-  return new Intl.DateTimeFormat('en-MY', {
-    dateStyle: 'medium',
-    timeStyle: 'short'
-  }).format(new Date(value))
-}
 </script>