@nuxt-customer-portal/ui 0.3.0

package/app/components/AppUserMenu.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { authClient } from '@nuxt-customer-portal/core/app/utils/auth-client'
+import type { DropdownMenuItem } from '@nuxt/ui'
+
+withDefaults(
+  defineProps<{
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'xs'
+    inline?: boolean
+  }>(),
+  {
+    size: 'sm',
+    inline: false
+  }
+)
+
+const emit = defineEmits<{ navigate: [] }>()
+
+const { t } = useI18n()
+const userStore = useUserStore()
+const { currentUser, userInitials } = storeToRefs(userStore)
+
+// Logic preserved from AppHeader
+const isOrgAdmin = ref(false)
+
+const signOut = async () => {
+  await authClient.signOut()
+  userStore.clearUserData()
+  emit('navigate')
+  await navigateTo('/')
+}
+
+const userMenuItems = computed(() => {
+  const menuItems: DropdownMenuItem[][] = [
+    [
+      {
+        label: currentUser.value?.name || currentUser.value?.email || 'User',
+        avatar: {
+          src: currentUser.value?.image || undefined,
+          alt: currentUser.value?.name || currentUser.value?.email || 'User'
+        },
+        type: 'label' as const
+      }
+    ],
+    [
+      {
+        label: t('menu.settings.title'),
+        icon: 'i-lucide-cog',
+        to: '/settings'
+      }
+    ]
+  ]
+
+  // Add organization menu items for admins/owners
+  if (isOrgAdmin.value && menuItems[1]) {
+    menuItems[1].push(
+      {
+        label: 'Create Organization',
+        icon: 'i-lucide-plus-circle',
+        to: '/organizations/create'
+      },
+      {
+        label: 'Invite User',
+        icon: 'i-lucide-user-plus',
+        onSelect: () => {
+          // Navigate to organization page with invite modal
+          navigateTo('/organization?invite=true')
+        }
+      }
+    )
+  }
+
+  menuItems.push([
+    {
+      label: t('menu.logout'),
+      icon: 'i-lucide-log-out',
+      onSelect: signOut
+    }
+  ])
+
+  return menuItems
+})
+</script>
+
+<template>
+  <div v-if="currentUser && inline" class="space-y-2">
+    <div class="flex min-w-0 items-center gap-3 px-3 py-2">
+      <UAvatar
+        :src="currentUser.image ?? undefined"
+        :alt="currentUser.name || currentUser.email || 'User'"
+        :text="userInitials"
+        :size="size"
+        class="shrink-0"
+      />
+      <div class="min-w-0">
+        <div class="truncate text-sm font-semibold text-highlighted">{{ currentUser.name || currentUser.email }}</div>
+        <div v-if="currentUser.name" class="truncate text-xs text-muted">{{ currentUser.email }}</div>
+      </div>
+    </div>
+    <UButton
+      :label="t('menu.settings.title')"
+      icon="i-lucide-cog"
+      to="/settings"
+      color="neutral"
+      variant="ghost"
+      block
+      class="min-h-11 justify-start"
+      @click="emit('navigate')"
+    />
+    <UButton
+      :label="t('menu.logout')"
+      icon="i-lucide-log-out"
+      color="neutral"
+      variant="ghost"
+      block
+      class="min-h-11 justify-start"
+      @click="signOut"
+    />
+  </div>
+  <UDropdownMenu v-else-if="currentUser" :items="userMenuItems" :ui="{ content: 'w-48' }">
+    <UAvatar
+      :src="currentUser.image ?? undefined"
+      :alt="currentUser.name || currentUser.email || 'User'"
+      :text="userInitials"
+      :size="size"
+      class="cursor-pointer transition-[box-shadow] hover:ring-2 hover:ring-primary/20"
+    />
+  </UDropdownMenu>
+</template>

package/app/components/ConfirmationModal.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  message: string
+  messageParams?: Record<string, string | number>
+  confirmText?: string
+  cancelText?: string
+  confirmColor?: 'primary' | 'error' | 'warning' | 'success' | 'info'
+  confirmVariant?: 'solid' | 'outline' | 'ghost' | 'soft'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  confirmText: undefined,
+  cancelText: undefined,
+  confirmColor: 'primary',
+  confirmVariant: 'solid',
+  messageParams: () => ({})
+})
+
+const emit = defineEmits<{
+  confirm: []
+  cancel: []
+}>()
+
+const open = defineModel<boolean>('open', { default: false })
+const { t } = useI18n()
+
+const handleConfirm = () => {
+  open.value = false
+  emit('confirm')
+}
+
+const handleCancel = () => {
+  open.value = false
+  emit('cancel')
+}
+
+// Helper to check if a string is an i18n key (contains a dot)
+const isI18nKey = (str: string): boolean => {
+  return str.includes('.')
+}
+
+// Get translated or raw text
+const getText = (key: string | undefined, fallback: string): string => {
+  if (!key) {
+    return fallback
+  }
+  if (isI18nKey(key)) {
+    return t(key)
+  }
+  return key
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="getText(title, title)" :ui="{ footer: 'justify-end' }">
+    <template #body>
+      <div class="space-y-4">
+        <p class="text-sm text-gray-600 dark:text-gray-400">
+          <template v-if="isI18nKey(props.message)">
+            {{ t(props.message, props.messageParams) }}
+          </template>
+          <template v-else>
+            {{ props.message }}
+          </template>
+        </p>
+        <div class="flex gap-4 justify-end pt-4">
+          <UButton type="button" variant="outline" @click="handleCancel">
+            {{ getText(props.cancelText, t('common.cancel')) }}
+          </UButton>
+          <UButton type="button" :color="confirmColor" :variant="confirmVariant" @click="handleConfirm">
+            {{ getText(props.confirmText, t('common.confirm')) }}
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/CustomPageCard.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    description?: string
+    success?: string
+    error?: string
+    showLogo?: boolean
+  }>(),
+  {
+    title: '',
+    description: '',
+    success: '',
+    error: '',
+    showLogo: true
+  }
+)
+</script>
+
+<template>
+  <div>
+    <UAlert v-if="props.success" color="success" :description="props.success" variant="outline" />
+    <UAlert v-if="props.error" color="error" :description="props.error" variant="outline" />
+    <UPageCard variant="subtle" class="max-w-sm w-full mt-10 space-y-6 text-center">
+      <template v-if="props.title" #title>
+        <div class="flex justify-center mb-10">
+          <AppLogo class="w-auto h-6 shrink-0" />
+        </div>
+        <h2 class="text-2xl text-center">{{ props.title }}</h2>
+      </template>
+      <template v-if="props.description" #description>
+        <div class="text-center text-sm text-gray-500 mb-5">
+          {{ props.description }}
+        </div>
+      </template>
+      <slot />
+    </UPageCard>
+  </div>
+</template>

package/app/components/DashboardContribution.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const props = defineProps<{ component: string }>()
+// Component resolution depends on the active Vue instance. Resolve during setup;
+// deferring it through a computed getter runs outside that context during render
+// and turns registered Nuxt components into empty custom elements.
+const resolvedComponent = resolveComponent(props.component)
+const componentMissing = typeof resolvedComponent === 'string'
+</script>
+
+<template>
+  <NuxtErrorBoundary>
+    <component :is="resolvedComponent" v-if="!componentMissing" />
+    <UCard v-else>
+      <p class="font-medium">{{ $t('dashboard.error.title') }}</p>
+      <p class="mt-1 text-sm text-muted">{{ $t('dashboard.error.description') }}</p>
+    </UCard>
+    <template #error="{ clearError }">
+      <UCard>
+        <div class="flex items-center justify-between gap-4">
+          <div>
+            <p class="font-medium">{{ $t('dashboard.error.title') }}</p>
+            <p class="mt-1 text-sm text-muted">{{ $t('dashboard.error.description') }}</p>
+          </div>
+          <UButton color="neutral" variant="outline" icon="i-lucide-refresh-cw" @click="clearError()">
+            {{ $t('dashboard.error.retry') }}
+          </UButton>
+        </div>
+      </UCard>
+    </template>
+  </NuxtErrorBoundary>
+</template>

package/app/components/InvitationActions.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { invitationRoleSchema, type InvitationRole } from '@nuxt-customer-portal/core/shared/invitation-validation'
+
+const props = defineProps<{
+  endpoint: string
+  email: string
+  role: string | null
+  canEdit?: boolean
+  canRevoke?: boolean
+}>()
+const emit = defineEmits<{ refresh: [] }>()
+const { t } = useI18n()
+const api = useInvitationManagement()
+const toast = useToast()
+const editing = ref(false)
+const revoking = ref(false)
+const busy = ref(false)
+const currentRole = (): InvitationRole => (props.role === 'admin' || props.role === 'owner' ? props.role : 'member')
+const state = reactive({ role: currentRole() })
+const openEditor = () => {
+  state.role = currentRole()
+  editing.value = true
+}
+const save = async () => {
+  busy.value = true
+  try {
+    await api.changeRole(props.endpoint, state.role)
+    editing.value = false
+    toast.add({ title: t('invitationManagement.updated'), color: 'success' })
+    emit('refresh')
+  } catch {
+    toast.add({ title: t('invitationManagement.failed'), color: 'error' })
+  } finally {
+    busy.value = false
+  }
+}
+const revoke = async () => {
+  busy.value = true
+  try {
+    await api.revoke(props.endpoint)
+    toast.add({ title: t('invitationManagement.revoked'), color: 'success' })
+    emit('refresh')
+  } catch {
+    toast.add({ title: t('invitationManagement.failed'), color: 'error' })
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="flex items-center gap-1" @click.stop @keydown.stop>
+    <UButton
+      v-if="canEdit"
+      icon="i-lucide-pencil"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      :disabled="busy"
+      :aria-label="t('invitationManagement.edit')"
+      @click="openEditor"
+    />
+    <UButton
+      v-if="canRevoke"
+      icon="i-lucide-x"
+      color="error"
+      variant="ghost"
+      size="sm"
+      :disabled="busy"
+      :aria-label="t('invitationManagement.revoke')"
+      @click="revoking = true"
+    />
+    <UModal v-model:open="editing" :title="t('invitationManagement.edit')">
+      <template #body>
+        <UForm :state="state" :schema="invitationRoleSchema" novalidate class="space-y-4" @submit="save">
+          <p>{{ email }}</p>
+          <UFormField name="role" :label="t('invitationManagement.role')" required>
+            <USelect v-model="state.role" :items="['member', 'admin', 'owner']" class="w-full" />
+          </UFormField>
+          <div class="flex justify-end gap-2">
+            <UButton color="neutral" variant="outline" @click="editing = false">{{ t('common.cancel') }}</UButton>
+            <UButton type="submit" :loading="busy">{{ t('invitationManagement.save') }}</UButton>
+          </div>
+        </UForm>
+      </template>
+    </UModal>
+    <ConfirmationModal
+      v-model:open="revoking"
+      title="invitationManagement.revoke"
+      message="invitationManagement.confirmRevoke"
+      :message-params="{ email }"
+      confirm-text="invitationManagement.revoke"
+      confirm-color="error"
+      @confirm="revoke"
+    />
+  </div>
+</template>

package/app/components/NotificationsSlideover.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { formatTimeAgo } from '@vueuse/core'
+import type { Notification } from '@nuxt-customer-portal/core/app/types'
+
+const { isNotificationsSlideoverOpen } = useDashboard()
+
+const { data: notifications } = await useFetch<Notification[]>('/api/notifications')
+</script>
+
+<template>
+  <USlideover v-model:open="isNotificationsSlideoverOpen" title="Notifications">
+    <template #body>
+      <NuxtLink
+        v-for="notification in notifications"
+        :key="notification.id"
+        :to="`/inbox?id=${notification.id}`"
+        class="px-3 py-2.5 rounded-md hover:bg-elevated/50 flex items-center gap-3 relative -mx-3 first:-mt-3 last:-mb-3"
+      >
+        <UChip color="error" :show="!!notification.unread" inset>
+          <UAvatar v-bind="notification.sender?.avatar" :alt="notification.sender.name" size="md" />
+        </UChip>
+
+        <div class="text-sm flex-1">
+          <p class="flex items-center justify-between">
+            <span class="text-highlighted font-medium">{{ notification.sender.name }}</span>
+
+            <time
+              :datetime="notification.date"
+              class="text-muted text-xs"
+              v-text="formatTimeAgo(new Date(notification.date))"
+            />
+          </p>
+
+          <p class="text-dimmed">
+            {{ notification.body }}
+          </p>
+        </div>
+      </NuxtLink>
+    </template>
+  </USlideover>
+</template>

package/app/components/PortalListToolbar.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+type Option = { label: string; value: string | undefined; badgeText?: string; badgeColor?: string }
+const props = defineProps<{
+  searchPlaceholder?: string
+  filters: Array<{ key: string; placeholder: string; items: Option[] }>
+  filterValues: Record<string, string | undefined>
+  sortOptions: Array<{ label: string; value: string }>
+  sortBy: string
+  sortDir: 'asc' | 'desc'
+}>()
+const emit = defineEmits<{
+  filter: [key: string, value: string | undefined]
+  sort: [value: string]
+  toggleDirection: []
+}>()
+const search = defineModel<string>('search', { required: true })
+const { t } = useI18n()
+const showFilters = ref(false)
+const showSort = ref(false)
+const toolbar = ref<HTMLElement | null>(null)
+const { width } = useElementSize(toolbar)
+const isMobile = computed(() => width.value < Math.max(660, 160 + props.filters.length * 120 + 232))
+</script>
+
+<template>
+  <div ref="toolbar" class="shrink-0 border-b border-default pb-4">
+    <div class="flex items-center gap-2">
+      <UInput
+        v-model="search"
+        :placeholder="searchPlaceholder || t('common.searchPlaceholder')"
+        icon="i-lucide-search"
+        :class="isMobile ? 'min-w-0 flex-1' : 'min-w-40 flex-1 md:max-w-xs'"
+      />
+      <template v-if="!isMobile">
+        <USelect
+          v-for="filter in filters"
+          :key="filter.key"
+          :model-value="filterValues[filter.key]"
+          :items="filter.items"
+          value-key="value"
+          :placeholder="filter.placeholder"
+          :aria-label="filter.placeholder"
+          class="w-44 min-w-28 shrink"
+          @update:model-value="emit('filter', filter.key, $event)"
+        />
+        <div class="ml-auto flex shrink-0 items-center gap-2">
+          <USelect
+            :model-value="sortBy"
+            :items="sortOptions"
+            value-key="value"
+            icon="i-lucide-arrow-down-up"
+            :aria-label="t('common.sortBy')"
+            class="w-44"
+            @update:model-value="emit('sort', $event)"
+          />
+          <UButton
+            color="neutral"
+            variant="outline"
+            :icon="sortDir === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow'"
+            :aria-label="t('common.direction')"
+            @click="emit('toggleDirection')"
+          />
+        </div>
+      </template>
+      <template v-else>
+        <UButton
+          v-if="filters.length"
+          color="neutral"
+          variant="outline"
+          icon="i-lucide-filter"
+          :aria-label="t('common.filters')"
+          @click="showFilters = true"
+        />
+        <UButton
+          color="neutral"
+          variant="outline"
+          icon="i-lucide-arrow-down-up"
+          :aria-label="t('common.sort')"
+          @click="showSort = true"
+        />
+      </template>
+    </div>
+    <UModal v-model:open="showFilters" :title="t('common.filters')">
+      <template #body>
+        <div class="space-y-4">
+          <UFormField v-for="filter in filters" :key="filter.key" :label="filter.placeholder">
+            <USelect
+              :model-value="filterValues[filter.key]"
+              :items="filter.items"
+              value-key="value"
+              class="w-full"
+              @update:model-value="emit('filter', filter.key, $event)"
+            />
+          </UFormField>
+        </div>
+      </template>
+    </UModal>
+    <UModal v-model:open="showSort" :title="t('common.sort')">
+      <template #body>
+        <div class="space-y-4">
+          <USelect
+            :model-value="sortBy"
+            :items="sortOptions"
+            icon="i-lucide-arrow-down-up"
+            :aria-label="t('common.sortBy')"
+            value-key="value"
+            class="w-full"
+            @update:model-value="emit('sort', $event)"
+          /><UButton
+            block
+            color="neutral"
+            variant="outline"
+            :icon="sortDir === 'asc' ? 'i-lucide-arrow-up-narrow-wide' : 'i-lucide-arrow-down-wide-narrow'"
+            @click="emit('toggleDirection')"
+          >
+            {{ t('common.direction') }}
+          </UButton>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>

package/app/components/home/HomeDateRangePicker.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { DateFormatter, getLocalTimeZone, CalendarDate, today } from '@internationalized/date'
+import type { Range } from '@nuxt-customer-portal/core/app/types'
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium'
+})
+
+const selected = defineModel<Range>({ required: true })
+
+const ranges = [
+  { label: 'Last 7 days', days: 7 },
+  { label: 'Last 14 days', days: 14 },
+  { label: 'Last 30 days', days: 30 },
+  { label: 'Last 3 months', months: 3 },
+  { label: 'Last 6 months', months: 6 },
+  { label: 'Last year', years: 1 }
+]
+
+const toCalendarDate = (date: Date) => {
+  return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
+}
+
+const calendarRange = computed({
+  get: () => ({
+    start: selected.value.start ? toCalendarDate(selected.value.start) : undefined,
+    end: selected.value.end ? toCalendarDate(selected.value.end) : undefined
+  }),
+  set: (newValue: { start: CalendarDate | null; end: CalendarDate | null }) => {
+    selected.value = {
+      start: newValue.start ? newValue.start.toDate(getLocalTimeZone()) : new Date(),
+      end: newValue.end ? newValue.end.toDate(getLocalTimeZone()) : new Date()
+    }
+  }
+})
+
+const isRangeSelected = (range: { days?: number; months?: number; years?: number }) => {
+  if (!selected.value.start || !selected.value.end) {
+    return false
+  }
+
+  const currentDate = today(getLocalTimeZone())
+  let startDate = currentDate.copy()
+
+  if (range.days) {
+    startDate = startDate.subtract({ days: range.days })
+  } else if (range.months) {
+    startDate = startDate.subtract({ months: range.months })
+  } else if (range.years) {
+    startDate = startDate.subtract({ years: range.years })
+  }
+
+  const selectedStart = toCalendarDate(selected.value.start)
+  const selectedEnd = toCalendarDate(selected.value.end)
+
+  return selectedStart.compare(startDate) === 0 && selectedEnd.compare(currentDate) === 0
+}
+
+const selectRange = (range: { days?: number; months?: number; years?: number }) => {
+  const endDate = today(getLocalTimeZone())
+  let startDate = endDate.copy()
+
+  if (range.days) {
+    startDate = startDate.subtract({ days: range.days })
+  } else if (range.months) {
+    startDate = startDate.subtract({ months: range.months })
+  } else if (range.years) {
+    startDate = startDate.subtract({ years: range.years })
+  }
+
+  selected.value = {
+    start: startDate.toDate(getLocalTimeZone()),
+    end: endDate.toDate(getLocalTimeZone())
+  }
+}
+</script>
+
+<template>
+  <UPopover :content="{ align: 'start' }" :modal="true">
+    <UButton color="neutral" variant="ghost" icon="i-lucide-calendar" class="data-[state=open]:bg-elevated group">
+      <span class="truncate">
+        <template v-if="selected.start">
+          <template v-if="selected.end"> {{ df.format(selected.start) }} - {{ df.format(selected.end) }} </template>
+          <template v-else>
+            {{ df.format(selected.start) }}
+          </template>
+        </template>
+        <template v-else> Pick a date </template>
+      </span>
+
+      <template #trailing>
+        <UIcon
+          name="i-lucide-chevron-down"
+          class="shrink-0 text-dimmed size-5 group-data-[state=open]:rotate-180 transition-transform duration-200"
+        />
+      </template>
+    </UButton>
+
+    <template #content>
+      <div class="flex items-stretch sm:divide-x divide-default">
+        <div class="hidden sm:flex flex-col justify-center">
+          <UButton
+            v-for="(range, index) in ranges"
+            :key="index"
+            :label="range.label"
+            color="neutral"
+            variant="ghost"
+            class="rounded-none px-4"
+            :class="[isRangeSelected(range) ? 'bg-elevated' : 'hover:bg-elevated/50']"
+            truncate
+            @click="selectRange(range)"
+          />
+        </div>
+
+        <UCalendar v-model="calendarRange" class="p-2" :number-of-months="2" range />
+      </div>
+    </template>
+  </UPopover>
+</template>