@nuxt-customer-portal/timesheets 0.10.0 → 0.10.2

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @nuxt-customer-portal/timesheets
 
+## 0.10.2
+
+### Patch Changes
+
+- Updated dependencies [c2985a7]
+- Updated dependencies [c2985a7]
+- Updated dependencies [c2985a7]
+- Updated dependencies [c2985a7]
+  - @nuxt-customer-portal/ui@0.10.2
+  - @nuxt-customer-portal/core@0.10.2
+  - @nuxt-customer-portal/clients@0.10.2
+  - @nuxt-customer-portal/organizations@0.10.2
+
+## 0.10.1
+
+### Patch Changes
+
+- 91bd778: Turn the timesheet toolbar's week label into a localized calendar picker for jumping directly to any Monday–Sunday week.
+- Updated dependencies [7c0f8df]
+  - @nuxt-customer-portal/ui@0.10.1
+  - @nuxt-customer-portal/clients@0.10.1
+  - @nuxt-customer-portal/core@0.10.1
+  - @nuxt-customer-portal/organizations@0.10.1
+
 ## 0.10.0
 
 ### Patch Changes

package/README.md

@@ -4,6 +4,8 @@ An isolated PortalNuxt feature for weekly time entry, timers, approval, project
 
 All API access is scoped to the active organization through portal-core. Feature-owned database objects live in the PostgreSQL `timesheets` schema.
 
+The timesheet toolbar's week number and date range open a calendar week picker. Select any date to view its Monday–Sunday week, or use the previous/next buttons. The picker highlights the displayed week and is disabled while a timesheet is loading.
+
 ### 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.

package/app/pages/timesheets/index.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { formatTimesheetPeriod } from '@nuxt-customer-portal/timesheets/shared/timesheet-dates'
+import { parseDate } from '@internationalized/date'
+import type { CalendarProps } from '@nuxt/ui'
+import { formatTimesheetPeriod, mondayFor } from '@nuxt-customer-portal/timesheets/shared/timesheet-dates'
 import { addDays, addWeeks, format, getISOWeek, parseISO } from 'date-fns'
 import { z } from 'zod'
 import { submissionReplySchema } from '@nuxt-customer-portal/timesheets/shared/submission-reply'
@@ -49,6 +51,7 @@ const route = useRoute()
 const selectedWeek = ref<string | undefined>(
   typeof route.query.week === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(route.query.week) ? route.query.week : undefined
 )
+const weekPickerOpen = ref(false)
 const selectedDay = ref('')
 const modalOpen = ref(false)
 const cellEntriesOpen = ref(false)
@@ -271,6 +274,22 @@ const formatWeekPeriod = (startsOn: string) =>
     parseISO(startsOn),
     addDays(parseISO(startsOn), 6)
   )
+const calendarWeek = computed(() => (week.value ? parseDate(week.value.weekStartsOn) : undefined))
+const weekLabel = computed(() =>
+  week.value
+    ? `${t('features.timesheets.weekNumber', { number: getISOWeek(parseISO(week.value.weekStartsOn)) })} · ${formatWeekPeriod(week.value.weekStartsOn)}`
+    : '—'
+)
+const selectWeek = (value: CalendarProps<boolean, boolean>['modelValue']) => {
+  weekPickerOpen.value = false
+  if (pending.value || !value || Array.isArray(value) || !('day' in value) || !week.value) {
+    return
+  }
+  const targetWeek = mondayFor(value.toString())
+  if (targetWeek !== week.value.weekStartsOn) {
+    selectedWeek.value = targetWeek
+  }
+}
 const hasOtherUnsubmittedHours = (submission: TimesheetSubmissionDto) =>
   (week.value?.entries ?? []).some(
     (entry) =>
@@ -646,21 +665,30 @@ const runningDuration = computed(() => {
           :aria-label="t('features.timesheets.previousWeek')"
           @click="changeWeek(-1)"
         />
-        <UBadge color="neutral" variant="subtle" size="lg" class="relative">
-          <span
-            v-if="pending && data"
-            class="absolute inset-x-0 bottom-0 h-0.5 overflow-hidden rounded-full"
-            role="status"
-            :aria-label="t('features.timesheets.loading')"
-          >
-            <span class="block h-full w-full animate-pulse bg-primary" />
-          </span>
-          {{
-            week
-              ? `${t('features.timesheets.weekNumber', { number: getISOWeek(parseISO(week.weekStartsOn)) })} · ${formatWeekPeriod(week.weekStartsOn)}`
-              : '—'
-          }}
-        </UBadge>
+        <UPopover v-model:open="weekPickerOpen">
+          <UButton
+            icon="i-lucide-calendar-days"
+            color="neutral"
+            variant="subtle"
+            :label="weekLabel"
+            :aria-label="t('features.timesheets.pickWeek', { week: weekLabel })"
+            :loading="pending && !!data"
+            :disabled="pending || !week"
+          />
+          <template #content>
+            <UCalendar
+              v-if="weekPickerOpen && week"
+              :model-value="calendarWeek"
+              :week-starts-on="1"
+              :locale="locale"
+              :aria-label="t('features.timesheets.selectWeek')"
+              :ui="{ gridRow: 'has-[[data-selected]]:bg-primary/10 rounded-md' }"
+              class="p-2"
+              week-numbers
+              @update:model-value="selectWeek"
+            />
+          </template>
+        </UPopover>
         <UButton
           icon="i-lucide-chevron-right"
           color="neutral"

package/i18n/locales/en.json

@@ -10,6 +10,8 @@
       "subtitle": "Record your work while the details are still fresh.",
       "loading": "Loading timesheet…",
       "previousWeek": "Previous week",
+      "pickWeek": "Pick a week, currently {week}",
+      "selectWeek": "Select any date to view its week",
       "nextWeek": "Next week",
       "projectActivity": "Project / activity",
       "total": "Total",

package/i18n/locales/nl.json

@@ -10,6 +10,8 @@
       "subtitle": "Registreer je werk zolang de details nog vers zijn.",
       "loading": "Urenstaat laden…",
       "previousWeek": "Vorige week",
+      "pickWeek": "Kies een week, momenteel {week}",
+      "selectWeek": "Selecteer een datum om de bijbehorende week te bekijken",
       "nextWeek": "Volgende week",
       "projectActivity": "Project / activiteit",
       "total": "Totaal",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt-customer-portal/timesheets",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "license": "MIT",
   "homepage": "https://nuxt-customer-portal.com",
   "repository": {
@@ -36,6 +36,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@internationalized/date": "^3.10.0",
     "@nuxtjs/i18n": "^10.6.0",
     "@types/pg": "8.15.5",
     "date-fns": "^4.4.0",
@@ -45,10 +46,10 @@
     "pg": "^8.22.0",
     "resend": "^6.18.1",
     "zod": "^4.4.3",
-    "@nuxt-customer-portal/core": "^0.10.0",
-    "@nuxt-customer-portal/clients": "^0.10.0",
-    "@nuxt-customer-portal/ui": "^0.10.0",
-    "@nuxt-customer-portal/organizations": "^0.10.0"
+    "@nuxt-customer-portal/core": "^0.10.2",
+    "@nuxt-customer-portal/clients": "^0.10.2",
+    "@nuxt-customer-portal/organizations": "^0.10.2",
+    "@nuxt-customer-portal/ui": "^0.10.2"
   },
   "peerDependencies": {
     "nuxt": "^4.5.1",

package/portal.manifest.mjs

@@ -1,6 +1,6 @@
 export default {
   id: 'timesheets',
-  version: '0.10.0',
+  version: '0.10.2',
   source: '@nuxt-customer-portal/timesheets',
   clientModuleId: 'timesheets',
   dependsOn: ['core', 'ui', 'organizations', 'clients'],