feat: full dashboard-ticketing scaffold with data model, controllers, Vue pages

resources/js/Pages/Ticketing/MyTickets.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="max-w-3xl mx-auto py-8 px-4">
+    <div class="mb-6 flex justify-between items-center">
+      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">My Tickets</h1>
+      <Link :href="route('ticketing.create')" class="inline-flex items-center gap-1 bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg hover:bg-indigo-700 transition">
+        + Submit Ticket
+      </Link>
+    </div>
+
+    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 divide-y divide-gray-100 dark:divide-gray-700">
+      <div v-if="tickets.data.length === 0" class="p-8 text-center text-gray-400 text-sm">
+        You haven't submitted any tickets yet.
+      </div>
+      <Link
+        v-for="ticket in tickets.data"
+        :key="ticket.id"
+        :href="route('ticketing.show', { ticket: ticket.id })"
+        class="flex items-start gap-3 px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition"
+      >
+        <span
+          class="inline-block text-xs font-mono font-semibold px-2 py-1 rounded text-white flex-shrink-0 mt-0.5"
+          :style="{ backgroundColor: ticket.group?.color || '#6366f1' }"
+        >{{ ticket.number }}</span>
+        <div class="flex-1 min-w-0">
+          <p class="text-sm font-medium text-gray-800 dark:text-gray-100 truncate">{{ ticket.title }}</p>
+          <p class="text-xs text-gray-400 mt-0.5">{{ ticket.group?.name }} · {{ timeAgo(ticket.created_at) }}</p>
+        </div>
+        <span :class="statusClass(ticket.status)" class="text-xs px-2 py-0.5 rounded-full font-medium flex-shrink-0">
+          {{ statusLabel(ticket.status) }}
+        </span>
+      </Link>
+    </div>
+
+    <!-- Pagination -->
+    <div v-if="tickets.last_page > 1" class="mt-4 flex justify-center gap-4 text-sm">
+      <Link v-if="tickets.prev_page_url" :href="tickets.prev_page_url" class="text-indigo-600 hover:underline">← Previous</Link>
+      <span class="text-gray-500">{{ tickets.current_page }} / {{ tickets.last_page }}</span>
+      <Link v-if="tickets.next_page_url" :href="tickets.next_page_url" class="text-indigo-600 hover:underline">Next →</Link>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Link } from '@inertiajs/vue3'
+
+defineProps({ tickets: Object })
+
+function statusLabel(status) {
+  const map = { open: 'Open', in_progress: 'In Progress', pending: 'Pending', resolved: 'Resolved', closed: 'Closed' }
+  return map[status] || status
+}
+
+function statusClass(status) {
+  const map = {
+    open: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200',
+    in_progress: 'bg-purple-100 text-purple-700',
+    pending: 'bg-yellow-100 text-yellow-700',
+    resolved: 'bg-green-100 text-green-700',
+    closed: 'bg-gray-100 text-gray-500',
+  }
+  return map[status] || 'bg-gray-100 text-gray-600'
+}
+
+function timeAgo(dateStr) {
+  const date = new Date(dateStr)
+  const now = new Date()
+  const diff = Math.floor((now - date) / 1000)
+  if (diff < 60) return `${diff}s ago`
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
+  return `${Math.floor(diff / 86400)}d ago`
+}
+</script>