feat: initial dashboard-ticketing scaffold

resources/js/Pages/Ticketing/Create.vue

@@ -0,0 +1,112 @@
+<template>
+  <AppLayout title="New Ticket">
+    <div class="p-6 max-w-2xl">
+      <div class="flex items-center gap-3 mb-6">
+        <Link :href="route('ticketing.index')" class="text-sm text-gray-500 hover:underline">← Tickets</Link>
+        <h1 class="text-2xl font-bold text-gray-900">Submit a Ticket</h1>
+      </div>
+
+      <form @submit.prevent="submit" class="bg-white rounded-xl shadow p-6 space-y-5">
+        <!-- Title -->
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Title <span class="text-red-500">*</span></label>
+          <input
+            v-model="form.title"
+            type="text"
+            maxlength="255"
+            placeholder="Brief summary of the issue"
+            class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+            :class="{ 'border-red-400': errors.title }"
+          />
+          <p v-if="errors.title" class="mt-1 text-xs text-red-500">{{ errors.title }}</p>
+        </div>
+
+        <!-- Description -->
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Description <span class="text-red-500">*</span></label>
+          <textarea
+            v-model="form.description"
+            rows="5"
+            placeholder="Describe the issue in detail…"
+            class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+            :class="{ 'border-red-400': errors.description }"
+          />
+          <p v-if="errors.description" class="mt-1 text-xs text-red-500">{{ errors.description }}</p>
+        </div>
+
+        <!-- Category + Priority -->
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Category <span class="text-red-500">*</span></label>
+            <select
+              v-model="form.category"
+              class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+              :class="{ 'border-red-400': errors.category }"
+            >
+              <option value="">Select category</option>
+              <option value="IT">IT</option>
+              <option value="Facilities">Facilities</option>
+              <option value="HR">HR</option>
+              <option value="Other">Other</option>
+            </select>
+            <p v-if="errors.category" class="mt-1 text-xs text-red-500">{{ errors.category }}</p>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Priority <span class="text-red-500">*</span></label>
+            <select
+              v-model="form.priority"
+              class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+              :class="{ 'border-red-400': errors.priority }"
+            >
+              <option value="">Select priority</option>
+              <option value="low">Low</option>
+              <option value="medium">Medium</option>
+              <option value="high">High</option>
+              <option value="urgent">Urgent</option>
+            </select>
+            <p v-if="errors.priority" class="mt-1 text-xs text-red-500">{{ errors.priority }}</p>
+          </div>
+        </div>
+
+        <div class="flex justify-end gap-3 pt-2">
+          <Link :href="route('ticketing.index')" class="px-4 py-2 text-sm text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
+            Cancel
+          </Link>
+          <button
+            type="submit"
+            :disabled="processing"
+            class="px-5 py-2 text-sm text-white rounded-lg transition disabled:opacity-50"
+            style="background-color: var(--color-sidebar-active-bg)"
+          >
+            {{ processing ? 'Submitting…' : 'Submit Ticket' }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Link, useForm } from '@inertiajs/vue3'
+import AppLayout from '@/Layouts/AppLayout.vue'
+
+const form = useForm({
+  title:       '',
+  description: '',
+  category:    '',
+  priority:    'medium',
+})
+
+const processing = ref(false)
+const errors = ref({})
+
+function submit() {
+  processing.value = true
+  form.post(route('ticketing.store'), {
+    onError: (e) => { errors.value = e },
+    onFinish: () => { processing.value = false },
+  })
+}
+</script>

resources/js/Pages/Ticketing/Edit.vue

@@ -0,0 +1,147 @@
+<template>
+  <AppLayout :title="`Edit Ticket #${ticket.id}`">
+    <div class="p-6 max-w-2xl">
+      <div class="flex items-center gap-3 mb-6">
+        <Link :href="route('ticketing.show', ticket.id)" class="text-sm text-gray-500 hover:underline">← Ticket #{{ ticket.id }}</Link>
+        <h1 class="text-2xl font-bold text-gray-900">Edit Ticket</h1>
+      </div>
+
+      <form @submit.prevent="submit" class="bg-white rounded-xl shadow p-6 space-y-5">
+        <!-- Title -->
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Title <span class="text-red-500">*</span></label>
+          <input
+            v-model="form.title"
+            type="text"
+            maxlength="255"
+            class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+            :class="{ 'border-red-400': errors.title }"
+          />
+          <p v-if="errors.title" class="mt-1 text-xs text-red-500">{{ errors.title }}</p>
+        </div>
+
+        <!-- Description -->
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Description <span class="text-red-500">*</span></label>
+          <textarea
+            v-model="form.description"
+            rows="5"
+            class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+            :class="{ 'border-red-400': errors.description }"
+          />
+          <p v-if="errors.description" class="mt-1 text-xs text-red-500">{{ errors.description }}</p>
+        </div>
+
+        <!-- Category + Priority -->
+        <div class="grid grid-cols-2 gap-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Category <span class="text-red-500">*</span></label>
+            <select
+              v-model="form.category"
+              class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+              :class="{ 'border-red-400': errors.category }"
+            >
+              <option value="IT">IT</option>
+              <option value="Facilities">Facilities</option>
+              <option value="HR">HR</option>
+              <option value="Other">Other</option>
+            </select>
+            <p v-if="errors.category" class="mt-1 text-xs text-red-500">{{ errors.category }}</p>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Priority <span class="text-red-500">*</span></label>
+            <select
+              v-model="form.priority"
+              class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+              :class="{ 'border-red-400': errors.priority }"
+            >
+              <option value="low">Low</option>
+              <option value="medium">Medium</option>
+              <option value="high">High</option>
+              <option value="urgent">Urgent</option>
+            </select>
+            <p v-if="errors.priority" class="mt-1 text-xs text-red-500">{{ errors.priority }}</p>
+          </div>
+        </div>
+
+        <!-- Admin-only: Status + Assigned To -->
+        <template v-if="isAdmin">
+          <div class="grid grid-cols-2 gap-4">
+            <div>
+              <label class="block text-sm font-medium text-gray-700 mb-1">Status</label>
+              <select
+                v-model="form.status"
+                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+              >
+                <option value="open">Open</option>
+                <option value="in_progress">In Progress</option>
+                <option value="resolved">Resolved</option>
+                <option value="closed">Closed</option>
+              </select>
+            </div>
+          </div>
+        </template>
+
+        <div class="flex justify-between items-center pt-2">
+          <button
+            type="button"
+            @click="destroy"
+            class="px-4 py-2 text-sm text-red-600 hover:text-red-800 transition"
+          >
+            Delete Ticket
+          </button>
+          <div class="flex gap-3">
+            <Link :href="route('ticketing.show', ticket.id)" class="px-4 py-2 text-sm text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
+              Cancel
+            </Link>
+            <button
+              type="submit"
+              :disabled="processing"
+              class="px-5 py-2 text-sm text-white rounded-lg transition disabled:opacity-50"
+              style="background-color: var(--color-sidebar-active-bg)"
+            >
+              {{ processing ? 'Saving…' : 'Save Changes' }}
+            </button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Link, useForm, router } from '@inertiajs/vue3'
+import AppLayout from '@/Layouts/AppLayout.vue'
+
+const props = defineProps({
+  ticket:  Object,
+  isAdmin: { type: Boolean, default: false },
+})
+
+const form = useForm({
+  title:       props.ticket.title,
+  description: props.ticket.description,
+  category:    props.ticket.category,
+  priority:    props.ticket.priority,
+  status:      props.ticket.status,
+  assigned_to: props.ticket.assigned_to ?? '',
+})
+
+const processing = ref(false)
+const errors = ref({})
+
+function submit() {
+  processing.value = true
+  form.put(route('ticketing.update', props.ticket.id), {
+    onError:  (e) => { errors.value = e },
+    onFinish: () => { processing.value = false },
+  })
+}
+
+function destroy() {
+  if (!confirm('Delete this ticket? This cannot be undone.')) return
+  router.delete(route('ticketing.destroy', props.ticket.id))
+}
+</script>

resources/js/Pages/Ticketing/Index.vue

@@ -0,0 +1,197 @@
+<template>
+  <AppLayout title="Ticketing">
+    <div class="p-6">
+      <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-gray-900">Tickets</h1>
+        <Link
+          :href="route('ticketing.create')"
+          class="inline-flex items-center px-4 py-2 text-white rounded-lg transition"
+          style="background-color: var(--color-sidebar-active-bg)"
+        >
+          + New Ticket
+        </Link>
+      </div>
+
+      <!-- Filters -->
+      <div class="mb-4 flex flex-wrap items-center gap-3">
+        <div class="relative flex-1 min-w-[200px] max-w-md">
+          <input
+            v-model="searchInput"
+            type="text"
+            placeholder="Search tickets…"
+            class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+            @keydown.enter="applyFilters"
+          />
+        </div>
+
+        <select v-model="filters.status" @change="applyFilters" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400">
+          <option value="">All Statuses</option>
+          <option value="open">Open</option>
+          <option value="in_progress">In Progress</option>
+          <option value="resolved">Resolved</option>
+          <option value="closed">Closed</option>
+        </select>
+
+        <select v-model="filters.priority" @change="applyFilters" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400">
+          <option value="">All Priorities</option>
+          <option value="low">Low</option>
+          <option value="medium">Medium</option>
+          <option value="high">High</option>
+          <option value="urgent">Urgent</option>
+        </select>
+
+        <select v-model="filters.category" @change="applyFilters" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400">
+          <option value="">All Categories</option>
+          <option value="IT">IT</option>
+          <option value="Facilities">Facilities</option>
+          <option value="HR">HR</option>
+          <option value="Other">Other</option>
+        </select>
+
+        <button
+          @click="applyFilters"
+          class="px-4 py-2 text-sm text-white rounded-lg transition"
+          style="background-color: var(--color-sidebar-active-bg)"
+        >Search</button>
+
+        <button
+          v-if="hasActiveFilters"
+          @click="clearFilters"
+          class="px-4 py-2 text-sm text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition"
+        >✕ Clear</button>
+      </div>
+
+      <div class="bg-white rounded-xl shadow overflow-hidden">
+        <div class="overflow-x-auto">
+          <table class="w-full text-sm">
+            <thead class="bg-gray-50 text-gray-600 uppercase text-xs">
+              <tr>
+                <th class="px-6 py-3 text-left">#</th>
+                <th class="px-6 py-3 text-left">Title</th>
+                <th class="px-6 py-3 text-left">Category</th>
+                <th class="px-6 py-3 text-left">Priority</th>
+                <th class="px-6 py-3 text-left">Status</th>
+                <th v-if="isAdmin" class="px-6 py-3 text-left">Submitter</th>
+                <th class="px-6 py-3 text-left">Created</th>
+                <th class="px-6 py-3"></th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100">
+              <tr v-if="tickets.data.length === 0">
+                <td :colspan="isAdmin ? 8 : 7" class="px-6 py-10 text-center text-gray-400">
+                  No tickets found.
+                </td>
+              </tr>
+              <tr
+                v-for="ticket in tickets.data"
+                :key="ticket.id"
+                class="hover:bg-gray-50 transition"
+              >
+                <td class="px-6 py-4 text-gray-500">{{ ticket.id }}</td>
+                <td class="px-6 py-4 font-medium text-gray-900 max-w-xs truncate">{{ ticket.title }}</td>
+                <td class="px-6 py-4 text-gray-600">{{ ticket.category }}</td>
+                <td class="px-6 py-4">
+                  <span class="px-2 py-1 rounded text-xs font-medium" :class="priorityClass(ticket.priority)">
+                    {{ ticket.priority }}
+                  </span>
+                </td>
+                <td class="px-6 py-4">
+                  <span class="px-2 py-1 rounded text-xs font-medium" :class="statusClass(ticket.status)">
+                    {{ formatStatus(ticket.status) }}
+                  </span>
+                </td>
+                <td v-if="isAdmin" class="px-6 py-4 text-gray-600">{{ ticket.submitter?.name ?? '—' }}</td>
+                <td class="px-6 py-4 text-gray-500">{{ formatDate(ticket.created_at) }}</td>
+                <td class="px-6 py-4 text-right space-x-3">
+                  <Link :href="route('ticketing.show', ticket.id)" class="text-xs text-indigo-600 hover:underline">View</Link>
+                  <Link :href="route('ticketing.edit', ticket.id)" class="text-xs text-gray-500 hover:underline">Edit</Link>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- Pagination -->
+      <div v-if="tickets.last_page > 1" class="mt-4 flex items-center justify-between">
+        <p class="text-sm text-gray-600">
+          Showing {{ tickets.from }}–{{ tickets.to }} of {{ tickets.total }} tickets
+        </p>
+        <div class="flex gap-2">
+          <Link v-if="tickets.prev_page_url" :href="tickets.prev_page_url" class="px-3 py-1 text-sm rounded border border-gray-300 hover:bg-gray-50 transition">← Prev</Link>
+          <Link v-if="tickets.next_page_url" :href="tickets.next_page_url" class="px-3 py-1 text-sm rounded border border-gray-300 hover:bg-gray-50 transition">Next →</Link>
+        </div>
+      </div>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { Link, router } from '@inertiajs/vue3'
+import AppLayout from '@/Layouts/AppLayout.vue'
+
+const props = defineProps({
+  tickets:        Object,
+  search:         { type: String, default: '' },
+  statusFilter:   { type: String, default: '' },
+  priorityFilter: { type: String, default: '' },
+  categoryFilter: { type: String, default: '' },
+  isAdmin:        { type: Boolean, default: false },
+})
+
+const searchInput = ref(props.search)
+const filters = ref({
+  status:   props.statusFilter,
+  priority: props.priorityFilter,
+  category: props.categoryFilter,
+})
+
+const hasActiveFilters = computed(() =>
+  searchInput.value || filters.value.status || filters.value.priority || filters.value.category
+)
+
+function applyFilters() {
+  router.get(route('ticketing.index'), {
+    search:   searchInput.value,
+    status:   filters.value.status,
+    priority: filters.value.priority,
+    category: filters.value.category,
+  }, { preserveState: true, replace: true })
+}
+
+function clearFilters() {
+  searchInput.value = ''
+  filters.value = { status: '', priority: '', category: '' }
+  router.get(route('ticketing.index'), {}, { preserveState: true, replace: true })
+}
+
+function formatDate(d) {
+  return new Date(d).toLocaleDateString('en-CA')
+}
+
+function formatStatus(s) {
+  const map = { open: 'Open', in_progress: 'In Progress', resolved: 'Resolved', closed: 'Closed' }
+  return map[s] ?? s
+}
+
+function statusClass(s) {
+  const map = {
+    open:        'bg-blue-100 text-blue-700',
+    in_progress: 'bg-yellow-100 text-yellow-700',
+    resolved:    'bg-green-100 text-green-700',
+    closed:      'bg-gray-100 text-gray-600',
+  }
+  return map[s] ?? 'bg-gray-100 text-gray-600'
+}
+
+function priorityClass(p) {
+  const map = {
+    low:    'bg-gray-100 text-gray-600',
+    medium: 'bg-blue-100 text-blue-700',
+    high:   'bg-orange-100 text-orange-700',
+    urgent: 'bg-red-100 text-red-700',
+  }
+  return map[p] ?? 'bg-gray-100 text-gray-600'
+}
+</script>

resources/js/Pages/Ticketing/Show.vue

@@ -0,0 +1,156 @@
+<template>
+  <AppLayout :title="`Ticket #${ticket.id}`">
+    <div class="p-6 max-w-3xl">
+      <div class="flex items-center gap-3 mb-6">
+        <Link :href="route('ticketing.index')" class="text-sm text-gray-500 hover:underline">← Tickets</Link>
+        <h1 class="text-2xl font-bold text-gray-900">Ticket #{{ ticket.id }}</h1>
+        <span class="px-2 py-1 rounded text-xs font-medium" :class="statusClass(ticket.status)">
+          {{ formatStatus(ticket.status) }}
+        </span>
+        <span class="px-2 py-1 rounded text-xs font-medium" :class="priorityClass(ticket.priority)">
+          {{ ticket.priority }}
+        </span>
+      </div>
+
+      <!-- Ticket Details -->
+      <div class="bg-white rounded-xl shadow p-6 mb-6">
+        <div class="flex items-start justify-between mb-4">
+          <h2 class="text-lg font-semibold text-gray-900">{{ ticket.title }}</h2>
+          <Link :href="route('ticketing.edit', ticket.id)" class="text-sm text-indigo-600 hover:underline">Edit</Link>
+        </div>
+
+        <p class="text-sm text-gray-700 whitespace-pre-wrap mb-5">{{ ticket.description }}</p>
+
+        <div class="grid grid-cols-2 gap-4 text-sm text-gray-600 border-t pt-4">
+          <div><span class="font-medium">Category:</span> {{ ticket.category }}</div>
+          <div><span class="font-medium">Priority:</span> {{ ticket.priority }}</div>
+          <div><span class="font-medium">Submitted by:</span> {{ ticket.submitter?.name ?? '—' }}</div>
+          <div><span class="font-medium">Assigned to:</span> {{ ticket.assignee?.name ?? 'Unassigned' }}</div>
+          <div><span class="font-medium">Created:</span> {{ formatDate(ticket.created_at) }}</div>
+          <div><span class="font-medium">Updated:</span> {{ formatDate(ticket.updated_at) }}</div>
+        </div>
+      </div>
+
+      <!-- Comments -->
+      <div class="bg-white rounded-xl shadow p-6 mb-6">
+        <h3 class="text-base font-semibold text-gray-800 mb-4">
+          Comments ({{ visibleComments.length }})
+        </h3>
+
+        <div v-if="visibleComments.length === 0" class="text-sm text-gray-400 py-4 text-center">
+          No comments yet.
+        </div>
+
+        <div class="space-y-4">
+          <div
+            v-for="comment in visibleComments"
+            :key="comment.id"
+            :class="['rounded-lg p-4 text-sm', comment.is_internal ? 'bg-yellow-50 border border-yellow-200' : 'bg-gray-50']"
+          >
+            <div class="flex items-center justify-between mb-2">
+              <span class="font-medium text-gray-800">{{ comment.author?.name ?? 'Unknown' }}</span>
+              <span class="text-xs text-gray-400">{{ formatDate(comment.created_at) }}</span>
+            </div>
+            <p class="text-gray-700 whitespace-pre-wrap">{{ comment.body }}</p>
+            <span v-if="comment.is_internal" class="mt-1 inline-block text-xs text-yellow-700 font-medium">Staff note</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Add Comment Form -->
+      <div class="bg-white rounded-xl shadow p-6">
+        <h3 class="text-base font-semibold text-gray-800 mb-4">Add Comment</h3>
+        <form @submit.prevent="submitComment" class="space-y-4">
+          <textarea
+            v-model="commentForm.body"
+            rows="4"
+            placeholder="Write your comment…"
+            class="w-full px-4 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
+            :class="{ 'border-red-400': commentErrors.body }"
+          />
+          <p v-if="commentErrors.body" class="text-xs text-red-500">{{ commentErrors.body }}</p>
+
+          <div v-if="isAdmin" class="flex items-center gap-2">
+            <input id="is_internal" v-model="commentForm.is_internal" type="checkbox" class="rounded border-gray-300" />
+            <label for="is_internal" class="text-sm text-gray-700">Mark as internal staff note</label>
+          </div>
+
+          <div class="flex justify-end">
+            <button
+              type="submit"
+              :disabled="commentProcessing"
+              class="px-5 py-2 text-sm text-white rounded-lg transition disabled:opacity-50"
+              style="background-color: var(--color-sidebar-active-bg)"
+            >
+              {{ commentProcessing ? 'Posting…' : 'Post Comment' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </AppLayout>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { Link, useForm } from '@inertiajs/vue3'
+import AppLayout from '@/Layouts/AppLayout.vue'
+
+const props = defineProps({
+  ticket:  Object,
+  isAdmin: { type: Boolean, default: false },
+})
+
+const commentForm = useForm({
+  body:        '',
+  is_internal: false,
+})
+
+const commentProcessing = ref(false)
+const commentErrors = ref({})
+
+// Non-admins don't see internal notes
+const visibleComments = computed(() =>
+  props.isAdmin
+    ? props.ticket.comments
+    : props.ticket.comments.filter(c => !c.is_internal)
+)
+
+function submitComment() {
+  commentProcessing.value = true
+  commentForm.post(route('ticketing.comments.store', props.ticket.id), {
+    onError:  (e) => { commentErrors.value = e },
+    onSuccess: () => { commentForm.reset() },
+    onFinish: () => { commentProcessing.value = false },
+  })
+}
+
+function formatDate(d) {
+  return new Date(d).toLocaleDateString('en-CA')
+}
+
+function formatStatus(s) {
+  const map = { open: 'Open', in_progress: 'In Progress', resolved: 'Resolved', closed: 'Closed' }
+  return map[s] ?? s
+}
+
+function statusClass(s) {
+  const map = {
+    open:        'bg-blue-100 text-blue-700',
+    in_progress: 'bg-yellow-100 text-yellow-700',
+    resolved:    'bg-green-100 text-green-700',
+    closed:      'bg-gray-100 text-gray-600',
+  }
+  return map[s] ?? 'bg-gray-100 text-gray-600'
+}
+
+function priorityClass(p) {
+  const map = {
+    low:    'bg-gray-100 text-gray-600',
+    medium: 'bg-blue-100 text-blue-700',
+    high:   'bg-orange-100 text-orange-700',
+    urgent: 'bg-red-100 text-red-700',
+  }
+  return map[p] ?? 'bg-gray-100 text-gray-600'
+}
+</script>