root
9aa7971a28
- Login page with JWT auth and role-based redirect - CS Dashboard: KPI cards, priority breakdown, recent tickets - FM Dashboard: tech workload, aging analysis, emergency alerts - CEO Dashboard: executive KPIs, charts, risk indicators - All Issues: filterable/sortable ticket table with pagination - Create Issue: form with category tree, property/unit selector, photo uploads - Issue Detail: full timeline, photo gallery, SLA status, action modals - Role-based nav bar: CS/FM/Executive links adapt to user role - Base template: shared Alpine.js app state, toast notifications, loading overlay
212 lines
12 KiB
HTML
212 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<div x-data="ticketList()" x-init="init()">
|
|
<div class="mb-6 flex items-center justify-between">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-900">All Issues</h1>
|
|
<p class="text-gray-500 mt-1" x-text="`${total} total tickets`"></p>
|
|
</div>
|
|
<a href="/tickets/new" class="px-4 py-2 bg-denya-600 text-white rounded-lg hover:bg-denya-700 transition text-sm font-medium flex items-center space-x-1">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
|
|
<span>New Issue</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 mb-6">
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
|
|
<div>
|
|
<label class="block text-xs text-gray-500 font-medium mb-1">Search</label>
|
|
<input type="text" x-model="filters.search" @input.debounce="loadTickets()" placeholder="Ticket # or description..." class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 focus:border-transparent outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 font-medium mb-1">Status</label>
|
|
<select x-model="filters.status" @change="loadTickets()" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 outline-none">
|
|
<option value="">All Statuses</option>
|
|
<option value="New">New</option>
|
|
<option value="Logged">Logged</option>
|
|
<option value="Triage">Triage</option>
|
|
<option value="Assigned">Assigned</option>
|
|
<option value="Accepted">Accepted</option>
|
|
<option value="Travelling">Travelling</option>
|
|
<option value="On Site">On Site</option>
|
|
<option value="In Progress">In Progress</option>
|
|
<option value="Waiting Parts">Waiting Parts</option>
|
|
<option value="Escalated">Escalated</option>
|
|
<option value="Completed">Completed</option>
|
|
<option value="On-Field Verification">On-Field Verification</option>
|
|
<option value="Wahab Review">Wahab Review</option>
|
|
<option value="Closed">Closed</option>
|
|
<option value="Reopened">Reopened</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 font-medium mb-1">Priority</label>
|
|
<select x-model="filters.priority" @change="loadTickets()" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 outline-none">
|
|
<option value="">All Priorities</option>
|
|
<option value="urgent">🔴 Urgent</option>
|
|
<option value="high">🟠 High</option>
|
|
<option value="medium">🟡 Medium</option>
|
|
<option value="low">🟢 Low</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 font-medium mb-1">Property</label>
|
|
<select x-model="filters.property" @change="loadTickets()" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 outline-none">
|
|
<option value="">All Properties</option>
|
|
<option value="East">Pavilion East</option>
|
|
<option value="West">Pavilion West</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 font-medium mb-1">From</label>
|
|
<input type="date" x-model="filters.dateFrom" @change="loadTickets()" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 font-medium mb-1">To</label>
|
|
<input type="date" x-model="filters.dateTo" @change="loadTickets()" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-denya-500 outline-none">
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 flex items-center justify-between">
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-xs text-gray-500">Page <span x-text="page"></span> of <span x-text="totalPages"></span></span>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<button @click="page > 1 && (page--, loadTickets())" :disabled="page <= 1" class="px-3 py-1 text-sm border rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">Prev</button>
|
|
<button @click="page < totalPages && (page++, loadTickets())" :disabled="page >= totalPages" class="px-3 py-1 text-sm border rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed">Next</button>
|
|
<button @click="filters = {search:'',status:'',priority:'',property:'',dateFrom:'',dateTo:''}; page=1; loadTickets()" class="px-3 py-1 text-sm text-gray-500 border rounded hover:bg-gray-50">Clear Filters</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tickets Table -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead class="bg-gray-50 text-gray-600 text-xs uppercase tracking-wider">
|
|
<tr>
|
|
<th class="px-5 py-3 text-left cursor-pointer hover:text-gray-900" @click="sortBy('ticket_number')">
|
|
Ticket <span x-show="sortField === 'ticket_number'" x-text="sortDir === 'asc' ? '↑' : '↓'"></span>
|
|
</th>
|
|
<th class="px-5 py-3 text-left">Status</th>
|
|
<th class="px-5 py-3 text-left">Priority</th>
|
|
<th class="px-5 py-3 text-left">Description</th>
|
|
<th class="px-5 py-3 text-left">Assigned To</th>
|
|
<th class="px-5 py-3 text-left cursor-pointer hover:text-gray-900" @click="sortBy('created_at')">
|
|
Created <span x-show="sortField === 'created_at'" x-text="sortDir === 'asc' ? '↑' : '↓'"></span>
|
|
</th>
|
|
<th class="px-5 py-3 text-left">SLA</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100">
|
|
<template x-for="ticket in tickets" :key="ticket.id">
|
|
<tr class="hover:bg-gray-50 transition cursor-pointer" :class="ticket.priority === 'urgent' ? 'bg-red-50/50' : ''" @click="window.location.href='/tickets/'+ticket.id">
|
|
<td class="px-5 py-3 font-medium text-denya-600" x-text="ticket.ticket_number"></td>
|
|
<td class="px-5 py-3"><span class="px-2 py-1 rounded-full text-xs font-medium" :class="statusClass(ticket.status)" x-text="ticket.status"></span></td>
|
|
<td class="px-5 py-3"><span class="px-2 py-1 rounded text-xs font-medium" :class="priorityClass(ticket.priority)" x-text="priorityBadge(ticket.priority)"></span></td>
|
|
<td class="px-5 py-3 text-gray-600 max-w-xs truncate" x-text="ticket.description || ''"></td>
|
|
<td class="px-5 py-3 text-gray-500 text-xs" x-text="ticket.assigned_technician_name || '—'"></td>
|
|
<td class="px-5 py-3 text-gray-500 text-xs" x-text="formatDate(ticket.created_at)"></td>
|
|
<td class="px-5 py-3">
|
|
<span x-show="ticket.sla_deadline" class="text-xs" :class="new Date(ticket.sla_deadline) < new Date() && !['Closed','Completed'].includes(ticket.status) ? 'text-red-600 font-medium' : 'text-gray-400'">
|
|
<span x-text="formatDateShort(ticket.sla_deadline)"></span>
|
|
</span>
|
|
<span x-show="!ticket.sla_deadline" class="text-xs text-gray-300">—</span>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
<tr x-show="!tickets.length && !loading">
|
|
<td colspan="7" class="px-5 py-16 text-center text-gray-400">
|
|
<svg class="w-12 h-12 mx-auto text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
|
No tickets match your filters
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function ticketList() {
|
|
return {
|
|
tickets: [],
|
|
total: 0,
|
|
page: 1,
|
|
pageSize: 50,
|
|
totalPages: 1,
|
|
sortField: 'created_at',
|
|
sortDir: 'desc',
|
|
filters: {
|
|
search: '',
|
|
status: '',
|
|
priority: '',
|
|
property: '',
|
|
dateFrom: '',
|
|
dateTo: ''
|
|
},
|
|
|
|
async init() {
|
|
await this.loadTickets();
|
|
},
|
|
|
|
async loadTickets() {
|
|
try {
|
|
let url = `/api/tickets?page=${this.page}&page_size=${this.pageSize}`;
|
|
if (this.filters.status) url += `&status=${encodeURIComponent(this.filters.status)}`;
|
|
if (this.filters.priority) url += `&priority=${encodeURIComponent(this.filters.priority)}`;
|
|
if (this.filters.property) url += `&property=${encodeURIComponent(this.filters.property)}`;
|
|
if (this.filters.dateFrom) url += `&date_from=${encodeURIComponent(this.filters.dateFrom)}`;
|
|
if (this.filters.dateTo) url += `&date_to=${encodeURIComponent(this.filters.dateTo)}`;
|
|
|
|
const data = await app().apiGet(url);
|
|
if (data) {
|
|
this.tickets = data.items || [];
|
|
this.total = data.total || 0;
|
|
this.totalPages = Math.ceil(this.total / this.pageSize) || 1;
|
|
|
|
// Client-side search filter for ticket number or description
|
|
if (this.filters.search) {
|
|
const q = this.filters.search.toLowerCase();
|
|
this.tickets = this.tickets.filter(t =>
|
|
(t.ticket_number && t.ticket_number.toLowerCase().includes(q)) ||
|
|
(t.description && t.description.toLowerCase().includes(q))
|
|
);
|
|
}
|
|
|
|
// Sort
|
|
this.applySort();
|
|
}
|
|
} catch (e) { console.error('Tickets load error', e); }
|
|
},
|
|
|
|
sortBy(field) {
|
|
if (this.sortField === field) {
|
|
this.sortDir = this.sortDir === 'asc' ? 'desc' : 'asc';
|
|
} else {
|
|
this.sortField = field;
|
|
this.sortDir = 'desc';
|
|
}
|
|
this.applySort();
|
|
},
|
|
|
|
applySort() {
|
|
this.tickets.sort((a, b) => {
|
|
let valA = a[this.sortField] || '';
|
|
let valB = b[this.sortField] || '';
|
|
if (this.sortField === 'created_at') {
|
|
valA = new Date(valA).getTime();
|
|
valB = new Date(valB).getTime();
|
|
}
|
|
if (typeof valA === 'string') valA = valA.toLowerCase();
|
|
if (typeof valB === 'string') valB = valB.toLowerCase();
|
|
if (valA < valB) return this.sortDir === 'asc' ? -1 : 1;
|
|
if (valA > valB) return this.sortDir === 'asc' ? 1 : -1;
|
|
return 0;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %}
|