From 81d0d54f500f7ea1606c32b03f7cf9ce71f71488 Mon Sep 17 00:00:00 2001
From: Joel Wedemire <joel@wedemire.com>
Date: Wed, 8 Apr 2026 14:17:26 -0700
Subject: [PATCH] feat: initial dashboard-ticketing scaffold

---
 composer.json                                 |  23 ++
 ...2026_04_08_000001_create_tickets_table.php |  28 +++
 ...08_000002_create_ticket_comments_table.php |  25 +++
 resources/js/Pages/Ticketing/Create.vue       | 112 ++++++++++
 resources/js/Pages/Ticketing/Edit.vue         | 147 +++++++++++++
 resources/js/Pages/Ticketing/Index.vue        | 197 ++++++++++++++++++
 resources/js/Pages/Ticketing/Show.vue         | 156 ++++++++++++++
 .../Controllers/TicketCommentController.php   |  36 ++++
 src/Http/Controllers/TicketController.php     | 156 ++++++++++++++
 src/Models/Ticket.php                         |  35 ++++
 src/Models/TicketComment.php                  |  30 +++
 src/TicketingServiceProvider.php              |  19 ++
 src/routes/ticketing.php                      |  16 ++
 13 files changed, 980 insertions(+)
 create mode 100644 composer.json
 create mode 100644 database/migrations/2026_04_08_000001_create_tickets_table.php
 create mode 100644 database/migrations/2026_04_08_000002_create_ticket_comments_table.php
 create mode 100644 resources/js/Pages/Ticketing/Create.vue
 create mode 100644 resources/js/Pages/Ticketing/Edit.vue
 create mode 100644 resources/js/Pages/Ticketing/Index.vue
 create mode 100644 resources/js/Pages/Ticketing/Show.vue
 create mode 100644 src/Http/Controllers/TicketCommentController.php
 create mode 100644 src/Http/Controllers/TicketController.php
 create mode 100644 src/Models/Ticket.php
 create mode 100644 src/Models/TicketComment.php
 create mode 100644 src/TicketingServiceProvider.php
 create mode 100644 src/routes/ticketing.php

diff --git a/composer.json b/composer.json
new file mode 100644
index 0000000..94dd4d9
--- /dev/null
+++ b/composer.json
@@ -0,0 +1,23 @@
+{
+    "name": "dashboard/ticketing",
+    "description": "Ticketing / help-desk snap-in for the Dashboard platform",
+    "type": "library",
+    "license": "MIT",
+    "autoload": {
+        "psr-4": {
+            "Dashboard\\Ticketing\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "Dashboard\\Ticketing\\TicketingServiceProvider"
+            ]
+        }
+    },
+    "require": {
+        "php": "^8.2",
+        "illuminate/support": "^11.0|^12.0|^13.0",
+        "inertiajs/inertia-laravel": "^1.0|^2.0"
+    }
+}
diff --git a/database/migrations/2026_04_08_000001_create_tickets_table.php b/database/migrations/2026_04_08_000001_create_tickets_table.php
new file mode 100644
index 0000000..453ed03
--- /dev/null
+++ b/database/migrations/2026_04_08_000001_create_tickets_table.php
@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('tickets', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('user_id')->constrained()->cascadeOnDelete();
+            $table->foreignId('assigned_to')->nullable()->constrained('users')->nullOnDelete();
+            $table->string('title');
+            $table->text('description');
+            $table->enum('category', ['IT', 'Facilities', 'HR', 'Other'])->default('Other');
+            $table->enum('priority', ['low', 'medium', 'high', 'urgent'])->default('medium');
+            $table->enum('status', ['open', 'in_progress', 'resolved', 'closed'])->default('open');
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('tickets');
+    }
+};
diff --git a/database/migrations/2026_04_08_000002_create_ticket_comments_table.php b/database/migrations/2026_04_08_000002_create_ticket_comments_table.php
new file mode 100644
index 0000000..109072e
--- /dev/null
+++ b/database/migrations/2026_04_08_000002_create_ticket_comments_table.php
@@ -0,0 +1,25 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('ticket_comments', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('ticket_id')->constrained()->cascadeOnDelete();
+            $table->foreignId('user_id')->constrained()->cascadeOnDelete();
+            $table->text('body');
+            $table->boolean('is_internal')->default(false);
+            $table->timestamps();
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('ticket_comments');
+    }
+};
diff --git a/resources/js/Pages/Ticketing/Create.vue b/resources/js/Pages/Ticketing/Create.vue
new file mode 100644
index 0000000..d2e45ff
--- /dev/null
+++ b/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>
diff --git a/resources/js/Pages/Ticketing/Edit.vue b/resources/js/Pages/Ticketing/Edit.vue
new file mode 100644
index 0000000..caae88d
--- /dev/null
+++ b/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>
diff --git a/resources/js/Pages/Ticketing/Index.vue b/resources/js/Pages/Ticketing/Index.vue
new file mode 100644
index 0000000..ee11345
--- /dev/null
+++ b/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>
diff --git a/resources/js/Pages/Ticketing/Show.vue b/resources/js/Pages/Ticketing/Show.vue
new file mode 100644
index 0000000..0abeb15
--- /dev/null
+++ b/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>
diff --git a/src/Http/Controllers/TicketCommentController.php b/src/Http/Controllers/TicketCommentController.php
new file mode 100644
index 0000000..c84e978
--- /dev/null
+++ b/src/Http/Controllers/TicketCommentController.php
@@ -0,0 +1,36 @@
+<?php
+
+namespace Dashboard\Ticketing\Http\Controllers;
+
+use Dashboard\Ticketing\Models\Ticket;
+use Dashboard\Ticketing\Models\TicketComment;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+
+class TicketCommentController extends Controller
+{
+    public function store(Request $request, Ticket $ticket)
+    {
+        $user = auth()->user();
+        $isAdmin = in_array($user->role ?? '', ['admin', 'super_admin']);
+
+        abort_if(! $isAdmin && $ticket->user_id !== $user->id, 403);
+
+        $request->validate([
+            'body'        => 'required|string',
+            'is_internal' => 'boolean',
+        ]);
+
+        // Non-admins cannot post internal notes
+        $isInternal = $isAdmin && $request->boolean('is_internal');
+
+        TicketComment::create([
+            'ticket_id'   => $ticket->id,
+            'user_id'     => $user->id,
+            'body'        => $request->body,
+            'is_internal' => $isInternal,
+        ]);
+
+        return redirect()->route('ticketing.show', $ticket)->with('success', 'Comment added.');
+    }
+}
diff --git a/src/Http/Controllers/TicketController.php b/src/Http/Controllers/TicketController.php
new file mode 100644
index 0000000..919d082
--- /dev/null
+++ b/src/Http/Controllers/TicketController.php
@@ -0,0 +1,156 @@
+<?php
+
+namespace Dashboard\Ticketing\Http\Controllers;
+
+use Dashboard\Ticketing\Models\Ticket;
+use Illuminate\Http\Request;
+use Illuminate\Routing\Controller;
+use Inertia\Inertia;
+
+class TicketController extends Controller
+{
+    public function index(Request $request)
+    {
+        $user = auth()->user();
+        $isAdmin = in_array($user->role ?? '', ['admin', 'super_admin']);
+
+        $query = Ticket::with(['submitter:id,name', 'assignee:id,name']);
+
+        if (! $isAdmin) {
+            $query->where('user_id', $user->id);
+        }
+
+        if ($search = $request->get('search')) {
+            $query->where(function ($q) use ($search) {
+                $q->where('title', 'like', "%{$search}%")
+                  ->orWhere('description', 'like', "%{$search}%");
+            });
+        }
+
+        if ($status = $request->get('status')) {
+            $query->where('status', $status);
+        }
+
+        if ($priority = $request->get('priority')) {
+            $query->where('priority', $priority);
+        }
+
+        if ($category = $request->get('category')) {
+            $query->where('category', $category);
+        }
+
+        $tickets = $query->latest()->paginate(25)->withQueryString();
+
+        return Inertia::render('Ticketing/Index', [
+            'tickets'          => $tickets,
+            'search'           => $request->get('search', ''),
+            'statusFilter'     => $request->get('status', ''),
+            'priorityFilter'   => $request->get('priority', ''),
+            'categoryFilter'   => $request->get('category', ''),
+            'isAdmin'          => $isAdmin,
+        ]);
+    }
+
+    public function create()
+    {
+        return Inertia::render('Ticketing/Create');
+    }
+
+    public function store(Request $request)
+    {
+        $request->validate([
+            'title'       => 'required|string|max:255',
+            'description' => 'required|string',
+            'category'    => 'required|in:IT,Facilities,HR,Other',
+            'priority'    => 'required|in:low,medium,high,urgent',
+        ]);
+
+        Ticket::create([
+            'user_id'     => auth()->id(),
+            'title'       => $request->title,
+            'description' => $request->description,
+            'category'    => $request->category,
+            'priority'    => $request->priority,
+            'status'      => 'open',
+        ]);
+
+        return redirect()->route('ticketing.index')->with('success', 'Ticket submitted.');
+    }
+
+    public function show(Ticket $ticket)
+    {
+        $user = auth()->user();
+        $isAdmin = in_array($user->role ?? '', ['admin', 'super_admin']);
+
+        abort_if(! $isAdmin && $ticket->user_id !== $user->id, 403);
+
+        $ticket->load([
+            'submitter:id,name',
+            'assignee:id,name',
+            'comments.author:id,name',
+        ]);
+
+        return Inertia::render('Ticketing/Show', [
+            'ticket'  => $ticket,
+            'isAdmin' => $isAdmin,
+        ]);
+    }
+
+    public function edit(Ticket $ticket)
+    {
+        $user = auth()->user();
+        $isAdmin = in_array($user->role ?? '', ['admin', 'super_admin']);
+
+        abort_if(! $isAdmin && $ticket->user_id !== $user->id, 403);
+
+        return Inertia::render('Ticketing/Edit', [
+            'ticket'  => $ticket,
+            'isAdmin' => $isAdmin,
+        ]);
+    }
+
+    public function update(Request $request, Ticket $ticket)
+    {
+        $user = auth()->user();
+        $isAdmin = in_array($user->role ?? '', ['admin', 'super_admin']);
+
+        abort_if(! $isAdmin && $ticket->user_id !== $user->id, 403);
+
+        $rules = [
+            'title'       => 'required|string|max:255',
+            'description' => 'required|string',
+            'category'    => 'required|in:IT,Facilities,HR,Other',
+            'priority'    => 'required|in:low,medium,high,urgent',
+        ];
+
+        if ($isAdmin) {
+            $rules['status']      = 'required|in:open,in_progress,resolved,closed';
+            $rules['assigned_to'] = 'nullable|exists:users,id';
+        }
+
+        $request->validate($rules);
+
+        $data = $request->only(['title', 'description', 'category', 'priority']);
+
+        if ($isAdmin) {
+            $data['status']      = $request->status;
+            $data['assigned_to'] = $request->assigned_to;
+        }
+
+        $ticket->update($data);
+
+        return redirect()->route('ticketing.show', $ticket)->with('success', 'Ticket updated.');
+    }
+
+    public function destroy(Ticket $ticket)
+    {
+        $user = auth()->user();
+        $isAdmin = in_array($user->role ?? '', ['admin', 'super_admin']);
+
+        abort_if(! $isAdmin && $ticket->user_id !== $user->id, 403);
+
+        $ticket->delete();
+
+        return redirect()->route('ticketing.index')->with('success', 'Ticket deleted.');
+    }
+}
diff --git a/src/Models/Ticket.php b/src/Models/Ticket.php
new file mode 100644
index 0000000..658bcf4
--- /dev/null
+++ b/src/Models/Ticket.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace Dashboard\Ticketing\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasMany;
+
+class Ticket extends Model
+{
+    protected $fillable = [
+        'user_id',
+        'assigned_to',
+        'title',
+        'description',
+        'category',
+        'priority',
+        'status',
+    ];
+
+    public function submitter(): BelongsTo
+    {
+        return $this->belongsTo(\App\Models\User::class, 'user_id');
+    }
+
+    public function assignee(): BelongsTo
+    {
+        return $this->belongsTo(\App\Models\User::class, 'assigned_to');
+    }
+
+    public function comments(): HasMany
+    {
+        return $this->hasMany(TicketComment::class);
+    }
+}
diff --git a/src/Models/TicketComment.php b/src/Models/TicketComment.php
new file mode 100644
index 0000000..9462654
--- /dev/null
+++ b/src/Models/TicketComment.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace Dashboard\Ticketing\Models;
+
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+
+class TicketComment extends Model
+{
+    protected $fillable = [
+        'ticket_id',
+        'user_id',
+        'body',
+        'is_internal',
+    ];
+
+    protected $casts = [
+        'is_internal' => 'boolean',
+    ];
+
+    public function ticket(): BelongsTo
+    {
+        return $this->belongsTo(Ticket::class);
+    }
+
+    public function author(): BelongsTo
+    {
+        return $this->belongsTo(\App\Models\User::class, 'user_id');
+    }
+}
diff --git a/src/TicketingServiceProvider.php b/src/TicketingServiceProvider.php
new file mode 100644
index 0000000..48eb4f6
--- /dev/null
+++ b/src/TicketingServiceProvider.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace Dashboard\Ticketing;
+
+use Illuminate\Support\ServiceProvider;
+
+class TicketingServiceProvider extends ServiceProvider
+{
+    public function register(): void
+    {
+        //
+    }
+
+    public function boot(): void
+    {
+        $this->loadMigrationsFrom(__DIR__.'/../database/migrations');
+        $this->loadRoutesFrom(__DIR__.'/routes/ticketing.php');
+    }
+}
diff --git a/src/routes/ticketing.php b/src/routes/ticketing.php
new file mode 100644
index 0000000..ea2e0e4
--- /dev/null
+++ b/src/routes/ticketing.php
@@ -0,0 +1,16 @@
+<?php
+
+use Dashboard\Ticketing\Http\Controllers\TicketController;
+use Dashboard\Ticketing\Http\Controllers\TicketCommentController;
+use Illuminate\Support\Facades\Route;
+
+Route::middleware(['web', 'auth', 'app.access:ticketing'])->prefix('app/ticketing')->name('ticketing.')->group(function () {
+    Route::get('/', [TicketController::class, 'index'])->name('index');
+    Route::get('/create', [TicketController::class, 'create'])->name('create');
+    Route::post('/', [TicketController::class, 'store'])->name('store');
+    Route::get('/{ticket}', [TicketController::class, 'show'])->name('show');
+    Route::get('/{ticket}/edit', [TicketController::class, 'edit'])->name('edit');
+    Route::put('/{ticket}', [TicketController::class, 'update'])->name('update');
+    Route::delete('/{ticket}', [TicketController::class, 'destroy'])->name('destroy');
+    Route::post('/{ticket}/comments', [TicketCommentController::class, 'store'])->name('comments.store');
+});