@ngbplatform/ui 1.3.0

package/src/ngb/router/routeAliases.ts

@@ -0,0 +1,66 @@
+import type { RouteLocationNormalizedLoaded, RouteLocationRaw, RouteRecordRaw } from 'vue-router'
+import { buildGeneralJournalEntriesListPath, buildGeneralJournalEntriesPath } from '../accounting/navigation'
+import { buildReportPageUrl } from '../reporting/navigation'
+
+type AliasRouteLike = Pick<RouteLocationNormalizedLoaded, 'params' | 'query' | 'hash'>
+
+function preserveAliasContext(to: AliasRouteLike, path: string): RouteLocationRaw {
+  return {
+    path,
+    query: to.query,
+    hash: to.hash,
+  }
+}
+
+export const ngbRouteAliasRedirectRoutes: RouteRecordRaw[] = [
+  {
+    path: '/documents/general_journal_entry',
+    redirect: to => preserveAliasContext(to, buildGeneralJournalEntriesListPath()),
+  },
+  {
+    path: '/documents/general_journal_entry/new',
+    redirect: to => preserveAliasContext(to, buildGeneralJournalEntriesPath()),
+  },
+  {
+    path: '/documents/general_journal_entry/:id',
+    redirect: to => preserveAliasContext(to, buildGeneralJournalEntriesPath(String(to.params.id ?? ''))),
+  },
+  {
+    path: '/documents/accounting.general_journal_entry',
+    redirect: to => preserveAliasContext(to, buildGeneralJournalEntriesListPath()),
+  },
+  {
+    path: '/documents/accounting.general_journal_entry/new',
+    redirect: to => preserveAliasContext(to, buildGeneralJournalEntriesPath()),
+  },
+  {
+    path: '/documents/accounting.general_journal_entry/:id',
+    redirect: to => preserveAliasContext(to, buildGeneralJournalEntriesPath(String(to.params.id ?? ''))),
+  },
+  {
+    path: '/admin/accounting/posting-log',
+    redirect: to => preserveAliasContext(to, buildReportPageUrl('accounting.posting_log')),
+  },
+  {
+    path: '/admin/accounting/consistency',
+    redirect: to => preserveAliasContext(to, buildReportPageUrl('accounting.consistency')),
+  },
+]
+
+export function normalizeNgbRouteAliasPath(path: string | null | undefined): string {
+  const value = String(path ?? '').trim()
+  if (!value) return ''
+
+  if (value.startsWith('/documents/accounting.general_journal_entry')) {
+    return value.replace('/documents/accounting.general_journal_entry', '/accounting/general-journal-entries')
+  }
+
+  if (value.startsWith('/documents/general_journal_entry')) {
+    return value.replace('/documents/general_journal_entry', '/accounting/general-journal-entries')
+  }
+
+  if (value === '/admin/accounting/posting-log') return buildReportPageUrl('accounting.posting_log')
+  if (value === '/admin/accounting/consistency') return buildReportPageUrl('accounting.consistency')
+
+  return value
+}

package/src/ngb/router/routeParams.ts

@@ -0,0 +1,15 @@
+export function normalizeRouteParam(value: unknown): string | null {
+  const raw = Array.isArray(value) ? value[0] : value
+  const normalized = String(raw ?? '').trim()
+  return normalized || null
+}
+
+export function normalizeRequiredRouteParam(value: unknown): string {
+  return normalizeRouteParam(value) ?? ''
+}
+
+export function normalizeEntityEditorIdRouteParam(value: unknown): string | undefined {
+  const normalized = normalizeRouteParam(value)
+  if (!normalized) return undefined
+  return normalized.toLowerCase() === 'new' ? undefined : normalized
+}

package/src/ngb/router/shareLink.ts

@@ -0,0 +1,39 @@
+import type { RouteLocationRaw, Router } from 'vue-router'
+import type { ToastApi } from '../primitives/toast'
+import { toErrorMessage } from '../utils/errorMessage'
+
+type ToastsLike = Pick<ToastApi, 'push'>
+
+export function buildAbsoluteAppUrl(router: Router, to: RouteLocationRaw): string {
+  const href = router.resolve(to).href
+  if (typeof window !== 'undefined' && window.location?.origin) {
+    return new URL(href, window.location.origin).toString()
+  }
+  return href
+}
+
+export async function copyAppLink(
+  router: Router,
+  toasts: ToastsLike,
+  to: RouteLocationRaw,
+  opts?: { title?: string; message?: string },
+): Promise<boolean> {
+  try {
+    const url = buildAbsoluteAppUrl(router, to)
+    if (!navigator?.clipboard?.writeText) throw new Error('Clipboard is not available.')
+    await navigator.clipboard.writeText(url)
+    toasts.push({
+      title: opts?.title ?? 'Link copied',
+      message: opts?.message ?? 'Shareable link copied to clipboard.',
+      tone: 'neutral',
+    })
+    return true
+  } catch (cause) {
+    toasts.push({
+      title: 'Could not copy link',
+      message: toErrorMessage(cause, 'Clipboard is not available.'),
+      tone: 'danger',
+    })
+    return false
+  }
+}

package/src/ngb/security/NgbAccessAuditPanel.vue

@@ -0,0 +1,32 @@
+<template>
+  <section class="rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card p-4 shadow-card">
+    <h2 class="text-sm font-semibold text-ngb-text">Security audit</h2>
+    <div class="mt-3 space-y-2">
+      <div
+        v-for="event in events"
+        :key="event.id"
+        class="grid grid-cols-[minmax(0,1fr),auto] gap-3 border-t border-ngb-border pt-2 first:border-t-0 first:pt-0"
+      >
+        <div class="min-w-0">
+          <div class="truncate text-sm text-ngb-text">{{ event.title }}</div>
+          <div v-if="event.actor" class="mt-0.5 truncate text-xs text-ngb-muted">{{ event.actor }}</div>
+        </div>
+        <time class="text-xs text-ngb-muted">{{ event.occurredAt }}</time>
+      </div>
+      <div v-if="events.length === 0" class="text-sm text-ngb-muted">No security audit events in this view.</div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  events?: Array<{
+    id: string
+    title: string
+    actor?: string | null
+    occurredAt: string
+  }>
+}>(), {
+  events: () => [],
+})
+</script>

package/src/ngb/security/NgbAccessDeniedState.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="flex h-full min-h-[320px] items-center justify-center p-6">
+    <div class="w-full max-w-[520px] rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card p-6 text-center shadow-card">
+      <div class="mx-auto flex h-11 w-11 items-center justify-center rounded-full border border-ngb-border bg-ngb-bg text-ngb-muted">
+        <NgbIcon name="shield" :size="22" />
+      </div>
+      <h1 class="mt-4 text-lg font-semibold text-ngb-text">{{ title }}</h1>
+      <p class="mt-2 text-sm leading-6 text-ngb-muted">{{ message }}</p>
+      <div v-if="$slots.actions" class="mt-5 flex justify-center gap-2">
+        <slot name="actions" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import NgbIcon from '../primitives/NgbIcon.vue'
+
+withDefaults(defineProps<{
+  title?: string
+  message?: string
+}>(), {
+  title: 'Access denied',
+  message: 'Your current access profile does not allow this operation.',
+})
+</script>
+

package/src/ngb/security/NgbEffectiveAccessPanel.vue

@@ -0,0 +1,60 @@
+<template>
+  <section class="flex min-w-0 flex-col rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card shadow-card" data-testid="effective-access-panel">
+    <div class="flex items-center justify-between gap-3 border-b border-ngb-border px-4 py-3">
+      <div class="min-w-0">
+        <h2 class="truncate text-sm font-semibold text-ngb-text">Effective access</h2>
+        <div class="mt-0.5 text-xs text-ngb-muted">Version {{ access?.accessVersion ?? '-' }}</div>
+      </div>
+      <NgbButton v-if="showRefresh" size="sm" variant="ghost" :disabled="loading" @click="$emit('refresh')">
+        <NgbIcon name="refresh" :size="15" />
+        Refresh
+      </NgbButton>
+    </div>
+
+    <div v-if="loading" class="p-4 text-sm text-ngb-muted">Loading...</div>
+    <div v-else-if="error" class="p-4 text-sm text-ngb-danger">{{ error }}</div>
+    <div v-else-if="!access || access.groups.length === 0" class="p-4 text-sm text-ngb-muted">No effective permissions.</div>
+    <div v-else class="min-h-0 flex-1 overflow-auto">
+      <section v-for="group in access.groups" :key="group.group" class="border-b border-ngb-border last:border-b-0">
+        <div class="bg-[var(--ngb-grid-header)] px-4 py-2 text-xs font-semibold uppercase tracking-wide text-ngb-muted">
+          {{ group.group }}
+        </div>
+        <div class="divide-y divide-ngb-border">
+          <div
+            v-for="resource in group.resources"
+            :key="`${resource.resourceKind}:${resource.resourceCode}`"
+            class="grid grid-cols-[minmax(0,1fr),minmax(160px,auto)] gap-3 px-4 py-3"
+          >
+            <div class="min-w-0">
+              <div class="truncate text-sm font-medium text-ngb-text">{{ resource.displayName }}</div>
+              <div class="mt-0.5 truncate font-mono text-[11px] text-ngb-muted">{{ resource.resourceKind }}.{{ resource.resourceCode }}</div>
+            </div>
+            <div class="flex flex-wrap justify-end gap-1.5">
+              <NgbBadge v-for="action in resource.actions" :key="action" tone="neutral">{{ action }}</NgbBadge>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import NgbBadge from '../primitives/NgbBadge.vue'
+import NgbButton from '../primitives/NgbButton.vue'
+import NgbIcon from '../primitives/NgbIcon.vue'
+import type { EffectiveAccessDto } from './types'
+
+withDefaults(defineProps<{
+  access: EffectiveAccessDto | null
+  loading?: boolean
+  error?: string | null
+  showRefresh?: boolean
+}>(), {
+  showRefresh: true,
+})
+
+defineEmits<{
+  (e: 'refresh'): void
+}>()
+</script>

package/src/ngb/security/NgbPermissionMatrix.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="min-w-0 space-y-4" data-testid="permission-matrix">
+    <div class="flex flex-wrap items-center justify-between gap-3">
+      <NgbInput
+        v-model="query"
+        class="max-w-[360px]"
+        placeholder="Filter permissions"
+        :disabled="disabled"
+      />
+      <div class="text-xs text-ngb-muted tabular-nums">{{ selectedCount }} / {{ definitions.length }}</div>
+    </div>
+
+    <div v-if="groups.length === 0" class="rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card p-6 text-sm text-ngb-muted">
+      No permissions match the current filter.
+    </div>
+
+    <section
+      v-for="group in groups"
+      :key="group.group"
+      class="rounded-[var(--ngb-radius)] border border-ngb-border bg-ngb-card shadow-card"
+    >
+      <div class="flex flex-wrap items-center justify-between gap-3 border-b border-ngb-border px-4 py-3">
+        <div class="min-w-0">
+          <h2 class="truncate text-sm font-semibold text-ngb-text">{{ group.group }}</h2>
+          <div class="mt-0.5 text-xs text-ngb-muted tabular-nums">{{ selectedInGroup(group.permissions) }} / {{ group.permissions.length }}</div>
+        </div>
+        <NgbButton
+          size="sm"
+          variant="ghost"
+          :disabled="disabled"
+          @click="toggleGroup(group.permissions)"
+        >
+          <NgbIcon :name="isGroupFullySelected(group.permissions) ? 'minus' : 'check'" :size="15" />
+          {{ isGroupFullySelected(group.permissions) ? 'Clear' : 'Select' }}
+        </NgbButton>
+      </div>
+
+      <div class="divide-y divide-ngb-border">
+        <label
+          v-for="permission in group.permissions"
+          :key="permissionKey(permission)"
+          class="grid cursor-pointer grid-cols-[1.25rem,minmax(0,1fr),auto] items-start gap-3 px-4 py-3 hover:bg-[var(--ngb-row-hover)]"
+          :class="disabled ? 'cursor-not-allowed opacity-70' : ''"
+        >
+          <input
+            type="checkbox"
+            class="mt-1 h-4 w-4 rounded-none border-ngb-border"
+            :checked="selectedKeys.has(permissionKey(permission))"
+            :disabled="disabled"
+            @change="setPermission(permission, ($event.target as HTMLInputElement).checked)"
+          />
+          <span class="min-w-0">
+            <span class="block text-sm font-medium text-ngb-text">{{ permission.displayName }}</span>
+            <span v-if="permission.description" class="mt-0.5 block text-xs leading-5 text-ngb-muted">{{ permission.description }}</span>
+            <span class="mt-1 block truncate font-mono text-[11px] text-ngb-muted">{{ permissionKey(permission) }}</span>
+          </span>
+          <span class="mt-0.5 rounded-[var(--ngb-radius)] border border-ngb-border px-2 py-0.5 text-[11px] text-ngb-muted">
+            {{ permission.actionCode }}
+          </span>
+        </label>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import NgbButton from '../primitives/NgbButton.vue'
+import NgbIcon from '../primitives/NgbIcon.vue'
+import NgbInput from '../primitives/NgbInput.vue'
+import { buildPermissionKey, groupPermissionDefinitions } from './permissions'
+import type { PermissionAssignmentDto, PermissionDefinitionDto } from './types'
+
+const props = withDefaults(defineProps<{
+  modelValue: PermissionAssignmentDto[]
+  definitions: PermissionDefinitionDto[]
+  disabled?: boolean
+}>(), {
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: PermissionAssignmentDto[]): void
+}>()
+
+const query = ref('')
+
+const selectedKeys = computed(() => new Set((props.modelValue ?? []).map((entry) => buildPermissionKey(entry))))
+const selectedCount = computed(() => selectedKeys.value.size)
+
+const filteredDefinitions = computed(() => {
+  const text = query.value.trim().toLowerCase()
+  const definitions = props.definitions ?? []
+  if (!text) return definitions
+
+  return definitions.filter((permission) => [
+    permission.displayName,
+    permission.description ?? '',
+    permission.group,
+    permission.resourceKind,
+    permission.resourceCode,
+    permission.actionCode,
+    buildPermissionKey(permission),
+  ].join(' ').toLowerCase().includes(text))
+})
+
+const groups = computed(() => groupPermissionDefinitions(filteredDefinitions.value))
+
+function permissionKey(permission: PermissionAssignmentDto): string {
+  return buildPermissionKey(permission)
+}
+
+function normalizeAssignments(keys: Set<string>): PermissionAssignmentDto[] {
+  const byKey = new Map(props.definitions.map((definition) => [permissionKey(definition), definition]))
+  return Array.from(keys)
+    .sort()
+    .map((key) => byKey.get(key))
+    .filter((entry): entry is PermissionDefinitionDto => !!entry)
+    .map((entry) => ({
+      resourceKind: entry.resourceKind,
+      resourceCode: entry.resourceCode,
+      actionCode: entry.actionCode,
+    }))
+}
+
+function setPermission(permission: PermissionAssignmentDto, checked: boolean): void {
+  if (props.disabled) return
+
+  const keys = new Set(selectedKeys.value)
+  const key = permissionKey(permission)
+  if (checked) keys.add(key)
+  else keys.delete(key)
+
+  emit('update:modelValue', normalizeAssignments(keys))
+}
+
+function isGroupFullySelected(permissions: PermissionDefinitionDto[]): boolean {
+  return permissions.length > 0 && permissions.every((permission) => selectedKeys.value.has(permissionKey(permission)))
+}
+
+function selectedInGroup(permissions: PermissionDefinitionDto[]): number {
+  return permissions.filter((permission) => selectedKeys.value.has(permissionKey(permission))).length
+}
+
+function toggleGroup(permissions: PermissionDefinitionDto[]): void {
+  if (props.disabled) return
+
+  const keys = new Set(selectedKeys.value)
+  const selected = isGroupFullySelected(permissions)
+
+  for (const permission of permissions) {
+    const key = permissionKey(permission)
+    if (selected) keys.delete(key)
+    else keys.add(key)
+  }
+
+  emit('update:modelValue', normalizeAssignments(keys))
+}
+</script>
+