@nuxt-customer-portal/service-requests 0.3.1 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @nuxt-customer-portal/service-requests
 
+## 0.3.3
+
+### Patch Changes
+
+- @nuxt-customer-portal/clients@0.3.3
+- @nuxt-customer-portal/core@0.3.3
+
+## 0.3.2
+
+### Patch Changes
+
+- 903e0ce: Show service-request dashboard widgets after time and invoice widgets so daily work and billing take priority.
+- 6994c36: Align customer and admin request lists with the portal collection toolbar, card layout, and fixed pagination footer. Preserve filters and sorting through detail navigation, support adjacent-page loading, and show scoped category choices independently of the current page.
+
+  Repair request editing and deletion confirmation, add localized form validation, and provide working admin status, priority, provider-team assignment, and internal-note controls.
+
+  Provide one request workspace with permission-aware management controls. Redirect legacy admin links while preserving collection state, and keep creation in the list header rather than the sidebar. Allow the dashboard body to shrink beneath the top bar so mobile pagination remains visible.
+
+- 1b55b42: Place Service Requests after Invoices and before Administration in portal navigation.
+- Updated dependencies [f23f664]
+  - @nuxt-customer-portal/core@0.3.2
+  - @nuxt-customer-portal/clients@0.3.2
+
 ## 0.3.1
 
 ### Patch Changes

package/README.md

@@ -14,3 +14,11 @@ The schema is exported from `server/db/schema/service-requests.ts`. Its tables a
 enums live in the `service_requests` PostgreSQL schema; portal core and authentication
 remain in `public`. The host Drizzle configuration discovers feature schemas and owns
 the single ordered migration history.
+
+## Request workspace
+
+Everyone uses the same `/requests` workspace, with a responsive card list and the portal search/filter/sort toolbar. Lists use 20-item server pages, numbered navigation, adjacent-page loading, and URL-persisted collection state. Detail-page back links retain that state. Category choices come from the authorized collection, rather than only the currently loaded page. Old `/admin/requests` links redirect to the equivalent workspace route, preserving query parameters.
+
+Administrators see management controls on the request detail page and can save status, priority, assignment, and internal notes together. New assignees must belong to the provider organization. Customer edits use the shared request form; deletion requires confirmation.
+
+Run `node --import tsx --test packages/service-requests/test/service-request.test.ts` for validation and locale checks. Against a freshly seeded local demo, run `DEMO_TEST_URL=http://localhost:3051 node --import tsx packages/service-requests/test/demo-browser.integration.ts` for browser checks. The browser check creates and cleans up one temporary request and expects the standard 36-request demo dataset.

package/app/components/CustomerRequestDetail.vue

@@ -1,76 +1,64 @@
 <script setup lang="ts">
 import type { ServiceRequest } from '@nuxt-customer-portal/service-requests/shared/types/service-request'
 
-const props = defineProps<{
-  requestId: string
-  canEdit?: boolean
-  canDelete?: boolean
-}>()
-const { t } = useI18n()
-const { getPriorityColor } = useServiceRequests()
-defineEmits<{
-  edit: []
-  delete: []
-}>()
-const { getRequest } = useServiceRequests()
-const request = ref<ServiceRequest | null>(await getRequest(props.requestId))
-
-const formatDate = (date: string | Date) => {
-  return new Date(date).toLocaleDateString()
-}
+defineProps<{ request: ServiceRequest; canEdit?: boolean; canDelete?: boolean }>()
+defineEmits<{ edit: []; delete: [] }>()
+const { t, locale } = useI18n()
+const { getPriorityColor, getPriorityBadgeText, getStatusColor, getStatusBadgeText } = useServiceRequests()
+const formatDate = (date: string) =>
+  new Intl.DateTimeFormat(locale.value, { dateStyle: 'medium' }).format(new Date(date))
 </script>
 
 <template>
-  <div v-if="request" class="space-y-6">
-    <div class="flex justify-between items-start">
-      <div>
-        <div class="flex gap-2 mt-2">
-          <UBadge :color="getPriorityColor(request.priority)">
-            {{ request.priority }}
-          </UBadge>
-          <StatusBadge :status="request.status" />
-          <UBadge v-if="request.category" variant="soft">
-            {{ request.category }}
-          </UBadge>
+  <UCard>
+    <template #header>
+      <div class="flex flex-wrap items-start justify-between gap-3">
+        <div class="min-w-0 flex-1">
+          <h1 class="break-words text-xl font-semibold text-highlighted">{{ request.title }}</h1>
+          <div class="mt-3 flex flex-wrap gap-2">
+            <UBadge :color="getStatusColor(request.status)" variant="subtle">{{
+              getStatusBadgeText(request.status)
+            }}</UBadge>
+            <UBadge :color="getPriorityColor(request.priority)" variant="subtle">{{
+              getPriorityBadgeText(request.priority)
+            }}</UBadge>
+            <UBadge v-if="request.category" color="neutral" variant="subtle">{{ request.category }}</UBadge>
+          </div>
+        </div>
+        <div v-if="canEdit || canDelete" class="flex gap-2">
+          <UButton v-if="canEdit" icon="i-lucide-pencil" color="neutral" variant="outline" @click="$emit('edit')">{{
+            t('common.edit')
+          }}</UButton>
+          <UButton
+            v-if="canDelete"
+            icon="i-lucide-trash-2"
+            color="error"
+            variant="ghost"
+            :aria-label="t('features.serviceRequests.delete')"
+            @click="$emit('delete')"
+          />
         </div>
       </div>
-
-      <div class="flex gap-2">
-        <UButton v-if="canEdit" variant="ghost" @click="$emit('edit')">
-          {{ t('features.serviceRequests.edit') }}
-        </UButton>
-        <UButton v-if="canDelete" variant="ghost" color="error" @click="$emit('delete')">
-          {{ t('features.serviceRequests.delete') }}
-        </UButton>
-      </div>
-    </div>
-
-    <USeparator />
-
-    <div class="prose dark:prose-invert max-w-none">
-      <h3>{{ t('features.serviceRequests.fields.description') }}</h3>
-      <p>{{ request.description }}</p>
-    </div>
-
-    <USeparator />
-
-    <div class="grid grid-cols-2 gap-4 text-sm">
-      <!-- <div>
-        <span class="font-semibold">{{ t('features.serviceRequests.fields.createdBy') }}:</span>
-        {{ request.createdBy?.name || request.createdBy?.email }}
-      </div> -->
+    </template>
+    <div class="space-y-6">
       <div>
-        <span class="font-semibold">{{ t('features.serviceRequests.fields.createdAt') }}:</span>
-        {{ formatDate(request.createdAt) }}
-      </div>
-      <!-- <div v-if="request.assignedTo">
-        <span class="font-semibold">{{ t('features.serviceRequests.fields.assignedTo') }}:</span>
-        {{ request.assignedTo.name || request.assignedTo.email }}
-      </div> -->
-      <div v-if="request.resolvedAt">
-        <span class="font-semibold">{{ t('features.serviceRequests.fields.resolvedAt') }}:</span>
-        {{ formatDate(request.resolvedAt) }}
+        <h2 class="text-sm font-semibold text-highlighted">{{ t('features.serviceRequests.fields.description') }}</h2>
+        <p class="mt-2 whitespace-pre-wrap break-words text-sm leading-6 text-muted">{{ request.description }}</p>
       </div>
+      <dl class="grid grid-cols-1 gap-4 border-t border-default pt-4 text-sm sm:grid-cols-3">
+        <div v-if="request.clientName">
+          <dt class="text-muted">{{ t('features.serviceRequests.fields.client') }}</dt>
+          <dd class="mt-1 font-medium">{{ request.clientName }}</dd>
+        </div>
+        <div>
+          <dt class="text-muted">{{ t('features.serviceRequests.fields.createdAt') }}</dt>
+          <dd class="mt-1 font-medium">{{ formatDate(request.createdAt) }}</dd>
+        </div>
+        <div v-if="request.resolvedAt">
+          <dt class="text-muted">{{ t('features.serviceRequests.fields.resolvedAt') }}</dt>
+          <dd class="mt-1 font-medium">{{ formatDate(request.resolvedAt) }}</dd>
+        </div>
+      </dl>
     </div>
-  </div>
+  </UCard>
 </template>

package/app/components/CustomerRequestForm.vue

@@ -39,13 +39,26 @@ watch(
   }
 )
 
-const schema = z.object({
-  clientOrganizationId: activeOrganizationType.value === 'PROVIDER' ? z.string().min(1) : z.string().optional(),
-  title: z.string().min(3).max(200),
-  description: z.string().min(10).max(5000),
-  priority: z.enum(['LOW', 'MEDIUM', 'HIGH', 'URGENT']),
-  category: z.string().max(100).optional()
-})
+const schema = computed(() =>
+  z.object({
+    clientOrganizationId:
+      activeOrganizationType.value === 'PROVIDER'
+        ? z.string().min(1, t('features.serviceRequests.validation.client'))
+        : z.string().optional(),
+    title: z
+      .string()
+      .trim()
+      .min(3, t('features.serviceRequests.validation.title'))
+      .max(200, t('features.serviceRequests.validation.title')),
+    description: z
+      .string()
+      .trim()
+      .min(10, t('features.serviceRequests.validation.description'))
+      .max(5000, t('features.serviceRequests.validation.description')),
+    priority: z.enum(['LOW', 'MEDIUM', 'HIGH', 'URGENT']),
+    category: z.string().trim().max(100, t('features.serviceRequests.validation.category')).optional()
+  })
+)
 
 const { priorityOptions, getStatusBadgeText, getStatusColor } = useServiceRequests()
 
@@ -55,7 +68,7 @@ const handleSubmit = () => {
 </script>
 
 <template>
-  <UForm :state="state" :schema="schema" class="w-full" @submit="handleSubmit">
+  <UForm :state="state" :schema="schema" novalidate class="w-full" @submit="handleSubmit">
     <!-- Wrap in real DOM nodes so spacing is guaranteed -->
     <div class="space-y-6">
       <ClientsClientPicker
@@ -130,7 +143,14 @@ const handleSubmit = () => {
 
       <div class="pt-4 border-t border-default">
         <div class="flex flex-col-reverse sm:flex-row sm:justify-end gap-3">
-          <UButton type="button" variant="outline" size="lg" :disabled="loading" @click="$emit('cancel')">
+          <UButton
+            type="button"
+            color="neutral"
+            variant="outline"
+            size="lg"
+            :disabled="loading"
+            @click="$emit('cancel')"
+          >
             {{ t('common.cancel') }}
           </UButton>
           <UButton type="submit" color="primary" size="lg" :loading="loading">

package/app/components/ServiceRequestManagement.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { ServiceRequest } from '@nuxt-customer-portal/service-requests/shared/types/service-request'
+
+const props = defineProps<{ request: ServiceRequest }>()
+const emit = defineEmits<{ updated: [request: ServiceRequest] }>()
+const request = toRef(props, 'request')
+const { t } = useI18n()
+const { statusOptions, priorityOptions } = useServiceRequests()
+const { adminUpdateRequest, getAssignees } = useAdminServiceRequests()
+const toast = useToast()
+const loading = ref(true)
+const updating = ref(false)
+const assignees = ref<Array<{ id: string; name: string; image: string | null }>>([])
+const state = reactive({
+  status: 'OPEN' as ServiceRequest['status'],
+  priority: 'MEDIUM' as ServiceRequest['priority'],
+  assignedToId: '__unassigned',
+  internalNotes: ''
+})
+const schema = computed(() =>
+  z.object({
+    status: z.enum(['OPEN', 'IN_PROGRESS', 'RESOLVED', 'CLOSED']),
+    priority: z.enum(['LOW', 'MEDIUM', 'HIGH', 'URGENT']),
+    assignedToId: z.string(),
+    internalNotes: z.string().max(5000, t('features.serviceRequests.validation.notes'))
+  })
+)
+const userOptions = computed(() => [
+  { label: t('features.serviceRequests.list.unassigned'), value: '__unassigned' },
+  ...assignees.value.map((user) => ({
+    label: user.name,
+    value: user.id,
+    avatar: { src: user.image || undefined, alt: user.name }
+  })),
+  ...(request.value?.assignedToId && !assignees.value.some((user) => user.id === request.value?.assignedToId)
+    ? [{ label: t('features.serviceRequests.list.previousAssignee'), value: request.value.assignedToId }]
+    : [])
+])
+const reset = () => {
+  if (request.value) {
+    Object.assign(state, {
+      status: request.value.status,
+      priority: request.value.priority,
+      assignedToId: request.value.assignedToId || '__unassigned',
+      internalNotes: request.value.internalNotes || ''
+    })
+  }
+}
+watch(request, reset, { immediate: true })
+onMounted(async () => {
+  try {
+    assignees.value = await getAssignees()
+    reset()
+  } catch {
+    toast.add({ title: t('features.serviceRequests.messages.fetchError'), color: 'error' })
+  } finally {
+    loading.value = false
+  }
+})
+const save = async () => {
+  updating.value = true
+  try {
+    const updated = await adminUpdateRequest(request.value.id, {
+      ...state,
+      assignedToId: state.assignedToId === '__unassigned' ? '' : state.assignedToId
+    })
+    emit('updated', updated)
+    await nextTick()
+    reset()
+    toast.add({ title: t('features.serviceRequests.messages.updateSuccess'), color: 'success' })
+  } catch {
+    toast.add({ title: t('features.serviceRequests.messages.updateError'), color: 'error' })
+  } finally {
+    updating.value = false
+  }
+}
+</script>
+
+<template>
+  <UCard>
+    <template #header
+      ><h2 class="font-semibold">{{ t('features.serviceRequests.actions.adminActions') }}</h2></template
+    >
+    <UForm :disabled="loading || updating" :schema="schema" :state="state" novalidate class="space-y-4" @submit="save">
+      <div class="grid gap-4 sm:grid-cols-2">
+        <UFormField name="status" :label="t('features.serviceRequests.fields.status')"
+          ><USelect v-model="state.status" :items="statusOptions.filter((item) => item.value)" class="w-full"
+        /></UFormField>
+        <UFormField name="priority" :label="t('features.serviceRequests.fields.priority')"
+          ><USelect v-model="state.priority" :items="priorityOptions.filter((item) => item.value)" class="w-full"
+        /></UFormField>
+      </div>
+      <UFormField name="assignedToId" :label="t('features.serviceRequests.fields.assignedTo')"
+        ><USelect v-model="state.assignedToId" :items="userOptions" class="w-full"
+      /></UFormField>
+      <UFormField
+        name="internalNotes"
+        :label="t('features.serviceRequests.fields.internalNotes')"
+        :description="t('features.serviceRequests.placeholders.internalNotes')"
+        ><UTextarea v-model="state.internalNotes" :rows="4" class="w-full"
+      /></UFormField>
+      <div class="flex justify-end gap-2 border-t border-default pt-4">
+        <UButton color="neutral" variant="outline" :disabled="updating" @click="reset">{{ t('common.cancel') }}</UButton
+        ><UButton type="submit" :loading="updating">{{ t('features.serviceRequests.actions.saveChanges') }}</UButton>
+      </div>
+    </UForm>
+  </UCard>
+</template>

package/app/components/ServiceRequestsList.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import type { ServiceRequest } from '@nuxt-customer-portal/service-requests/shared/types/service-request'
+
+const route = useRoute()
+const { t, locale } = useI18n()
+const { can } = useServiceRequestAccess()
+const isAdmin = computed(() => can('manage'))
+const { statusOptions, priorityOptions, getStatusColor, getStatusBadgeText, getPriorityColor, getPriorityBadgeText } =
+  useServiceRequests()
+const listing = useServiceRequestList({
+  endpoint: '/api/service-requests',
+  filterKeys: ['status', 'priority', 'category'],
+  defaultSort: 'createdAt',
+  defaultSortDir: 'desc'
+})
+const title = computed(() => t('features.serviceRequests.title'))
+useSeoMeta({ title: () => title.value })
+const filters = computed(() => [
+  { key: 'status', placeholder: t('features.serviceRequests.filters.status'), items: statusOptions.value },
+  { key: 'priority', placeholder: t('features.serviceRequests.filters.priority'), items: priorityOptions.value },
+  {
+    key: 'category',
+    placeholder: t('features.serviceRequests.filters.category'),
+    items: [
+      { label: t('features.serviceRequests.filters.allCategories'), value: undefined },
+      ...Array.from(
+        new Set([...listing.categories.value, ...(listing.filters.category ? [listing.filters.category] : [])])
+      ).map((value) => ({ label: value, value }))
+    ]
+  }
+])
+const sortOptions = computed(() =>
+  ['createdAt', 'status', 'priority'].map((value) => ({ label: t(`features.serviceRequests.fields.${value}`), value }))
+)
+const filtered = computed(() => Boolean(listing.search.value.trim() || Object.values(listing.filters).some(Boolean)))
+const detailTo = (request: ServiceRequest) => ({
+  path: `/requests/${request.id}`,
+  query: { ...route.query, from: 'list' }
+})
+const formatDate = (date: string) =>
+  new Intl.DateTimeFormat(locale.value, { dateStyle: 'medium' }).format(new Date(date))
+await listing.load()
+</script>
+
+<template>
+  <section class="mx-auto flex h-full min-h-0 w-full max-w-[1440px] flex-col gap-5 px-4 py-5 sm:px-6">
+    <header class="flex shrink-0 flex-wrap items-end justify-between gap-3 border-b border-default pb-4">
+      <div class="min-w-0">
+        <h1 class="flex items-center gap-3 text-xl font-semibold text-highlighted">
+          <UIcon name="i-lucide-ticket" class="size-5 shrink-0 text-primary" />{{ title }}
+        </h1>
+        <p class="mt-1 text-sm text-muted">
+          {{
+            t(isAdmin ? 'features.serviceRequests.list.adminDescription' : 'features.serviceRequests.list.description')
+          }}
+        </p>
+      </div>
+      <div class="flex items-center gap-2">
+        <UButton v-if="can('create')" to="/requests/new" icon="i-lucide-plus" variant="outline" size="sm">{{
+          t('features.serviceRequests.navigation.newRequest')
+        }}</UButton>
+        <UButton
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-refresh-cw"
+          :aria-label="t('common.refresh')"
+          :loading="listing.pending.value"
+          @click="listing.refresh()"
+        />
+      </div>
+    </header>
+    <PortalListToolbar
+      v-model:search="listing.search.value"
+      :search-placeholder="t('features.serviceRequests.list.search')"
+      :filters="filters"
+      :filter-values="listing.filters"
+      :sort-options="sortOptions"
+      :sort-by="listing.sortBy.value"
+      :sort-dir="listing.sortDir.value"
+      @filter="listing.setFilter"
+      @sort="listing.sortBy.value = $event"
+      @toggle-direction="listing.toggleSortDir"
+    />
+    <ServiceRequestsPaginatedList
+      class="min-h-0 flex-1"
+      :pagination="listing.pagination.value"
+      :pending="listing.pending.value"
+      :loading-next="listing.loadingNextPage.value"
+      :loading-previous="listing.loadingPreviousPage.value"
+      :has-next="listing.hasNextPage.value"
+      :has-previous="listing.hasPreviousPage.value"
+      :error="Boolean(listing.error.value)"
+      @next="listing.loadNext"
+      @previous="listing.loadPrevious"
+      @page="listing.goToPage"
+    >
+      <UAlert
+        v-if="listing.error.value"
+        color="error"
+        variant="outline"
+        icon="i-lucide-circle-alert"
+        :title="t('features.serviceRequests.messages.fetchError')"
+        class="mb-3"
+      >
+        <template #actions
+          ><UButton color="error" variant="outline" @click="listing.refresh()">{{
+            t('features.serviceRequests.dashboard.retry')
+          }}</UButton></template
+        >
+      </UAlert>
+      <UEmpty
+        v-else-if="!listing.items.value.length"
+        icon="i-lucide-ticket"
+        :title="t(filtered ? 'features.serviceRequests.list.noMatches' : 'features.serviceRequests.list.emptyTitle')"
+        :description="
+          t(
+            filtered
+              ? 'features.serviceRequests.list.noMatchesDescription'
+              : 'features.serviceRequests.list.emptyDescription'
+          )
+        "
+      >
+        <template v-if="!filtered && can('create')" #actions
+          ><UButton to="/requests/new" icon="i-lucide-plus">{{
+            t('features.serviceRequests.list.createFirst')
+          }}</UButton></template
+        >
+      </UEmpty>
+      <div class="grid gap-3">
+        <UCard
+          v-for="request in listing.items.value"
+          :key="request.id"
+          class="transition-colors hover:ring-1 hover:ring-primary/50"
+          :ui="{ body: 'p-0 sm:p-0' }"
+        >
+          <NuxtLink
+            :to="detailTo(request)"
+            class="group grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 rounded-lg p-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+          >
+            <div class="min-w-0">
+              <div class="flex flex-wrap items-center gap-2">
+                <h2 class="break-words font-semibold text-highlighted">{{ request.title }}</h2>
+                <UBadge :color="getStatusColor(request.status)" variant="subtle">{{
+                  getStatusBadgeText(request.status)
+                }}</UBadge>
+                <UBadge :color="getPriorityColor(request.priority)" variant="subtle">{{
+                  getPriorityBadgeText(request.priority)
+                }}</UBadge>
+              </div>
+              <p class="mt-1 line-clamp-2 text-sm text-muted">{{ request.description }}</p>
+              <div class="mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted">
+                <template v-if="request.clientName"
+                  ><span>{{ request.clientName }}</span
+                  ><span aria-hidden="true">·</span></template
+                >
+                <span>{{ formatDate(request.createdAt) }}</span>
+                <template v-if="request.category"
+                  ><span aria-hidden="true">·</span><span>{{ request.category }}</span></template
+                >
+              </div>
+            </div>
+            <UIcon name="i-lucide-chevron-right" class="size-5 shrink-0 text-muted group-hover:text-highlighted" />
+          </NuxtLink>
+        </UCard>
+      </div>
+    </ServiceRequestsPaginatedList>
+  </section>
+</template>

package/app/components/ServiceRequestsPaginatedList.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { ServiceRequestPagination } from '@nuxt-customer-portal/service-requests/shared/types/service-request'
+
+const props = defineProps<{
+  pagination: ServiceRequestPagination
+  pending: boolean
+  loadingNext: boolean
+  loadingPrevious: boolean
+  hasNext: boolean
+  hasPrevious: boolean
+  initialScrollTop?: number
+  error?: boolean
+}>()
+const emit = defineEmits<{ next: []; previous: []; page: [page: number]; scroll: [scrollTop: number] }>()
+const scrollContainer = ref<HTMLElement | null>(null)
+const nextSentinel = ref<HTMLElement | null>(null)
+let previousScrollHeight = 0
+let lastScrollTop = 0
+const goToPage = (page: number) => {
+  lastScrollTop = 0
+  scrollContainer.value?.scrollTo({ top: 0 })
+  emit('page', page)
+}
+const loadPrevious = () => {
+  previousScrollHeight = scrollContainer.value?.scrollHeight ?? 0
+  emit('previous')
+}
+watch(
+  () => props.loadingPrevious,
+  async (loading, wasLoading) => {
+    if (loading || !wasLoading || !scrollContainer.value) {
+      return
+    }
+    await nextTick()
+    scrollContainer.value.scrollTop += scrollContainer.value.scrollHeight - previousScrollHeight
+  }
+)
+// Only prepend after an upward scroll. A numbered jump to page 2 must stay on page 2.
+const onScroll = () => {
+  const top = scrollContainer.value?.scrollTop ?? 0
+  if (top < lastScrollTop && top < 240 && props.hasPrevious && !props.pending && !props.error) {
+    loadPrevious()
+  }
+  lastScrollTop = top
+  emit('scroll', top)
+}
+useAutoPagination({
+  sentinel: nextSentinel,
+  scrollContainer,
+  canLoadMore: () => props.hasNext && !props.error,
+  loading: () => props.pending,
+  loadMore: () => emit('next')
+})
+onMounted(async () => {
+  if (!props.initialScrollTop) {
+    return
+  }
+  await nextTick()
+  if (scrollContainer.value) {
+    scrollContainer.value.scrollTop = props.initialScrollTop
+  }
+})
+</script>
+
+<template>
+  <div class="flex h-full min-h-0 flex-col">
+    <div
+      ref="scrollContainer"
+      class="service-request-list-scroll min-h-0 flex-1 overflow-y-auto overflow-x-hidden"
+      @scroll="onScroll"
+    >
+      <UButton
+        v-if="hasPrevious && !loadingPrevious"
+        color="neutral"
+        variant="ghost"
+        class="mb-3"
+        :disabled="pending"
+        @click="loadPrevious"
+        >{{ $t('features.serviceRequests.list.loadPrevious') }}</UButton
+      >
+      <div v-if="loadingPrevious" class="space-y-2 pb-3">
+        <USkeleton v-for="index in 2" :key="index" class="h-24 w-full" />
+      </div>
+      <div v-if="pending && !loadingNext && !loadingPrevious" class="space-y-3" aria-busy="true">
+        <USkeleton v-for="index in 4" :key="index" class="h-28 w-full" />
+      </div>
+      <div v-else><slot /></div>
+      <div v-if="hasNext" ref="nextSentinel" class="h-px" aria-hidden="true" />
+      <div v-if="loadingNext" class="space-y-2 pt-3">
+        <USkeleton v-for="index in 2" :key="index" class="h-24 w-full" />
+      </div>
+    </div>
+    <footer
+      class="flex min-h-12 shrink-0 flex-wrap items-center justify-between gap-3 border-t border-default px-1 pt-3 text-sm text-muted"
+    >
+      <span>{{ $t('features.serviceRequests.resultCount', { count: pagination.total }, pagination.total) }}</span>
+      <UPagination
+        v-if="pagination.pageCount > 1"
+        :page="pagination.page"
+        :total="pagination.total"
+        :items-per-page="pagination.pageSize"
+        :disabled="pending"
+        :sibling-count="1"
+        :show-edges="false"
+        @update:page="goToPage($event)"
+      />
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+.service-request-list-scroll {
+  padding: 2px 2px 16px;
+}
+</style>

package/app/composables/useAdminServiceRequests.ts

@@ -45,6 +45,8 @@ export const useAdminServiceRequests = () => {
   }
 
   return {
+    getAssignees: () =>
+      $fetch<Array<{ id: string; name: string; image: string | null }>>('/api/service-requests/admin/assignees'),
     requests: readonly(requests),
     loading: readonly(loading),
     error: readonly(error),