@nuxt-customer-portal/service-requests 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# @nuxt-customer-portal/service-requests
+
+## 0.3.0
+
+### Patch Changes
+
+- @nuxt-customer-portal/clients@0.3.0
+- @nuxt-customer-portal/core@0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Nuxt Customer Portal contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,16 @@
+# Service Requests feature layer
+
+This Nuxt layer owns the service-request UI, API, policy, translations, types, validation, Drizzle schema, and immutable baseline migration. It depends on the public adapters exported by `@nuxt-customer-portal/core`.
+
+## Enable or disable
+
+The local `layers/` directory is auto-registered by Nuxt. To disable this feature without deleting data, move the layer outside `layers/` or add it to `.nuxtignore`. Its routes, navigation, dashboard widget, auto-imports, and translations will then disappear.
+
+Disabling a layer never removes database objects. Removing its data requires a separate, reviewed migration that drops the `service_request` table and its enums.
+
+## Database
+
+The schema is exported from `server/db/schema/service-requests.ts`. Its tables and
+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.

package/app/components/Admin/RequestDashboard.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type {
+  AdminServiceRequestUpdateInput,
+  ServiceRequestFilters,
+  ServiceRequestPagination,
+  ServiceRequest
+} from '@nuxt-customer-portal/service-requests/shared/types/service-request'
+
+defineProps<{
+  requests: readonly ServiceRequest[]
+  loading: boolean
+  pagination: ServiceRequestPagination
+  stats: Record<string, number>
+}>()
+
+defineEmits<{
+  select: [id: string]
+  filter: [filters: ServiceRequestFilters]
+  update: [data: { id: string; updates: AdminServiceRequestUpdateInput }]
+}>()
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="space-y-6">
+    <!-- Stats Overview -->
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+      <UCard>
+        <div class="text-center">
+          <div class="text-3xl font-bold text-blue-600">{{ stats.OPEN || 0 }}</div>
+          <div class="text-sm text-gray-600">{{ t('features.serviceRequests.status.open') }}</div>
+        </div>
+      </UCard>
+      <UCard>
+        <div class="text-center">
+          <div class="text-3xl font-bold text-yellow-600">{{ stats.IN_PROGRESS || 0 }}</div>
+          <div class="text-sm text-gray-600">{{ t('features.serviceRequests.status.in_progress') }}</div>
+        </div>
+      </UCard>
+      <UCard>
+        <div class="text-center">
+          <div class="text-3xl font-bold text-green-600">{{ stats.RESOLVED || 0 }}</div>
+          <div class="text-sm text-gray-600">{{ t('features.serviceRequests.status.resolved') }}</div>
+        </div>
+      </UCard>
+      <UCard>
+        <div class="text-center">
+          <div class="text-3xl font-bold text-gray-600">{{ stats.CLOSED || 0 }}</div>
+          <div class="text-sm text-gray-600">{{ t('features.serviceRequests.status.closed') }}</div>
+        </div>
+      </UCard>
+    </div>
+
+    <!-- Filters and Table -->
+    <AdminRequestTable
+      :requests="requests"
+      :loading="loading"
+      :pagination="pagination"
+      @select="$emit('select', $event)"
+      @filter="$emit('filter', $event)"
+      @update="$emit('update', $event)"
+    />
+  </div>
+</template>

package/app/components/Admin/RequestTable.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import type {
+  AdminServiceRequestUpdateInput,
+  ServiceRequestFilters,
+  ServiceRequestPagination,
+  ServiceRequestPriority,
+  ServiceRequest
+} from '@nuxt-customer-portal/service-requests/shared/types/service-request'
+
+defineProps<{
+  requests: readonly ServiceRequest[]
+  loading: boolean
+  pagination: ServiceRequestPagination
+}>()
+
+const emit = defineEmits<{
+  select: [id: string]
+  filter: [filters: ServiceRequestFilters]
+  assign: [id: string]
+  update: [data: { id: string; updates: AdminServiceRequestUpdateInput }]
+}>()
+const { t } = useI18n()
+
+const currentPage = ref(1)
+const filters = reactive({
+  status: undefined,
+  priority: undefined,
+  search: ''
+})
+
+watch(filters, () => {
+  emit('filter', filters)
+})
+
+watch(currentPage, (page) => {
+  emit('filter', { ...filters, page })
+})
+
+const getActions = (request: ServiceRequest) => {
+  return [
+    [
+      { label: t('features.serviceRequests.actions.view'), click: () => emit('select', request.id) },
+      { label: t('features.serviceRequests.actions.assign'), click: () => emit('assign', request.id) },
+      {
+        label: t('features.serviceRequests.actions.resolve'),
+        click: () => emit('update', { id: request.id, updates: { status: 'RESOLVED' } })
+      },
+      {
+        label: t('features.serviceRequests.actions.close'),
+        click: () => emit('update', { id: request.id, updates: { status: 'CLOSED' } })
+      }
+    ]
+  ]
+}
+
+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 getPriorityColor = (priority: ServiceRequestPriority) => {
+  switch (priority) {
+    case 'LOW':
+      return 'success'
+    case 'MEDIUM':
+      return 'info'
+    case 'HIGH':
+      return 'warning'
+    case 'URGENT':
+      return 'error'
+    default:
+      return 'neutral'
+  }
+}
+</script>
+
+<template>
+  <UCard>
+    <!-- Filters -->
+    <div class="flex gap-2 mb-4">
+      <USelect
+        v-model="filters.status"
+        :options="statusOptions"
+        :placeholder="t('features.serviceRequests.fields.status')"
+      />
+      <USelect
+        v-model="filters.priority"
+        :options="priorityOptions"
+        :placeholder="t('features.serviceRequests.fields.priority')"
+      />
+      <UInput v-model="filters.search" :placeholder="t('common.searchPlaceholder')" icon="i-lucide-search" />
+    </div>
+
+    <!-- Table -->
+    <div v-if="loading">
+      <USkeleton v-for="i in 5" :key="i" class="h-12 w-full mb-2" />
+    </div>
+
+    <UEmpty
+      v-else-if="requests.length === 0"
+      icon="i-lucide-ticket"
+      :description="t('features.serviceRequests.messages.empty')"
+    />
+
+    <div v-else class="overflow-x-auto">
+      <table class="w-full text-sm">
+        <thead>
+          <tr class="border-b text-left">
+            <th class="p-3">{{ t('features.serviceRequests.fields.title') }}</th>
+            <th class="p-3">{{ t('features.serviceRequests.fields.client') }}</th>
+            <th class="p-3">{{ t('features.serviceRequests.fields.status') }}</th>
+            <th class="p-3">{{ t('features.serviceRequests.fields.priority') }}</th>
+            <th class="p-3">{{ t('features.serviceRequests.fields.assignedTo') }}</th>
+            <th class="p-3" />
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="request in requests" :key="request.id" class="border-b">
+            <td class="p-3">
+              <button class="hover:underline" @click="$emit('select', request.id)">{{ request.title }}</button>
+            </td>
+            <td class="p-3">{{ request.clientName || request.clientOrganizationId }}</td>
+            <td class="p-3"><StatusBadge :status="request.status" /></td>
+            <td class="p-3">
+              <UBadge :color="getPriorityColor(request.priority)">{{ request.priority }}</UBadge>
+            </td>
+            <td class="p-3">{{ request.assignedToId || '—' }}</td>
+            <td class="p-3">
+              <UDropdownMenu :items="getActions(request)">
+                <UButton variant="ghost" icon="i-lucide-more-vertical" />
+              </UDropdownMenu>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Result count and pagination -->
+    <div class="flex items-center justify-between gap-3 border-t border-default pt-3 text-sm text-muted">
+      <span>{{ t('features.serviceRequests.resultCount', { count: pagination.total }) }}</span>
+      <UPagination
+        v-if="pagination.pageCount > 1"
+        v-model="currentPage"
+        :total="pagination.total"
+        :page-size="pagination.pageSize"
+      />
+    </div>
+  </UCard>
+</template>

package/app/components/CustomerRequestDetail.vue

@@ -0,0 +1,76 @@
+<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()
+}
+</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>
+        </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> -->
+      <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) }}
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/CustomerRequestForm.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type {
+  ServiceRequest,
+  ServiceRequestCreateInput
+} from '@nuxt-customer-portal/service-requests/shared/types/service-request'
+
+const props = defineProps<{
+  initialData?: Partial<ServiceRequest>
+  loading?: boolean
+}>()
+
+const { t } = useI18n()
+const { activeOrganizationType } = usePortalSession()
+
+const emit = defineEmits<{
+  submit: [data: ServiceRequestCreateInput]
+  cancel: []
+}>()
+
+const editMode = computed(() => !!props.initialData?.id)
+
+const state = reactive({
+  clientOrganizationId: props.initialData?.clientOrganizationId || '',
+  title: props.initialData?.title || '',
+  description: props.initialData?.description || '',
+  priority: props.initialData?.priority || 'MEDIUM',
+  category: props.initialData?.category || ''
+})
+
+watch(
+  () => props.initialData,
+  (data) => {
+    state.title = data?.title || ''
+    state.clientOrganizationId = data?.clientOrganizationId || ''
+    state.description = data?.description || ''
+    state.priority = data?.priority || 'MEDIUM'
+    state.category = data?.category || ''
+  }
+)
+
+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 { priorityOptions, getStatusBadgeText, getStatusColor } = useServiceRequests()
+
+const handleSubmit = () => {
+  emit('submit', state)
+}
+</script>
+
+<template>
+  <UForm :state="state" :schema="schema" class="w-full" @submit="handleSubmit">
+    <!-- Wrap in real DOM nodes so spacing is guaranteed -->
+    <div class="space-y-6">
+      <ClientsClientPicker
+        v-if="activeOrganizationType === 'PROVIDER'"
+        v-model="state.clientOrganizationId"
+        module-id="service-requests"
+        :label="t('features.serviceRequests.fields.client')"
+        required
+      />
+      <div>
+        <UFormField :label="t('features.serviceRequests.fields.title')" name="title" required>
+          <UInput
+            v-model="state.title"
+            :placeholder="t('features.serviceRequests.fields.title')"
+            class="w-full"
+            size="lg"
+          />
+        </UFormField>
+      </div>
+
+      <div>
+        <UFormField
+          :label="t('features.serviceRequests.fields.description')"
+          name="description"
+          required
+          class="w-full"
+        >
+          <UTextarea
+            v-model="state.description"
+            class="w-full"
+            :placeholder="t('features.serviceRequests.fields.description')"
+            :rows="7"
+            size="lg"
+          />
+        </UFormField>
+      </div>
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+        <div>
+          <UFormField :label="t('features.serviceRequests.fields.priority')" name="priority" class="w-full">
+            <USelect
+              v-model="state.priority"
+              class="w-full"
+              :items="priorityOptions.filter((i) => i.value !== undefined)"
+              size="lg"
+            />
+          </UFormField>
+        </div>
+
+        <div>
+          <UFormField :label="t('features.serviceRequests.fields.category')" name="category" class="w-full">
+            <UInput
+              v-model="state.category"
+              class="w-full"
+              :placeholder="t('features.serviceRequests.placeholders.category')"
+              size="lg"
+            />
+          </UFormField>
+        </div>
+      </div>
+
+      <div v-if="editMode && props.initialData?.status" class="rounded-lg border border-default bg-elevated/20 p-4">
+        <div class="flex items-center justify-between gap-3">
+          <div class="text-sm font-medium text-muted">
+            {{ t('features.serviceRequests.fields.status') }}
+          </div>
+          <UBadge :color="getStatusColor(props.initialData.status)" variant="soft">
+            {{ getStatusBadgeText(props.initialData.status) }}
+          </UBadge>
+        </div>
+      </div>
+
+      <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')">
+            {{ t('common.cancel') }}
+          </UButton>
+          <UButton type="submit" color="primary" size="lg" :loading="loading">
+            {{ editMode ? t('common.save') : t('common.create') }}
+          </UButton>
+        </div>
+      </div>
+    </div>
+  </UForm>
+</template>

package/app/components/ServiceRequestsDashboardAttention.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const { t } = useI18n()
+const { data, pending, error, refresh } = await useServiceRequestsDashboard()
+</script>
+
+<template>
+  <UCard class="h-full">
+    <template #header>
+      <div class="flex items-center justify-between gap-3">
+        <h2 class="font-semibold">{{ t('features.serviceRequests.dashboard.attention.title') }}</h2>
+        <UIcon name="i-lucide-triangle-alert" class="size-5 text-warning" />
+      </div>
+    </template>
+    <div v-if="pending" class="space-y-3"><USkeleton class="h-8 w-24" /><USkeleton class="h-4 w-full" /></div>
+    <div v-else-if="error" class="py-3 text-center">
+      <p class="text-sm text-muted">{{ t('features.serviceRequests.dashboard.error') }}</p>
+      <UButton class="mt-3" color="neutral" variant="outline" size="sm" icon="i-lucide-refresh-cw" @click="refresh()">
+        {{ t('features.serviceRequests.dashboard.retry') }}
+      </UButton>
+    </div>
+    <template v-else-if="data?.attention">
+      <div class="flex flex-wrap gap-2">
+        <UBadge v-if="data.attention.urgentCount" color="error" variant="subtle">
+          {{ t('features.serviceRequests.dashboard.urgent', { count: data.attention.urgentCount }) }} </UBadge
+        ><UBadge v-if="data.attention.unassignedCount" color="warning" variant="subtle">
+          {{ t('features.serviceRequests.dashboard.unassigned', { count: data.attention.unassignedCount }) }} </UBadge
+        ><UBadge v-if="data.attention.longOpenCount" color="neutral" variant="subtle">
+          {{ t('features.serviceRequests.dashboard.longOpen', { count: data.attention.longOpenCount }) }}
+        </UBadge>
+      </div>
+      <p v-if="!data.attention.items.length" class="py-6 text-center text-sm text-muted">
+        {{ t('features.serviceRequests.dashboard.attention.empty') }}
+      </p>
+      <ul v-else class="mt-4 divide-y divide-default">
+        <li v-for="request in data.attention.items.slice(0, 3)" :key="request.id">
+          <NuxtLink
+            :to="`/admin/requests/${request.id}`"
+            class="flex items-center justify-between gap-3 rounded py-3 focus-visible:outline-2 focus-visible:outline-primary"
+            ><span class="truncate text-sm font-medium">{{ request.title }}</span
+            ><UBadge
+              :color="request.priority === 'URGENT' ? 'error' : request.priority === 'HIGH' ? 'warning' : 'neutral'"
+              variant="subtle"
+              >{{ t(`features.serviceRequests.priority.${request.priority.toLowerCase()}`) }}</UBadge
+            ></NuxtLink
+          >
+        </li>
+      </ul>
+      <div class="mt-3 text-right">
+        <UButton to="/admin/requests" color="neutral" variant="ghost" trailing-icon="i-lucide-arrow-right">
+          {{ t('features.serviceRequests.dashboard.manage') }}
+        </UButton>
+      </div>
+    </template>
+  </UCard>
+</template>

package/app/components/ServiceRequestsDashboardOverview.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const { t, locale } = useI18n()
+const { data, pending, error, refresh } = await useServiceRequestsDashboard()
+const formatDate = (value: string) =>
+  new Intl.DateTimeFormat(locale.value, { dateStyle: 'medium' }).format(new Date(value))
+</script>
+
+<template>
+  <UCard class="h-full">
+    <template #header>
+      <div class="flex items-center justify-between gap-3">
+        <h2 class="font-semibold">{{ t('features.serviceRequests.dashboard.overview.title') }}</h2>
+        <UButton to="/requests/new" size="sm" icon="i-lucide-plus">
+          {{ t('features.serviceRequests.dashboard.new') }}
+        </UButton>
+      </div>
+    </template>
+    <div v-if="pending" class="space-y-3"><USkeleton class="h-8 w-24" /><USkeleton class="h-4 w-full" /></div>
+    <div v-else-if="error" class="py-3 text-center">
+      <p class="text-sm text-muted">{{ t('features.serviceRequests.dashboard.error') }}</p>
+      <UButton class="mt-3" color="neutral" variant="outline" size="sm" icon="i-lucide-refresh-cw" @click="refresh()">
+        {{ t('features.serviceRequests.dashboard.retry') }}
+      </UButton>
+    </div>
+    <template v-else-if="data">
+      <div class="flex flex-wrap gap-3">
+        <UBadge color="primary" variant="subtle">
+          {{ t('features.serviceRequests.dashboard.active', { count: data.overview.activeCount }) }} </UBadge
+        ><UBadge color="success" variant="subtle">
+          {{ t('features.serviceRequests.dashboard.resolved', { count: data.overview.resolvedCount }) }}
+        </UBadge>
+      </div>
+      <p v-if="!data.overview.recent.length" class="py-6 text-center text-sm text-muted">
+        {{ t('features.serviceRequests.dashboard.overview.empty') }}
+      </p>
+      <ul v-else class="mt-4 divide-y divide-default">
+        <li v-for="request in data.overview.recent" :key="request.id">
+          <NuxtLink
+            :to="`/requests/${request.id}`"
+            class="flex items-center justify-between gap-3 rounded py-3 focus-visible:outline-2 focus-visible:outline-primary"
+            ><span class="min-w-0"
+              ><span class="block truncate text-sm font-medium">{{ request.title }}</span
+              ><span class="text-xs text-muted">{{ formatDate(request.updatedAt) }}</span></span
+            ><StatusBadge :status="request.status"
+          /></NuxtLink>
+        </li>
+      </ul>
+      <div class="mt-3 text-right">
+        <UButton to="/requests" color="neutral" variant="ghost" trailing-icon="i-lucide-arrow-right">
+          {{ t('features.serviceRequests.dashboard.viewAll') }}
+        </UButton>
+      </div>
+    </template>
+  </UCard>
+</template>

package/app/components/StatusBadge.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { ServiceRequestStatus } from '@nuxt-customer-portal/service-requests/shared/types/service-request'
+
+const props = defineProps<{
+  status: ServiceRequestStatus
+  variant?: 'solid' | 'outline' | 'soft'
+}>()
+
+const { getStatusColor, getStatusBadgeText } = useServiceRequests()
+</script>
+
+<template>
+  <UBadge :color="getStatusColor(props.status)" :variant="variant" size="md">
+    {{ getStatusBadgeText(props.status) }}
+  </UBadge>
+</template>