@nuxt-customer-portal/service-requests 0.3.0

package/app/composables/useAdminServiceRequests.ts

@@ -0,0 +1,60 @@
+import type {
+  AdminServiceRequestUpdateInput,
+  ServiceRequest,
+  ServiceRequestFilters,
+  ServiceRequestListResponse
+} from '@nuxt-customer-portal/service-requests/shared/types/service-request'
+
+export const useAdminServiceRequests = () => {
+  const requests = ref<ServiceRequest[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const pagination = ref({ total: 0, page: 1, pageSize: 20, pageCount: 0 })
+  const stats = computed(() =>
+    requests.value.reduce<Record<string, number>>((result, request) => {
+      result[request.status] = (result[request.status] ?? 0) + 1
+      return result
+    }, {})
+  )
+
+  const fetchAllRequests = async (filters: ServiceRequestFilters = {}) => {
+    loading.value = true
+    error.value = null
+    try {
+      const response = await $fetch<ServiceRequestListResponse>('/api/service-requests/admin', { query: filters })
+      requests.value = response.items
+      pagination.value = response.pagination
+    } catch (cause) {
+      error.value = cause instanceof Error ? cause.message : 'Failed to fetch service requests'
+      throw cause
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const adminUpdateRequest = async (id: string, data: AdminServiceRequestUpdateInput) => {
+    const updated = await $fetch<ServiceRequest>(`/api/service-requests/admin/${id}`, {
+      method: 'PATCH',
+      body: data
+    })
+    const index = requests.value.findIndex((request) => request.id === id)
+    if (index >= 0) {
+      requests.value[index] = updated
+    }
+    return updated
+  }
+
+  return {
+    requests: readonly(requests),
+    loading: readonly(loading),
+    error: readonly(error),
+    pagination: readonly(pagination),
+    stats,
+    fetchAllRequests,
+    adminUpdateRequest,
+    assignRequest: (id: string, userId: string) => adminUpdateRequest(id, { assignedToId: userId }),
+    resolveRequest: (id: string) => adminUpdateRequest(id, { status: 'RESOLVED' }),
+    closeRequest: (id: string) => adminUpdateRequest(id, { status: 'CLOSED' }),
+    reopenRequest: (id: string) => adminUpdateRequest(id, { status: 'OPEN' })
+  }
+}

package/app/composables/usePaginatedServiceRequests.ts

@@ -0,0 +1,21 @@
+import type {
+  ServiceRequest,
+  ServiceRequestFilters,
+  ServiceRequestListResponse
+} from '@nuxt-customer-portal/service-requests/shared/types/service-request'
+import { usePaginatedResource } from '@nuxt-customer-portal/core/app/composables/usePaginatedResource'
+
+export const usePaginatedServiceRequests = (pageSize = 20) =>
+  usePaginatedResource<ServiceRequest, ServiceRequestFilters>({
+    pageSize,
+    getKey: (request) => request.id,
+    fetchPage: ({ filters, page, pageSize, signal }) =>
+      $fetch<ServiceRequestListResponse>('/api/service-requests', {
+        query: {
+          ...filters,
+          page,
+          pageSize
+        },
+        signal
+      })
+  })

package/app/composables/useServiceRequestAccess.ts

@@ -0,0 +1,18 @@
+import type { ServiceRequestAction } from '@nuxt-customer-portal/service-requests/shared/feature'
+import { serviceRequestFeature } from '@nuxt-customer-portal/service-requests/shared/feature'
+import { isPortalActionAllowed } from '@nuxt-customer-portal/core/shared/feature-registry'
+import type { PortalOrganizationRole } from '@nuxt-customer-portal/core/shared/types/feature'
+
+export const useServiceRequestAccess = () => {
+  const { activeOrganizationRole, activeOrganizationType } = usePortalSession()
+
+  const can = (action: ServiceRequestAction) =>
+    isPortalActionAllowed(
+      serviceRequestFeature.policy,
+      activeOrganizationRole.value as PortalOrganizationRole | null,
+      action,
+      activeOrganizationType.value ?? 'PROVIDER'
+    )
+
+  return { can }
+}

package/app/composables/useServiceRequestMenu.ts

@@ -0,0 +1,34 @@
+export const useServiceRequestMenu = () => {
+  const { activeOrganizationRole } = usePortalSession()
+  const { t } = useI18n()
+
+  const isOrganizationAdmin = computed(() => {
+    const role = activeOrganizationRole.value
+    return role === 'owner' || role === 'admin'
+  })
+
+  const menuItems = computed(() => {
+    const items = [
+      {
+        label: t('features.serviceRequests.navigation.myRequests'),
+        to: '/requests',
+        icon: 'i-lucide-ticket'
+      }
+    ]
+
+    if (isOrganizationAdmin.value) {
+      items.push({
+        label: t('features.serviceRequests.navigation.manageRequests'),
+        to: '/admin/requests',
+        icon: 'i-lucide-settings'
+      })
+    }
+
+    return items
+  })
+
+  return {
+    menuItems: readonly(menuItems),
+    isOrganizationAdmin: readonly(isOrganizationAdmin)
+  }
+}

package/app/composables/useServiceRequests.ts

@@ -0,0 +1,134 @@
+import type {
+  ServiceRequest,
+  ServiceRequestCreateInput,
+  ServiceRequestFilters,
+  ServiceRequestListResponse,
+  ServiceRequestPriority,
+  ServiceRequestStatus,
+  ServiceRequestUpdateInput
+} from '@nuxt-customer-portal/service-requests/shared/types/service-request'
+
+export const useServiceRequests = () => {
+  const { t } = useI18n()
+  const requests = ref<ServiceRequest[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+  const pagination = ref({ total: 0, page: 1, pageSize: 20, pageCount: 0 })
+
+  const fetchRequests = async (filters: ServiceRequestFilters = {}) => {
+    loading.value = true
+    error.value = null
+    try {
+      const response = await $fetch<ServiceRequestListResponse>('/api/service-requests', { query: filters })
+      requests.value = response.items
+      pagination.value = response.pagination
+      return response
+    } catch (cause) {
+      error.value = cause instanceof Error ? cause.message : t('features.serviceRequests.messages.fetchError')
+      throw cause
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const createRequest = async (data: ServiceRequestCreateInput) => {
+    loading.value = true
+    try {
+      const created = await $fetch<ServiceRequest>('/api/service-requests', { method: 'POST', body: data })
+      requests.value.unshift(created)
+      return created
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const updateRequest = async (id: string, data: ServiceRequestUpdateInput) => {
+    loading.value = true
+    try {
+      const updated = await $fetch<ServiceRequest>(`/api/service-requests/${id}`, { method: 'PATCH', body: data })
+      const index = requests.value.findIndex((request) => request.id === id)
+      if (index >= 0) {
+        requests.value[index] = updated
+      }
+      return updated
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const deleteRequest = async (id: string) => {
+    await $fetch(`/api/service-requests/${id}`, { method: 'DELETE' as never })
+    requests.value = requests.value.filter((request) => request.id !== id)
+  }
+
+  const getRequest = (id: string) => $fetch<ServiceRequest>(`/api/service-requests/${id}`)
+  const getStatusBadgeText = (status: ServiceRequestStatus) =>
+    t(`features.serviceRequests.status.${status.toLowerCase()}`)
+  const getPriorityBadgeText = (priority: ServiceRequestPriority) =>
+    t(`features.serviceRequests.priority.${priority.toLowerCase()}`)
+  const getPriorityColor = (priority: ServiceRequestPriority) =>
+    (
+      ({
+        LOW: 'success',
+        MEDIUM: 'info',
+        HIGH: 'warning',
+        URGENT: 'error'
+      }) as const
+    )[priority]
+  const getStatusColor = (status: ServiceRequestStatus) =>
+    (
+      ({
+        OPEN: 'primary',
+        IN_PROGRESS: 'warning',
+        RESOLVED: 'success',
+        CLOSED: 'neutral'
+      }) as const
+    )[status]
+
+  const statusOptions = computed(() => [
+    {
+      label: t('features.serviceRequests.filters.allStatuses'),
+      value: undefined,
+      badgeText: '',
+      badgeColor: 'neutral' as const
+    },
+    ...(['OPEN', 'IN_PROGRESS', 'RESOLVED', 'CLOSED'] as const).map((value) => ({
+      label: getStatusBadgeText(value),
+      value,
+      badgeText: getStatusBadgeText(value),
+      badgeColor: getStatusColor(value)
+    }))
+  ])
+  const priorityOptions = computed(() => [
+    {
+      label: t('features.serviceRequests.filters.allPriorities'),
+      value: undefined,
+      badgeText: '',
+      badgeColor: 'neutral' as const
+    },
+    ...(['LOW', 'MEDIUM', 'HIGH', 'URGENT'] as const).map((value) => ({
+      label: getPriorityBadgeText(value),
+      value,
+      badgeText: getPriorityBadgeText(value),
+      badgeColor: getPriorityColor(value)
+    }))
+  ])
+
+  return {
+    requests: readonly(requests),
+    loading: readonly(loading),
+    error: readonly(error),
+    pagination: readonly(pagination),
+    fetchRequests,
+    createRequest,
+    updateRequest,
+    deleteRequest,
+    getRequest,
+    getStatusColor,
+    getPriorityBadgeText,
+    getPriorityColor,
+    getStatusBadgeText,
+    statusOptions,
+    priorityOptions
+  }
+}

package/app/composables/useServiceRequestsDashboard.ts

@@ -0,0 +1,13 @@
+import type { ServiceRequestDashboardDto } from '@nuxt-customer-portal/service-requests/shared/types/service-request'
+
+export const useServiceRequestsDashboard = () => {
+  const { activeOrganizationId } = usePortalSession()
+  return useAsyncData(
+    'service-requests-dashboard',
+    () => $fetch<ServiceRequestDashboardDto>('/api/service-requests/dashboard'),
+    {
+      watch: [activeOrganizationId],
+      dedupe: 'defer'
+    }
+  )
+}

package/app/pages/admin/requests/[id].vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import type {
+  AdminServiceRequestUpdateInput,
+  ServiceRequestWithRelations
+} from '@nuxt-customer-portal/service-requests/shared/types/service-request'
+
+const route = useRoute()
+const { t } = useI18n()
+const requestId = route.params.id as string
+
+const { adminUpdateRequest } = useAdminServiceRequests()
+const toast = useToast()
+
+const request = ref<ServiceRequestWithRelations | null>(null)
+const loading = ref(true)
+const updating = ref(false)
+
+useSeoMeta({
+  title: () => request.value?.title || t('features.serviceRequests.navigation.manageRequests')
+})
+
+const adminUpdates = reactive<AdminServiceRequestUpdateInput>({
+  status: undefined,
+  priority: undefined,
+  assignedToId: '',
+  internalNotes: ''
+})
+
+const statusOptions = computed(() => [
+  { label: t('features.serviceRequests.status.open'), value: 'OPEN' },
+  { label: t('features.serviceRequests.status.in_progress'), value: 'IN_PROGRESS' },
+  { label: t('features.serviceRequests.status.resolved'), value: 'RESOLVED' },
+  { label: t('features.serviceRequests.status.closed'), value: 'CLOSED' }
+])
+
+const priorityOptions = computed(() => [
+  { label: t('features.serviceRequests.priority.low'), value: 'LOW' },
+  { label: t('features.serviceRequests.priority.medium'), value: 'MEDIUM' },
+  { label: t('features.serviceRequests.priority.high'), value: 'HIGH' },
+  { label: t('features.serviceRequests.priority.urgent'), value: 'URGENT' }
+])
+
+const userOptions = [
+  // This would be populated with users from the organization
+  { label: t('features.serviceRequests.placeholders.selectUser'), value: '' }
+]
+
+onMounted(async () => {
+  try {
+    request.value = await $fetch(`/api/service-requests/${requestId}`)
+    if (!request.value) {
+      return
+    }
+    adminUpdates.status = request.value.status
+    adminUpdates.priority = request.value.priority
+    adminUpdates.assignedToId = request.value.assignedToId || ''
+    adminUpdates.internalNotes = request.value.internalNotes || ''
+  } catch {
+    toast.add({
+      title: t('common.error'),
+      description: t('features.serviceRequests.messages.fetchError'),
+      color: 'error'
+    })
+  } finally {
+    loading.value = false
+  }
+})
+
+const handleUpdate = async () => {
+  updating.value = true
+  try {
+    request.value = await adminUpdateRequest(requestId, adminUpdates)
+    toast.add({
+      title: t('common.success'),
+      description: t('features.serviceRequests.messages.updateSuccess')
+    })
+  } catch {
+    toast.add({
+      title: t('common.error'),
+      description: t('features.serviceRequests.messages.updateError'),
+      color: 'error'
+    })
+  } finally {
+    updating.value = false
+  }
+}
+
+const handleQuickUpdate = () => {
+  handleUpdate()
+}
+</script>
+
+<template>
+  <div class="container mx-auto py-8 max-w-4xl">
+    <div v-if="loading">
+      <USkeleton class="h-32 w-full mb-4" />
+      <USkeleton class="h-64 w-full" />
+    </div>
+
+    <div v-else-if="request" class="space-y-6">
+      <!-- Full request details with admin controls -->
+      <CustomerRequestDetail :request-id="request.id" />
+
+      <USeparator />
+
+      <!-- Admin Actions -->
+      <UCard>
+        <template #header>
+          <h3 class="text-lg font-semibold">{{ t('features.serviceRequests.actions.adminActions') }}</h3>
+        </template>
+
+        <div class="space-y-4">
+          <UFormField :label="t('features.serviceRequests.fields.status')">
+            <USelect v-model="adminUpdates.status" :options="statusOptions" @change="handleQuickUpdate" />
+          </UFormField>
+
+          <UFormField :label="t('features.serviceRequests.fields.priority')">
+            <USelect v-model="adminUpdates.priority" :options="priorityOptions" @change="handleQuickUpdate" />
+          </UFormField>
+
+          <UFormField :label="t('features.serviceRequests.fields.assignedTo')">
+            <USelect v-model="adminUpdates.assignedToId" :options="userOptions" @change="handleQuickUpdate" />
+          </UFormField>
+
+          <UFormField :label="t('features.serviceRequests.fields.internalNotes')">
+            <UTextarea
+              v-model="adminUpdates.internalNotes"
+              :rows="4"
+              :placeholder="t('features.serviceRequests.placeholders.internalNotes')"
+            />
+          </UFormField>
+
+          <UButton :loading="updating" @click="handleUpdate">
+            {{ t('features.serviceRequests.actions.saveChanges') }}
+          </UButton>
+        </div>
+      </UCard>
+    </div>
+  </div>
+</template>

package/app/pages/admin/requests/index.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import type {
+  AdminServiceRequestUpdateInput,
+  ServiceRequestFilters
+} from '@nuxt-customer-portal/service-requests/shared/types/service-request'
+
+const { requests, loading, pagination, stats, fetchAllRequests, adminUpdateRequest } = useAdminServiceRequests()
+
+const toast = useToast()
+const { t } = useI18n()
+
+useSeoMeta({
+  title: () => t('features.serviceRequests.navigation.manageRequests')
+})
+
+onMounted(() => {
+  fetchAllRequests()
+})
+
+const handleFilter = (filters: ServiceRequestFilters) => {
+  fetchAllRequests(filters)
+}
+
+const handleUpdate = async ({ id, updates }: { id: string; updates: AdminServiceRequestUpdateInput }) => {
+  try {
+    await adminUpdateRequest(id, updates)
+    toast.add({
+      title: t('common.success'),
+      description: t('features.serviceRequests.messages.updateSuccess')
+    })
+  } catch {
+    toast.add({
+      title: t('common.error'),
+      description: t('features.serviceRequests.messages.updateError'),
+      color: 'error'
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="container mx-auto py-8">
+    <h1 class="text-3xl font-bold mb-6">{{ t('features.serviceRequests.navigation.manageRequests') }}</h1>
+
+    <AdminRequestDashboard
+      :requests="requests"
+      :loading="loading"
+      :pagination="pagination"
+      :stats="stats"
+      @select="navigateTo(`/admin/requests/${$event}`)"
+      @filter="handleFilter"
+      @update="handleUpdate"
+    />
+  </div>
+</template>

package/app/pages/requests/[id].vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type {
+  ServiceRequestUpdateInput,
+  ServiceRequestWithRelations
+} from '@nuxt-customer-portal/service-requests/shared/types/service-request'
+
+const route = useRoute()
+const { t } = useI18n()
+const requestId = route.params.id as string
+
+const { getRequest, updateRequest, deleteRequest } = useServiceRequests()
+const { currentUser } = usePortalSession()
+const toast = useToast()
+
+const request = ref<ServiceRequestWithRelations | null>(null)
+const loading = ref(true)
+const updating = ref(false)
+const showEditModal = ref(false)
+
+useSeoMeta({
+  title: () => request.value?.title || t('features.serviceRequests.title')
+})
+
+const canEdit = computed(() => {
+  return request.value?.createdById === currentUser.value?.id
+})
+
+const canDelete = computed(() => {
+  return request.value?.createdById === currentUser.value?.id
+})
+
+const backRoute = computed(() => {
+  if (route.query.from !== 'list') {
+    return '/requests'
+  }
+  const query: Record<string, string> = {}
+  if (route.query.search != null && route.query.search !== '') {
+    query.search = String(route.query.search)
+  }
+  if (route.query.status != null && route.query.status !== '') {
+    query.status = String(route.query.status)
+  }
+  if (route.query.priority != null && route.query.priority !== '') {
+    query.priority = String(route.query.priority)
+  }
+  if (route.query.category != null && route.query.category !== '') {
+    query.category = String(route.query.category)
+  }
+  if (route.query.sortBy != null && route.query.sortBy !== '') {
+    query.sortBy = String(route.query.sortBy)
+  }
+  if (route.query.sortDir != null && route.query.sortDir !== '') {
+    query.sortDir = String(route.query.sortDir)
+  }
+  if (route.query.page != null && route.query.page !== '') {
+    query.page = String(route.query.page)
+  }
+  return { path: '/requests', query }
+})
+
+onMounted(async () => {
+  try {
+    request.value = await getRequest(requestId)
+  } catch {
+    toast.add({
+      title: t('common.error'),
+      description: t('features.serviceRequests.messages.fetchError'),
+      color: 'error'
+    })
+  } finally {
+    loading.value = false
+  }
+})
+
+const handleUpdate = async (data: ServiceRequestUpdateInput) => {
+  updating.value = true
+  try {
+    request.value = await updateRequest(requestId, data)
+    showEditModal.value = false
+    toast.add({
+      title: t('common.success'),
+      description: t('features.serviceRequests.messages.updateSuccess')
+    })
+  } catch {
+    toast.add({
+      title: t('common.error'),
+      description: t('features.serviceRequests.messages.updateError'),
+      color: 'error'
+    })
+  } finally {
+    updating.value = false
+  }
+}
+
+const handleDelete = async () => {
+  if (!confirm('Are you sure you want to delete this request?')) {
+    return
+  }
+
+  try {
+    await deleteRequest(requestId)
+    toast.add({
+      title: t('common.success'),
+      description: t('features.serviceRequests.messages.deleteSuccess')
+    })
+    navigateTo(backRoute.value)
+  } catch {
+    toast.add({
+      title: t('common.error'),
+      description: t('features.serviceRequests.messages.deleteError'),
+      color: 'error'
+    })
+  }
+}
+</script>
+
+<template>
+  <div class="container mx-auto py-8 max-w-4xl">
+    <div class="mb-4">
+      <UButton icon="i-lucide-arrow-left" variant="ghost" size="sm" :to="backRoute">
+        {{ t('features.serviceRequests.actions.back') }}
+      </UButton>
+    </div>
+
+    <div v-if="loading">
+      <USkeleton class="h-32 w-full mb-4" />
+      <USkeleton class="h-64 w-full" />
+    </div>
+
+    <div v-else-if="!request" class="text-center py-8">
+      <p>{{ t('features.serviceRequests.messages.notFound') }}</p>
+      <UButton :to="backRoute">{{ t('features.serviceRequests.actions.back') }}</UButton>
+    </div>
+
+    <div v-else>
+      <CustomerRequestDetail
+        :request-id="request.id"
+        :can-edit="canEdit"
+        :can-delete="canDelete"
+        @edit="showEditModal = true"
+        @delete="handleDelete"
+      />
+
+      <!-- Edit Modal -->
+      <UModal v-model="showEditModal">
+        <UCard>
+          <template #header>
+            <h2 class="text-xl font-bold">{{ t('features.serviceRequests.edit') }}</h2>
+          </template>
+
+          <CustomerRequestForm
+            :initial-data="request"
+            :loading="updating"
+            @submit="handleUpdate"
+            @cancel="showEditModal = false"
+          />
+        </UCard>
+      </UModal>
+    </div>
+  </div>
+</template>