diff --git a/resources/js/components/BaseBadge.vue b/resources/js/components/BaseBadge.vue
index 0d3779b..bddccb8 100644
--- a/resources/js/components/BaseBadge.vue
+++ b/resources/js/components/BaseBadge.vue
@@ -40,98 +40,142 @@
         primary: {
             base: 'bg-brand-50 text-brand-700 ring-1 ring-inset ring-brand-600/10',
             hover: 'hover:bg-brand-100 hover:text-brand-800',
+            dot: 'bg-brand-500',
         },
         danger: {
             base: 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10',
             hover: 'hover:bg-red-100 hover:text-red-800',
+            dot: 'bg-red-500',
         },
         success: {
             base: 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/10',
             hover: 'hover:bg-green-100 hover:text-green-800',
+            dot: 'bg-green-500',
         },
         warning: {
             base: 'bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/10',
             hover: 'hover:bg-amber-100 hover:text-amber-800',
+            dot: 'bg-amber-500',
         },
         info: {
-            base: 'bg-sky-50 text-sky-700 ring-1 ring-inset ring-sky-600/10',
-            hover: 'hover:bg-sky-100 hover:text-sky-800',
+            base: 'bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-600/10',
+            hover: 'hover:bg-blue-100 hover:text-blue-800',
+            dot: 'bg-blue-500',
         },
         gray: {
             base: 'bg-gray-50 text-gray-600 ring-1 ring-inset ring-gray-600/10',
             hover: 'hover:bg-gray-100 hover:text-gray-700',
+            dot: 'bg-gray-400',
         },
         'transparent-white': {
             base: 'bg-white/15 text-white/90 ring-1 ring-inset ring-white/25',
             hover: 'hover:bg-white/25 hover:text-white hover:ring-white/40',
+            dot: 'bg-white/80',
         },
         blue: {
             base: 'bg-blue-50 text-blue-700 ring-1 ring-inset ring-blue-600/10',
             hover: 'hover:bg-blue-100 hover:text-blue-800',
+            dot: 'bg-blue-500',
         },
         green: {
             base: 'bg-green-50 text-green-700 ring-1 ring-inset ring-green-600/10',
             hover: 'hover:bg-green-100 hover:text-green-800',
+            dot: 'bg-green-500',
         },
         red: {
             base: 'bg-red-50 text-red-700 ring-1 ring-inset ring-red-600/10',
             hover: 'hover:bg-red-100 hover:text-red-800',
+            dot: 'bg-red-500',
         },
         orange: {
             base: 'bg-orange-50 text-orange-700 ring-1 ring-inset ring-orange-600/10',
             hover: 'hover:bg-orange-100 hover:text-orange-800',
+            dot: 'bg-orange-500',
         },
         amber: {
             base: 'bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-600/10',
             hover: 'hover:bg-amber-100 hover:text-amber-800',
+            dot: 'bg-amber-500',
         },
         yellow: {
             base: 'bg-yellow-50 text-yellow-700 ring-1 ring-inset ring-yellow-600/10',
             hover: 'hover:bg-yellow-100 hover:text-yellow-800',
+            dot: 'bg-yellow-400',
         },
         lime: {
             base: 'bg-lime-50 text-lime-700 ring-1 ring-inset ring-lime-600/10',
             hover: 'hover:bg-lime-100 hover:text-lime-800',
+            dot: 'bg-lime-500',
         },
         emerald: {
             base: 'bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-600/10',
             hover: 'hover:bg-emerald-100 hover:text-emerald-800',
+            dot: 'bg-emerald-500',
         },
         teal: {
             base: 'bg-teal-50 text-teal-700 ring-1 ring-inset ring-teal-600/10',
             hover: 'hover:bg-teal-100 hover:text-teal-800',
+            dot: 'bg-teal-500',
         },
         cyan: {
             base: 'bg-cyan-50 text-cyan-700 ring-1 ring-inset ring-cyan-600/10',
             hover: 'hover:bg-cyan-100 hover:text-cyan-800',
+            dot: 'bg-cyan-500',
         },
         sky: {
             base: 'bg-sky-50 text-sky-700 ring-1 ring-inset ring-sky-600/10',
             hover: 'hover:bg-sky-100 hover:text-sky-800',
+            dot: 'bg-sky-500',
         },
         indigo: {
             base: 'bg-indigo-50 text-indigo-700 ring-1 ring-inset ring-indigo-600/10',
             hover: 'hover:bg-indigo-100 hover:text-indigo-800',
+            dot: 'bg-indigo-500',
         },
         violet: {
             base: 'bg-violet-50 text-violet-700 ring-1 ring-inset ring-violet-600/10',
             hover: 'hover:bg-violet-100 hover:text-violet-800',
+            dot: 'bg-violet-500',
         },
         purple: {
             base: 'bg-purple-50 text-purple-700 ring-1 ring-inset ring-purple-600/10',
             hover: 'hover:bg-purple-100 hover:text-purple-800',
+            dot: 'bg-purple-500',
         },
         fuchsia: {
             base: 'bg-fuchsia-50 text-fuchsia-700 ring-1 ring-inset ring-fuchsia-600/10',
             hover: 'hover:bg-fuchsia-100 hover:text-fuchsia-800',
+            dot: 'bg-fuchsia-500',
         },
         pink: {
             base: 'bg-pink-50 text-pink-700 ring-1 ring-inset ring-pink-600/10',
             hover: 'hover:bg-pink-100 hover:text-pink-800',
+            dot: 'bg-pink-500',
         },
         rose: {
             base: 'bg-rose-50 text-rose-700 ring-1 ring-inset ring-rose-600/10',
             hover: 'hover:bg-rose-100 hover:text-rose-800',
+            dot: 'bg-rose-500',
+        },
+        black: {
+            base: 'bg-gray-100 text-gray-950 ring-1 ring-inset ring-gray-950/15',
+            hover: 'hover:bg-gray-200 hover:text-gray-950',
+            dot: 'bg-gray-950',
+        },
+        'light-gray': {
+            base: 'bg-gray-50 text-gray-500 ring-1 ring-inset ring-gray-400/15',
+            hover: 'hover:bg-gray-100 hover:text-gray-600',
+            dot: 'bg-gray-300',
+        },
+        'dark-gray': {
+            base: 'bg-gray-100 text-gray-800 ring-1 ring-inset ring-gray-700/15',
+            hover: 'hover:bg-gray-200 hover:text-gray-900',
+            dot: 'bg-gray-700',
+        },
+        navy: {
+            base: 'bg-blue-50 text-blue-900 ring-1 ring-inset ring-blue-900/15',
+            hover: 'hover:bg-blue-100 hover:text-blue-950',
+            dot: 'bg-blue-900',
         },
     };
 
@@ -191,6 +235,10 @@
             type: Boolean,
             default: false,
         },
+        dot: {
+            type: Boolean,
+            default: false,
+        },
     });
 
     const emit = defineEmits(['click']);
@@ -205,7 +253,7 @@
     const palette = computed(() => PALETTE[props.color] ?? PALETTE.gray);
 
     const badgeClasses = computed(() => [
-        'inline-flex items-center justify-center gap-x-1 rounded-md font-medium truncate',
+        'inline-flex items-center justify-center gap-x-1 rounded font-medium truncate',
         SIZE_CLASSES[props.size],
         palette.value.base,
         isInteractive.value &&
@@ -257,6 +305,8 @@
 
 <template>
     <component :is="componentTag" v-bind="componentAttrs" :class="badgeClasses" @click="handleClick">
+        <span v-if="dot" :class="['size-1.5 shrink-0 rounded-full', palette.dot]" aria-hidden="true" />
+
         <component v-if="icon && iconPosition === 'before'" :is="icon" :class="iconClasses" aria-hidden="true" />
 
         <span class="min-w-0 truncate">
diff --git a/resources/js/components/BaseCallout.vue b/resources/js/components/BaseCallout.vue
new file mode 100644
index 0000000..b9c7fbc
--- /dev/null
+++ b/resources/js/components/BaseCallout.vue
@@ -0,0 +1,152 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    import { CheckIcon, ExclamationTriangleIcon, InformationCircleIcon, XMarkIcon } from '@heroicons/vue/24/outline';
+    import { computed } from 'vue';
+
+    const props = defineProps({
+        tone: {
+            type: String,
+            default: 'neutral',
+            validator: (v) => ['success', 'warning', 'danger', 'info', 'neutral'].includes(v),
+        },
+        icon: {
+            type: [Object, Function],
+            default: null,
+        },
+        title: {
+            type: String,
+            required: true,
+        },
+        description: {
+            type: String,
+            default: null,
+        },
+        role: {
+            type: String,
+            default: 'note',
+            validator: (v) => ['note', 'status', 'alert'].includes(v),
+        },
+        size: {
+            type: String,
+            default: 'lg',
+            validator: (v) => ['sm', 'lg'].includes(v),
+        },
+    });
+
+    const TONES = {
+        success: {
+            icon: CheckIcon,
+            surface: 'bg-green-50 ring-green-600/20',
+            largeIcon: 'bg-green-500 text-white',
+            smallIcon: 'text-green-600',
+            title: 'text-green-800',
+            text: 'text-green-700',
+        },
+        warning: {
+            icon: ExclamationTriangleIcon,
+            surface: 'bg-amber-50 ring-amber-600/20',
+            largeIcon: 'bg-amber-500 text-white',
+            smallIcon: 'text-amber-600',
+            title: 'text-amber-800',
+            text: 'text-amber-700',
+        },
+        danger: {
+            icon: XMarkIcon,
+            surface: 'bg-red-50 ring-red-600/20',
+            largeIcon: 'bg-red-500 text-white',
+            smallIcon: 'text-red-600',
+            title: 'text-red-800',
+            text: 'text-red-700',
+        },
+        info: {
+            icon: InformationCircleIcon,
+            surface: 'bg-blue-50 ring-blue-600/20',
+            largeIcon: 'bg-blue-500 text-white',
+            smallIcon: 'text-blue-600',
+            title: 'text-blue-950',
+            text: 'text-blue-800',
+        },
+        neutral: {
+            icon: InformationCircleIcon,
+            surface: 'bg-white ring-gray-950/5',
+            largeIcon: 'bg-gray-100 text-gray-500',
+            smallIcon: 'text-gray-400',
+            title: 'text-gray-900',
+            text: 'text-gray-600',
+        },
+    };
+
+    const config = computed(() => TONES[props.tone] ?? TONES.neutral);
+    const iconComponent = computed(() => props.icon ?? config.value.icon);
+    const isLarge = computed(() => props.size === 'lg');
+</script>
+
+<template>
+    <section
+        :role="role"
+        :class="[
+            'flex flex-col gap-4 rounded-lg shadow-sm ring-1 ring-inset md:flex-row md:justify-between',
+            isLarge ? 'px-5 py-4 md:items-center' : 'px-4 py-3',
+            config.surface,
+        ]"
+    >
+        <div :class="['flex gap-4', isLarge ? 'items-center' : 'items-start gap-3']">
+            <span
+                v-if="isLarge"
+                :class="['flex size-11 shrink-0 items-center justify-center rounded-full', config.largeIcon]"
+                aria-hidden="true"
+            >
+                <component :is="iconComponent" class="size-6 stroke-2" />
+            </span>
+            <component
+                v-else
+                :is="iconComponent"
+                :class="['mt-0.5 size-5 shrink-0', config.smallIcon]"
+                aria-hidden="true"
+            />
+
+            <div class="grid gap-0.5">
+                <h2 :class="[isLarge ? 'text-lg' : 'text-sm', 'font-semibold', config.title]">{{ title }}</h2>
+                <p v-if="description" :class="['text-sm text-pretty', isLarge ? 'text-gray-600' : config.text]">
+                    {{ description }}
+                </p>
+            </div>
+        </div>
+
+        <dl v-if="$slots.meta" class="flex flex-wrap gap-x-6 gap-y-3 md:flex-nowrap">
+            <slot name="meta" />
+        </dl>
+    </section>
+</template>
diff --git a/resources/js/components/BaseCalloutMeta.vue b/resources/js/components/BaseCalloutMeta.vue
new file mode 100644
index 0000000..d4b6b97
--- /dev/null
+++ b/resources/js/components/BaseCalloutMeta.vue
@@ -0,0 +1,48 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    defineProps({
+        label: {
+            type: String,
+            required: true,
+        },
+    });
+</script>
+
+<template>
+    <div class="grid gap-0.5 md:border-l md:border-gray-300 md:pl-6">
+        <dt class="text-xs text-gray-500">{{ label }}</dt>
+        <dd class="text-sm font-semibold text-gray-900"><slot /></dd>
+    </div>
+</template>
diff --git a/resources/js/components/BaseInputError.vue b/resources/js/components/BaseInputError.vue
new file mode 100644
index 0000000..b9de01b
--- /dev/null
+++ b/resources/js/components/BaseInputError.vue
@@ -0,0 +1,47 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    defineProps({
+        errors: {
+            type: Array,
+            default: () => [],
+        },
+    });
+</script>
+
+<template>
+    <div v-if="errors.length" role="alert" class="mt-1 text-sm text-red-600">
+        <p v-for="error in errors" :key="error">{{ error }}</p>
+    </div>
+</template>
diff --git a/resources/js/components/BaseSearchInput.vue b/resources/js/components/BaseSearchInput.vue
new file mode 100644
index 0000000..55fcf8c
--- /dev/null
+++ b/resources/js/components/BaseSearchInput.vue
@@ -0,0 +1,119 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid';
+    import { computed, onUnmounted, ref, useAttrs, watch } from 'vue';
+
+    defineOptions({ inheritAttrs: false });
+
+    const props = defineProps({
+        modelValue: {
+            type: String,
+            default: '',
+        },
+        label: {
+            type: String,
+            required: true,
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
+        debounce: {
+            type: Number,
+            default: 0,
+        },
+    });
+
+    const emit = defineEmits(['update:modelValue']);
+
+    const attrs = useAttrs();
+
+    // Layout (`class`, `style`) stays on the wrapper; every other attribute belongs to the input.
+    const wrapperAttrs = computed(() => ({ class: attrs.class, style: attrs.style }));
+    const inputAttrs = computed(() => {
+        const { class: _class, style: _style, ...rest } = attrs;
+
+        return rest;
+    });
+
+    const value = ref(props.modelValue);
+
+    let timeout = null;
+
+    // Keep the field in step when the parent resets the value, such as when filters are cleared.
+    watch(
+        () => props.modelValue,
+        (modelValue) => {
+            if (modelValue !== value.value) {
+                clearTimeout(timeout);
+                value.value = modelValue;
+            }
+        },
+    );
+
+    function update(event) {
+        value.value = event.target.value;
+
+        clearTimeout(timeout);
+
+        if (props.debounce <= 0) {
+            emit('update:modelValue', value.value);
+
+            return;
+        }
+
+        timeout = setTimeout(() => emit('update:modelValue', value.value), props.debounce);
+    }
+
+    onUnmounted(() => clearTimeout(timeout));
+</script>
+
+<template>
+    <div class="relative w-full" v-bind="wrapperAttrs">
+        <MagnifyingGlassIcon
+            class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400"
+            aria-hidden="true"
+        />
+        <input
+            type="search"
+            v-bind="inputAttrs"
+            :value="value"
+            :aria-label="label"
+            :placeholder="placeholder"
+            class="w-full rounded-md border-0 bg-white py-2 pl-9 pr-3 text-sm text-gray-950 shadow-sm ring-1 ring-inset ring-gray-950/10 outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-brand-600"
+            @input="update"
+        />
+    </div>
+</template>
diff --git a/resources/js/components/BaseSection.vue b/resources/js/components/BaseSection.vue
new file mode 100644
index 0000000..7185f62
--- /dev/null
+++ b/resources/js/components/BaseSection.vue
@@ -0,0 +1,77 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    import { computed, useSlots } from 'vue';
+
+    const props = defineProps({
+        heading: {
+            type: String,
+            default: null,
+        },
+        description: {
+            type: String,
+            default: null,
+        },
+        icon: {
+            type: [Object, Function],
+            default: null,
+        },
+    });
+
+    const slots = useSlots();
+
+    const hasHeader = computed(() => Boolean(props.heading || props.description || props.icon || slots.actions));
+</script>
+
+<template>
+    <section class="rounded-lg bg-white shadow-sm ring-1 ring-gray-950/5">
+        <header v-if="hasHeader" class="flex flex-col gap-3 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
+            <div class="flex items-start gap-3">
+                <component v-if="icon" :is="icon" class="mt-0.5 size-6 shrink-0 text-gray-400" aria-hidden="true" />
+                <div class="grid gap-1">
+                    <h2 v-if="heading" class="text-base font-semibold leading-6 text-gray-950">{{ heading }}</h2>
+                    <p v-if="description" class="text-sm text-gray-500">{{ description }}</p>
+                </div>
+            </div>
+
+            <div v-if="$slots.actions" class="flex shrink-0 items-center gap-3">
+                <slot name="actions" />
+            </div>
+        </header>
+
+        <div :class="['p-6', hasHeader && 'border-t border-gray-200']">
+            <slot />
+        </div>
+    </section>
+</template>
diff --git a/resources/js/components/BaseSelect.vue b/resources/js/components/BaseSelect.vue
new file mode 100644
index 0000000..8df39c4
--- /dev/null
+++ b/resources/js/components/BaseSelect.vue
@@ -0,0 +1,86 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    import { ChevronDownIcon } from '@heroicons/vue/16/solid';
+    import { computed, useAttrs } from 'vue';
+
+    defineOptions({ inheritAttrs: false });
+
+    defineProps({
+        modelValue: {
+            type: String,
+            default: null,
+        },
+        options: {
+            type: Array,
+            required: true,
+        },
+        label: {
+            type: String,
+            required: true,
+        },
+    });
+
+    defineEmits(['update:modelValue']);
+
+    const attrs = useAttrs();
+
+    // Layout (`class`, `style`) stays on the wrapper; every other attribute belongs to the select.
+    const wrapperAttrs = computed(() => ({ class: attrs.class, style: attrs.style }));
+    const selectAttrs = computed(() => {
+        const { class: _class, style: _style, ...rest } = attrs;
+
+        return rest;
+    });
+</script>
+
+<template>
+    <div class="relative inline-block w-full" v-bind="wrapperAttrs">
+        <select
+            v-bind="selectAttrs"
+            :value="modelValue"
+            :aria-label="label"
+            class="w-full appearance-none rounded-md border-0 bg-white py-2 pl-3 pr-9 text-sm text-gray-950 shadow-sm ring-1 ring-inset ring-gray-950/10 outline-none focus:ring-2 focus:ring-brand-600"
+            @change="$emit('update:modelValue', $event.target.value)"
+        >
+            <option v-for="option in options" :key="option.value" :value="option.value">
+                {{ option.label }}
+            </option>
+        </select>
+        <ChevronDownIcon
+            class="pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-gray-400"
+            aria-hidden="true"
+        />
+    </div>
+</template>
diff --git a/resources/js/components/BaseStatCard.vue b/resources/js/components/BaseStatCard.vue
new file mode 100644
index 0000000..54b5884
--- /dev/null
+++ b/resources/js/components/BaseStatCard.vue
@@ -0,0 +1,74 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    defineProps({
+        label: {
+            type: String,
+            required: true,
+        },
+        value: {
+            type: [Number, String],
+            required: true,
+        },
+        icon: {
+            type: [Object, Function],
+            default: null,
+        },
+        valueTitle: {
+            type: String,
+            default: null,
+        },
+    });
+</script>
+
+<template>
+    <div class="flex items-center gap-4 rounded-lg bg-white p-5 shadow-sm ring-1 ring-gray-950/5">
+        <span
+            v-if="icon"
+            class="flex size-11 shrink-0 items-center justify-center rounded-md bg-brand-50 text-brand-500"
+            aria-hidden="true"
+        >
+            <component :is="icon" class="size-5 stroke-2" />
+        </span>
+        <div class="min-w-0">
+            <p class="text-xs font-semibold text-gray-500">{{ label }}</p>
+            <p
+                class="mt-1 text-2xl font-semibold leading-none tabular-nums text-gray-900"
+                :title="valueTitle ?? undefined"
+            >
+                {{ value }}
+            </p>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/BaseTable.vue b/resources/js/components/BaseTable.vue
new file mode 100644
index 0000000..5f3d956
--- /dev/null
+++ b/resources/js/components/BaseTable.vue
@@ -0,0 +1,61 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    defineProps({
+        loading: {
+            type: Boolean,
+            default: false,
+        },
+    });
+</script>
+
+<template>
+    <div class="overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-950/5">
+        <div v-if="$slots.toolbar" class="border-b border-gray-200 px-4 py-3 sm:px-6">
+            <slot name="toolbar" />
+        </div>
+
+        <div :class="['transition-opacity', loading && 'opacity-60']" :aria-busy="loading ? 'true' : undefined">
+            <slot v-if="$slots.empty" name="empty" />
+
+            <div v-else class="overflow-x-auto">
+                <table class="w-full text-left text-sm text-gray-600">
+                    <slot />
+                </table>
+            </div>
+        </div>
+
+        <slot name="footer" />
+    </div>
+</template>
diff --git a/resources/js/components/BaseTableBody.vue b/resources/js/components/BaseTableBody.vue
new file mode 100644
index 0000000..b18449b
--- /dev/null
+++ b/resources/js/components/BaseTableBody.vue
@@ -0,0 +1,38 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<template>
+    <tbody class="divide-y divide-gray-100 bg-white">
+        <slot />
+    </tbody>
+</template>
diff --git a/resources/js/components/BaseTableCell.vue b/resources/js/components/BaseTableCell.vue
new file mode 100644
index 0000000..c4aab79
--- /dev/null
+++ b/resources/js/components/BaseTableCell.vue
@@ -0,0 +1,38 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<template>
+    <td class="px-4 py-3.5 align-top sm:first:ps-6 sm:last:pe-6">
+        <slot />
+    </td>
+</template>
diff --git a/resources/js/components/BaseTableCellText.vue b/resources/js/components/BaseTableCellText.vue
new file mode 100644
index 0000000..bdc7891
--- /dev/null
+++ b/resources/js/components/BaseTableCellText.vue
@@ -0,0 +1,71 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    import { computed } from 'vue';
+
+    const props = defineProps({
+        text: {
+            type: String,
+            default: null,
+        },
+        subText: {
+            type: String,
+            default: null,
+        },
+        subTextLines: {
+            type: Number,
+            default: 1,
+            validator: (v) => [1, 2, 3].includes(v),
+        },
+    });
+
+    const LINE_CLAMP_CLASSES = {
+        1: 'line-clamp-1',
+        2: 'line-clamp-2',
+        3: 'line-clamp-3',
+    };
+
+    const subTextClass = computed(() => LINE_CLAMP_CLASSES[props.subTextLines] ?? LINE_CLAMP_CLASSES[1]);
+</script>
+
+<template>
+    <div class="min-w-0">
+        <p class="line-clamp-1 text-sm leading-5 text-gray-900" :title="text || undefined">
+            {{ text ?? '—' }}
+        </p>
+        <p v-if="subText" :class="['mt-0.5 text-xs leading-5 text-gray-500', subTextClass]" :title="subText">
+            {{ subText }}
+        </p>
+    </div>
+</template>
diff --git a/resources/js/components/BaseTableHeader.vue b/resources/js/components/BaseTableHeader.vue
new file mode 100644
index 0000000..61a3d08
--- /dev/null
+++ b/resources/js/components/BaseTableHeader.vue
@@ -0,0 +1,38 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<template>
+    <thead class="border-b border-gray-200 bg-gray-50">
+        <slot />
+    </thead>
+</template>
diff --git a/resources/js/components/BaseTableHeaderCell.vue b/resources/js/components/BaseTableHeaderCell.vue
new file mode 100644
index 0000000..281c989
--- /dev/null
+++ b/resources/js/components/BaseTableHeaderCell.vue
@@ -0,0 +1,93 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    import { ChevronDownIcon, ChevronUpDownIcon, ChevronUpIcon } from '@heroicons/vue/16/solid';
+    import { computed } from 'vue';
+
+    const props = defineProps({
+        scope: {
+            type: String,
+            default: 'col',
+        },
+        sortable: {
+            type: Boolean,
+            default: false,
+        },
+        sortDirection: {
+            type: String,
+            default: null,
+            validator: (v) => v === null || ['asc', 'desc'].includes(v),
+        },
+    });
+
+    const emit = defineEmits(['sort']);
+
+    const ariaSort = computed(() => {
+        if (!props.sortable) {
+            return undefined;
+        }
+
+        if (props.sortDirection === 'asc') {
+            return 'ascending';
+        }
+
+        return props.sortDirection === 'desc' ? 'descending' : 'none';
+    });
+</script>
+
+<template>
+    <th
+        :scope="scope"
+        :aria-sort="ariaSort"
+        class="px-4 py-3 text-xs font-semibold text-gray-500 sm:first:ps-6 sm:last:pe-6"
+    >
+        <button
+            v-if="sortable"
+            type="button"
+            class="group inline-flex items-center gap-1 whitespace-nowrap rounded-sm text-left hover:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
+            @click="emit('sort')"
+        >
+            <slot />
+            <ChevronUpIcon v-if="sortDirection === 'asc'" class="size-4 text-gray-700" aria-hidden="true" />
+            <ChevronDownIcon v-else-if="sortDirection === 'desc'" class="size-4 text-gray-700" aria-hidden="true" />
+            <ChevronUpDownIcon
+                v-else
+                class="size-4 text-gray-300 transition-colors group-hover:text-gray-500"
+                aria-hidden="true"
+            />
+        </button>
+
+        <slot v-else />
+    </th>
+</template>
diff --git a/resources/js/components/BaseTableLoadingState.vue b/resources/js/components/BaseTableLoadingState.vue
new file mode 100644
index 0000000..5677e47
--- /dev/null
+++ b/resources/js/components/BaseTableLoadingState.vue
@@ -0,0 +1,78 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    import BaseTable from './BaseTable.vue';
+    import BaseTableBody from './BaseTableBody.vue';
+    import BaseTableHeader from './BaseTableHeader.vue';
+
+    defineProps({
+        columns: {
+            type: Number,
+            default: 4,
+        },
+        rows: {
+            type: Number,
+            default: 5,
+        },
+        label: {
+            type: String,
+            default: 'Loading, please wait…',
+        },
+    });
+</script>
+
+<template>
+    <BaseTable role="status" :aria-label="label" class="animate-pulse">
+        <BaseTableHeader>
+            <tr>
+                <th v-for="col in columns" :key="col" class="px-4 py-3 sm:first:ps-6 sm:last:pe-6">
+                    <div class="h-3 rounded bg-gray-200" :class="col === 1 ? 'w-16' : 'w-20'"></div>
+                </th>
+            </tr>
+        </BaseTableHeader>
+        <BaseTableBody>
+            <tr v-for="row in rows" :key="row">
+                <td v-for="col in columns" :key="col" class="px-4 py-4 sm:first:ps-6 sm:last:pe-6">
+                    <div
+                        class="h-3 rounded"
+                        :class="[
+                            col === 1 ? 'w-40 bg-gray-200' : col % 3 === 0 ? 'w-16 bg-gray-100' : 'w-24 bg-gray-200',
+                        ]"
+                    ></div>
+                    <div v-if="col === 1" class="mt-2 h-2.5 w-28 rounded bg-gray-100"></div>
+                </td>
+            </tr>
+        </BaseTableBody>
+    </BaseTable>
+</template>
diff --git a/resources/js/components/BaseTableRow.vue b/resources/js/components/BaseTableRow.vue
new file mode 100644
index 0000000..7c41c91
--- /dev/null
+++ b/resources/js/components/BaseTableRow.vue
@@ -0,0 +1,68 @@
+<!--
+<COPYRIGHT>
+
+    Copyright © 2016-2026, Canyon GBS LLC. All rights reserved.
+
+    Canyon GBS Common is licensed under the Elastic License 2.0. For more details,
+    see https://github.com/canyongbs/common/blob/main/LICENSE.
+
+    Notice:
+
+    - You may not provide the software to third parties as a hosted or managed
+      service, where the service provides users with access to any substantial set of
+      the features or functionality of the software.
+    - You may not move, change, disable, or circumvent the license key functionality
+      in the software, and you may not remove or obscure any functionality in the
+      software that is protected by the license key.
+    - You may not alter, remove, or obscure any licensing, copyright, or other notices
+      of the licensor in the software. Any use of the licensor’s trademarks is subject
+      to applicable law.
+    - Canyon GBS LLC respects the intellectual property rights of others and expects the
+      same in return. Canyon GBS™ and Canyon GBS Common are registered trademarks of
+      Canyon GBS LLC, and we are committed to enforcing and protecting our trademarks
+      vigorously.
+    - The software solution, including services, infrastructure, and code, is offered as a
+      Software as a Service (SaaS) by Canyon GBS LLC.
+    - Use of this software implies agreement to the license terms and conditions as stated
+      in the Elastic License 2.0.
+
+    For more information or inquiries please visit our website at
+    https://www.canyongbs.com or contact us via email at legal@canyongbs.com.
+
+</COPYRIGHT>
+-->
+<script setup>
+    defineProps({
+        delay: {
+            type: Number,
+            default: 0,
+        },
+    });
+</script>
+
+<template>
+    <tr
+        class="base-table-row transition-colors duration-100 hover:bg-gray-50/70"
+        :style="{ '--row-delay': `${delay}ms` }"
+    >
+        <slot />
+    </tr>
+</template>
+
+<style>
+    @keyframes baseTableRowIn {
+        from {
+            opacity: 0;
+            transform: translateY(4px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+
+    .base-table-row {
+        animation: baseTableRowIn 0.2s ease both;
+        animation-delay: var(--row-delay, 0ms);
+    }
+</style>
diff --git a/resources/js/components/portal/EmptyState.vue b/resources/js/components/portal/EmptyState.vue
index 1579dfe..6ea1041 100644
--- a/resources/js/components/portal/EmptyState.vue
+++ b/resources/js/components/portal/EmptyState.vue
@@ -47,7 +47,7 @@
 </script>
 
 <template>
-    <section class="px-6 py-12" :class="contained && 'rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5'">
+    <section class="px-6 py-12" :class="contained && 'rounded-lg bg-white shadow-sm ring-1 ring-gray-950/5'">
         <div class="mx-auto grid max-w-lg justify-items-center text-center">
             <div class="mb-4 flex size-12 items-center justify-center rounded-full bg-gray-100">
                 <component :is="icon || XMarkIcon" class="size-6 text-gray-400" />
diff --git a/resources/js/components/portal/PageCard.vue b/resources/js/components/portal/PageCard.vue
index 3dbbd87..11a23a8 100644
--- a/resources/js/components/portal/PageCard.vue
+++ b/resources/js/components/portal/PageCard.vue
@@ -32,7 +32,7 @@
 </COPYRIGHT>
 -->
 <template>
-    <div class="bg-white ring-1 ring-gray-950/5 shadow-xs rounded-xl px-6 py-4 flex flex-col gap-y-6">
+    <div class="bg-white shadow-sm ring-1 ring-gray-950/5 rounded-lg px-6 py-4 flex flex-col gap-y-6">
         <slot />
     </div>
 </template>
diff --git a/resources/js/components/portal/Pagination.vue b/resources/js/components/portal/Pagination.vue
index 15bafab..b3f5805 100644
--- a/resources/js/components/portal/Pagination.vue
+++ b/resources/js/components/portal/Pagination.vue
@@ -95,14 +95,14 @@
     <nav
         aria-label="Pagination"
         role="navigation"
-        class="grid grid-cols-[1fr_auto_1fr] items-center gap-x-3 border-t border-gray-200 px-6 py-3"
+        class="grid grid-cols-[1fr_auto_1fr] items-center gap-x-3 border-t border-gray-200 px-4 py-3 sm:px-6"
         :class="lastPage <= 1 && 'hidden md:grid'"
     >
         <button
             v-if="currentPage > 1"
             type="button"
             @click="emit('fetchPreviousPage')"
-            class="justify-self-start md:hidden relative inline-grid grid-flow-col items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75 text-gray-950 ring-1 ring-gray-950/10 hover:bg-gray-50 focus-visible:ring-2"
+            class="justify-self-start md:hidden relative inline-grid grid-flow-col items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium outline-none transition duration-75 text-gray-950 ring-1 ring-gray-950/10 hover:bg-gray-50 focus-visible:ring-2"
         >
             Previous
         </button>
@@ -115,14 +115,14 @@
             v-if="currentPage < lastPage"
             type="button"
             @click="emit('fetchNextPage')"
-            class="col-start-3 justify-self-end md:hidden relative inline-grid grid-flow-col items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75 text-gray-950 ring-1 ring-gray-950/10 hover:bg-gray-50 focus-visible:ring-2"
+            class="col-start-3 justify-self-end md:hidden relative inline-grid grid-flow-col items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm font-medium outline-none transition duration-75 text-gray-950 ring-1 ring-gray-950/10 hover:bg-gray-50 focus-visible:ring-2"
         >
             Next
         </button>
 
         <ol
             v-if="lastPage > 1"
-            class="hidden md:flex col-start-3 justify-self-end divide-x divide-gray-200 rounded-lg bg-white shadow-sm ring-1 ring-gray-950/10"
+            class="hidden md:flex col-start-3 justify-self-end divide-x divide-gray-200 rounded-md bg-white shadow-sm ring-1 ring-gray-950/10"
         >
             <li>
                 <button
@@ -130,7 +130,7 @@
                     :disabled="currentPage === 1"
                     aria-label="Previous page"
                     @click="emit('fetchPreviousPage')"
-                    class="relative flex overflow-hidden p-2 transition duration-75 outline-none rounded-s-lg enabled:hover:bg-gray-50 enabled:focus-visible:z-10 enabled:focus-visible:ring-2 enabled:focus-visible:ring-brand-600"
+                    class="relative flex overflow-hidden p-2 transition duration-75 outline-none rounded-s-md enabled:hover:bg-gray-50 enabled:focus-visible:z-10 enabled:focus-visible:ring-2 enabled:focus-visible:ring-brand-600"
                 >
                     <ChevronLeftIcon class="size-5 text-gray-400 transition duration-75" />
                 </button>
@@ -169,7 +169,7 @@
                     :disabled="currentPage === lastPage"
                     aria-label="Next page"
                     @click="emit('fetchNextPage')"
-                    class="relative flex overflow-hidden p-2 transition duration-75 outline-none rounded-e-lg enabled:hover:bg-gray-50 enabled:focus-visible:z-10 enabled:focus-visible:ring-2 enabled:focus-visible:ring-brand-600"
+                    class="relative flex overflow-hidden p-2 transition duration-75 outline-none rounded-e-md enabled:hover:bg-gray-50 enabled:focus-visible:z-10 enabled:focus-visible:ring-2 enabled:focus-visible:ring-brand-600"
                 >
                     <ChevronRightIcon class="size-5 text-gray-400 transition duration-75" />
                 </button>
diff --git a/resources/js/components/portal/Tabs.vue b/resources/js/components/portal/Tabs.vue
index df241cc..ba1c016 100644
--- a/resources/js/components/portal/Tabs.vue
+++ b/resources/js/components/portal/Tabs.vue
@@ -32,7 +32,10 @@
 </COPYRIGHT>
 -->
 <script setup>
-    defineProps({
+    import { computed } from 'vue';
+    import BaseBadge from '../BaseBadge.vue';
+
+    const props = defineProps({
         tabs: {
             type: Array,
             required: true,
@@ -45,9 +48,47 @@
             type: Boolean,
             default: false,
         },
+        label: {
+            type: String,
+            default: null,
+        },
+        idPrefix: {
+            type: String,
+            default: null,
+        },
     });
 
     const emit = defineEmits(['update:modelValue']);
+
+    const tabElements = [];
+
+    // Only the selected tab (or the first, when none is selected) is in the Tab sequence; arrow keys move between tabs.
+    const tabbableIndex = computed(() =>
+        Math.max(
+            props.tabs.findIndex((tab) => tab.value === props.modelValue),
+            0,
+        ),
+    );
+
+    function focusTab(index) {
+        tabElements[(index + props.tabs.length) % props.tabs.length]?.focus();
+    }
+
+    function onKeydown(event, index) {
+        const targets = {
+            ArrowRight: index + 1,
+            ArrowLeft: index - 1,
+            Home: 0,
+            End: props.tabs.length - 1,
+        };
+
+        if (!(event.key in targets)) {
+            return;
+        }
+
+        event.preventDefault();
+        focusTab(targets[event.key]);
+    }
 </script>
 
 <template>
@@ -56,15 +97,24 @@
         :class="
             contained
                 ? 'border-b border-gray-200 px-3 py-2.5'
-                : 'rounded-xl bg-white p-2 shadow-sm ring-1 ring-gray-950/5'
+                : 'rounded-lg bg-white p-2 shadow-sm ring-1 ring-gray-950/5'
         "
+        role="tablist"
+        :aria-label="label ?? undefined"
     >
         <button
-            v-for="tab in tabs"
+            v-for="(tab, index) in tabs"
             :key="tab.value"
+            :ref="(element) => (tabElements[index] = element)"
             type="button"
+            role="tab"
+            :tabindex="index === tabbableIndex ? 0 : -1"
+            :id="idPrefix ? `${idPrefix}-tab-${tab.value}` : undefined"
+            :aria-selected="modelValue === tab.value"
+            :aria-controls="idPrefix ? `${idPrefix}-panel-${tab.value}` : undefined"
             @click="emit('update:modelValue', tab.value)"
-            class="flex items-center justify-center gap-x-2 rounded-lg px-3 py-2 text-sm font-medium whitespace-nowrap transition duration-75 outline-none"
+            @keydown="onKeydown($event, index)"
+            class="flex items-center justify-center gap-x-2 rounded-md px-3 py-2 text-sm font-medium whitespace-nowrap transition duration-75 outline-none"
             :class="modelValue === tab.value ? 'bg-gray-50' : 'hover:bg-gray-50 focus-visible:bg-gray-50'"
         >
             <component
@@ -78,6 +128,13 @@
                 :class="modelValue === tab.value ? 'text-brand-700' : 'text-gray-500'"
                 >{{ tab.label }}</span
             >
+            <BaseBadge
+                v-if="tab.badge !== undefined && tab.badge !== null"
+                :color="modelValue === tab.value ? 'primary' : 'gray'"
+                size="sm"
+            >
+                {{ tab.badge }}
+            </BaseBadge>
         </button>
     </nav>
 </template>