@nuxt-customer-portal/timesheets 0.3.0

package/app/components/TimesheetsAdminProjects.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+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<{ data: TimesheetsAdminBootstrap; refresh: () => Promise<unknown> }>()
+const route = useRoute()
+const { t } = useI18n()
+const toast = useToast()
+const timesheets = useTimesheets()
+const busy = ref(false)
+const formOpen = ref(false)
+const projectFormRef = ref<ComponentPublicInstance | null>(null)
+const listScrollTop = ref(Math.max(0, Number(route.query.scroll) || 0))
+const form = reactive({
+  clientOrganizationId: '',
+  name: '',
+  code: '',
+  budgetHours: null as number | null,
+  budgetAmount: null as number | null,
+  activityTypeIds: [] as string[]
+})
+const listing = useTimesheetsAdminList<ProjectDto>({
+  endpoint: '/api/timesheets/admin/projects',
+  filterKeys: ['clientOrganizationId', 'status'],
+  defaultFilters: { status: 'ACTIVE' },
+  defaultSort: 'name'
+})
+const activeProjects = listing.items
+const internalOrganizationLabel = computed(() =>
+  t('features.timesheets.admin.internalOrganization', { name: props.data.providerOrganization.name })
+)
+const projectClientLabel = (project: Pick<ProjectDto, 'internal' | 'clientName'>) =>
+  project.internal
+    ? t('features.timesheets.admin.internalOrganization', { name: project.clientName })
+    : project.clientName
+const projectFilters = computed(() => [
+  {
+    key: 'clientOrganizationId',
+    placeholder: t('features.timesheets.admin.list.clientFilter'),
+    items: [
+      { label: t('features.timesheets.admin.list.allClients'), value: undefined },
+      { label: internalOrganizationLabel.value, value: props.data.providerOrganization.organizationId },
+      ...props.data.clients.map((client) => ({ label: client.name, value: client.organizationId }))
+    ]
+  },
+  {
+    key: 'status',
+    placeholder: t('features.timesheets.admin.list.projectStatusFilter'),
+    items: [
+      { label: t('features.timesheets.admin.list.allProjectStatuses'), value: 'ALL' },
+      { label: t('features.timesheets.admin.projectStatus.active'), value: 'ACTIVE' },
+      { label: t('features.timesheets.admin.projectStatus.archived'), value: 'ARCHIVED' }
+    ]
+  }
+])
+const sortOptions = computed(() => [
+  { label: t('features.timesheets.admin.list.sortName'), value: 'name' },
+  { label: t('features.timesheets.admin.list.sortClient'), value: 'clientName' },
+  { label: t('features.timesheets.admin.list.sortStartDate'), value: 'startsOn' }
+])
+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 statusColor = (status: ProjectDto['status']) => (status === 'ACTIVE' ? 'success' : 'neutral')
+const statusLabel = (status: ProjectDto['status']) =>
+  t(`features.timesheets.admin.projectStatus.${status.toLowerCase()}`)
+
+const returnPath = computed(() => {
+  const query = new URLSearchParams()
+  for (const [key, value] of Object.entries(route.query)) {
+    const selected = Array.isArray(value) ? value[0] : value
+    if (selected != null && key !== 'scroll') {
+      query.set(key, String(selected))
+    }
+  }
+  if (listScrollTop.value > 0) {
+    query.set('scroll', String(Math.round(listScrollTop.value)))
+  }
+  const suffix = query.toString()
+  return suffix ? `/admin/timesheets/projects?${suffix}` : '/admin/timesheets/projects'
+})
+const projectDetailTo = (project: { id: string }) => ({
+  path: `/admin/timesheets/projects/${project.id}`,
+  query: { returnTo: returnPath.value }
+})
+const resetForm = () => {
+  Object.assign(form, {
+    clientOrganizationId: '',
+    name: '',
+    code: '',
+    budgetHours: null,
+    budgetAmount: null,
+    activityTypeIds: []
+  })
+  formOpen.value = false
+}
+const openNew = async () => {
+  resetForm()
+  formOpen.value = true
+  await nextTick()
+  const formElement = projectFormRef.value?.$el as HTMLElement | undefined
+  formElement?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+}
+const save = async () => {
+  busy.value = true
+  try {
+    const created = await timesheets.createProject({
+      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
+    })
+    resetForm()
+    await Promise.all([props.refresh(), listing.refresh()])
+    toast.add({ title: t('features.timesheets.messages.projectCreated'), color: 'success' })
+    await navigateTo({ path: `/admin/timesheets/projects/${created.id}`, query: { returnTo: returnPath.value } })
+  } catch (error) {
+    toast.add({ title: t('features.timesheets.messages.saveError'), description: String(error), color: 'error' })
+  } finally {
+    busy.value = false
+  }
+}
+const addActivity = async (input: { name: string; billable: boolean }) => {
+  busy.value = true
+  try {
+    await timesheets.createActivity(input)
+    await props.refresh()
+    return props.data.activities.find((activity) => activity.name === input.name)?.id
+  } finally {
+    busy.value = false
+  }
+}
+onKeyStroke('Escape', () => {
+  if (formOpen.value) {
+    resetForm()
+  }
+})
+defineExpose({
+  canCreate: computed(() => true),
+  openCreate: openNew,
+  refreshList: () => listing.refresh(),
+  showCreate: computed(() => Boolean(activeProjects.value.length) && !formOpen.value)
+})
+await listing.load()
+</script>
+
+<template>
+  <section class="flex h-full min-h-0 flex-col gap-5">
+    <TimesheetsAdminListToolbar
+      v-model:search="listing.search.value"
+      :filters="projectFilters"
+      :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"
+      :initial-scroll-top="listScrollTop"
+      @scroll="listScrollTop = $event"
+      @next="listing.loadNext"
+      @previous="listing.loadPrevious"
+      @page="listing.goToPage"
+    >
+      <TimesheetsAdminEmptyState
+        v-if="!activeProjects.length && !formOpen && !listing.pending.value"
+        icon="i-lucide-folder-kanban"
+        :title="t('features.timesheets.admin.noProjectsTitle')"
+        :description="t('features.timesheets.admin.noProjectsDescription')"
+        :action-label="t('features.timesheets.admin.createFirstProject')"
+        @action="openNew"
+      />
+      <div class="grid gap-3">
+        <TimesheetsProjectForm
+          v-if="formOpen"
+          ref="projectFormRef"
+          v-model="form"
+          :data="data"
+          :editing="false"
+          :busy="busy"
+          :show-cancel="true"
+          :add-activity="addActivity"
+          @submit="save"
+          @cancel="resetForm"
+        />
+        <UCard
+          v-for="project in activeProjects"
+          :key="project.id"
+          class="transition-colors hover:ring-1 hover:ring-primary/50"
+        >
+          <div class="grid grid-cols-[minmax(0,1fr)_2.75rem] items-center gap-3">
+            <NuxtLink
+              :to="projectDetailTo(project)"
+              class="group min-w-0 rounded-lg focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
+            >
+              <div class="flex flex-wrap items-center gap-2">
+                <p class="font-semibold">{{ project.name }}</p>
+                <UBadge :color="statusColor(project.status)" variant="subtle">{{ statusLabel(project.status) }}</UBadge>
+              </div>
+              <p class="mt-1 text-sm text-muted">
+                {{ projectClientLabel(project) }}{{ project.code ? ` · ${project.code}` : '' }}
+              </p>
+              <div class="mt-3 flex flex-wrap gap-2 text-xs text-muted">
+                <span
+                  >{{ project.activityTypeIds.length }}
+                  {{ t('features.timesheets.admin.activities').toLowerCase() }}</span
+                ><span v-if="project.budgetMinutes">· {{ formatHours(project.budgetMinutes) }}</span
+                ><span v-if="project.budgetMinor">· {{ formatMoney(project.budgetMinor) }}</span>
+              </div>
+            </NuxtLink>
+            <NuxtLink
+              :to="projectDetailTo(project)"
+              :aria-label="t('features.timesheets.admin.openProject', { name: project.name })"
+              class="grid size-11 place-items-center justify-self-end rounded focus-visible:outline-2 focus-visible:outline-primary"
+              ><UIcon name="i-lucide-chevron-right" class="size-5 text-muted"
+            /></NuxtLink>
+          </div>
+        </UCard>
+      </div>
+    </TimesheetsAdminPaginatedList>
+  </section>
+</template>

package/app/components/TimesheetsAdminRates.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { TimesheetsAdminBootstrap } from '@nuxt-customer-portal/timesheets/app/composables/useTimesheets'
+
+const props = defineProps<{ data: TimesheetsAdminBootstrap; refresh: () => Promise<unknown> }>()
+const { t } = useI18n()
+const toast = useToast()
+const timesheets = useTimesheets()
+const busy = ref(false)
+const tariffDrafts = reactive<Record<string, number | undefined>>({})
+const entryDrafts = reactive<Record<string, boolean>>({})
+
+const run = async (operation: () => Promise<unknown>) => {
+  busy.value = true
+  try {
+    await operation()
+    await props.refresh()
+  } catch (error) {
+    toast.add({ title: t('features.timesheets.messages.saveError'), description: String(error), color: 'error' })
+    await props.refresh()
+  } finally {
+    busy.value = false
+  }
+}
+
+const saveMember = (userId: string) => {
+  const value = tariffDrafts[userId]
+  return run(async () => {
+    await timesheets.updateTeamMemberSettings(userId, {
+      canEnterTime: entryDrafts[userId] ?? true,
+      defaultHourlyRateMinor: value === null || value === undefined ? null : Math.round(value * 100)
+    })
+    if (import.meta.client) {
+      window.dispatchEvent(new Event('timesheets:capabilities-refresh'))
+    }
+  })
+}
+const updateEntryEligibility = (userId: string, canEnterTime: boolean) => {
+  entryDrafts[userId] = canEnterTime
+  return saveMember(userId)
+}
+watch(
+  () => props.data,
+  (data) => {
+    for (const member of data.team) {
+      tariffDrafts[member.id] = member.defaultHourlyRateMinor === null ? undefined : member.defaultHourlyRateMinor / 100
+      entryDrafts[member.id] = member.canEnterTime
+    }
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <section class="space-y-3">
+    <UCard v-for="member in data.team" :key="member.id">
+      <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <UAvatar :src="member.image ?? undefined" :alt="member.name" />
+        <div class="min-w-0 flex-1">
+          <p class="truncate font-medium">{{ member.name }}</p>
+          <p class="truncate text-sm text-muted">{{ member.email }}</p>
+        </div>
+        <div class="flex flex-wrap items-end gap-4">
+          <UFormField :label="t('features.timesheets.admin.canEnterTime')">
+            <USwitch
+              :model-value="entryDrafts[member.id]"
+              :aria-label="t('features.timesheets.admin.canEnterTimeFor', { name: member.name })"
+              @update:model-value="updateEntryEligibility(member.id, $event)"
+            />
+          </UFormField>
+          <UFormField :label="`${data.settings.currency} / h`">
+            <UInput v-model.number="tariffDrafts[member.id]" type="number" min="0" step="0.01" class="w-32" />
+          </UFormField>
+          <UButton
+            icon="i-lucide-save"
+            :aria-label="t('features.timesheets.save')"
+            :loading="busy"
+            @click="saveMember(member.id)"
+          />
+        </div>
+      </div>
+    </UCard>
+  </section>
+</template>

package/app/components/TimesheetsAdminReports.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type { TimesheetStatus } from '@nuxt-customer-portal/timesheets/shared/types/timesheet'
+import type { TimesheetsAdminBootstrap } from '@nuxt-customer-portal/timesheets/app/composables/useTimesheets'
+
+const props = defineProps<{
+  data: TimesheetsAdminBootstrap
+  refresh?: () => Promise<unknown>
+}>()
+const { t } = useI18n()
+const timesheets = useTimesheets()
+const allFilterValue = '__all__'
+const filters = reactive({
+  from: '',
+  to: '',
+  clientOrganizationId: allFilterValue,
+  projectId: allFilterValue,
+  userId: '',
+  activityTypeId: '',
+  status: '' as '' | TimesheetStatus
+})
+const report = ref<Awaited<ReturnType<typeof timesheets.getReport>> | null>(null)
+const query = () => Object.fromEntries(Object.entries(filters).filter(([, value]) => value && value !== allFilterValue))
+const loadReport = async () => {
+  report.value = await timesheets.getReport(query())
+}
+const downloadCsv = () => {
+  const params = new URLSearchParams(query())
+  params.set('format', 'csv')
+  window.location.assign(`/api/timesheets/admin/report?${params}`)
+}
+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)
+</script>
+
+<template>
+  <section class="space-y-5">
+    <UCard>
+      <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+        <UFormField :label="t('features.timesheets.admin.from')">
+          <UInput v-model="filters.from" type="date" class="w-full" />
+        </UFormField>
+        <UFormField :label="t('features.timesheets.admin.to')">
+          <UInput v-model="filters.to" type="date" class="w-full" />
+        </UFormField>
+        <UFormField :label="t('features.timesheets.admin.client')">
+          <USelect
+            v-model="filters.clientOrganizationId"
+            :items="[
+              { label: t('features.timesheets.admin.all'), value: allFilterValue },
+              ...data.clients.map((item) => ({ label: item.name, value: item.organizationId }))
+            ]"
+            value-key="value"
+            class="w-full"
+          />
+        </UFormField>
+        <UFormField :label="t('features.timesheets.fields.project')">
+          <USelect
+            v-model="filters.projectId"
+            :items="[
+              { label: t('features.timesheets.admin.all'), value: allFilterValue },
+              ...data.projects.map((item) => ({ label: item.name, value: item.id }))
+            ]"
+            value-key="value"
+            class="w-full"
+          />
+        </UFormField>
+      </div>
+      <div class="mt-4 flex flex-wrap justify-end gap-2">
+        <UButton color="neutral" variant="outline" icon="i-lucide-download" @click="downloadCsv">
+          {{ t('features.timesheets.admin.exportCsv') }}
+        </UButton>
+        <UButton icon="i-lucide-search" @click="loadReport">{{ t('features.timesheets.admin.runReport') }}</UButton>
+      </div>
+    </UCard>
+    <div v-if="report" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+      <UCard>
+        <p class="text-sm text-muted">{{ t('features.timesheets.admin.totalHours') }}</p>
+        <p class="mt-1 text-2xl font-semibold">{{ formatHours(report.totals.minutes) }}</p>
+      </UCard>
+      <UCard>
+        <p class="text-sm text-muted">{{ t('features.timesheets.admin.billableHours') }}</p>
+        <p class="mt-1 text-2xl font-semibold">{{ formatHours(report.totals.billableMinutes) }}</p>
+      </UCard>
+      <UCard>
+        <p class="text-sm text-muted">{{ t('features.timesheets.admin.nonBillableHours') }}</p>
+        <p class="mt-1 text-2xl font-semibold">{{ formatHours(report.totals.nonBillableMinutes) }}</p>
+      </UCard>
+      <UCard>
+        <p class="text-sm text-muted">{{ t('features.timesheets.admin.billableAmount') }}</p>
+        <p class="mt-1 text-2xl font-semibold">{{ formatMoney(report.totals.billableAmountMinor) }}</p>
+      </UCard>
+    </div>
+    <UCard v-if="report" :ui="{ body: '!p-0' }">
+      <div class="overflow-x-auto">
+        <table class="w-full min-w-[52rem] text-sm">
+          <thead class="border-b border-default bg-muted text-left text-muted">
+            <tr>
+              <th class="p-3">{{ t('features.timesheets.fields.date') }}</th>
+              <th class="p-3">{{ t('features.timesheets.admin.client') }}</th>
+              <th class="p-3">{{ t('features.timesheets.fields.project') }}</th>
+              <th class="p-3">{{ t('features.timesheets.admin.person') }}</th>
+              <th class="p-3">{{ t('features.timesheets.fields.activity') }}</th>
+              <th class="p-3 text-right">{{ t('features.timesheets.admin.hours') }}</th>
+              <th class="p-3 text-right">{{ t('features.timesheets.admin.amount') }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="row in report.rows" :key="row.entryId" class="border-b border-muted">
+              <td class="p-3">{{ row.date }}</td>
+              <td class="p-3">{{ row.client }}</td>
+              <td class="p-3">{{ row.project }}</td>
+              <td class="p-3">{{ row.person }}</td>
+              <td class="p-3">{{ row.activity }}</td>
+              <td class="p-3 text-right tabular-nums">{{ formatHours(row.minutes) }}</td>
+              <td class="p-3 text-right tabular-nums">{{ formatMoney(row.amountMinor) }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </UCard>
+  </section>
+</template>

package/app/components/TimesheetsAdminSectionPage.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import TimesheetsAdminActivities from './TimesheetsAdminActivities.vue'
+import TimesheetsAdminApprovals from './TimesheetsAdminApprovals.vue'
+import TimesheetsAdminProjects from './TimesheetsAdminProjects.vue'
+import TimesheetsAdminRates from './TimesheetsAdminRates.vue'
+import TimesheetsAdminReports from './TimesheetsAdminReports.vue'
+import TimesheetsAdminSettings from './TimesheetsAdminSettings.vue'
+
+type AdminSection = 'approvals' | 'projects' | 'activities' | 'rates' | 'settings' | 'reports'
+type CrudSectionView = {
+  canCreate: boolean
+  openCreate: () => void
+  refreshList: () => Promise<unknown>
+  showCreate: boolean
+}
+
+const props = defineProps<{ section: AdminSection }>()
+const sectionComponents = {
+  approvals: TimesheetsAdminApprovals,
+  projects: TimesheetsAdminProjects,
+  activities: TimesheetsAdminActivities,
+  rates: TimesheetsAdminRates,
+  settings: TimesheetsAdminSettings,
+  reports: TimesheetsAdminReports
+} satisfies Record<AdminSection, Component>
+const sectionTitleKeys = {
+  approvals: 'approvals',
+  projects: 'projects',
+  activities: 'activities',
+  rates: 'teamRates',
+  settings: 'workspaceSettings',
+  reports: 'reports'
+} satisfies Record<AdminSection, string>
+const sectionIcons: Partial<Record<AdminSection, string>> = {
+  projects: 'i-lucide-folder-kanban',
+  activities: 'i-lucide-tags'
+}
+const createLabelKeys: Partial<Record<AdminSection, string>> = {
+  projects: 'newProject',
+  activities: 'newActivity'
+}
+const { t } = useI18n()
+const timesheets = useTimesheets()
+const sectionViewRef = ref<CrudSectionView | null>(null)
+const refreshing = ref(false)
+const sectionComponent = computed(() => sectionComponents[props.section])
+const titleKey = computed(() => sectionTitleKeys[props.section])
+const sectionTitle = computed(() => t(`features.timesheets.admin.${titleKey.value}`))
+const sectionSubtitle = computed(() => t(`features.timesheets.admin.sectionSubtitles.${props.section}`))
+const hasConstrainedList = computed(() => ['projects', 'activities'].includes(props.section))
+const createLabel = computed(() =>
+  createLabelKeys[props.section] ? t(`features.timesheets.admin.${createLabelKeys[props.section]}`) : ''
+)
+const { data, pending, refresh } = await useAsyncData(`timesheets-admin-${props.section}`, () =>
+  timesheets.adminBootstrap(props.section)
+)
+const openCreate = () => sectionViewRef.value?.openCreate()
+const refreshSection = async () => {
+  if (refreshing.value) {
+    return
+  }
+  refreshing.value = true
+  try {
+    await Promise.all([refresh(), sectionViewRef.value?.refreshList()])
+  } finally {
+    refreshing.value = false
+  }
+}
+
+useSeoMeta({ title: sectionTitle })
+</script>
+
+<template>
+  <TimesheetsPageShell
+    class="timesheet-admin h-full min-h-0"
+    :setup-status="data?.setupStatus"
+    :class="hasConstrainedList ? 'flex flex-col overflow-hidden' : 'space-y-6 overflow-y-auto'"
+  >
+    <header :class="hasConstrainedList ? 'mb-6 shrink-0' : ''">
+      <div class="flex items-end justify-between gap-4">
+        <div class="min-w-0">
+          <div class="flex items-center gap-2">
+            <UIcon v-if="sectionIcons[section]" :name="sectionIcons[section]" class="size-6 shrink-0" />
+            <h1 class="text-2xl font-semibold text-highlighted">{{ sectionTitle }}</h1>
+          </div>
+          <p class="mt-1 hidden text-sm text-muted sm:block">{{ sectionSubtitle }}</p>
+        </div>
+        <div v-if="hasConstrainedList" class="flex shrink-0 items-center gap-1">
+          <UButton
+            v-if="sectionViewRef?.showCreate"
+            class="rounded-full sm:hidden"
+            icon="i-lucide-plus"
+            :aria-label="createLabel"
+            :disabled="!sectionViewRef.canCreate"
+            @click="openCreate"
+          />
+          <UButton
+            v-if="sectionViewRef?.showCreate"
+            icon="i-lucide-plus"
+            size="sm"
+            variant="outline"
+            class="hidden h-8 sm:inline-flex"
+            :disabled="!sectionViewRef.canCreate"
+            @click="openCreate"
+          >
+            {{ createLabel }}
+          </UButton>
+          <UButton
+            icon="i-lucide-refresh-cw"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            :loading="refreshing"
+            :aria-label="t('features.timesheets.admin.refresh')"
+            @click="refreshSection"
+          />
+        </div>
+      </div>
+    </header>
+    <div v-if="pending && !data" class="flex justify-center py-12 text-muted" role="status">
+      <UIcon name="i-lucide-loader-circle" class="size-6 animate-spin" />
+      <span class="sr-only">{{ t('features.timesheets.loading') }}</span>
+    </div>
+    <component
+      :is="sectionComponent"
+      v-if="data"
+      ref="sectionViewRef"
+      :key="props.section"
+      :data="data"
+      :refresh="refresh"
+      :class="hasConstrainedList ? 'min-h-0 flex-1' : ''"
+    />
+  </TimesheetsPageShell>
+</template>

package/app/components/TimesheetsAdminSettings.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TimesheetsAdminBootstrap } from '@nuxt-customer-portal/timesheets/app/composables/useTimesheets'
+import TimesheetsWorkspaceSettingsForm from './TimesheetsWorkspaceSettingsForm.vue'
+
+defineProps<{
+  data: TimesheetsAdminBootstrap
+  refresh: () => Promise<unknown>
+}>()
+</script>
+
+<template>
+  <section class="grid gap-4">
+    <TimesheetsWorkspaceSettingsForm :settings="data.settings" :refresh="refresh" />
+  </section>
+</template>

package/app/components/TimesheetsAdministrationOrganizationPanel.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { OrganizationTimesheetCapabilities } from '../composables/useTimesheets'
+
+const props = defineProps<{ organizationId: string }>()
+const timesheets = useTimesheets()
+const capabilities = ref<OrganizationTimesheetCapabilities | null>(null)
+const pending = ref(true)
+
+const load = async () => {
+  pending.value = true
+  try {
+    capabilities.value = await timesheets.getOrganizationTimesheetCapabilities(props.organizationId)
+  } finally {
+    pending.value = false
+  }
+}
+
+await load()
+</script>
+
+<template>
+  <USkeleton v-if="pending" class="h-32 w-full" />
+  <template v-else-if="capabilities">
+    <TimesheetsOrganizationFeaturesCard v-model="capabilities" :organization-id="organizationId" />
+  </template>
+</template>

package/app/components/TimesheetsClientSettingsPanel.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { z } from 'zod'
+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}`)
+if (data.value) {
+  Object.assign(state, data.value)
+}
+const save = async () => {
+  busy.value = true
+  try {
+    await $fetch(`/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
+  }
+}
+</script>
+
+<template>
+  <UCard>
+    <template #header>
+      <h2 class="font-semibold">{{ t('features.timesheets.admin.clientSettings') }}</h2>
+    </template>
+    <UForm :state="state" :schema="schema" class="space-y-4" @submit="save">
+      <UFormField name="accessMode" :label="t('features.timesheets.timesheetAccess')">
+        <USelect
+          v-model="state.accessMode"
+          :items="[
+            { label: t('features.timesheets.clientAccess.disabled'), value: 'DISABLED' },
+            { label: t('features.timesheets.clientAccess.view'), value: 'VIEW' },
+            { label: t('features.timesheets.clientAccess.review'), value: 'REVIEW' }
+          ]"
+          value-key="value"
+          class="w-full"
+        />
+      </UFormField>
+      <div class="flex justify-end">
+        <UButton type="submit" icon="i-lucide-save" :loading="busy">{{ t('features.timesheets.save') }}</UButton>
+      </div>
+    </UForm>
+  </UCard>
+</template>