feat: initial dashboard-ticketing scaffold

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>