@antelopejs/dms 0.0.1

package/frontend-vue/layers/dms-ui/app/components/period/PeriodSelector.vue

@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import {
+  type CalendarDate,
+  fromDate,
+  getLocalTimeZone,
+  toCalendarDate,
+} from "@internationalized/date";
+import type { DateRange } from "reka-ui";
+import { registerPeriodScope } from "#dms-core/app/composables/period/usePeriodScope";
+import { usePeriod } from "#dms-core/app/composables/period/usePeriod";
+import {
+  END_OF_DAY_HOURS,
+  END_OF_DAY_MINUTES,
+  END_OF_DAY_MS,
+  END_OF_DAY_SECONDS,
+} from "#dms-core/app/composables/period/types";
+import type {
+  PeriodComparison,
+  PeriodPreset,
+  PeriodRange,
+} from "#dms-core/app/composables/period/types";
+import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+
+interface Props extends DefaultComponentProps {
+  id: string;
+  defaultPreset?: PeriodPreset;
+  defaultComparison?: PeriodComparison;
+  presets?: PeriodPreset[];
+  comparisons?: PeriodComparison[];
+  presetLabels?: Partial<Record<PeriodPreset, string>>;
+  comparisonLabels?: Partial<Record<PeriodComparison, string>>;
+  align?: "left" | "center" | "right";
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  showRangeLabel?: boolean;
+  variant?: "default" | "segmented";
+}
+
+const PRESET_ICON = "i-lucide-calendar-days";
+const COMPARISON_ICON = "i-lucide-git-compare";
+const CUSTOM_ICON = "i-lucide-calendar";
+const CHEVRON_ICON = "i-lucide-chevron-down";
+const RANGE_SEPARATOR = "·";
+const DATE_RANGE_DASH = "–";
+const CUSTOM_PRESET: PeriodPreset = "custom";
+const SEGMENTED_VARIANT: NonNullable<Props["variant"]> = "segmented";
+
+const props = withDefaults(defineProps<Props>(), {
+  align: "right",
+  size: "sm",
+  showRangeLabel: true,
+  variant: "default",
+});
+
+const ALIGN_CLASSES: Record<NonNullable<Props["align"]>, string> = {
+  left: "justify-start",
+  center: "justify-center",
+  right: "justify-end",
+};
+
+useComponentEvent(props.componentId);
+useWatch(props.watchActions || [], props.componentId);
+
+const { t, locale } = useI18n();
+
+const period = usePeriod({
+  defaultPreset: props.defaultPreset,
+  defaultComparison: props.defaultComparison,
+  presets: props.presets,
+  comparisons: props.comparisons,
+});
+
+const cleanup = registerPeriodScope(props.id, period.state);
+onBeforeUnmount(cleanup);
+
+const alignClass = computed(() => ALIGN_CLASSES[props.align]);
+
+function presetLabel(preset: PeriodPreset): string {
+  return (
+    props.presetLabels?.[preset] ?? t(`dms.period.presets.${preset}`, preset)
+  );
+}
+
+function comparisonLabel(comparison: PeriodComparison): string {
+  return (
+    props.comparisonLabels?.[comparison] ??
+    t(`dms.period.comparisons.${comparison}`, comparison)
+  );
+}
+
+const visiblePresets = computed(() =>
+  period.presets.value.filter((preset) => preset !== CUSTOM_PRESET),
+);
+
+const isCustomEnabled = computed(() =>
+  period.presets.value.includes(CUSTOM_PRESET),
+);
+
+interface LabelledPreset {
+  preset: PeriodPreset;
+  label: string;
+}
+
+const labelledPresets = computed<LabelledPreset[]>(() =>
+  visiblePresets.value.map((preset) => ({
+    preset,
+    label: presetLabel(preset),
+  })),
+);
+
+const presetItems = computed(() => [
+  labelledPresets.value.map(({ preset, label }) => ({
+    label,
+    onSelect: () => period.setPreset(preset),
+  })),
+]);
+
+const isSegmented = computed(() => props.variant === SEGMENTED_VARIANT);
+
+const isCustomPopoverOpen = ref(false);
+
+const segmentedItems = computed(() => {
+  const items = labelledPresets.value.map(({ preset, label }) => ({
+    label,
+    value: preset,
+  }));
+  if (isCustomEnabled.value) {
+    items.push({ label: presetLabel(CUSTOM_PRESET), value: CUSTOM_PRESET });
+  }
+  return items;
+});
+
+const segmentedPreset = computed<string | number | undefined>({
+  get: () => period.preset.value,
+  set: (value) => {
+    const preset = period.presets.value.find((entry) => entry === value);
+    if (!preset) return;
+    period.setPreset(preset);
+    if (preset === CUSTOM_PRESET) isCustomPopoverOpen.value = true;
+  },
+});
+
+const comparisonItems = computed(() => [
+  period.comparisons.value.map((comparison) => ({
+    label: comparisonLabel(comparison),
+    onSelect: () => period.setComparison(comparison),
+  })),
+]);
+
+const presetButtonLabel = computed(() => presetLabel(period.preset.value));
+const comparisonButtonLabel = computed(() =>
+  comparisonLabel(period.comparison.value),
+);
+
+const canCompare = computed(() =>
+  period.comparisons.value.some((comparison) => comparison !== "none"),
+);
+
+function dateToCalendar(date: Date): CalendarDate {
+  return toCalendarDate(fromDate(date, getLocalTimeZone()));
+}
+
+function calendarToDate(calendar: CalendarDate, asEndOfDay: boolean): Date {
+  const native = new Date(calendar.year, calendar.month - 1, calendar.day);
+  if (asEndOfDay) {
+    native.setHours(
+      END_OF_DAY_HOURS,
+      END_OF_DAY_MINUTES,
+      END_OF_DAY_SECONDS,
+      END_OF_DAY_MS,
+    );
+  }
+  return native;
+}
+
+const customCalendarValue = ref<DateRange | null>(null);
+
+watch(
+  () => period.state.value.range,
+  (range) => {
+    if (period.preset.value === CUSTOM_PRESET) {
+      customCalendarValue.value = {
+        start: dateToCalendar(range.from),
+        end: dateToCalendar(range.to),
+      };
+    }
+  },
+  { immediate: true },
+);
+
+function applyCustomRange(value: unknown) {
+  if (!value || typeof value !== "object") return;
+  const rangeValue = value as { start?: CalendarDate; end?: CalendarDate };
+  if (!rangeValue.start || !rangeValue.end) return;
+  const range: PeriodRange = {
+    from: calendarToDate(rangeValue.start, false),
+    to: calendarToDate(rangeValue.end, true),
+  };
+  period.setCustomRange(range);
+}
+
+function formatShortRange(range: PeriodRange): string {
+  const formatter = new Intl.DateTimeFormat(locale.value, {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+  });
+  return `${formatter.format(range.from)} ${DATE_RANGE_DASH} ${formatter.format(range.to)}`;
+}
+
+const customLabel = computed(() => formatShortRange(period.state.value.range));
+
+const isCustomActive = computed(() => period.preset.value === CUSTOM_PRESET);
+
+interface ButtonAppearance {
+  variant: "subtle" | "ghost";
+  color: "primary" | "neutral";
+}
+
+const ACTIVE_CUSTOM_APPEARANCE: ButtonAppearance = {
+  variant: "subtle",
+  color: "primary",
+};
+const IDLE_CUSTOM_APPEARANCE: ButtonAppearance = {
+  variant: "ghost",
+  color: "neutral",
+};
+
+const customButtonAppearance = computed<ButtonAppearance>(() =>
+  isCustomActive.value ? ACTIVE_CUSTOM_APPEARANCE : IDLE_CUSTOM_APPEARANCE,
+);
+
+const rangeDisplay = computed(() => {
+  const main = formatShortRange(period.state.value.range);
+  const compare = period.state.value.compareRange;
+  if (!compare) return main;
+  return `${main} ${RANGE_SEPARATOR} vs ${formatShortRange(compare)}`;
+});
+</script>
+
+<template>
+  <div
+    class="dms-period-selector flex flex-wrap items-center gap-2"
+    :class="alignClass"
+    role="group"
+    :aria-label="$t('dms.period.aria_label', 'Period selector')"
+  >
+    <DmsSegmented
+      v-if="isSegmented"
+      v-model="segmentedPreset"
+      :items="segmentedItems"
+      :size="size"
+      :aria-label="$t('dms.period.preset_aria', 'Preset')"
+    />
+
+    <UDropdownMenu v-else :items="presetItems" :content="{ align: 'end' }">
+      <UButton
+        variant="outline"
+        color="neutral"
+        :size="size"
+        :icon="PRESET_ICON"
+        :trailing-icon="CHEVRON_ICON"
+        :aria-label="$t('dms.period.preset_aria', 'Preset')"
+      >
+        {{ presetButtonLabel }}
+      </UButton>
+    </UDropdownMenu>
+
+    <UDropdownMenu
+      v-if="canCompare"
+      :items="comparisonItems"
+      :content="{ align: 'end' }"
+    >
+      <UButton
+        variant="ghost"
+        color="neutral"
+        :size="size"
+        :icon="COMPARISON_ICON"
+        :trailing-icon="CHEVRON_ICON"
+        :aria-label="$t('dms.period.comparison_aria', 'Comparison')"
+      >
+        {{ comparisonButtonLabel }}
+      </UButton>
+    </UDropdownMenu>
+
+    <UPopover v-if="isCustomEnabled" v-model:open="isCustomPopoverOpen">
+      <UButton
+        v-bind="customButtonAppearance"
+        :size="size"
+        :icon="CUSTOM_ICON"
+        :aria-label="$t('dms.period.custom_range_aria', 'Custom range')"
+      >
+        <span v-if="isCustomActive">{{ customLabel }}</span>
+      </UButton>
+      <template #content>
+        <UCalendar
+          v-model="customCalendarValue as DateRange | null"
+          range
+          @update:model-value="applyCustomRange"
+        />
+      </template>
+    </UPopover>
+
+    <span v-if="showRangeLabel" class="text-dimmed hidden text-xs sm:inline">
+      {{ rangeDisplay }}
+    </span>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/components/segmented/Segmented.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+// Segmented toggle (design .segmented): a recessed track holding pill
+// segments, the active one raised onto the card surface with a soft shadow.
+// Single-select, v-model'd. Implements the radiogroup keyboard pattern
+// (roving tabindex + arrow/Home/End) for WCAG-correct a11y.
+interface SegItem {
+  label: string;
+  value: string | number;
+  icon?: string;
+}
+
+type SegmentedSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+interface Props {
+  items: SegItem[];
+  ariaLabel?: string;
+  size?: SegmentedSize;
+}
+
+const SIZE_CLASSES: Record<SegmentedSize, string> = {
+  xs: "h-[26px] px-2.5 text-[11.5px]",
+  sm: "h-[30px] px-3.5 text-[12.5px]",
+  md: "h-[34px] px-4 text-[13.5px]",
+  lg: "h-[38px] px-5 text-sm",
+  xl: "h-[44px] px-6 text-[15px]",
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "sm",
+});
+
+const model = defineModel<string | number>();
+
+const itemRefs = ref<HTMLButtonElement[]>([]);
+
+// Roving tabindex anchor: the checked segment, or the first one if none.
+const focusIndex = computed(() => {
+  const i = props.items.findIndex((item) => item.value === model.value);
+  return i === -1 ? 0 : i;
+});
+
+function select(index: number) {
+  const item = props.items[index];
+  if (!item) return;
+  model.value = item.value;
+  itemRefs.value[index]?.focus();
+}
+
+const KEY_NAVIGATORS: Record<string, (index: number, last: number) => number> =
+  {
+    ArrowRight: (index, last) => (index === last ? 0 : index + 1),
+    ArrowDown: (index, last) => (index === last ? 0 : index + 1),
+    ArrowLeft: (index, last) => (index === 0 ? last : index - 1),
+    ArrowUp: (index, last) => (index === 0 ? last : index - 1),
+    Home: () => 0,
+    End: (_index, last) => last,
+  };
+
+function onKeydown(event: KeyboardEvent, index: number) {
+  const navigate = KEY_NAVIGATORS[event.key];
+  if (!navigate) return;
+  event.preventDefault();
+  select(navigate(index, props.items.length - 1));
+}
+</script>
+
+<template>
+  <div
+    role="radiogroup"
+    :aria-label="ariaLabel"
+    class="ring-default bg-muted dark:bg-default inline-flex gap-0.5 rounded-md p-[3px] ring ring-inset"
+  >
+    <button
+      v-for="(item, index) in items"
+      :key="item.value"
+      :ref="
+        (el) => {
+          if (el) itemRefs[index] = el as HTMLButtonElement;
+        }
+      "
+      type="button"
+      role="radio"
+      :aria-checked="model === item.value"
+      :tabindex="index === focusIndex ? 0 : -1"
+      class="inline-flex items-center gap-1.5 rounded-md font-semibold transition-colors"
+      :class="[
+        SIZE_CLASSES[size],
+        model === item.value
+          ? 'text-default bg-(--dms-surface-card) shadow-sm'
+          : 'text-muted hover:text-default',
+      ]"
+      @click="select(index)"
+      @keydown="onKeydown($event, index)"
+    >
+      <UIcon
+        v-if="item.icon"
+        :name="item.icon"
+        class="size-3.5"
+        aria-hidden="true"
+      />
+      {{ item.label }}
+    </button>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/components/status/StatusSummary.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+// DMS "health hero" (design .health-hero): a status ring + value next to a
+// divided row of key metrics. Generic over any service — API health, DB
+// connection, job runner… — and reused across module overviews. Wraps DmsCard
+// so it drops straight into a page.
+type Status = "ok" | "warn" | "down" | "info";
+
+interface Metric {
+  label: string;
+  value: string | number;
+  unit?: string;
+  sub?: string;
+  tone?: "default" | "error" | "warning" | "success";
+}
+
+const props = withDefaults(
+  defineProps<{
+    statusValue: string;
+    status?: Status;
+    statusLabel?: string;
+    icon?: string;
+    metrics?: Metric[];
+  }>(),
+  {
+    status: "ok",
+    metrics: () => [],
+  },
+);
+
+const RING: Record<Status, string> = {
+  ok: "border-success/45 bg-success/10 text-success",
+  warn: "border-warning/45 bg-warning/10 text-warning",
+  down: "border-error/45 bg-error/10 text-error",
+  info: "border-info/45 bg-info/10 text-info",
+};
+
+const VALUE_TONE: Record<Status, string> = {
+  ok: "text-highlighted",
+  warn: "text-warning",
+  down: "text-error",
+  info: "text-info",
+};
+
+const METRIC_TONE: Record<NonNullable<Metric["tone"]>, string> = {
+  default: "text-highlighted",
+  error: "text-error",
+  warning: "text-warning",
+  success: "text-success",
+};
+
+const DEFAULT_ICON: Record<Status, string> = {
+  ok: "i-lucide-circle-check",
+  warn: "i-lucide-triangle-alert",
+  down: "i-lucide-circle-x",
+  info: "i-lucide-info",
+};
+
+const resolvedIcon = computed(() => props.icon || DEFAULT_ICON[props.status]);
+</script>
+
+<template>
+  <DmsCard :padded="false" class="p-6 sm:px-7">
+    <div class="flex flex-col gap-5 sm:flex-row sm:items-center sm:gap-7">
+      <div class="flex shrink-0 items-center gap-4">
+        <div
+          :class="RING[status]"
+          class="grid size-16 shrink-0 place-items-center rounded-full border-2"
+        >
+          <UIcon :name="resolvedIcon" class="size-[30px]" aria-hidden="true" />
+        </div>
+        <div>
+          <p
+            v-if="statusLabel"
+            class="text-dimmed font-mono text-[10.5px] tracking-[0.14em] uppercase"
+          >
+            {{ statusLabel }}
+          </p>
+          <p
+            :class="VALUE_TONE[status]"
+            class="mt-1 text-[28px] leading-none font-semibold tracking-tight"
+          >
+            {{ statusValue }}
+          </p>
+        </div>
+      </div>
+
+      <div
+        v-if="metrics.length"
+        class="border-default hidden self-stretch border-l sm:block"
+      />
+
+      <div
+        v-if="metrics.length"
+        class="grid flex-1 grid-cols-2 gap-x-6 gap-y-4 sm:grid-cols-4"
+      >
+        <div v-for="m in metrics" :key="m.label" class="min-w-0">
+          <p
+            class="text-dimmed font-mono text-[10px] tracking-[0.12em] uppercase"
+          >
+            {{ m.label }}
+          </p>
+          <p
+            :class="METRIC_TONE[m.tone || 'default']"
+            class="mt-1.5 text-xl font-semibold tabular-nums"
+          >
+            {{ m.value }}
+            <span v-if="m.unit" class="text-dimmed ml-0.5 text-xs font-medium">
+              {{ m.unit }}
+            </span>
+          </p>
+          <p v-if="m.sub" class="text-dimmed mt-1 text-[11px]">{{ m.sub }}</p>
+        </div>
+      </div>
+    </div>
+  </DmsCard>
+</template>

package/frontend-vue/layers/dms-ui/app/components/tab/Tab.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { TabProps } from "../../composables/tab/types";
+import { TabVariant } from "../../composables/tab/types/props";
+
+const { processI18n } = useTranslation();
+
+const props = withDefaults(defineProps<TabProps>(), {
+  // A tab set with nothing in it yet is a legitimate state — a page being
+  // assembled, or a serialized layout that carries no items. Without a default
+  // every read of `items` throws during setup and takes the page down with it.
+  items: () => [],
+  color: Color.primary,
+  size: Size.medium,
+  variant: TabVariant.pill,
+  orientation: AxeOrientation.horizontal,
+  unmountOnHide: true,
+  persistState: false,
+  stateKey: "tab",
+});
+
+const tabCount = computed(() => props.items.length);
+
+const {
+  activeTab,
+  nextTab,
+  previousTab,
+  goToTab,
+  goToFirstTab,
+  goToLastTab,
+  resetTabs,
+} = useTab(tabCount, props);
+
+useTabShortcuts({ items: props.items, goToTab });
+
+const tabItems = computed(() => {
+  return props.items.map((item, index) => {
+    const baseItem = {
+      value: String(index),
+      slot: item.slot,
+      icon: item.icon,
+      badge: item.badge,
+      disabled: item.disabled,
+      avatar: item.avatar,
+    };
+
+    return {
+      label: processI18n(item.label || "Tab " + (index + 1)),
+      ...baseItem,
+    };
+  });
+});
+
+defineExpose({
+  nextTab,
+  previousTab,
+  goToTab,
+  goToFirstTab,
+  goToLastTab,
+  resetTabs,
+  activeTab,
+});
+</script>
+
+<template>
+  <div class="dms-tab h-full w-full">
+    <UTabs
+      v-model="activeTab"
+      :items="tabItems"
+      :color="props.color as ColorValue"
+      :size="props.size"
+      :variant="props.variant"
+      :orientation="props.orientation"
+      :unmount-on-hide="props.unmountOnHide"
+    >
+      <template v-for="item in props.items" :key="item.slot" #[item.slot]>
+        <div class="p-4">
+          <slot :name="item.slot" />
+        </div>
+      </template>
+    </UTabs>
+  </div>
+</template>

package/frontend-vue/layers/dms-ui/app/components/table-view/CascaderPath.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import {
+  buildCascaderPathLabels,
+  CASCADER_FETCH_LIMIT,
+  CASCADER_PATH_SEPARATOR,
+  resolveCascaderKeyMapping,
+  type CascaderKeyMapping,
+} from "../../utils/cascader";
+
+const DEFAULT_VALUE_KEY = "_id";
+
+interface CascaderPathProps {
+  value: unknown;
+  searchUrl?: string;
+  keyMapping?: Partial<CascaderKeyMapping>;
+}
+
+const props = defineProps<CascaderPathProps>();
+
+const { $authFetch } = useAuthFetch();
+
+interface CascaderResponse {
+  results: Record<string, unknown>[];
+  total: number;
+}
+
+const keyMapping = computed(() =>
+  resolveCascaderKeyMapping({
+    value: DEFAULT_VALUE_KEY,
+    ...props.keyMapping,
+  }),
+);
+
+const valueObject = computed(() =>
+  isObject(props.value) ? (props.value as Record<string, unknown>) : undefined,
+);
+
+const valueId = computed(() => {
+  const raw = valueObject.value
+    ? valueObject.value[keyMapping.value.value]
+    : props.value;
+  return raw === undefined || raw === null ? undefined : String(raw);
+});
+
+const ownLabel = computed(() => {
+  const label = valueObject.value?.[keyMapping.value.label];
+  return label === undefined || label === null ? undefined : String(label);
+});
+
+const { data } = await useDmsAsyncData(
+  `cascader-path-${props.searchUrl}`,
+  () =>
+    props.searchUrl
+      ? $authFetch<CascaderResponse>(props.searchUrl, {
+          params: { limit: CASCADER_FETCH_LIMIT },
+        })
+      : Promise.resolve(undefined),
+  { lazy: true },
+);
+
+const pathLabel = computed(() => {
+  if (!valueId.value) return ownLabel.value ?? "";
+  const rows = data.value?.results;
+  if (rows) {
+    const labels = buildCascaderPathLabels(
+      rows,
+      keyMapping.value,
+      valueId.value,
+    );
+    if (labels.length > 0) return labels.join(CASCADER_PATH_SEPARATOR);
+  }
+  return ownLabel.value ?? valueId.value;
+});
+</script>
+
+<template>
+  <span class="truncate" :title="pathLabel">{{ pathLabel }}</span>
+</template>