feat(users): add drag-and-drop reordering for PICs

Introduce pic_sort_order to persist custom user ordering
Replace data table with a custom draggable grid layout
Add API endpoint to handle bulk order updates

app/pages/management/users/index.vue

@@ -49,92 +49,121 @@
         </template>
 
         <div class="overflow-x-auto">
-          <UTable
-            :data="filteredUsers"
-            :columns="columns"
-            :loading="loadingUsers"
-            :empty="searchQuery.trim() ? 'No matching users found.' : 'No users available.'"
-            sticky="header"
-            caption="Users"
-            class="min-w-[820px]"
-          >
-            <template #fullName-cell="{ row }">
-              <div class="min-w-0 space-y-0.5 py-1">
-                <div class="font-semibold leading-tight text-highlighted">
-                  {{ row.original.fullName }}
+          <div class="min-w-[900px]" aria-label="Users">
+            <div class="grid grid-cols-[56px_minmax(190px,1.4fr)_minmax(150px,1fr)_120px_minmax(190px,1.2fr)_150px_minmax(230px,auto)] items-center gap-3 border-b border-default bg-muted px-4 py-2 text-xs font-semibold uppercase text-muted">
+              <div>Order</div>
+              <div>Display Name</div>
+              <div>PIC Phone</div>
+              <div>Role</div>
+              <div>Status</div>
+              <div>Last Login</div>
+              <div class="text-right">Actions</div>
+            </div>
+
+            <TransitionGroup tag="div" name="user-list" class="divide-y divide-default">
+              <div
+                v-for="user in filteredUsers"
+                :key="user.id"
+                :draggable="canReorderUsers"
+                class="grid grid-cols-[56px_minmax(190px,1.4fr)_minmax(150px,1fr)_120px_minmax(190px,1.2fr)_150px_minmax(230px,auto)] items-center gap-3 bg-default px-4 py-3 transition-[background,box-shadow,transform,opacity] duration-200"
+                :class="{
+                  'cursor-grab hover:bg-muted/60': canReorderUsers,
+                  'cursor-not-allowed opacity-70': !canReorderUsers,
+                  'scale-[0.99] opacity-60 shadow-lg': draggedUserId === user.id,
+                  'bg-muted': dragOverUserId === user.id
+                }"
+                @dragstart="startUserDrag($event, user)"
+                @dragover.prevent="overUserDrag($event, user)"
+                @drop.prevent="dropUserDrag"
+                @dragend="endUserDrag"
+              >
+                <div class="flex items-center">
+                  <UTooltip :text="canReorderUsers ? 'Drag to reorder' : 'Clear search to reorder'">
+                    <button
+                      type="button"
+                      class="inline-flex size-9 items-center justify-center rounded-md border border-default bg-default text-muted transition hover:text-default focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+                      :class="canReorderUsers ? 'cursor-grab active:cursor-grabbing' : 'cursor-not-allowed opacity-50'"
+                      :aria-label="`Drag ${user.fullName} to reorder PIC list`"
+                      :disabled="!canReorderUsers"
+                    >
+                      <UIcon name="i-lucide-grip-vertical" class="size-4" />
+                    </button>
+                  </UTooltip>
                 </div>
-                <div class="text-xs text-muted">
-                  @{{ row.original.username }}
+
+                <div class="min-w-0 space-y-0.5 py-1">
+                  <div class="font-semibold leading-tight text-highlighted">
+                    {{ user.fullName }}
+                  </div>
+                  <div class="text-xs text-muted">
+                    @{{ user.username }}
+                  </div>
                 </div>
-              </div>
-            </template>
 
-            <template #phoneNumber-cell="{ row }">
-              <span class="text-sm" :class="row.original.phoneNumber ? 'text-default' : 'text-muted'">
-                {{ row.original.phoneNumber || 'Not set' }}
-              </span>
-            </template>
+                <span class="text-sm" :class="user.phoneNumber ? 'text-default' : 'text-muted'">
+                  {{ user.phoneNumber || 'Not set' }}
+                </span>
 
-            <template #role-cell="{ row }">
-              <UBadge
-                :label="row.original.role === 'super_admin' ? 'Super Admin' : 'Staff'"
-                :color="row.original.role === 'super_admin' ? 'primary' : 'neutral'"
-                variant="soft"
-              />
-            </template>
-
-            <template #status-cell="{ row }">
-              <div class="space-y-1.5 py-1">
-                <div class="flex flex-wrap gap-1.5">
+                <div>
                   <UBadge
-                    :label="row.original.mustChangePassword ? 'Password reset' : 'Password ready'"
-                    :color="row.original.mustChangePassword ? 'warning' : 'success'"
+                    :label="user.role === 'super_admin' ? 'Super Admin' : 'Staff'"
+                    :color="user.role === 'super_admin' ? 'primary' : 'neutral'"
                     variant="soft"
-                    size="sm"
-                  />
-                  <UBadge
-                    :label="row.original.passkeyCount > 0 ? 'Passkey ready' : 'No passkey'"
-                    :color="row.original.passkeyCount > 0 ? 'success' : 'neutral'"
-                    variant="soft"
-                    size="sm"
                   />
                 </div>
 
-                <div class="text-xs text-muted">
-                  {{ row.original.passkeyCount }} passkey{{ row.original.passkeyCount === 1 ? '' : 's' }}
+                <div class="space-y-1.5 py-1">
+                  <div class="flex flex-wrap gap-1.5">
+                    <UBadge
+                      :label="user.mustChangePassword ? 'Password reset' : 'Password ready'"
+                      :color="user.mustChangePassword ? 'warning' : 'success'"
+                      variant="soft"
+                      size="sm"
+                    />
+                    <UBadge
+                      :label="user.passkeyCount > 0 ? 'Passkey ready' : 'No passkey'"
+                      :color="user.passkeyCount > 0 ? 'success' : 'neutral'"
+                      variant="soft"
+                      size="sm"
+                    />
+                  </div>
+
+                  <div class="text-xs text-muted">
+                    {{ user.passkeyCount }} passkey{{ user.passkeyCount === 1 ? '' : 's' }}
+                  </div>
+                </div>
+
+                <span class="text-xs text-muted sm:text-sm">
+                  {{ formatDateTime(user.lastLoginAt, 'Never') }}
+                </span>
+
+                <div class="flex flex-wrap justify-end gap-1.5 py-1">
+                  <UButton
+                    label="Edit"
+                    color="neutral"
+                    variant="outline"
+                    icon="i-lucide-pencil-line"
+                    size="sm"
+                    @click="openEditModal(user)"
+                  />
+
+                  <UButton
+                    label="Reset Password"
+                    color="neutral"
+                    variant="outline"
+                    icon="i-lucide-key-round"
+                    size="sm"
+                    :loading="resettingUserId === user.id"
+                    @click="resetPassword(user)"
+                  />
                 </div>
               </div>
-            </template>
+            </TransitionGroup>
 
-            <template #lastLoginAt-cell="{ row }">
-              <span class="text-xs text-muted sm:text-sm">
-                {{ formatDateTime(row.original.lastLoginAt, 'Never') }}
-              </span>
-            </template>
-
-            <template #actions-cell="{ row }">
-              <div class="flex flex-wrap justify-end gap-1.5 py-1">
-                <UButton
-                  label="Edit"
-                  color="neutral"
-                  variant="outline"
-                  icon="i-lucide-pencil-line"
-                  size="sm"
-                  @click="openEditModal(row.original)"
-                />
-
-                <UButton
-                  label="Reset Password"
-                  color="neutral"
-                  variant="outline"
-                  icon="i-lucide-key-round"
-                  size="sm"
-                  :loading="resettingUserId === row.original.id"
-                  @click="resetPassword(row.original)"
-                />
-              </div>
-            </template>
-          </UTable>
+            <div v-if="!filteredUsers.length" class="px-4 py-10 text-center text-sm text-muted">
+              {{ searchQuery.trim() ? 'No matching users found.' : 'No users available.' }}
+            </div>
+          </div>
         </div>
       </UCard>
 
@@ -233,12 +262,17 @@ const auth = useAuth()
 const users = ref<ManagedUser[]>([])
 const loadingUsers = ref(false)
 const savingUser = ref(false)
+const savingPicOrder = ref(false)
 const resettingUserId = ref<string | null>(null)
 const issuedPasswordMessage = ref('')
 const searchQuery = ref('')
 const editorOpen = ref(false)
 const editorMode = ref<'create' | 'edit'>('create')
 const editingUserId = ref<string | null>(null)
+const draggedUserId = ref<string | null>(null)
+const dragOverUserId = ref<string | null>(null)
+const dragSaveStarted = ref(false)
+let usersBeforeDrag: ManagedUser[] = []
 
 const userForm = reactive({
   fullName: '',
@@ -252,19 +286,13 @@ const roleOptions = [
   { label: 'Super Admin', value: 'super_admin' }
 ]
 
-const columns = [
-  { accessorKey: 'fullName', header: 'Display Name' },
-  { accessorKey: 'phoneNumber', header: 'PIC Phone' },
-  { accessorKey: 'role', header: 'Role' },
-  { id: 'status', header: 'Status' },
-  { accessorKey: 'lastLoginAt', header: 'Last Login' },
-  { id: 'actions', header: 'Actions' }
-]
-
 const isEditMode = computed(() => editorMode.value === 'edit')
 const isEditingCurrentUser = computed(() => {
   return isEditMode.value && editingUserId.value === auth.user.value?.id
 })
+const canReorderUsers = computed(() => {
+  return !searchQuery.value.trim() && !loadingUsers.value && !savingPicOrder.value
+})
 
 const filteredUsers = computed(() => {
   const keyword = searchQuery.value.trim().toLowerCase()
@@ -358,6 +386,131 @@ async function refreshUsers() {
   }
 }
 
+function moveUserNearTarget(sourceUserId: string, targetUserId: string, insertAfterTarget: boolean) {
+  if (sourceUserId === targetUserId) {
+    return
+  }
+
+  const sourceIndex = users.value.findIndex((user) => user.id === sourceUserId)
+  const currentUserIds = users.value.map((user) => user.id)
+
+  if (sourceIndex === -1 || !currentUserIds.includes(targetUserId)) {
+    return
+  }
+
+  const reorderedUsers = [...users.value]
+  const [movedUser] = reorderedUsers.splice(sourceIndex, 1)
+  const targetIndex = reorderedUsers.findIndex((user) => user.id === targetUserId)
+
+  if (targetIndex === -1) {
+    return
+  }
+
+  reorderedUsers.splice(insertAfterTarget ? targetIndex + 1 : targetIndex, 0, movedUser)
+
+  const nextUserIds = reorderedUsers.map((user) => user.id)
+
+  if (nextUserIds.join('|') === currentUserIds.join('|')) {
+    return
+  }
+
+  users.value = reorderedUsers
+}
+
+function resetDragState() {
+  draggedUserId.value = null
+  dragOverUserId.value = null
+  dragSaveStarted.value = false
+  usersBeforeDrag = []
+}
+
+function startUserDrag(event: DragEvent, user: ManagedUser) {
+  if (!canReorderUsers.value) {
+    event.preventDefault()
+    return
+  }
+
+  draggedUserId.value = user.id
+  dragOverUserId.value = user.id
+  dragSaveStarted.value = false
+  usersBeforeDrag = [...users.value]
+  event.dataTransfer?.setData('text/plain', user.id)
+
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+  }
+}
+
+function overUserDrag(event: DragEvent, user: ManagedUser) {
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move'
+  }
+
+  if (!canReorderUsers.value || !draggedUserId.value || draggedUserId.value === user.id) {
+    return
+  }
+
+  const target = event.currentTarget
+
+  if (!(target instanceof HTMLElement)) {
+    return
+  }
+
+  const rect = target.getBoundingClientRect()
+  const insertAfterTarget = event.clientY > rect.top + rect.height / 2
+
+  dragOverUserId.value = user.id
+  moveUserNearTarget(draggedUserId.value, user.id, insertAfterTarget)
+}
+
+async function dropUserDrag() {
+  if (!draggedUserId.value || savingPicOrder.value) {
+    return
+  }
+
+  dragSaveStarted.value = true
+  savingPicOrder.value = true
+
+  try {
+    const response = await apiClient<{ users: ManagedUser[] }>('/api/admin/users/order', {
+      method: 'PATCH',
+      body: {
+        userIds: users.value.map((user) => user.id)
+      }
+    })
+
+    users.value = response.users
+    toast.add({
+      title: 'PIC order saved',
+      color: 'success',
+      icon: 'i-lucide-check-circle-2'
+    })
+  } catch (error: any) {
+    users.value = usersBeforeDrag
+    toast.add({
+      title: 'PIC order could not be saved',
+      description: getErrorMessage(error, 'Please try again in a moment.'),
+      color: 'error',
+      icon: 'i-lucide-circle-alert'
+    })
+  } finally {
+    savingPicOrder.value = false
+    resetDragState()
+  }
+}
+
+function endUserDrag() {
+  if (dragSaveStarted.value) {
+    return
+  }
+
+  if (draggedUserId.value && usersBeforeDrag.length) {
+    users.value = usersBeforeDrag
+  }
+
+  resetDragState()
+}
+
 async function saveUser(event: FormSubmitEvent<typeof userForm>) {
   event.preventDefault()
 
@@ -466,3 +619,22 @@ async function resetPassword(user: ManagedUser) {
   }
 }
 </script>
+
+<style scoped>
+.user-list-move,
+.user-list-enter-active,
+.user-list-leave-active {
+  transition: transform 180ms ease, opacity 160ms ease, background-color 160ms ease;
+}
+
+.user-list-enter-from,
+.user-list-leave-to {
+  opacity: 0;
+  transform: translateY(6px);
+}
+
+.user-list-leave-active {
+  position: absolute;
+  width: 100%;
+}
+</style>