@nuxt-customer-portal/timesheets 0.3.0

package/app/components/TimesheetsProjectDetail.vue

@@ -0,0 +1,338 @@
+<script setup lang="ts">
+import type { TimesheetsAdminBootstrap } from '@nuxt-customer-portal/timesheets/app/composables/useTimesheets'
+import type { ProjectDto } from '@nuxt-customer-portal/timesheets/shared/types/timesheet'
+
+const props = defineProps<{
+  project: ProjectDto
+  data: TimesheetsAdminBootstrap
+  refreshProject: () => Promise<unknown>
+  refreshData: () => Promise<unknown>
+}>()
+const emit = defineEmits<{ deleted: [] }>()
+const { t } = useI18n()
+const toast = useToast()
+const timesheets = useTimesheets()
+const busy = ref(false)
+const editing = ref(false)
+const deleting = ref(false)
+const deletionName = ref('')
+const deletionPending = ref(false)
+const eligibility = ref<{ projectId: string; projectName: string; canDelete: boolean } | null>(null)
+const form = reactive({
+  clientOrganizationId: '',
+  name: '',
+  code: '',
+  budgetHours: null as number | null,
+  budgetAmount: null as number | null,
+  activityTypeIds: [] as string[]
+})
+const rateDrafts = reactive<Record<string, number | null>>({})
+const formatHours = (minutes: number) => `${(minutes / 60).toFixed(2)} h`
+const formatMoney = (minor: number) =>
+  new Intl.NumberFormat(undefined, { style: 'currency', currency: props.data.settings.currency }).format(minor / 100)
+const activityNames = computed(() =>
+  props.project.activityTypeIds
+    .map((id) => props.data.activities.find((activity) => activity.id === id)?.name)
+    .filter(Boolean)
+)
+const statusColor = computed(() => (props.project.status === 'ACTIVE' ? 'success' : 'neutral'))
+const statusLabel = computed(() => t(`features.timesheets.admin.projectStatus.${props.project.status.toLowerCase()}`))
+const clientLabel = computed(() =>
+  props.project.internal
+    ? t('features.timesheets.admin.internalOrganization', { name: props.project.clientName })
+    : props.project.clientName
+)
+
+const resetForm = () =>
+  Object.assign(form, {
+    clientOrganizationId: props.project.clientOrganizationId,
+    name: props.project.name,
+    code: props.project.code ?? '',
+    budgetHours: props.project.budgetMinutes === null ? null : props.project.budgetMinutes / 60,
+    budgetAmount: props.project.budgetMinor === null ? null : props.project.budgetMinor / 100,
+    activityTypeIds: [...props.project.activityTypeIds]
+  })
+const toggleEditing = () => {
+  editing.value = !editing.value
+  deleting.value = false
+  resetForm()
+}
+const cancelEditing = () => {
+  editing.value = false
+  resetForm()
+}
+const resetRates = () => {
+  for (const key of Object.keys(rateDrafts)) {
+    Reflect.deleteProperty(rateDrafts, key)
+  }
+  for (const member of props.data.team) {
+    rateDrafts[member.id] =
+      props.project.personRates[member.id] === undefined ? null : props.project.personRates[member.id]! / 100
+  }
+}
+watch(
+  () => props.project,
+  () => {
+    resetForm()
+    resetRates()
+  },
+  { immediate: true }
+)
+watch(() => props.data.team, resetRates)
+
+const run = async (operation: () => Promise<unknown>) => {
+  busy.value = true
+  try {
+    await operation()
+    await Promise.all([props.refreshProject(), props.refreshData()])
+  } catch (error) {
+    toast.add({ title: t('features.timesheets.messages.saveError'), description: String(error), color: 'error' })
+  } finally {
+    busy.value = false
+  }
+}
+const save = () =>
+  run(async () => {
+    await timesheets.updateProject(props.project.id, {
+      clientOrganizationId: form.clientOrganizationId,
+      name: form.name,
+      code: form.code || null,
+      budgetMinutes: form.budgetHours ? Math.round(form.budgetHours * 60) : null,
+      budgetMinor: form.budgetAmount ? Math.round(form.budgetAmount * 100) : null,
+      activityTypeIds: form.activityTypeIds
+    })
+    editing.value = false
+    toast.add({ title: t('features.timesheets.messages.projectUpdated'), color: 'success' })
+  })
+const addActivity = async (input: { name: string; billable: boolean }) => {
+  await run(() => timesheets.createActivity(input))
+  return props.data.activities.find((activity) => activity.name === input.name)?.id
+}
+const setRateDraft = (userId: string, value: unknown) => {
+  rateDrafts[userId] = value === '' || value === null ? null : Number(value)
+}
+const saveRates = () =>
+  run(async () => {
+    await timesheets.updateProject(props.project.id, {
+      personRates: Object.fromEntries(
+        Object.entries(rateDrafts)
+          .filter(([, value]) => value !== null && value !== undefined)
+          .map(([id, value]) => [id, Math.round(Number(value) * 100)])
+      )
+    })
+    toast.add({ title: t('features.timesheets.messages.rateSaved'), color: 'success' })
+  })
+const toggleArchived = () =>
+  run(async () => {
+    const status = props.project.status === 'ACTIVE' ? 'ARCHIVED' : 'ACTIVE'
+    await timesheets.updateProject(props.project.id, { status })
+    toast.add({
+      title: t(
+        status === 'ARCHIVED'
+          ? 'features.timesheets.messages.projectArchived'
+          : 'features.timesheets.messages.projectRestored'
+      ),
+      color: 'success'
+    })
+  })
+const requestDeletion = async () => {
+  editing.value = false
+  deleting.value = !deleting.value
+  deletionName.value = ''
+  eligibility.value = null
+  if (!deleting.value) {
+    return
+  }
+  deletionPending.value = true
+  try {
+    eligibility.value = await timesheets.getProjectDeletionEligibility(props.project.id)
+  } catch (error) {
+    deleting.value = false
+    toast.add({ title: t('features.timesheets.messages.saveError'), description: String(error), color: 'error' })
+  } finally {
+    deletionPending.value = false
+  }
+}
+const confirmDeletion = async () => {
+  if (!eligibility.value?.canDelete || deletionName.value !== eligibility.value.projectName) {
+    return
+  }
+  busy.value = true
+  try {
+    await timesheets.deleteProject(props.project.id, deletionName.value)
+    toast.add({ title: t('features.timesheets.messages.projectDeleted'), color: 'success' })
+    emit('deleted')
+  } finally {
+    busy.value = false
+  }
+}
+onKeyStroke('Escape', () => {
+  editing.value = false
+  deleting.value = false
+  resetForm()
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <header class="flex flex-col gap-3 border-b border-default pb-5 sm:flex-row sm:items-end sm:justify-between">
+      <div class="min-w-0">
+        <div class="flex flex-wrap items-center gap-2">
+          <UIcon name="i-lucide-folder-kanban" class="size-6 shrink-0" />
+          <h1 class="truncate text-2xl font-semibold">{{ project.name }}</h1>
+          <UBadge :color="statusColor" variant="subtle">{{ statusLabel }}</UBadge>
+        </div>
+        <p class="mt-1 text-sm text-muted">{{ clientLabel }}{{ project.code ? ` · ${project.code}` : '' }}</p>
+      </div>
+      <UButton size="sm" variant="outline" icon="i-lucide-pencil" @click="toggleEditing">
+        {{ t('features.timesheets.admin.editProject') }}
+      </UButton>
+    </header>
+
+    <TimesheetsProjectForm
+      v-if="editing"
+      v-model="form"
+      :data="data"
+      :editing="true"
+      :busy="busy"
+      :show-cancel="true"
+      :add-activity="addActivity"
+      @submit="save"
+      @cancel="cancelEditing"
+    />
+
+    <UCard v-else>
+      <template #header>
+        <h2 class="font-semibold">{{ t('features.timesheets.admin.projectDetails') }}</h2>
+      </template>
+      <dl class="grid gap-x-8 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
+        <div>
+          <dt class="text-sm text-muted">{{ t('features.timesheets.fields.project') }}</dt>
+          <dd class="font-medium">{{ project.name }}</dd>
+        </div>
+        <div>
+          <dt class="text-sm text-muted">{{ t('features.timesheets.admin.client') }}</dt>
+          <dd>{{ clientLabel }}</dd>
+        </div>
+        <div>
+          <dt class="text-sm text-muted">{{ t('features.timesheets.admin.code') }}</dt>
+          <dd class="font-mono text-sm">{{ project.code || '—' }}</dd>
+        </div>
+        <div>
+          <dt class="text-sm text-muted">{{ t('features.timesheets.admin.hoursBudget') }}</dt>
+          <dd>{{ project.budgetMinutes === null ? '—' : formatHours(project.budgetMinutes) }}</dd>
+        </div>
+        <div>
+          <dt class="text-sm text-muted">{{ t('features.timesheets.admin.moneyBudget') }}</dt>
+          <dd>{{ project.budgetMinor === null ? '—' : formatMoney(project.budgetMinor) }}</dd>
+        </div>
+        <div>
+          <dt class="text-sm text-muted">{{ t('features.timesheets.admin.activities') }}</dt>
+          <dd>{{ activityNames.join(', ') || '—' }}</dd>
+        </div>
+      </dl>
+    </UCard>
+
+    <UCard>
+      <template #header>
+        <h2 class="font-semibold">{{ t('features.timesheets.admin.projectRates') }}</h2>
+      </template>
+      <div class="space-y-3">
+        <div v-for="member in data.team" :key="member.id" class="flex items-center gap-3">
+          <span class="min-w-0 flex-1 truncate text-sm">{{ member.name }}</span
+          ><UInput
+            :model-value="rateDrafts[member.id] ?? undefined"
+            type="number"
+            min="0"
+            step="0.01"
+            :placeholder="member.defaultHourlyRateMinor === null ? '—' : String(member.defaultHourlyRateMinor / 100)"
+            class="w-32"
+            @update:model-value="setRateDraft(member.id, $event)"
+          />
+        </div>
+        <div class="flex justify-end">
+          <UButton size="sm" variant="outline" icon="i-lucide-save" :loading="busy" @click="saveRates">
+            {{ t('features.timesheets.admin.saveOverrides') }}
+          </UButton>
+        </div>
+      </div>
+    </UCard>
+
+    <UCard>
+      <template #header>
+        <h2 class="font-semibold">{{ t('features.timesheets.admin.projectLifecycle') }}</h2>
+      </template>
+      <div class="flex flex-wrap justify-between gap-3">
+        <UButton
+          color="neutral"
+          variant="outline"
+          :icon="project.status === 'ACTIVE' ? 'i-lucide-archive' : 'i-lucide-archive-restore'"
+          :loading="busy"
+          @click="toggleArchived"
+        >
+          {{
+            t(
+              project.status === 'ACTIVE'
+                ? 'features.timesheets.admin.archiveProject'
+                : 'features.timesheets.admin.restoreProject'
+            )
+          }}
+        </UButton>
+        <UButton color="error" variant="outline" icon="i-lucide-trash-2" @click="requestDeletion">
+          {{ t('features.timesheets.admin.deleteProject') }}
+        </UButton>
+      </div>
+    </UCard>
+
+    <UCard v-if="deleting" class="border-error">
+      <template #header>
+        <h2 class="font-semibold text-error">{{ t('features.timesheets.admin.deleteProject') }}</h2>
+      </template>
+      <div v-if="deletionPending" class="flex items-center gap-2 text-sm text-muted">
+        <UIcon name="i-lucide-loader-circle" class="size-4 animate-spin" />{{
+          t('features.timesheets.admin.checkingProjectDeletion')
+        }}
+      </div>
+      <template v-else-if="eligibility">
+        <div class="flex items-center gap-2 text-sm" :class="eligibility.canDelete ? 'text-success' : 'text-error'">
+          <UIcon
+            :name="eligibility.canDelete ? 'i-lucide-circle-check' : 'i-lucide-circle-x'"
+            class="size-5 shrink-0"
+          />{{
+            t(
+              eligibility.canDelete
+                ? 'features.timesheets.admin.projectHasNoTimeEntries'
+                : 'features.timesheets.admin.projectHasTimeEntries'
+            )
+          }}
+        </div>
+        <div v-if="eligibility.canDelete" class="mt-4 space-y-4">
+          <p class="text-sm text-muted">
+            {{ t('features.timesheets.admin.typeProjectNameToDelete', { name: project.name }) }}
+          </p>
+          <UFormField :label="t('features.timesheets.admin.projectNameConfirmation')">
+            <UInput v-model="deletionName" :placeholder="project.name" autocomplete="off" class="w-full" />
+          </UFormField>
+          <div class="flex justify-end gap-2">
+            <UButton color="neutral" variant="outline" @click="deleting = false">
+              {{ t('features.timesheets.cancel') }} </UButton
+            ><UButton
+              color="error"
+              icon="i-lucide-trash-2"
+              :loading="busy"
+              :disabled="deletionName !== project.name"
+              @click="confirmDeletion"
+            >
+              {{ t('features.timesheets.admin.deleteProject') }}
+            </UButton>
+          </div>
+        </div>
+        <div v-else class="mt-4 flex justify-end">
+          <UButton color="neutral" variant="outline" @click="deleting = false">
+            {{ t('features.timesheets.cancel') }}
+          </UButton>
+        </div>
+      </template>
+    </UCard>
+  </div>
+</template>

package/app/components/TimesheetsProjectForm.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import type { TimesheetsAdminBootstrap } from '@nuxt-customer-portal/timesheets/app/composables/useTimesheets'
+
+export interface TimesheetsProjectFormModel {
+  clientOrganizationId: string
+  name: string
+  code: string
+  budgetHours: number | null
+  budgetAmount: number | null
+  activityTypeIds: string[]
+}
+
+const props = defineProps<{
+  data: TimesheetsAdminBootstrap
+  editing: boolean
+  busy: boolean
+  showCancel: boolean
+  addActivity: (input: { name: string; billable: boolean }) => Promise<string | undefined>
+}>()
+const emit = defineEmits<{
+  submit: []
+  cancel: []
+}>()
+const form = defineModel<TimesheetsProjectFormModel>({ required: true })
+const { t } = useI18n()
+const activityFormOpen = ref(false)
+const activityForm = reactive({ name: '', billable: true })
+const currencyFormat = computed<Intl.NumberFormatOptions>(() => ({
+  style: 'currency',
+  currency: props.data.settings.currency,
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2
+}))
+const wholeNumberFormat: Intl.NumberFormatOptions = {
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0
+}
+const availableActivities = computed(() =>
+  props.data.activities
+    .filter((activity) => activity.active || form.value.activityTypeIds.includes(activity.id))
+    .map((activity) => ({ label: activity.name, value: activity.id }))
+)
+const clientOptions = computed(() => [
+  {
+    label: t('features.timesheets.admin.internalOrganization', { name: props.data.providerOrganization.name }),
+    value: props.data.providerOrganization.organizationId
+  },
+  ...props.data.clients.map((item) => ({ label: item.name, value: item.organizationId }))
+])
+const schema = computed(() =>
+  z.object({
+    clientOrganizationId: z.string().min(1, t('features.timesheets.validation.required')),
+    name: z.string().trim().min(2, t('features.timesheets.validation.projectNameLength')).max(160),
+    code: z.string().trim().max(40),
+    budgetHours: z.number().min(0).nullable(),
+    budgetAmount: z.number().min(0).nullable(),
+    activityTypeIds: z.array(z.string()).min(1, t('features.timesheets.validation.selectActivity'))
+  })
+)
+
+const createActivity = async () => {
+  const activityId = await props.addActivity({
+    name: activityForm.name.trim(),
+    billable: activityForm.billable
+  })
+  if (!activityId) {
+    return
+  }
+  if (!form.value.activityTypeIds.includes(activityId)) {
+    form.value.activityTypeIds.push(activityId)
+  }
+  Object.assign(activityForm, { name: '', billable: true })
+  activityFormOpen.value = false
+}
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <div class="flex items-center justify-between gap-3">
+        <h2 class="font-semibold">
+          {{ editing ? t('features.timesheets.admin.editProject') : t('features.timesheets.admin.newProject') }}
+        </h2>
+        <UButton
+          v-if="editing"
+          type="button"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-x"
+          :aria-label="t('features.timesheets.admin.close')"
+          @click="emit('cancel')"
+        />
+      </div>
+    </template>
+    <UForm novalidate :state="form" :schema="schema" class="space-y-4" @submit="emit('submit')">
+      <div>
+        <UFormField name="clientOrganizationId" :label="t('features.timesheets.admin.client')" required>
+          <USelect v-model="form.clientOrganizationId" :items="clientOptions" value-key="value" class="w-full" />
+        </UFormField>
+        <p v-if="!data.clients.length" class="mt-2 text-sm text-muted">
+          {{ t('features.timesheets.admin.internalProjectHelp') }}
+          <ULink to="/clients" class="text-primary">{{ t('features.timesheets.admin.manageClients') }}</ULink>
+        </p>
+      </div>
+      <UFormField name="name" :label="t('features.timesheets.fields.project')" required>
+        <UInput v-model="form.name" class="w-full" />
+      </UFormField>
+      <UFormField name="code" :label="t('features.timesheets.admin.code')">
+        <UInput v-model="form.code" class="w-full" />
+      </UFormField>
+      <div class="flex items-end gap-2">
+        <UFormField
+          name="activityTypeIds"
+          :label="t('features.timesheets.admin.activities')"
+          required
+          class="min-w-0 flex-1"
+        >
+          <USelectMenu
+            v-model="form.activityTypeIds"
+            multiple
+            :items="availableActivities"
+            value-key="value"
+            class="w-full"
+          />
+        </UFormField>
+        <UButton
+          v-if="data.activities.some((item) => item.active)"
+          type="button"
+          size="sm"
+          variant="outline"
+          icon="i-lucide-plus"
+          :aria-expanded="activityFormOpen"
+          @click="activityFormOpen = !activityFormOpen"
+        >
+          {{ t('features.timesheets.admin.createActivity') }}
+        </UButton>
+      </div>
+      <div
+        v-if="!data.activities.some((item) => item.active) || activityFormOpen"
+        class="rounded-lg border border-default p-3"
+      >
+        <UInput v-model="activityForm.name" :placeholder="t('features.timesheets.fields.activity')" class="w-full" />
+        <div class="mt-3 flex items-center justify-between gap-3">
+          <UCheckbox v-model="activityForm.billable" :label="t('features.timesheets.billable')" />
+          <UButton
+            type="button"
+            size="sm"
+            :loading="busy"
+            :disabled="!activityForm.name.trim()"
+            @click="createActivity"
+          >
+            {{ t('features.timesheets.admin.createActivity') }}
+          </UButton>
+        </div>
+      </div>
+      <div class="grid grid-cols-2 gap-3">
+        <UFormField name="budgetHours" :label="t('features.timesheets.admin.hoursBudget')">
+          <UInputNumber
+            :model-value="form.budgetHours"
+            :placeholder="t('features.timesheets.admin.noBudget')"
+            :min="0"
+            :step="1"
+            :format-options="wholeNumberFormat"
+            class="w-full"
+            @update:model-value="
+              form.budgetHours = typeof $event === 'number' && Number.isFinite($event) ? $event : null
+            "
+          />
+          <UButton
+            v-if="form.budgetHours !== null"
+            type="button"
+            color="neutral"
+            variant="link"
+            size="xs"
+            @click="form.budgetHours = null"
+          >
+            {{ t('features.timesheets.admin.clearBudget') }}
+          </UButton>
+        </UFormField>
+        <UFormField name="budgetAmount" :label="t('features.timesheets.admin.moneyBudget')">
+          <UInputNumber
+            :model-value="form.budgetAmount"
+            :placeholder="t('features.timesheets.admin.noBudget')"
+            :min="0"
+            :step="1"
+            :format-options="currencyFormat"
+            class="w-full"
+            @update:model-value="
+              form.budgetAmount = typeof $event === 'number' && Number.isFinite($event) ? $event : null
+            "
+          />
+          <UButton
+            v-if="form.budgetAmount !== null"
+            type="button"
+            color="neutral"
+            variant="link"
+            size="xs"
+            @click="form.budgetAmount = null"
+          >
+            {{ t('features.timesheets.admin.clearBudget') }}
+          </UButton>
+        </UFormField>
+      </div>
+      <div class="flex justify-end gap-2">
+        <UButton v-if="showCancel" type="button" color="neutral" variant="outline" @click="emit('cancel')">
+          {{ t('features.timesheets.cancel') }}
+        </UButton>
+        <UButton type="submit" :loading="busy">
+          {{ editing ? t('features.timesheets.save') : t('features.timesheets.admin.createProject') }}
+        </UButton>
+      </div>
+    </UForm>
+  </UCard>
+</template>

package/app/components/TimesheetsSetupChecklist.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { TimesheetsSetupStatusDto } from '@nuxt-customer-portal/timesheets/shared/types/timesheet'
+
+const props = defineProps<{ status: TimesheetsSetupStatusDto }>()
+const { t } = useI18n()
+const items = computed(() => [
+  { complete: props.status.hasClient, key: 'client', to: '/clients' },
+  { complete: props.status.hasActiveActivity, key: 'activity', to: '/admin/timesheets/activities' },
+  { complete: props.status.hasConfiguredProject, key: 'project', to: '/admin/timesheets/projects' },
+  {
+    complete: props.status.missingDefaultTariffCount === 0,
+    key: 'rates',
+    to: '/admin/timesheets/rates',
+    count: props.status.missingDefaultTariffCount
+  }
+])
+</script>
+
+<template>
+  <UAlert
+    color="warning"
+    icon="i-lucide-list-checks"
+    :title="t('features.timesheets.setup.title')"
+    :description="t('features.timesheets.setup.description')"
+    variant="outline"
+  >
+    <template #actions>
+      <ul class="grid w-full gap-2 sm:grid-cols-2">
+        <li v-for="item in items" :key="item.key">
+          <UButton
+            :to="item.complete ? undefined : item.to"
+            :disabled="item.complete"
+            color="neutral"
+            variant="soft"
+            size="sm"
+            class="w-full justify-start"
+          >
+            <UIcon
+              :name="item.complete ? 'i-lucide-circle-check' : 'i-lucide-circle-dashed'"
+              :class="item.complete ? 'text-success' : 'text-warning'"
+            />
+            {{ t(`features.timesheets.setup.${item.key}`, { count: item.count ?? 0 }) }}
+          </UButton>
+        </li>
+      </ul>
+    </template>
+  </UAlert>
+</template>

package/app/components/TimesheetsSubmissionMessages.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { SubmissionMessageDto } from '@nuxt-customer-portal/timesheets/shared/types/timesheet'
+
+defineProps<{ messages: readonly Readonly<SubmissionMessageDto>[] }>()
+const { locale } = useI18n()
+const userStore = useUserStore()
+const timestamp = (value: string) =>
+  new Intl.DateTimeFormat(locale.value, { dateStyle: 'medium', timeStyle: 'short' }).format(new Date(value))
+</script>
+
+<template>
+  <div v-if="messages.length" class="my-3 flex w-full max-w-4xl flex-col gap-3">
+    <article
+      v-for="message in messages"
+      :key="message.id"
+      class="w-fit min-w-0 max-w-[92%] rounded-2xl border p-3 text-default sm:max-w-[80%]"
+      :class="
+        message.authorUserId && message.authorUserId === userStore.currentUser?.id
+          ? 'self-end rounded-br-sm border-primary/25 bg-primary/10'
+          : 'self-start rounded-bl-sm border-default bg-elevated'
+      "
+    >
+      <div class="mb-2 flex flex-wrap items-center gap-2">
+        <span v-if="message.authorName" class="text-sm font-medium">{{ message.authorName }}</span>
+        <time :datetime="message.createdAt" class="text-xs text-muted">{{ timestamp(message.createdAt) }}</time>
+      </div>
+      <p class="whitespace-pre-line break-words text-sm leading-relaxed">{{ message.comment }}</p>
+    </article>
+  </div>
+</template>