initial commit
This commit is contained in:
bastien
@@ -0,0 +1,163 @@
|
||||
<script setup>
|
||||
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
|
||||
import { Head, Link, router } from '@inertiajs/vue3';
|
||||
import { reactive, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
bookings: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
statusOptions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const localFilters = reactive({
|
||||
status: props.filters.status ?? '',
|
||||
date: props.filters.date ?? '',
|
||||
});
|
||||
|
||||
watch(localFilters, () => {
|
||||
router.get(route('supervisor.bookings.index'), localFilters, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
});
|
||||
});
|
||||
|
||||
const formatDate = (iso) => {
|
||||
if (!iso) return '—';
|
||||
return new Intl.DateTimeFormat('fr-FR', {
|
||||
dateStyle: 'short',
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(iso));
|
||||
};
|
||||
|
||||
const formatCurrency = (value) =>
|
||||
new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(value ?? 0);
|
||||
|
||||
const statusColor = (status) => {
|
||||
const colors = {
|
||||
pending: 'bg-gray-100 text-gray-800',
|
||||
confirmed: 'bg-blue-100 text-blue-800',
|
||||
expired: 'bg-orange-100 text-orange-800',
|
||||
active: 'bg-green-100 text-green-800',
|
||||
completed: 'bg-indigo-100 text-indigo-800',
|
||||
cancelled: 'bg-yellow-100 text-yellow-800',
|
||||
no_show: 'bg-red-100 text-red-800',
|
||||
};
|
||||
return colors[status] ?? 'bg-gray-100 text-gray-800';
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Réservations" />
|
||||
|
||||
<SupervisorLayout title="Réservations">
|
||||
<div class="mb-6 flex flex-wrap gap-4 rounded-lg bg-white p-4 shadow">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Statut</label>
|
||||
<select
|
||||
v-model="localFilters.status"
|
||||
class="mt-1 block rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
|
||||
>
|
||||
<option value="">Tous</option>
|
||||
<option v-for="(label, value) in statusOptions" :key="value" :value="value">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Date</label>
|
||||
<input
|
||||
v-model="localFilters.date"
|
||||
type="date"
|
||||
class="mt-1 block rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden rounded-lg bg-white shadow">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Créneau</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Utilisateur</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Machine</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Statut</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Frais</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tr v-if="bookings.data.length === 0">
|
||||
<td colspan="5" class="px-4 py-8 text-center text-sm text-gray-500">
|
||||
Aucune réservation trouvée.
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="booking in bookings.data" :key="booking.uuid" class="hover:bg-gray-50">
|
||||
<td class="whitespace-nowrap px-4 py-3 text-sm">
|
||||
<div>{{ formatDate(booking.slot_start) }}</div>
|
||||
<div class="text-xs text-gray-500">→ {{ formatDate(booking.slot_end) }}</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<div class="font-medium text-gray-800">{{ booking.user?.name ?? '—' }}</div>
|
||||
<div class="text-xs text-gray-500">{{ booking.user?.email }}</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<Link
|
||||
v-if="booking.machine"
|
||||
:href="route('supervisor.machines.show', booking.machine.uuid)"
|
||||
class="text-indigo-600 hover:text-indigo-800"
|
||||
>
|
||||
{{ booking.machine.name }}
|
||||
</Link>
|
||||
<span v-else>—</span>
|
||||
<div v-if="booking.machine?.establishment_name" class="text-xs text-gray-500">
|
||||
{{ booking.machine.establishment_name }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="rounded-full px-2.5 py-0.5 text-xs font-medium"
|
||||
:class="statusColor(booking.status)"
|
||||
>
|
||||
{{ booking.status_label }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600">
|
||||
{{ formatCurrency(booking.booking_fee) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div v-if="bookings.links.length > 3" class="flex items-center justify-between border-t px-4 py-3">
|
||||
<p class="text-sm text-gray-600">
|
||||
{{ bookings.from ?? 0 }}–{{ bookings.to ?? 0 }} sur {{ bookings.total }}
|
||||
</p>
|
||||
<div class="flex gap-1">
|
||||
<Link
|
||||
v-for="link in bookings.links"
|
||||
:key="link.label"
|
||||
:href="link.url"
|
||||
v-html="link.label"
|
||||
class="rounded px-3 py-1 text-sm"
|
||||
:class="
|
||||
link.active
|
||||
? 'bg-indigo-600 text-white'
|
||||
: link.url
|
||||
? 'text-gray-600 hover:bg-gray-100'
|
||||
: 'cursor-not-allowed text-gray-300'
|
||||
"
|
||||
preserve-state
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SupervisorLayout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user