@escalated-dev/escalated 0.4.0 → 0.6.0

package/src/components/PriorityBadge.vue

@@ -1,39 +1,39 @@
-<script setup>
-import { inject, computed } from 'vue';
-
-const props = defineProps({
-    priority: { type: String, required: true },
-});
-
-const escDark = inject('esc-dark', computed(() => false));
-
-const darkConfig = {
-    low: { label: 'Low', color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' },
-    medium: { label: 'Medium', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
-    high: { label: 'High', color: 'bg-amber-500/10 text-amber-400 ring-1 ring-amber-500/20' },
-    urgent: { label: 'Urgent', color: 'bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20' },
-    critical: { label: 'Critical', color: 'bg-rose-500/10 text-rose-300 ring-1 ring-rose-500/20' },
-};
-
-const lightConfig = {
-    low: { label: 'Low', color: 'bg-gray-100 text-gray-800' },
-    medium: { label: 'Medium', color: 'bg-blue-100 text-blue-800' },
-    high: { label: 'High', color: 'bg-yellow-100 text-yellow-800' },
-    urgent: { label: 'Urgent', color: 'bg-orange-100 text-orange-800' },
-    critical: { label: 'Critical', color: 'bg-red-100 text-red-800' },
-};
-
-const config = computed(() => {
-    const map = escDark.value ? darkConfig : lightConfig;
-    const fallback = escDark.value
-        ? { label: props.priority, color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' }
-        : { label: props.priority, color: 'bg-gray-100 text-gray-800' };
-    return map[props.priority] || fallback;
-});
-</script>
-
-<template>
-    <span :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', config.color]">
-        {{ config.label }}
-    </span>
-</template>
+<script setup>
+import { inject, computed } from 'vue';
+
+const props = defineProps({
+    priority: { type: String, required: true },
+});
+
+const escDark = inject('esc-dark', computed(() => false));
+
+const darkConfig = {
+    low: { label: 'Low', color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' },
+    medium: { label: 'Medium', color: 'bg-cyan-500/10 text-white ring-1 ring-cyan-500/20' },
+    high: { label: 'High', color: 'bg-amber-500/10 text-amber-400 ring-1 ring-amber-500/20' },
+    urgent: { label: 'Urgent', color: 'bg-orange-500/10 text-orange-400 ring-1 ring-orange-500/20' },
+    critical: { label: 'Critical', color: 'bg-rose-500/10 text-rose-300 ring-1 ring-rose-500/20' },
+};
+
+const lightConfig = {
+    low: { label: 'Low', color: 'bg-gray-100 text-gray-800' },
+    medium: { label: 'Medium', color: 'bg-blue-100 text-blue-800' },
+    high: { label: 'High', color: 'bg-yellow-100 text-yellow-800' },
+    urgent: { label: 'Urgent', color: 'bg-orange-100 text-orange-800' },
+    critical: { label: 'Critical', color: 'bg-red-100 text-red-800' },
+};
+
+const config = computed(() => {
+    const map = escDark.value ? darkConfig : lightConfig;
+    const fallback = escDark.value
+        ? { label: props.priority, color: 'bg-gray-500/10 text-gray-400 ring-1 ring-gray-500/20' }
+        : { label: props.priority, color: 'bg-gray-100 text-gray-800' };
+    return map[props.priority] || fallback;
+});
+</script>
+
+<template>
+    <span :class="['inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium', config.color]">
+        {{ config.label }}
+    </span>
+</template>

package/src/components/ReplyComposer.vue

@@ -1,159 +1,159 @@
-<script setup>
-import { ref, computed, inject } from 'vue';
-import { router } from '@inertiajs/vue3';
-import FileDropzone from './FileDropzone.vue';
-
-const props = defineProps({
-    action: { type: String, required: true },
-    cannedResponses: { type: Array, default: () => [] },
-    allowNotes: { type: Boolean, default: false },
-    placeholder: { type: String, default: 'Type your reply...' },
-    submitLabel: { type: String, default: null },
-});
-
-const emit = defineEmits(['submit']);
-const escDark = inject('esc-dark', computed(() => false));
-
-const body = ref('');
-const isNote = ref(false);
-const files = ref([]);
-const submitting = ref(false);
-
-function insertCanned(response) {
-    body.value += response.body;
-}
-
-function handleFiles(newFiles) {
-    files.value = [...files.value, ...newFiles];
-}
-
-function removeFile(index) {
-    files.value.splice(index, 1);
-}
-
-function submit() {
-    if (!body.value.trim() || submitting.value) return;
-    submitting.value = true;
-
-    const payload = {
-        body: body.value,
-        is_internal_note: isNote.value,
-        attachments: files.value,
-    };
-
-    emit('submit', payload);
-
-    router.post(props.action, payload, {
-        preserveScroll: true,
-        onSuccess: () => {
-            body.value = '';
-            files.value = [];
-            isNote.value = false;
-        },
-        onFinish: () => {
-            submitting.value = false;
-        },
-    });
-}
-
-const buttonLabel = computed(() => {
-    if (props.submitLabel) return props.submitLabel;
-    return isNote.value ? 'Add Note' : 'Send Reply';
-});
-</script>
-
-<template>
-    <!-- Dark mode -->
-    <div v-if="escDark" class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4">
-        <div v-if="allowNotes" class="mb-3 flex gap-2">
-            <button @click="isNote = false"
-                    :class="['rounded-lg px-3 py-1.5 text-sm font-medium transition-colors', !isNote ? 'bg-cyan-500/15 text-white ring-1 ring-cyan-500/20' : 'text-gray-400 hover:bg-white/[0.04]']">
-                Reply
-            </button>
-            <button @click="isNote = true"
-                    :class="['rounded-lg px-3 py-1.5 text-sm font-medium transition-colors', isNote ? 'bg-amber-500/15 text-amber-400 ring-1 ring-amber-500/20' : 'text-gray-400 hover:bg-white/[0.04]']">
-                Internal Note
-            </button>
-        </div>
-
-        <div v-if="isNote" class="mb-2 rounded-lg bg-amber-500/10 px-3 py-1.5 text-xs text-amber-400 ring-1 ring-amber-500/20">
-            This note is only visible to agents.
-        </div>
-
-        <textarea v-model="body" rows="4" :placeholder="placeholder"
-                  class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"></textarea>
-
-        <FileDropzone @files="handleFiles" class="mt-2" />
-
-        <div v-if="files.length" class="mt-2 space-y-1">
-            <div v-for="(file, i) in files" :key="i" class="flex items-center gap-2 text-sm text-gray-400">
-                <span>{{ file.name }}</span>
-                <button @click="removeFile(i)" class="text-rose-400 hover:text-rose-300">&times;</button>
-            </div>
-        </div>
-
-        <div class="mt-3 flex items-center justify-between">
-            <div v-if="cannedResponses.length">
-                <select @change="insertCanned(cannedResponses[$event.target.value]); $event.target.value = ''"
-                        class="rounded-lg border border-white/10 bg-gray-900 px-2 py-1 text-xs text-gray-400">
-                    <option value="">Canned responses...</option>
-                    <option v-for="(cr, i) in cannedResponses" :key="cr.id" :value="i">{{ cr.title }}</option>
-                </select>
-            </div>
-            <div v-else></div>
-            <button @click="submit" :disabled="!body.trim() || submitting"
-                    :class="['rounded-lg px-4 py-2 text-sm font-medium text-white transition-all',
-                             isNote ? 'bg-amber-500 hover:bg-amber-400' : 'bg-gradient-to-r from-cyan-500 to-violet-500 hover:from-cyan-400 hover:to-violet-400',
-                             (!body.trim() || submitting) && 'cursor-not-allowed opacity-40']">
-                {{ buttonLabel }}
-            </button>
-        </div>
-    </div>
-
-    <!-- Light mode -->
-    <div v-else class="rounded-lg border border-gray-200 bg-white p-4">
-        <div v-if="allowNotes" class="mb-3 flex gap-2">
-            <button @click="isNote = false"
-                    :class="['rounded-md px-3 py-1 text-sm font-medium', !isNote ? 'bg-blue-100 text-blue-700' : 'text-gray-500 hover:bg-gray-100']">
-                Reply
-            </button>
-            <button @click="isNote = true"
-                    :class="['rounded-md px-3 py-1 text-sm font-medium', isNote ? 'bg-yellow-100 text-yellow-700' : 'text-gray-500 hover:bg-gray-100']">
-                Internal Note
-            </button>
-        </div>
-
-        <div v-if="isNote" class="mb-2 rounded bg-yellow-50 px-3 py-1.5 text-xs text-yellow-700">
-            This note is only visible to agents.
-        </div>
-
-        <textarea v-model="body" rows="4" :placeholder="placeholder"
-                  class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"></textarea>
-
-        <FileDropzone @files="handleFiles" class="mt-2" />
-
-        <div v-if="files.length" class="mt-2 space-y-1">
-            <div v-for="(file, i) in files" :key="i" class="flex items-center gap-2 text-sm text-gray-600">
-                <span>{{ file.name }}</span>
-                <button @click="removeFile(i)" class="text-red-500 hover:text-red-700">&times;</button>
-            </div>
-        </div>
-
-        <div class="mt-3 flex items-center justify-between">
-            <div v-if="cannedResponses.length">
-                <select @change="insertCanned(cannedResponses[$event.target.value]); $event.target.value = ''"
-                        class="rounded border border-gray-300 px-2 py-1 text-xs text-gray-600">
-                    <option value="">Canned responses...</option>
-                    <option v-for="(cr, i) in cannedResponses" :key="cr.id" :value="i">{{ cr.title }}</option>
-                </select>
-            </div>
-            <div v-else></div>
-            <button @click="submit" :disabled="!body.trim() || submitting"
-                    :class="['rounded-md px-4 py-2 text-sm font-medium text-white',
-                             isNote ? 'bg-yellow-500 hover:bg-yellow-600' : 'bg-blue-600 hover:bg-blue-700',
-                             (!body.trim() || submitting) && 'cursor-not-allowed opacity-50']">
-                {{ buttonLabel }}
-            </button>
-        </div>
-    </div>
-</template>
+<script setup>
+import { ref, computed, inject } from 'vue';
+import { router } from '@inertiajs/vue3';
+import FileDropzone from './FileDropzone.vue';
+
+const props = defineProps({
+    action: { type: String, required: true },
+    cannedResponses: { type: Array, default: () => [] },
+    allowNotes: { type: Boolean, default: false },
+    placeholder: { type: String, default: 'Type your reply...' },
+    submitLabel: { type: String, default: null },
+});
+
+const emit = defineEmits(['submit']);
+const escDark = inject('esc-dark', computed(() => false));
+
+const body = ref('');
+const isNote = ref(false);
+const files = ref([]);
+const submitting = ref(false);
+
+function insertCanned(response) {
+    body.value += response.body;
+}
+
+function handleFiles(newFiles) {
+    files.value = [...files.value, ...newFiles];
+}
+
+function removeFile(index) {
+    files.value.splice(index, 1);
+}
+
+function submit() {
+    if (!body.value.trim() || submitting.value) return;
+    submitting.value = true;
+
+    const payload = {
+        body: body.value,
+        is_internal_note: isNote.value,
+        attachments: files.value,
+    };
+
+    emit('submit', payload);
+
+    router.post(props.action, payload, {
+        preserveScroll: true,
+        onSuccess: () => {
+            body.value = '';
+            files.value = [];
+            isNote.value = false;
+        },
+        onFinish: () => {
+            submitting.value = false;
+        },
+    });
+}
+
+const buttonLabel = computed(() => {
+    if (props.submitLabel) return props.submitLabel;
+    return isNote.value ? 'Add Note' : 'Send Reply';
+});
+</script>
+
+<template>
+    <!-- Dark mode -->
+    <div v-if="escDark" class="rounded-xl border border-white/[0.06] bg-neutral-900/60 p-4">
+        <div v-if="allowNotes" class="mb-3 flex gap-2">
+            <button @click="isNote = false"
+                    :class="['rounded-lg px-3 py-1.5 text-sm font-medium transition-colors', !isNote ? 'bg-cyan-500/15 text-white ring-1 ring-cyan-500/20' : 'text-gray-400 hover:bg-white/[0.04]']">
+                Reply
+            </button>
+            <button @click="isNote = true"
+                    :class="['rounded-lg px-3 py-1.5 text-sm font-medium transition-colors', isNote ? 'bg-amber-500/15 text-amber-400 ring-1 ring-amber-500/20' : 'text-gray-400 hover:bg-white/[0.04]']">
+                Internal Note
+            </button>
+        </div>
+
+        <div v-if="isNote" class="mb-2 rounded-lg bg-amber-500/10 px-3 py-1.5 text-xs text-amber-400 ring-1 ring-amber-500/20">
+            This note is only visible to agents.
+        </div>
+
+        <textarea v-model="body" rows="4" :placeholder="placeholder"
+                  class="w-full rounded-lg border border-white/10 bg-neutral-950 px-3 py-2 text-sm text-gray-200 placeholder-gray-500 focus:border-white/20 focus:outline-none focus:ring-1 focus:ring-white/10"></textarea>
+
+        <FileDropzone @files="handleFiles" class="mt-2" />
+
+        <div v-if="files.length" class="mt-2 space-y-1">
+            <div v-for="(file, i) in files" :key="i" class="flex items-center gap-2 text-sm text-gray-400">
+                <span>{{ file.name }}</span>
+                <button @click="removeFile(i)" class="text-rose-400 hover:text-rose-300">&times;</button>
+            </div>
+        </div>
+
+        <div class="mt-3 flex items-center justify-between">
+            <div v-if="cannedResponses.length">
+                <select @change="insertCanned(cannedResponses[$event.target.value]); $event.target.value = ''"
+                        class="rounded-lg border border-white/10 bg-gray-900 px-2 py-1 text-xs text-gray-400">
+                    <option value="">Canned responses...</option>
+                    <option v-for="(cr, i) in cannedResponses" :key="cr.id" :value="i">{{ cr.title }}</option>
+                </select>
+            </div>
+            <div v-else></div>
+            <button @click="submit" :disabled="!body.trim() || submitting"
+                    :class="['rounded-lg px-4 py-2 text-sm font-medium text-white transition-all',
+                             isNote ? 'bg-amber-500 hover:bg-amber-400' : 'bg-gradient-to-r from-cyan-500 to-violet-500 hover:from-cyan-400 hover:to-violet-400',
+                             (!body.trim() || submitting) && 'cursor-not-allowed opacity-40']">
+                {{ buttonLabel }}
+            </button>
+        </div>
+    </div>
+
+    <!-- Light mode -->
+    <div v-else class="rounded-lg border border-gray-200 bg-white p-4">
+        <div v-if="allowNotes" class="mb-3 flex gap-2">
+            <button @click="isNote = false"
+                    :class="['rounded-md px-3 py-1 text-sm font-medium', !isNote ? 'bg-blue-100 text-blue-700' : 'text-gray-500 hover:bg-gray-100']">
+                Reply
+            </button>
+            <button @click="isNote = true"
+                    :class="['rounded-md px-3 py-1 text-sm font-medium', isNote ? 'bg-yellow-100 text-yellow-700' : 'text-gray-500 hover:bg-gray-100']">
+                Internal Note
+            </button>
+        </div>
+
+        <div v-if="isNote" class="mb-2 rounded bg-yellow-50 px-3 py-1.5 text-xs text-yellow-700">
+            This note is only visible to agents.
+        </div>
+
+        <textarea v-model="body" rows="4" :placeholder="placeholder"
+                  class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"></textarea>
+
+        <FileDropzone @files="handleFiles" class="mt-2" />
+
+        <div v-if="files.length" class="mt-2 space-y-1">
+            <div v-for="(file, i) in files" :key="i" class="flex items-center gap-2 text-sm text-gray-600">
+                <span>{{ file.name }}</span>
+                <button @click="removeFile(i)" class="text-red-500 hover:text-red-700">&times;</button>
+            </div>
+        </div>
+
+        <div class="mt-3 flex items-center justify-between">
+            <div v-if="cannedResponses.length">
+                <select @change="insertCanned(cannedResponses[$event.target.value]); $event.target.value = ''"
+                        class="rounded border border-gray-300 px-2 py-1 text-xs text-gray-600">
+                    <option value="">Canned responses...</option>
+                    <option v-for="(cr, i) in cannedResponses" :key="cr.id" :value="i">{{ cr.title }}</option>
+                </select>
+            </div>
+            <div v-else></div>
+            <button @click="submit" :disabled="!body.trim() || submitting"
+                    :class="['rounded-md px-4 py-2 text-sm font-medium text-white',
+                             isNote ? 'bg-yellow-500 hover:bg-yellow-600' : 'bg-blue-600 hover:bg-blue-700',
+                             (!body.trim() || submitting) && 'cursor-not-allowed opacity-50']">
+                {{ buttonLabel }}
+            </button>
+        </div>
+    </div>
+</template>

package/src/components/ReplyThread.vue

@@ -2,6 +2,8 @@
 import { inject, computed } from 'vue';
 import { router } from '@inertiajs/vue3';
 import AttachmentList from './AttachmentList.vue';
+import { sanitizeHtml } from '../utils/sanitizeHtml';
+import { useI18n } from '../composables/useI18n';
 
 const props = defineProps({
     replies: { type: Array, required: true },
@@ -12,6 +14,7 @@ const props = defineProps({
 });
 
 const escDark = inject('esc-dark', computed(() => false));
+const { t } = useI18n();
 
 function formatDate(date) {
     return new Date(date).toLocaleString();
@@ -31,14 +34,14 @@ function togglePin(reply) {
                  : (reply.is_internal_note ? 'border-yellow-200 bg-yellow-50' : 'border-gray-200 bg-white')]">
             <div class="mb-2 flex items-center justify-between">
                 <div class="flex items-center gap-2">
-                    <span :class="['font-medium', escDark ? 'text-gray-200' : 'text-gray-900']">{{ reply.author?.name || 'Unknown' }}</span>
+                    <span :class="['font-medium', escDark ? 'text-gray-200' : 'text-gray-900']">{{ reply.author?.name || t('ticket.unknown') }}</span>
                     <span v-if="reply.is_internal_note"
                           :class="['rounded px-1.5 py-0.5 text-xs font-medium', escDark ? 'bg-amber-500/15 text-amber-400' : 'bg-yellow-200 text-yellow-800']">
-                        Internal Note
+                        {{ t('reply.internal_note') }}
                     </span>
                     <span v-if="reply.is_pinned"
                           :class="['rounded px-1.5 py-0.5 text-xs font-medium', escDark ? 'bg-cyan-500/15 text-cyan-400' : 'bg-blue-100 text-blue-700']">
-                        Pinned
+                        {{ t('reply.pinned') }}
                     </span>
                 </div>
                 <div class="flex items-center gap-2">
@@ -47,14 +50,14 @@ function togglePin(reply) {
                                      escDark
                                          ? (reply.is_pinned ? 'bg-cyan-500/15 text-cyan-400 hover:bg-cyan-500/25' : 'text-neutral-500 hover:bg-white/[0.06] hover:text-neutral-300')
                                          : (reply.is_pinned ? 'bg-blue-100 text-blue-700 hover:bg-blue-200' : 'text-gray-400 hover:bg-gray-100 hover:text-gray-600')]">
-                        {{ reply.is_pinned ? 'Unpin' : 'Pin' }}
+                        {{ reply.is_pinned ? t('reply.unpin') : t('reply.pin') }}
                     </button>
                     <span :class="['text-xs', escDark ? 'text-gray-500' : 'text-gray-500']">{{ formatDate(reply.created_at) }}</span>
                 </div>
             </div>
-            <div :class="['prose prose-sm max-w-none', escDark ? 'prose-invert text-gray-300' : 'text-gray-700']" v-html="reply.body"></div>
+            <div :class="['prose prose-sm max-w-none', escDark ? 'prose-invert text-gray-300' : 'text-gray-700']" v-html="sanitizeHtml(reply.body)"></div>
             <AttachmentList v-if="reply.attachments?.length" :attachments="reply.attachments" class="mt-3" />
         </div>
-        <div v-if="!replies?.length" :class="['py-8 text-center text-sm', escDark ? 'text-gray-500' : 'text-gray-500']">No replies yet.</div>
+        <div v-if="!replies?.length" :class="['py-8 text-center text-sm', escDark ? 'text-gray-500' : 'text-gray-500']">{{ t('ticket.no_replies') }}</div>
     </div>
 </template>

package/src/components/SlaTimer.vue

@@ -1,49 +1,49 @@
-<script setup>
-import { computed, inject } from 'vue';
-
-const props = defineProps({
-    dueAt: { type: String, default: null },
-    breached: { type: Boolean, default: false },
-    label: { type: String, default: 'Due' },
-});
-
-const dark = inject('esc-dark', computed(() => false));
-
-const timeRemaining = computed(() => {
-    if (!props.dueAt) return null;
-    const now = new Date();
-    const due = new Date(props.dueAt);
-    const diff = due - now;
-    if (diff <= 0) return { text: 'Overdue', overdue: true };
-
-    const hours = Math.floor(diff / 3600000);
-    const minutes = Math.floor((diff % 3600000) / 60000);
-    if (hours > 24) {
-        const days = Math.floor(hours / 24);
-        return { text: `${days}d ${hours % 24}h`, overdue: false };
-    }
-    return { text: `${hours}h ${minutes}m`, overdue: false };
-});
-
-const statusClass = computed(() => {
-    if (props.breached || timeRemaining.value?.overdue) {
-        return dark ? 'border-rose-500/20 bg-rose-500/10 text-rose-400' : 'border-red-300 bg-red-50 text-red-700';
-    }
-    const due = new Date(props.dueAt);
-    const hoursLeft = (due - new Date()) / 3600000;
-    if (hoursLeft < 2) {
-        return dark ? 'border-amber-500/20 bg-amber-500/10 text-amber-400' : 'border-yellow-300 bg-yellow-50 text-yellow-700';
-    }
-    return dark ? 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400' : 'border-green-300 bg-green-50 text-green-700';
-});
-</script>
-
-<template>
-    <div v-if="dueAt" :class="['rounded-lg border px-3 py-2 text-sm', statusClass]">
-        <div class="font-medium">{{ label }}</div>
-        <div class="text-xs">
-            <span v-if="breached">SLA Breached</span>
-            <span v-else>{{ timeRemaining?.text }}</span>
-        </div>
-    </div>
-</template>
+<script setup>
+import { computed, inject } from 'vue';
+
+const props = defineProps({
+    dueAt: { type: String, default: null },
+    breached: { type: Boolean, default: false },
+    label: { type: String, default: 'Due' },
+});
+
+const dark = inject('esc-dark', computed(() => false));
+
+const timeRemaining = computed(() => {
+    if (!props.dueAt) return null;
+    const now = new Date();
+    const due = new Date(props.dueAt);
+    const diff = due - now;
+    if (diff <= 0) return { text: 'Overdue', overdue: true };
+
+    const hours = Math.floor(diff / 3600000);
+    const minutes = Math.floor((diff % 3600000) / 60000);
+    if (hours > 24) {
+        const days = Math.floor(hours / 24);
+        return { text: `${days}d ${hours % 24}h`, overdue: false };
+    }
+    return { text: `${hours}h ${minutes}m`, overdue: false };
+});
+
+const statusClass = computed(() => {
+    if (props.breached || timeRemaining.value?.overdue) {
+        return dark ? 'border-rose-500/20 bg-rose-500/10 text-rose-400' : 'border-red-300 bg-red-50 text-red-700';
+    }
+    const due = new Date(props.dueAt);
+    const hoursLeft = (due - new Date()) / 3600000;
+    if (hoursLeft < 2) {
+        return dark ? 'border-amber-500/20 bg-amber-500/10 text-amber-400' : 'border-yellow-300 bg-yellow-50 text-yellow-700';
+    }
+    return dark ? 'border-emerald-500/20 bg-emerald-500/10 text-emerald-400' : 'border-green-300 bg-green-50 text-green-700';
+});
+</script>
+
+<template>
+    <div v-if="dueAt" :class="['rounded-lg border px-3 py-2 text-sm', statusClass]">
+        <div class="font-medium">{{ label }}</div>
+        <div class="text-xs">
+            <span v-if="breached">SLA Breached</span>
+            <span v-else>{{ timeRemaining?.text }}</span>
+        </div>
+    </div>
+</template>