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

resources/js/Pages/Ticketing/Create.vue

@@ -1,112 +1,111 @@
 <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 class="max-w-2xl mx-auto py-8 px-4">
+    <div class="mb-6">
+      <Link :href="route('ticketing.index')" class="text-sm text-indigo-600 hover:underline">← Back to tickets</Link>
+      <h1 class="text-2xl font-bold text-gray-900 dark:text-white mt-2">Submit a Ticket</h1>
+    </div>
+
+    <form @submit.prevent="submit" class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6 space-y-5">
+      <!-- Group -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Group <span class="text-red-500">*</span></label>
+        <select
+          v-model="form.group_id"
+          required
+          class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg text-sm"
+        >
+          <option value="">Select a group</option>
+          <option v-for="g in groups" :key="g.id" :value="g.id">{{ g.name }}</option>
+        </select>
+        <p v-if="form.errors.group_id" class="text-xs text-red-600 mt-1">{{ form.errors.group_id }}</p>
       </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>
+      <!-- Title -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Title <span class="text-red-500">*</span></label>
+        <input
+          v-model="form.title"
+          type="text"
+          required
+          placeholder="Brief summary of the issue"
+          class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg text-sm"
+        />
+        <p v-if="form.errors.title" class="text-xs text-red-600 mt-1">{{ form.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>
+      <!-- Description -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Description <span class="text-red-500">*</span></label>
+        <textarea
+          v-model="form.description"
+          required
+          rows="5"
+          placeholder="Describe the issue in detail..."
+          class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg text-sm"
+        ></textarea>
+        <p v-if="form.errors.description" class="text-xs text-red-600 mt-1">{{ form.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>
+      <!-- Priority -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Priority</label>
+        <select
+          v-model="form.priority_id"
+          class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg text-sm"
+        >
+          <option :value="null">No priority</option>
+          <option v-for="p in filteredPriorities" :key="p.id" :value="p.id">{{ p.name }}</option>
+        </select>
+      </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>
+      <!-- Due Date -->
+      <div>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Due Date <span class="text-gray-400 font-normal">(optional)</span></label>
+        <input
+          v-model="form.due_date"
+          type="date"
+          class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-lg text-sm"
+        />
+      </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>
+      <!-- Submit -->
+      <div class="flex justify-end pt-2">
+        <button
+          type="submit"
+          :disabled="form.processing"
+          class="inline-flex items-center gap-2 bg-indigo-600 text-white px-5 py-2 rounded-lg text-sm font-medium hover:bg-indigo-700 disabled:opacity-60 transition"
+        >
+          <span v-if="form.processing">Submitting…</span>
+          <span v-else>Submit Ticket</span>
+        </button>
+      </div>
+    </form>
+  </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { computed } from 'vue'
 import { Link, useForm } from '@inertiajs/vue3'
-import AppLayout from '@/Layouts/AppLayout.vue'
 
-const form = useForm({
-  title:       '',
-  description: '',
-  category:    '',
-  priority:    'medium',
+const props = defineProps({
+  groups: Array,
+  priorities: Array,
 })
 
-const processing = ref(false)
-const errors = ref({})
+const form = useForm({
+  group_id: '',
+  title: '',
+  description: '',
+  priority_id: null,
+  due_date: '',
+})
+
+const filteredPriorities = computed(() => {
+  if (!form.group_id) return props.priorities.filter(p => !p.group_id)
+  return props.priorities.filter(p => !p.group_id || p.group_id === Number(form.group_id))
+})
 
 function submit() {
-  processing.value = true
-  form.post(route('ticketing.store'), {
-    onError: (e) => { errors.value = e },
-    onFinish: () => { processing.value = false },
-  })
+  form.post(route('ticketing.store'))
 }
 </script>