jwed/dashboard-ticketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initial dashboard-ticketing scaffold

Browse Source
This commit is contained in:
Joel Wedemire
2026-04-08 14:17:26 -07:00
parent 1448eb7cf4
commit 81d0d54f50
13 changed files with 980 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
resources/js/Pages/Ticketing/Create.vue Normal file
View File

@@ -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>