[AIDAPP-1595]: Improve the user interface of advisories in the portal

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">

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>

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>