@nuxt-customer-portal/ui 0.3.0

package/app/components/home/HomePeriodSelect.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { eachDayOfInterval } from 'date-fns'
+import type { Period, Range } from '@nuxt-customer-portal/core/app/types'
+
+const model = defineModel<Period>({ required: true })
+
+const props = defineProps<{
+  range: Range
+}>()
+
+const days = computed(() => eachDayOfInterval(props.range))
+
+const periods = computed<Period[]>(() => {
+  if (days.value.length <= 8) {
+    return ['daily']
+  }
+
+  if (days.value.length <= 31) {
+    return ['daily', 'weekly']
+  }
+
+  return ['weekly', 'monthly']
+})
+
+// Ensure the model value is always a valid period
+watch(periods, () => {
+  if (!periods.value.includes(model.value)) {
+    model.value = periods.value[0]!
+  }
+})
+</script>
+
+<template>
+  <USelect
+    v-model="model"
+    :items="periods"
+    variant="ghost"
+    class="data-[state=open]:bg-elevated"
+    :ui="{
+      value: 'capitalize',
+      itemLabel: 'capitalize',
+      trailingIcon: 'group-data-[state=open]:rotate-180 transition-transform duration-200'
+    }"
+  />
+</template>

package/app/composables/useDashboard.ts

@@ -0,0 +1,28 @@
+import { createSharedComposable } from '@vueuse/core'
+
+const _useDashboard = () => {
+  const route = useRoute()
+  const router = useRouter()
+  const isNotificationsSlideoverOpen = ref(false)
+
+  defineShortcuts({
+    'g-h': () => router.push('/'),
+    'g-i': () => router.push('/inbox'),
+    'g-c': () => router.push('/customers'),
+    'g-s': () => router.push('/settings'),
+    n: () => (isNotificationsSlideoverOpen.value = !isNotificationsSlideoverOpen.value)
+  })
+
+  watch(
+    () => route.fullPath,
+    () => {
+      isNotificationsSlideoverOpen.value = false
+    }
+  )
+
+  return {
+    isNotificationsSlideoverOpen
+  }
+}
+
+export const useDashboard = createSharedComposable(_useDashboard)

package/app/composables/useInvitationManagement.ts

@@ -0,0 +1,4 @@
+export const useInvitationManagement = () => ({
+  changeRole: (endpoint: string, role: string) => $fetch(endpoint, { method: 'PATCH', body: { role } }),
+  revoke: (endpoint: string) => $fetch(endpoint, { method: 'PATCH', body: { status: 'canceled' } })
+})

package/app/composables/useModuleNavigation.ts

@@ -0,0 +1,126 @@
+import type { NavigationMenuItem } from '@nuxt/ui'
+import type { PortalAudience } from '@nuxt-customer-portal/core/shared/types/feature'
+
+const hasAudience = (
+  audiences: PortalAudience[],
+  isAuthenticated: boolean,
+  isAdmin: boolean,
+  organizationRole: string | null,
+  organizationType: 'PROVIDER' | 'CLIENT' | null
+) =>
+  audiences.some((audience) => {
+    if (audience === 'public') {
+      return true
+    }
+    if (audience === 'authenticated') {
+      return isAuthenticated
+    }
+    if (audience === 'admin') {
+      return isAdmin
+    }
+    if (audience === 'providerAuthenticated') {
+      return organizationType === 'PROVIDER' && Boolean(organizationRole)
+    }
+    if (audience === 'providerAdmin') {
+      return organizationType === 'PROVIDER' && (organizationRole === 'owner' || organizationRole === 'admin')
+    }
+    if (audience === 'clientAuthenticated') {
+      return organizationType === 'CLIENT' && Boolean(organizationRole)
+    }
+    if (audience === 'clientAdmin') {
+      return organizationType === 'CLIENT' && (organizationRole === 'owner' || organizationRole === 'admin')
+    }
+    return organizationType === 'PROVIDER' && (organizationRole === 'owner' || organizationRole === 'admin')
+  })
+
+export const useModuleNavigation = (sidebarOpen?: Ref<boolean>) => {
+  const { t } = useI18n()
+  const route = useRoute()
+  const { modules: registeredModules } = usePortalFeatures()
+  const { isAuthenticated, isSystemAdmin, activeOrganizationRole, activeOrganizationType } = usePortalSession()
+
+  const modules = computed(() =>
+    registeredModules.value
+      .filter((module) =>
+        hasAudience(
+          module.audiences,
+          isAuthenticated.value,
+          isSystemAdmin.value,
+          activeOrganizationRole.value,
+          activeOrganizationType.value
+        )
+      )
+      .map((module) => ({ ...module, label: t(module.labelKey) }))
+  )
+
+  const activeModule = computed(
+    () =>
+      modules.value
+        .map((module) => ({
+          module,
+          matchLength: Math.max(
+            0,
+            ...module.routePrefixes.filter((prefix) => route.path.startsWith(prefix)).map((prefix) => prefix.length)
+          )
+        }))
+        .filter((item) => item.matchLength > 0)
+        .sort((left, right) => right.matchLength - left.matchLength)[0]?.module
+  )
+
+  const activeModuleId = computed(() => activeModule.value?.id ?? '')
+  const moduleNavigationGroups = computed(() =>
+    modules.value.map((module) => ({
+      ...module,
+      menuItems: (module.menuItems ?? [])
+        .filter((item) =>
+          hasAudience(
+            item.audiences,
+            isAuthenticated.value,
+            isSystemAdmin.value,
+            activeOrganizationRole.value,
+            activeOrganizationType.value
+          )
+        )
+        .sort((a, b) => (a.order ?? 100) - (b.order ?? 100))
+        .map((item) => ({
+          label: t(item.labelKey),
+          icon: item.icon,
+          to: item.to,
+          exact: item.exact,
+          badge: item.badge,
+          onSelect: () => {
+            if (sidebarOpen) {
+              sidebarOpen.value = false
+            }
+          }
+        }))
+    }))
+  )
+  const activeModuleMenuItems = computed<NavigationMenuItem[]>(() =>
+    (activeModule.value?.menuItems ?? [])
+      .filter((item) =>
+        hasAudience(
+          item.audiences,
+          isAuthenticated.value,
+          isSystemAdmin.value,
+          activeOrganizationRole.value,
+          activeOrganizationType.value
+        )
+      )
+      .sort((a, b) => (a.order ?? 100) - (b.order ?? 100))
+      .map((item) => ({
+        label: t(item.labelKey),
+        icon: item.icon,
+        to: item.to,
+        exact: item.exact,
+        badge: item.badge,
+        onSelect: () => {
+          if (sidebarOpen) {
+            sidebarOpen.value = false
+          }
+        }
+      }))
+  )
+
+  return { modules, moduleNavigationGroups, activeModuleId, activeModule, activeModuleMenuItems }
+}

package/app/composables/useNavigationLinks.ts

@@ -0,0 +1,83 @@
+import type { CommandPaletteGroup, CommandPaletteItem, NavigationMenuItem } from '@nuxt/ui'
+import type { PortalAudience } from '@nuxt-customer-portal/core/shared/types/feature'
+
+const hasAudience = (
+  audiences: PortalAudience[],
+  isAuthenticated: boolean,
+  isAdmin: boolean,
+  organizationRole: string | null,
+  organizationType: 'PROVIDER' | 'CLIENT' | null
+) =>
+  audiences.some((audience) => {
+    if (audience === 'public') {
+      return true
+    }
+    if (audience === 'authenticated') {
+      return isAuthenticated
+    }
+    if (audience === 'admin') {
+      return isAdmin
+    }
+    if (audience === 'providerAuthenticated') {
+      return organizationType === 'PROVIDER' && Boolean(organizationRole)
+    }
+    if (audience === 'providerAdmin') {
+      return organizationType === 'PROVIDER' && (organizationRole === 'owner' || organizationRole === 'admin')
+    }
+    if (audience === 'clientAuthenticated') {
+      return organizationType === 'CLIENT' && Boolean(organizationRole)
+    }
+    if (audience === 'clientAdmin') {
+      return organizationType === 'CLIENT' && (organizationRole === 'owner' || organizationRole === 'admin')
+    }
+    return organizationType === 'PROVIDER' && (organizationRole === 'owner' || organizationRole === 'admin')
+  })
+
+export const useNavigationLinks = (sidebarOpen: Ref<boolean>) => {
+  const { t } = useI18n()
+  const route = useRoute()
+  const { navigation } = usePortalFeatures()
+  const { isAuthenticated, isSystemAdmin, activeOrganizationRole, activeOrganizationType } = usePortalSession()
+
+  const visibleItems = computed(() =>
+    navigation.value.filter(
+      (item) =>
+        hasAudience(
+          item.audiences,
+          isAuthenticated.value,
+          isSystemAdmin.value,
+          activeOrganizationRole.value,
+          activeOrganizationType.value
+        ) &&
+        (route.path === '/' || !item.audiences.every((audience) => audience === 'public'))
+    )
+  )
+
+  const links = computed<NavigationMenuItem[][]>(() => [
+    visibleItems.value.map((item) => ({
+      id: item.id,
+      label: t(item.labelKey),
+      icon: item.icon,
+      to: item.to,
+      badge: item.badge,
+      onSelect: () => {
+        sidebarOpen.value = false
+      }
+    }))
+  ])
+
+  const searchGroups = computed<CommandPaletteGroup<CommandPaletteItem>[]>(() => [
+    {
+      id: 'navigation',
+      label: t('menu.search'),
+      items: visibleItems.value.map((item) => ({
+        id: item.id,
+        label: t(item.labelKey),
+        icon: item.icon,
+        to: item.to
+      }))
+    }
+  ])
+
+  return { links, searchGroups }
+}

package/app/layouts/auth.vue

@@ -0,0 +1,32 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<script setup lang="ts">
+const route = useRoute()
+const { t } = useI18n()
+const bootstrap = useState<{ adminExists?: boolean; completed?: boolean } | null>('portal-bootstrap-state', () => null)
+</script>
+
+<template>
+  <div class="auth-shell h-screen flex items-center justify-center px-4">
+    <UButton
+      icon="i-lucide-chevron-left"
+      to="/"
+      size="xl"
+      color="neutral"
+      variant="subtle"
+      class="auth-back-button absolute left-8 top-8 rounded-full z-10"
+    />
+
+    <UPageCard variant="subtle" class="max-w-sm w-full">
+      <UAlert
+        v-if="route.path === '/signup' && bootstrap && !bootstrap.adminExists"
+        class="mb-5"
+        color="info"
+        variant="subtle"
+        icon="i-lucide-shield-check"
+        :title="t('saasSettings.bootstrap.title')"
+        :description="t('saasSettings.bootstrap.description')"
+      />
+      <slot />
+    </UPageCard>
+  </div>
+</template>

package/app/layouts/centerform.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="auth-shell h-screen flex items-center justify-center px-4">
+    <slot />
+  </div>
+</template>

package/app/layouts/default.vue

@@ -0,0 +1,91 @@
+<!-- Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 -->
+<script setup lang="ts">
+const route = useRoute()
+const toast = useToast()
+const open = ref(false)
+const showFooter = computed(() => route.meta?.public === true)
+
+const { activeModule, activeModuleMenuItems } = useModuleNavigation(open)
+const { currentSession } = storeToRefs(useUserStore())
+const isImpersonating = computed(() => Boolean(currentSession.value?.impersonatedBy))
+
+onMounted(async () => {
+  const cookie = useCookie('cookie-consent')
+  if (cookie.value === 'accepted') {
+    return
+  }
+
+  toast.add({
+    title: 'We use first-party cookies to enhance your experience on our website.',
+    duration: 0,
+    close: false,
+    actions: [
+      {
+        label: 'Accept',
+        color: 'neutral',
+        variant: 'outline',
+        onClick: () => {
+          cookie.value = 'accepted'
+        }
+      },
+      {
+        label: 'Opt out',
+        color: 'neutral',
+        variant: 'ghost'
+      }
+    ]
+  })
+})
+</script>
+
+<template>
+  <div class="dashboard-layout relative min-h-screen">
+    <!-- AppHeader - fixed at top -->
+    <div class="fixed top-0 left-0 right-0 z-50">
+      <div class="mx-auto w-full max-w-[1600px] px-4">
+        <AppHeader />
+      </div>
+    </div>
+
+    <UDashboardGroup unit="rem" class="px-4 mx-auto max-w-[1600px]! w-full!">
+      <UDashboardSidebar
+        id="default"
+        v-model:open="open"
+        collapsible
+        resizable
+        :default-size="18"
+        :min-size="18"
+        :max-size="24"
+        class="min-w-72 bg-elevated/25 lg:pb-12 data-[collapsed=true]:min-w-0"
+        :ui="{ footer: 'lg:border-t lg:border-default' }"
+      >
+        <template #header>
+          <div v-if="activeModule" class="flex min-w-0 items-center gap-2 px-2 text-sm font-semibold">
+            <UIcon v-if="activeModule.icon" :name="activeModule.icon" class="size-4 shrink-0 text-primary" />
+            <span class="truncate">{{ activeModule.label }}</span>
+          </div>
+        </template>
+        <template #default="{ collapsed }">
+          <UDashboardSearchButton :collapsed="collapsed" class="mt-2 bg-transparent ring-default" />
+          <div v-if="!collapsed && activeModule" class="px-2.5 pt-3 pb-1 text-xs font-semibold uppercase text-muted">
+            {{ activeModule.label }}
+          </div>
+          <UNavigationMenu
+            :collapsed="collapsed"
+            :items="activeModuleMenuItems"
+            orientation="vertical"
+            tooltip
+            popover
+          />
+        </template>
+      </UDashboardSidebar>
+
+      <NotificationsSlideover />
+      <UMain class="flex-1 min-w-0" :class="isImpersonating ? 'pt-32 lg:pt-28' : 'pt-20 lg:pt-16'">
+        <slot />
+      </UMain>
+    </UDashboardGroup>
+
+    <AppFooter v-if="showFooter" />
+  </div>
+</template>

package/app/layouts/portal.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const route = useRoute()
+const showFooter = computed(() => route.meta?.public === true)
+</script>
+
+<template>
+  <div class="portal-layout min-h-screen">
+    <div class="mx-auto w-full max-w-[1600px] px-4">
+      <AppHeader />
+    </div>
+
+    <UMain class="main-content mx-auto w-full max-w-[1600px] px-4">
+      <slot />
+    </UMain>
+
+    <div v-if="showFooter" class="mx-auto w-full max-w-[1600px] px-4">
+      <div class="px-[clamp(1rem,4vw,4rem)]">
+        <AppFooter />
+      </div>
+    </div>
+  </div>
+</template>

package/app/pages/dashboard.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const { t } = useI18n()
+const { dashboardWidgets } = usePortalFeatures()
+const { currentUser } = usePortalSession()
+
+const areas = ['attention', 'main', 'aside'] as const
+const orderedDashboardWidgets = computed(() =>
+  [...dashboardWidgets.value].sort(
+    (left, right) =>
+      left.order - right.order ||
+      areas.indexOf(left.area) - areas.indexOf(right.area) ||
+      left.id.localeCompare(right.id)
+  )
+)
+const sizeClass = (size: 'full' | 'half' | 'third') =>
+  ({
+    full: 'lg:col-span-12',
+    half: 'lg:col-span-6',
+    third: 'lg:col-span-4'
+  })[size]
+
+useSeoMeta({ title: () => t('dashboard.seo.title'), description: () => t('dashboard.seo.description') })
+</script>
+
+<template>
+  <UDashboardPanel
+    id="dashboard"
+    class="min-h-0 overflow-hidden"
+    style="height: calc(100dvh - var(--ui-header-height))"
+    :ui="{ body: 'flex flex-col flex-1 min-h-0 overflow-y-auto p-4 sm:p-6' }"
+  >
+    <template #header>
+      <UDashboardNavbar :toggle="false">
+        <template #leading>
+          <UIcon name="i-lucide-layout-dashboard" class="size-6 shrink-0" />
+          <span class="text-lg font-semibold">{{ t('dashboard.title') }}</span>
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <div class="mx-auto w-full max-w-[1440px] space-y-6">
+        <header>
+          <h1 class="text-2xl font-semibold tracking-tight">
+            {{ t('dashboard.greeting', { name: currentUser?.name ?? '' }) }}
+          </h1>
+          <p class="mt-1 text-sm text-muted">{{ t('dashboard.introduction') }}</p>
+        </header>
+
+        <section v-if="orderedDashboardWidgets.length" :aria-label="t('dashboard.title')">
+          <div class="grid grid-cols-1 gap-4 lg:grid-cols-12">
+            <div v-for="widget in orderedDashboardWidgets" :key="widget.id" :class="sizeClass(widget.size)">
+              <DashboardContribution :component="widget.component" />
+            </div>
+          </div>
+        </section>
+
+        <UCard v-if="!dashboardWidgets.length">
+          <div class="py-8 text-center">
+            <UIcon name="i-lucide-circle-check-big" class="mx-auto size-8 text-success" />
+            <p class="mt-3 font-medium">{{ t('dashboard.empty.title') }}</p>
+            <p class="mt-1 text-sm text-muted">{{ t('dashboard.empty.description') }}</p>
+          </div>
+        </UCard>
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>

package/nuxt.config.ts

@@ -0,0 +1,5 @@
+export default defineNuxtConfig({
+  $meta: { name: 'nuxt-customer-portal-ui' },
+  compatibilityDate: '2025-10-24',
+  modules: ['@nuxt/ui', '@nuxtjs/i18n', '@pinia/nuxt']
+})

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@nuxt-customer-portal/ui",
+  "version": "0.3.0",
+  "license": "MIT",
+  "homepage": "https://nuxt-customer-portal.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ludulicious/nuxt-customer-portal.git"
+  },
+  "type": "module",
+  "main": "./nuxt.config.ts",
+  "files": [
+    "LICENSE",
+    "CHANGELOG.md",
+    "app",
+    "nuxt.config.ts",
+    "portal.manifest.mjs",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./nuxt.config.ts",
+    "./portal-manifest": "./portal.manifest.mjs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@nuxt/ui": "^4.10.0",
+    "@nuxtjs/i18n": "^10.6.0",
+    "@pinia/nuxt": "^1.0.1",
+    "pinia": "^4.0.2",
+    "@nuxt-customer-portal/core": "^0.3.0"
+  },
+  "peerDependencies": {
+    "nuxt": "^4.5.1",
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "nuxt": "^4.5.1",
+    "vue": "^3.5.0"
+  }
+}

package/portal.manifest.mjs

@@ -0,0 +1,6 @@
+export default {
+  id: 'ui',
+  version: '0.3.0',
+  source: '@nuxt-customer-portal/ui',
+  dependsOn: ['core']
+}