@nuxt-customer-portal/timesheets 0.3.0

package/app/composables/useTimesheetsDashboard.ts

@@ -0,0 +1,8 @@
+export const useTimesheetsDashboard = () => {
+  const { activeOrganizationId } = usePortalSession()
+  const { dashboard } = useTimesheets()
+  return useAsyncData('timesheets-dashboard', dashboard, {
+    watch: [activeOrganizationId],
+    dedupe: 'defer'
+  })
+}

package/app/pages/admin/timesheets/activities.vue

@@ -0,0 +1,3 @@
+<template>
+  <TimesheetsAdminSectionPage section="activities" />
+</template>

package/app/pages/admin/timesheets/approvals.vue

@@ -0,0 +1,3 @@
+<script setup lang="ts">
+await navigateTo('/timesheets/internal-approvals', { redirectCode: 301 })
+</script>

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

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+await navigateTo('/admin/timesheets/internal-approvals', { redirectCode: 301, replace: true })
+</script>
+
+<template>
+  <div />
+</template>

package/app/pages/admin/timesheets/internal-approvals.vue

@@ -0,0 +1,131 @@
+<script setup lang="ts">
+const { t } = useI18n()
+const toast = useToast()
+const timesheets = useTimesheets()
+const search = ref('')
+const busyId = ref<string | null>(null)
+const { data, pending, refresh } = await useAsyncData(
+  'timesheets-internal-approval-configuration',
+  timesheets.internalApprovalConfiguration
+)
+const members = computed(() =>
+  (data.value?.members ?? []).filter((member) => {
+    const query = search.value.trim().toLocaleLowerCase()
+    return !query || member.name.toLocaleLowerCase().includes(query) || member.email.toLocaleLowerCase().includes(query)
+  })
+)
+const optionsFor = (userId: string) =>
+  (data.value?.members ?? [])
+    .filter((member) => member.id !== userId)
+    .map((member) => ({ label: `${member.name} · ${member.email}`, value: member.id }))
+const saveWorkspace = async (enabled: boolean) => {
+  busyId.value = 'workspace'
+  try {
+    await timesheets.updateInternalApprovalWorkspace(enabled)
+    await refresh()
+    if (import.meta.client) {
+      window.dispatchEvent(new Event('timesheets:capabilities-refresh'))
+    }
+  } catch (error) {
+    toast.add({ title: t('features.timesheets.messages.saveError'), description: String(error), color: 'error' })
+  } finally {
+    busyId.value = null
+  }
+}
+const saveMember = async (userId: string, required: boolean, approverUserIds: string[]) => {
+  busyId.value = userId
+  try {
+    await timesheets.updateInternalApprovalMember(userId, { required, approverUserIds })
+    await refresh()
+    if (import.meta.client) {
+      window.dispatchEvent(new Event('timesheets:capabilities-refresh'))
+    }
+  } catch (error) {
+    toast.add({ title: t('features.timesheets.messages.saveError'), description: String(error), color: 'error' })
+    await refresh()
+  } finally {
+    busyId.value = null
+  }
+}
+useSeoMeta({ title: () => t('features.timesheets.internalApprovals.manageTitle') })
+</script>
+
+<template>
+  <TimesheetsPageShell class="h-full min-h-0 space-y-6 overflow-y-auto">
+    <header>
+      <div class="flex items-center gap-2">
+        <UIcon name="i-lucide-user-round-check" class="size-6" />
+        <h1 class="text-2xl font-semibold text-highlighted">
+          {{ t('features.timesheets.internalApprovals.manageTitle') }}
+        </h1>
+      </div>
+      <p class="mt-1 hidden text-sm text-muted sm:block">
+        {{ t('features.timesheets.internalApprovals.manageSubtitle') }}
+      </p>
+    </header>
+    <div v-if="pending && !data" class="flex justify-center py-12 text-muted">
+      <UIcon name="i-lucide-loader-circle" class="size-6 animate-spin" />
+    </div>
+    <template v-else-if="data">
+      <UCard>
+        <div class="flex items-center justify-between gap-4">
+          <div>
+            <p class="font-medium">{{ t('features.timesheets.internalApprovals.enabled') }}</p>
+            <p class="text-sm text-muted">{{ t('features.timesheets.internalApprovals.enabledHelp') }}</p>
+          </div>
+          <USwitch
+            :model-value="data.enabled"
+            :loading="busyId === 'workspace'"
+            :aria-label="t('features.timesheets.internalApprovals.enabled')"
+            @update:model-value="saveWorkspace"
+          />
+        </div>
+      </UCard>
+      <UInput
+        v-model="search"
+        icon="i-lucide-search"
+        :placeholder="t('features.timesheets.internalApprovals.search')"
+        class="w-full"
+      />
+      <section class="grid gap-3">
+        <UCard v-for="member in members" :key="member.id">
+          <div class="grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto_minmax(18rem,1fr)] lg:items-center">
+            <div class="flex min-w-0 items-center gap-3">
+              <UAvatar :src="member.image ?? undefined" :alt="member.name" />
+              <div class="min-w-0">
+                <p class="truncate font-medium">{{ member.name }}</p>
+                <p class="truncate text-sm text-muted">{{ member.email }}</p>
+              </div>
+            </div>
+            <UFormField :label="t('features.timesheets.internalApprovals.required')">
+              <USwitch
+                :model-value="member.internalApprovalRequired"
+                :disabled="!data.enabled || busyId === member.id"
+                @update:model-value="saveMember(member.id, $event, $event ? member.approverUserIds : [])"
+              />
+            </UFormField>
+            <UFormField
+              :label="t('features.timesheets.internalApprovals.approvers')"
+              :description="t('features.timesheets.internalApprovals.approversHelp')"
+            >
+              <USelectMenu
+                :model-value="member.approverUserIds"
+                multiple
+                :items="optionsFor(member.id)"
+                value-key="value"
+                class="w-full"
+                :disabled="!data.enabled || !member.internalApprovalRequired || busyId === member.id"
+                @update:model-value="saveMember(member.id, true, $event)"
+              />
+            </UFormField>
+          </div>
+        </UCard>
+        <UCard v-if="!members.length">
+          <p class="py-8 text-center text-sm text-muted">
+            {{ t('features.timesheets.internalApprovals.emptySearch') }}
+          </p>
+        </UCard>
+      </section>
+    </template>
+  </TimesheetsPageShell>
+</template>

package/app/pages/admin/timesheets/projects/[id].vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+const route = useRoute()
+const { t } = useI18n()
+const timesheets = useTimesheets()
+const projectId = computed(() => String(route.params.id))
+const returnTo = computed(() => {
+  const value = Array.isArray(route.query.returnTo) ? route.query.returnTo[0] : route.query.returnTo
+  return typeof value === 'string' &&
+    (value === '/admin/timesheets/projects' || value.startsWith('/admin/timesheets/projects?'))
+    ? value
+    : '/admin/timesheets/projects'
+})
+const {
+  data: project,
+  pending: projectPending,
+  error,
+  refresh: refreshProject
+} = await useAsyncData(`timesheets-project-${projectId.value}`, () => timesheets.getProject(projectId.value))
+const {
+  data,
+  pending: dataPending,
+  refresh: refreshData
+} = await useAsyncData('timesheets-admin-project-detail', () => timesheets.adminBootstrap('projects'))
+const pending = computed(() => projectPending.value || dataPending.value)
+useSeoMeta({ title: computed(() => project.value?.name ?? t('features.timesheets.admin.projects')) })
+const handleDeleted = async () => {
+  await navigateTo(returnTo.value)
+}
+</script>
+
+<template>
+  <TimesheetsPageShell class="timesheet-admin h-full min-h-0 overflow-y-auto" :setup-status="data?.setupStatus">
+    <UButton :to="returnTo" variant="link" color="neutral" icon="i-lucide-arrow-left" class="mb-4 w-fit px-0">
+      {{ t('features.timesheets.admin.backToProjects') }}
+    </UButton>
+    <div v-if="pending" class="flex justify-center py-12" role="status">
+      <UIcon name="i-lucide-loader-circle" class="size-6 animate-spin" /><span class="sr-only">{{
+        t('features.timesheets.admin.projectLoading')
+      }}</span>
+    </div>
+    <UAlert
+      v-else-if="error"
+      color="error"
+      icon="i-lucide-circle-alert"
+      :title="t('features.timesheets.admin.projectNotFound')"
+      variant="outline"
+    />
+    <TimesheetsProjectDetail
+      v-else-if="project && data"
+      :project="project"
+      :data="data"
+      :refresh-project="refreshProject"
+      :refresh-data="refreshData"
+      @deleted="handleDeleted"
+    />
+  </TimesheetsPageShell>
+</template>

package/app/pages/admin/timesheets/projects.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+const route = useRoute()
+</script>
+
+<template>
+  <NuxtPage v-if="route.params.id" />
+  <TimesheetsAdminSectionPage v-else section="projects" />
+</template>

package/app/pages/admin/timesheets/rates.vue

@@ -0,0 +1,3 @@
+<template>
+  <TimesheetsAdminSectionPage section="rates" />
+</template>

package/app/pages/admin/timesheets/reports.vue

@@ -0,0 +1,3 @@
+<template>
+  <TimesheetsAdminSectionPage section="reports" />
+</template>

package/app/pages/admin/timesheets/settings.vue

@@ -0,0 +1,3 @@
+<template>
+  <TimesheetsAdminSectionPage section="settings" />
+</template>

package/app/pages/timesheets/approvals/reviewers.vue

@@ -0,0 +1,96 @@
+<!-- Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 -->
+<script setup lang="ts">
+const { t } = useI18n()
+const api = useTimesheets()
+const toast = useToast()
+const { data: suppliers, refresh: refreshSuppliers } = await useAsyncData(
+  'timesheet-reviewer-suppliers',
+  api.clientReviewerSuppliers
+)
+const supplier = computed(() => suppliers.value?.[0] ?? null)
+const { data: reviewers, refresh } = await useAsyncData('timesheet-approval-reviewers', async () =>
+  supplier.value ? api.clientReviewers(supplier.value.id) : []
+)
+const saving = ref(false)
+const configurableReviewers = computed(() => reviewers.value ?? [])
+const reviewerCount = computed(() => reviewers.value?.filter((person) => person.assigned).length ?? 0)
+const toggle = async (userId: string, assigned: boolean) => {
+  if (!supplier.value || saving.value) {
+    return
+  }
+  saving.value = true
+  try {
+    await api.setClientReviewer(supplier.value.id, userId, assigned)
+    await Promise.all([refresh(), refreshSuppliers()])
+    window.dispatchEvent(new CustomEvent('timesheets:capabilities-refresh'))
+  } catch {
+    toast.add({
+      title: t('features.timesheets.messages.saveError'),
+      color: 'error'
+    })
+  } finally {
+    saving.value = false
+  }
+}
+useSeoMeta({ title: () => t('features.timesheets.approvals.reviewersTitle') })
+</script>
+
+<template>
+  <TimesheetsPageShell width="narrow" class="h-full overflow-y-auto">
+    <header class="border-b border-default pb-5">
+      <h1 class="text-2xl font-semibold">
+        {{ t('features.timesheets.approvals.reviewersTitle') }}
+      </h1>
+      <p class="mt-1 text-sm text-muted">
+        {{ t('features.timesheets.approvals.reviewersSubtitle') }}
+      </p>
+    </header>
+    <UAlert
+      v-if="!supplier"
+      class="mt-6"
+      icon="i-lucide-users-round"
+      :title="t('features.timesheets.approvals.approvalUnavailable')"
+      variant="outline"
+    />
+    <section v-else class="my-6 rounded-lg border border-default bg-default">
+      <header class="border-b border-default p-5">
+        <div class="flex flex-wrap items-start justify-between gap-3">
+          <div>
+            <h2 class="text-lg font-semibold">
+              {{ t('features.timesheets.approvals.chooseReviewers') }}
+            </h2>
+            <p class="mt-1 text-sm text-muted">
+              {{ t('features.timesheets.clientPortal.reviewerHelp') }}
+            </p>
+          </div>
+          <UBadge color="neutral" variant="subtle">
+            {{ t('features.timesheets.approvals.reviewerCount', reviewerCount) }}
+          </UBadge>
+        </div>
+      </header>
+      <div v-if="configurableReviewers.length">
+        <div class="divide-y divide-default">
+          <label
+            v-for="person in configurableReviewers"
+            :key="person.id"
+            class="flex items-center gap-3 p-4 hover:bg-elevated/40"
+            ><USwitch
+              :model-value="person.assigned"
+              :disabled="saving || (person.assigned && reviewerCount <= 1)"
+              @update:model-value="toggle(person.id, $event)"
+            /><span class="min-w-0"
+              ><strong class="block text-sm">{{ person.name }}</strong
+              ><span class="block truncate text-xs text-muted">{{ person.email }}</span></span
+            ></label
+          >
+        </div>
+      </div>
+      <p v-if="!configurableReviewers.length" class="p-5 text-sm text-muted">
+        {{ t('features.timesheets.approvals.noEligibleReviewers') }}
+      </p>
+      <footer class="border-t border-default p-4 text-xs text-muted">
+        {{ t('features.timesheets.clientPortal.saveReviewers') }}
+      </footer>
+    </section>
+  </TimesheetsPageShell>
+</template>

package/app/pages/timesheets/approvals.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const route = useRoute()
+const { t } = useI18n()
+
+useSeoMeta({ title: () => t('features.timesheets.approvals.title') })
+</script>
+
+<template>
+  <NuxtPage v-if="route.path !== '/timesheets/approvals'" />
+  <TimesheetsClientTimesheetBrowser v-else mode="review" />
+</template>

package/app/pages/timesheets/client-approvals.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { ApprovalQueueItemDto } from '@nuxt-customer-portal/timesheets/shared/types/timesheet'
+
+const { t } = useI18n()
+const timesheets = useTimesheets()
+const { data, error } = await useAsyncData('timesheets-client-approval-context', () =>
+  timesheets.internalApprovalQueue(true)
+)
+const listing = useTimesheetsAdminList<ApprovalQueueItemDto>({
+  endpoint: '/api/timesheets/client-approvals',
+  filterKeys: ['status', 'userId', 'clientOrganizationId'],
+  defaultSort: 'weekStartsOn',
+  defaultSortDir: 'desc'
+})
+const filters = computed(() => [
+  {
+    key: 'clientOrganizationId',
+    placeholder: t('features.timesheets.admin.list.clientFilter'),
+    items: [
+      { label: t('features.timesheets.admin.list.allClients'), value: undefined },
+      ...(data.value?.clients ?? []).map((client) => ({ label: client.name, value: client.organizationId }))
+    ]
+  },
+  {
+    key: 'userId',
+    placeholder: t('features.timesheets.internalApprovals.memberFilter'),
+    items: [
+      { label: t('features.timesheets.internalApprovals.allMembers'), value: undefined },
+      ...(data.value?.teamMembers ?? []).map((member) => ({ label: member.name, value: member.id }))
+    ]
+  },
+  {
+    key: 'status',
+    placeholder: t('features.timesheets.approvals.statusFilter'),
+    items: [
+      { label: t('features.timesheets.approvals.allStatuses'), value: undefined },
+      ...['PENDING', 'APPROVED', 'DISPUTED', 'AUTO_APPROVED'].map((status) => ({
+        label: t(`features.timesheets.clientPortal.${status.toLowerCase()}`),
+        value: status
+      }))
+    ]
+  }
+])
+const sortOptions = computed(() => [
+  { label: t('features.timesheets.approvals.sortNewest'), value: 'weekStartsOn' },
+  { label: t('features.timesheets.approvals.sortPerson'), value: 'userName' },
+  { label: t('features.timesheets.approvals.sortHours'), value: 'totalMinutes' },
+  { label: t('features.timesheets.approvals.sortStatus'), value: 'status' }
+])
+const approvalData = computed(() => (data.value ? { ...data.value, approvals: [...listing.items.value] } : null))
+await listing.load()
+useSeoMeta({ title: () => t('features.timesheets.admin.clientApprovals') })
+</script>
+
+<template>
+  <TimesheetsPageShell class="flex h-full min-h-0 flex-col gap-4 overflow-hidden">
+    <header class="flex shrink-0 items-center justify-between gap-3 border-b border-default pb-4 sm:items-end">
+      <div class="flex min-w-0 gap-3">
+        <UIcon name="i-lucide-stamp" class="mt-1 size-6 shrink-0 text-primary" />
+        <div class="min-w-0">
+          <h1 class="text-2xl font-semibold text-highlighted">
+            {{ t('features.timesheets.admin.clientApprovals') }}
+          </h1>
+          <p class="hidden text-sm text-muted sm:block">
+            {{ t('features.timesheets.admin.clientApprovalsSubtitle') }}
+          </p>
+        </div>
+      </div>
+    </header>
+    <TimesheetsAdminListToolbar
+      v-model:search="listing.search.value"
+      class="shrink-0"
+      :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"
+    />
+    <TimesheetsAdminPaginatedList
+      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"
+      @next="listing.loadNext"
+      @previous="listing.loadPrevious"
+      @page="listing.goToPage"
+    >
+      <UAlert v-if="error || listing.error.value" color="error" :title="t('features.timesheets.dashboard.error')" />
+      <div v-else-if="listing.pending.value && !listing.items.value.length" class="space-y-3">
+        <USkeleton v-for="index in 3" :key="index" class="h-32 w-full" />
+      </div>
+      <UAlert
+        v-else-if="!listing.items.value.length"
+        icon="i-lucide-search-x"
+        :title="t('features.timesheets.approvals.emptyFiltered')"
+        :description="t('features.timesheets.approvals.emptyFilteredDescription')"
+        variant="outline"
+      />
+      <TimesheetsAdminApprovals v-else-if="approvalData" client-mode :data="approvalData" :refresh="listing.refresh" />
+    </TimesheetsAdminPaginatedList>
+  </TimesheetsPageShell>
+</template>

package/app/pages/timesheets/client.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const capabilities = await $fetch<{ canAccessApprovals: boolean; canEnterTime: boolean; canViewSupplierTime: boolean }>(
+  '/api/timesheets/capabilities'
+)
+const destination = capabilities.canAccessApprovals
+  ? '/timesheets/approvals'
+  : capabilities.canEnterTime
+    ? '/timesheets'
+    : capabilities.canViewSupplierTime
+      ? '/timesheets/suppliers'
+      : '/dashboard'
+await navigateTo(destination, { replace: true })
+</script>
+
+<template>
+  <div />
+</template>