@nuxt-customer-portal/timesheets 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @nuxt-customer-portal/timesheets
 
+## 0.6.0
+
+### Minor Changes
+
+- cff4891: Add weekly, two-weekly, and monthly client review periods with provider-controlled combined requests, entry snapshots, withdrawal and correction history, supplementary requests, and English/Dutch notifications. Keep weekly internal approvals and historical reviews intact; interval changes start next month.
+
+  Require client approval before invoicing review-enabled client time from the persisted next-month rollout date. Run package migrations before deploying the new application code.
+
+### Patch Changes
+
+- @nuxt-customer-portal/clients@0.6.0
+- @nuxt-customer-portal/core@0.6.0
+- @nuxt-customer-portal/organizations@0.6.0
+- @nuxt-customer-portal/ui@0.6.0
+
+## 0.5.1
+
+### Patch Changes
+
+- 1528005: Track approval request email recipients, timestamps, messages and send status. Allow pending internal and client approval emails to be resent to current approvers with an editable message.
+  - @nuxt-customer-portal/clients@0.5.1
+  - @nuxt-customer-portal/core@0.5.1
+  - @nuxt-customer-portal/organizations@0.5.1
+  - @nuxt-customer-portal/ui@0.5.1
+
 ## 0.5.0
 
 ### Patch Changes

package/README.md

@@ -3,3 +3,9 @@
 An isolated PortalNuxt feature for weekly time entry, timers, approval, project configuration, tariffs, budgets, and reporting.
 
 All API access is scoped to the active organization through portal-core. Feature-owned database objects live in the PostgreSQL `timesheets` schema.
+
+### Approval email history and reminders
+
+Internal and provider client approval cards show approval request email history with the recipient name and address at send time, timestamp, message, and sending/sent/failed status. Sent means accepted by the email provider, not confirmed delivery or reading. Tracking begins with migration `0006_approval_email.sql`; earlier sends cannot be reconstructed.
+
+Pending requests can be resent with an edited message. The editor starts with the currently configured approval email body in the client or portal email language, with timesheet details filled in. When sending to multiple approvers, the recipient name placeholder stays personalized per email. The edited body replaces the request email body; it is not inserted as a comment inside another template. The dialog lists the **current approvers**, who may differ from historical recipients. Internal resends require a currently assigned internal approver; client resends require a workspace owner or administrator. Recipients and approval version are checked again on submission. A resend does not change approval status or overwrite prior email messages.

package/app/components/TimesheetsAdminApprovals.vue

@@ -16,6 +16,7 @@ const { t, locale } = useI18n()
 const toast = useToast()
 const timesheets = useTimesheets()
 const busy = ref(false)
+const affectedRequests = ref<Array<{ id: string; clientName: string; startsOn: string; endsOn: string }>>([])
 const rejectionOpen = ref(false)
 const rejectionSubmissionId = ref('')
 const rejectionComment = ref('')
@@ -104,6 +105,8 @@ const run = async (operation: () => Promise<unknown>) => {
     await operation()
     await props.refresh()
   } catch (error) {
+    const failure = error as { data?: { data?: { requests?: typeof affectedRequests.value } } }
+    affectedRequests.value = failure.data?.data?.requests ?? []
     toast.add({
       title: t('features.timesheets.messages.saveError'),
       description: String(error),
@@ -177,6 +180,22 @@ const reject = () =>
 </script>
 
 <template>
+  <UAlert
+    v-if="affectedRequests.length"
+    color="warning"
+    :title="t('features.timesheets.reviewPeriods.withdrawHelp')"
+    class="mb-4"
+  >
+    <template #description
+      ><ul>
+        <li v-for="request in affectedRequests" :key="request.id">
+          <NuxtLink :to="`/timesheets/client-approvals?request=${request.id}`" class="underline"
+            >{{ request.clientName }} · {{ request.startsOn }} – {{ request.endsOn }}</NuxtLink
+          >
+        </li>
+      </ul></template
+    >
+  </UAlert>
   <section class="space-y-3">
     <UCard v-if="!data.approvals.length">
       <div class="py-8 text-center">
@@ -313,6 +332,13 @@ const reject = () =>
           </article>
         </div>
         <TimesheetsSubmissionTimeline :events="item.history ?? []" />
+        <TimesheetsApprovalEmails
+          :submission-id="item.id"
+          :client-organization-id="clientMode ? item.clientReviews[0]?.clientOrganizationId : undefined"
+          :emails="item.approvalEmails ?? []"
+          :pending="clientMode ? item.clientReviews[0]?.status === 'PENDING' : item.status === 'SUBMITTED'"
+          :refresh="refresh"
+        />
         <section
           v-if="
             item.clientReviews.length &&

package/app/components/TimesheetsApprovalEmails.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { DeepReadonly } from 'vue'
+import type { ApprovalEmailDto, ApprovalEmailContextDto } from '@nuxt-customer-portal/timesheets/shared/types/timesheet'
+
+const props = defineProps<{
+  submissionId: string
+  clientOrganizationId?: string
+  emails: DeepReadonly<ApprovalEmailDto[]>
+  pending: boolean
+  refresh: () => Promise<unknown>
+}>()
+const { t, locale } = useI18n()
+const timesheets = useTimesheets()
+const toast = useToast()
+const isOpen = ref(false)
+const busy = ref(false)
+const loading = ref(false)
+const loadError = ref(false)
+const context = ref<ApprovalEmailContextDto | null>(null)
+const state = reactive({ message: '' })
+const schema = z.object({ message: z.string().trim().min(1).max(50000) })
+const requestId = ref('')
+const history = computed(() =>
+  props.emails.filter((email) =>
+    props.clientOrganizationId
+      ? email.kind === 'client-requested' && email.clientOrganizationId === props.clientOrganizationId
+      : email.kind === 'internal-requested'
+  )
+)
+const formatDate = (value: string) =>
+  new Intl.DateTimeFormat(locale.value, { dateStyle: 'medium', timeStyle: 'short' }).format(new Date(value))
+const openResend = async () => {
+  if (loading.value) {
+    return
+  }
+  loading.value = true
+  loadError.value = false
+  try {
+    context.value = await timesheets.approvalEmailContext(props.submissionId, props.clientOrganizationId)
+    state.message = context.value.message
+    requestId.value = crypto.randomUUID()
+    isOpen.value = true
+  } catch {
+    loadError.value = true
+  } finally {
+    loading.value = false
+  }
+}
+const resend = async () => {
+  if (!context.value || busy.value) {
+    return
+  }
+  busy.value = true
+  try {
+    const result = await timesheets.resendApprovalEmail(props.submissionId, {
+      clientOrganizationId: props.clientOrganizationId,
+      version: context.value.version,
+      message: state.message,
+      requestId: requestId.value,
+      recipients: context.value.recipients.map(({ id, email }) => ({ id, email }))
+    })
+    toast.add({
+      title: t(
+        result.failed
+          ? 'features.timesheets.approvalEmails.partialFailure'
+          : result.sending
+            ? 'features.timesheets.approvalEmails.sending'
+            : 'features.timesheets.approvalEmails.sent'
+      ),
+      description: t('features.timesheets.approvalEmails.result', { sent: result.sent, failed: result.failed }),
+      color: result.failed ? 'warning' : result.sending ? 'info' : 'success'
+    })
+    isOpen.value = false
+    await props.refresh()
+  } catch (error) {
+    const response = error as { data?: { message?: string } }
+    toast.add({
+      title: t('features.timesheets.approvalEmails.sendError'),
+      description: response.data?.message,
+      color: 'error'
+    })
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <section class="mt-4 space-y-3 border-t border-default pt-4">
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <h3 class="text-sm font-semibold">{{ t('features.timesheets.approvalEmails.title') }}</h3>
+      <UButton
+        v-if="pending"
+        color="neutral"
+        variant="outline"
+        size="sm"
+        icon="i-lucide-mail"
+        :loading="loading"
+        @click="openResend"
+      >
+        {{ t('features.timesheets.approvalEmails.resend') }}
+      </UButton>
+    </div>
+    <UAlert v-if="loadError" color="error" :title="t('features.timesheets.approvalEmails.loadError')" />
+    <p v-if="!history.length" class="text-sm text-muted">{{ t('features.timesheets.approvalEmails.empty') }}</p>
+    <ol v-else class="space-y-2">
+      <li v-for="email in history" :key="email.id" class="rounded-md border border-default p-3 text-sm">
+        <div class="flex flex-wrap items-start justify-between gap-2">
+          <div class="min-w-0">
+            <p class="font-medium break-words">{{ email.recipientName }} · {{ email.recipientEmail }}</p>
+            <time class="text-muted" :datetime="email.sentAt || email.createdAt">{{
+              formatDate(email.sentAt || email.createdAt)
+            }}</time>
+          </div>
+          <UBadge
+            :color="email.status === 'SENT' ? 'success' : email.status === 'FAILED' ? 'error' : 'warning'"
+            variant="subtle"
+          >
+            {{ t(`features.timesheets.approvalEmails.status.${email.status}`) }}
+          </UBadge>
+        </div>
+        <details v-if="email.message" class="mt-2">
+          <summary class="cursor-pointer text-muted">{{ t('features.timesheets.approvalEmails.message') }}</summary>
+          <p class="mt-1 whitespace-pre-wrap break-words">{{ email.message }}</p>
+        </details>
+      </li>
+    </ol>
+    <p v-if="history.length" class="text-xs text-muted">{{ t('features.timesheets.approvalEmails.sentHelp') }}</p>
+    <UModal
+      v-if="isOpen"
+      v-model:open="isOpen"
+      :dismissible="!busy"
+      :title="t('features.timesheets.approvalEmails.resend')"
+    >
+      <template #body>
+        <UForm :state="state" :schema="schema" novalidate class="space-y-4" @submit="resend">
+          <p class="text-sm text-muted">{{ t('features.timesheets.approvalEmails.currentHelp') }}</p>
+          <div>
+            <h4 class="text-sm font-semibold">{{ t('features.timesheets.approvalEmails.currentApprovers') }}</h4>
+            <ul class="mt-2 space-y-1 text-sm">
+              <li v-for="recipient in context?.recipients" :key="recipient.id" class="break-words">
+                {{ recipient.name }} · {{ recipient.email }}
+              </li>
+            </ul>
+          </div>
+          <UAlert
+            v-if="!context?.canResend"
+            color="warning"
+            :title="t('features.timesheets.approvalEmails.unavailable')"
+          />
+          <UFormField name="message" :label="t('features.timesheets.approvalEmails.message')">
+            <PortalMarkdownEditor
+              v-model="state.message"
+              :rows="10"
+              class="w-full"
+              :disabled="busy"
+              :placeholders="[
+                { label: t('features.timesheets.email.placeholders.recipient_name'), value: '{{recipient_name}}' }
+              ]"
+            />
+          </UFormField>
+          <div class="flex justify-end gap-2">
+            <UButton color="neutral" variant="outline" :disabled="busy" @click="isOpen = false">{{
+              t('features.timesheets.cancel')
+            }}</UButton>
+            <UButton type="submit" icon="i-lucide-send" :loading="busy" :disabled="!context?.canResend">{{
+              t('features.timesheets.approvalEmails.send')
+            }}</UButton>
+          </div>
+        </UForm>
+      </template>
+    </UModal>
+  </section>
+</template>

package/app/components/TimesheetsClientSettingsPanel.vue

@@ -1,24 +1,36 @@
 <script setup lang="ts">
 import { z } from 'zod'
+import type { ClientTimesheetSettingsDto } from '../../shared/types/client-review-request'
 import type { GenericClientDto } from '@nuxt-customer-portal/clients/types'
 
 const props = defineProps<{ client: GenericClientDto }>()
 const { t } = useI18n()
 const toast = useToast()
 const busy = ref(false)
-const state = reactive({ accessMode: 'DISABLED' as 'DISABLED' | 'VIEW' | 'REVIEW' })
-const schema = z.object({ accessMode: z.enum(['DISABLED', 'VIEW', 'REVIEW']) })
-const { data } = await useFetch(`/api/timesheets/admin/client-settings/${props.client.organizationId}`)
+const state = reactive({
+  accessMode: 'DISABLED' as 'DISABLED' | 'VIEW' | 'REVIEW',
+  reviewInterval: 'WEEKLY' as 'WEEKLY' | 'TWO_WEEKLY' | 'MONTHLY'
+})
+const schema = z.object({
+  accessMode: z.enum(['DISABLED', 'VIEW', 'REVIEW']),
+  reviewInterval: z.enum(['WEEKLY', 'TWO_WEEKLY', 'MONTHLY'])
+})
+const { data } = await useFetch<ClientTimesheetSettingsDto>(
+  `/api/timesheets/admin/client-settings/${props.client.organizationId}`
+)
 if (data.value) {
-  Object.assign(state, data.value)
+  Object.assign(state, data.value, { reviewInterval: data.value.scheduledReviewInterval ?? data.value.reviewInterval })
 }
 const save = async () => {
   busy.value = true
   try {
-    await $fetch(`/api/timesheets/admin/client-settings/${props.client.organizationId}`, {
-      method: 'PUT',
-      body: state
-    })
+    data.value = await $fetch<ClientTimesheetSettingsDto>(
+      `/api/timesheets/admin/client-settings/${props.client.organizationId}`,
+      {
+        method: 'PUT',
+        body: state
+      }
+    )
     toast.add({ title: t('features.timesheets.messages.saved'), color: 'success' })
   } finally {
     busy.value = false
@@ -31,7 +43,7 @@ const save = async () => {
     <template #header>
       <h2 class="font-semibold">{{ t('features.timesheets.admin.clientSettings') }}</h2>
     </template>
-    <UForm :state="state" :schema="schema" class="space-y-4" @submit="save">
+    <UForm novalidate :state="state" :schema="schema" class="space-y-4" @submit="save">
       <UFormField name="accessMode" :label="t('features.timesheets.timesheetAccess')">
         <USelect
           v-model="state.accessMode"
@@ -44,6 +56,32 @@ const save = async () => {
           class="w-full"
         />
       </UFormField>
+      <UFormField
+        v-if="state.accessMode === 'REVIEW'"
+        name="reviewInterval"
+        :label="t('features.timesheets.reviewPeriods.interval')"
+        :description="t('features.timesheets.reviewPeriods.nextMonth')"
+      >
+        <USelect
+          v-model="state.reviewInterval"
+          :items="
+            ['WEEKLY', 'TWO_WEEKLY', 'MONTHLY'].map((value) => ({
+              value,
+              label: t(`features.timesheets.reviewPeriods.intervals.${value}`)
+            }))
+          "
+          value-key="value"
+          class="w-full"
+        />
+      </UFormField>
+      <p v-if="data?.reviewIntervalEffectiveOn" class="text-sm text-muted">
+        {{
+          t('features.timesheets.reviewPeriods.scheduled', {
+            date: data.reviewIntervalEffectiveOn,
+            interval: t(`features.timesheets.reviewPeriods.intervals.${data.scheduledReviewInterval}`)
+          })
+        }}
+      </p>
       <div class="flex justify-end">
         <UButton type="submit" icon="i-lucide-save" class="ml-auto flex min-w-28 justify-center" :loading="busy">{{
           t('features.timesheets.save')