initial commit
This commit is contained in:
bastien
@@ -0,0 +1,94 @@
|
||||
<script setup>
|
||||
import Checkbox from '@/Components/Checkbox.vue';
|
||||
import InputError from '@/Components/InputError.vue';
|
||||
import InputLabel from '@/Components/InputLabel.vue';
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import TextInput from '@/Components/TextInput.vue';
|
||||
import { Head, useForm } from '@inertiajs/vue3';
|
||||
|
||||
defineProps({
|
||||
status: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const form = useForm({
|
||||
email: '',
|
||||
password: '',
|
||||
remember: false,
|
||||
});
|
||||
|
||||
const submit = () => {
|
||||
form.post(route('login.store'), {
|
||||
onFinish: () => form.reset('password'),
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Connexion superviseur" />
|
||||
|
||||
<div class="flex min-h-screen flex-col items-center justify-center bg-gray-100 px-4">
|
||||
<div class="mb-8 text-center">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Laverie — Back-office</h1>
|
||||
<p class="mt-1 text-sm text-gray-600">Connexion exploitant</p>
|
||||
</div>
|
||||
|
||||
<div class="w-full max-w-md overflow-hidden rounded-lg bg-white px-6 py-8 shadow-md">
|
||||
<div v-if="status" class="mb-4 text-sm font-medium text-green-600">
|
||||
{{ status }}
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="submit">
|
||||
<div>
|
||||
<InputLabel for="email" value="Adresse e-mail" />
|
||||
|
||||
<TextInput
|
||||
id="email"
|
||||
type="email"
|
||||
class="mt-1 block w-full"
|
||||
v-model="form.email"
|
||||
required
|
||||
autofocus
|
||||
autocomplete="username"
|
||||
/>
|
||||
|
||||
<InputError class="mt-2" :message="form.errors.email" />
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<InputLabel for="password" value="Mot de passe" />
|
||||
|
||||
<TextInput
|
||||
id="password"
|
||||
type="password"
|
||||
class="mt-1 block w-full"
|
||||
v-model="form.password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
|
||||
<InputError class="mt-2" :message="form.errors.password" />
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<label class="flex items-center">
|
||||
<Checkbox name="remember" v-model:checked="form.remember" />
|
||||
<span class="ms-2 text-sm text-gray-600">Se souvenir de moi</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<PrimaryButton
|
||||
class="w-full justify-center"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
>
|
||||
Se connecter
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,139 @@
|
||||
<script setup>
|
||||
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
|
||||
defineProps({
|
||||
kpis: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
alerts: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
machinesOverview: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const formatCurrency = (value) =>
|
||||
new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(value ?? 0);
|
||||
|
||||
const formatDate = (iso) => {
|
||||
if (!iso) return '—';
|
||||
return new Intl.DateTimeFormat('fr-FR', {
|
||||
dateStyle: 'short',
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(iso));
|
||||
};
|
||||
|
||||
const statusColor = (status) => {
|
||||
const colors = {
|
||||
available: 'bg-green-100 text-green-800',
|
||||
reserved: 'bg-yellow-100 text-yellow-800',
|
||||
running: 'bg-blue-100 text-blue-800',
|
||||
maintenance: 'bg-orange-100 text-orange-800',
|
||||
offline: 'bg-gray-100 text-gray-800',
|
||||
error: 'bg-red-100 text-red-800',
|
||||
};
|
||||
return colors[status] ?? 'bg-gray-100 text-gray-800';
|
||||
};
|
||||
|
||||
const severityColor = (severity) => {
|
||||
return severity === 'high' ? 'border-red-400 bg-red-50' : 'border-yellow-400 bg-yellow-50';
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Tableau de bord" />
|
||||
|
||||
<SupervisorLayout title="Tableau de bord">
|
||||
<!-- KPI cards -->
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<div class="rounded-lg bg-white p-5 shadow">
|
||||
<p class="text-sm font-medium text-gray-500">Chiffre d'affaires aujourd'hui</p>
|
||||
<p class="mt-2 text-2xl font-bold text-gray-900">
|
||||
{{ formatCurrency(kpis.revenue_today) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-white p-5 shadow">
|
||||
<p class="text-sm font-medium text-gray-500">Lavages aujourd'hui</p>
|
||||
<p class="mt-2 text-2xl font-bold text-gray-900">{{ kpis.washes_today }}</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-white p-5 shadow">
|
||||
<p class="text-sm font-medium text-gray-500">Réservations aujourd'hui</p>
|
||||
<p class="mt-2 text-2xl font-bold text-gray-900">{{ kpis.bookings_today }}</p>
|
||||
</div>
|
||||
<div class="rounded-lg bg-white p-5 shadow">
|
||||
<p class="text-sm font-medium text-gray-500">Machines hors ligne</p>
|
||||
<p class="mt-2 text-2xl font-bold" :class="kpis.offline_machines > 0 ? 'text-red-600' : 'text-gray-900'">
|
||||
{{ kpis.offline_machines }}
|
||||
<span class="text-sm font-normal text-gray-500">/ {{ kpis.machines_total }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<!-- Alerts -->
|
||||
<div class="rounded-lg bg-white p-5 shadow">
|
||||
<h2 class="mb-4 text-lg font-semibold text-gray-800">Alertes</h2>
|
||||
<div v-if="alerts.length === 0" class="text-sm text-gray-500">
|
||||
Aucune alerte pour le moment.
|
||||
</div>
|
||||
<ul v-else class="space-y-3">
|
||||
<li
|
||||
v-for="(alert, index) in alerts"
|
||||
:key="index"
|
||||
class="rounded-md border-l-4 px-3 py-2 text-sm"
|
||||
:class="severityColor(alert.severity)"
|
||||
>
|
||||
<p class="font-medium text-gray-800">{{ alert.message }}</p>
|
||||
<p class="mt-1 text-xs text-gray-500">{{ formatDate(alert.occurred_at) }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Machines overview -->
|
||||
<div class="rounded-lg bg-white p-5 shadow">
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<h2 class="text-lg font-semibold text-gray-800">Parc machines</h2>
|
||||
<Link
|
||||
:href="route('supervisor.machines.index')"
|
||||
class="text-sm text-indigo-600 hover:text-indigo-800"
|
||||
>
|
||||
Voir tout →
|
||||
</Link>
|
||||
</div>
|
||||
<div v-if="machinesOverview.length === 0" class="text-sm text-gray-500">
|
||||
Aucune machine dans votre périmètre.
|
||||
</div>
|
||||
<ul v-else class="divide-y divide-gray-100">
|
||||
<li
|
||||
v-for="machine in machinesOverview"
|
||||
:key="machine.uuid"
|
||||
class="flex items-center justify-between py-3"
|
||||
>
|
||||
<div>
|
||||
<Link
|
||||
:href="route('supervisor.machines.show', machine.uuid)"
|
||||
class="font-medium text-gray-800 hover:text-indigo-600"
|
||||
>
|
||||
{{ machine.name }}
|
||||
</Link>
|
||||
<p class="text-xs text-gray-500">
|
||||
{{ machine.establishment_name }} · {{ machine.type_label }}
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
class="rounded-full px-2.5 py-0.5 text-xs font-medium"
|
||||
:class="statusColor(machine.status)"
|
||||
>
|
||||
{{ machine.status_label }}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</SupervisorLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,188 @@
|
||||
<script setup>
|
||||
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
|
||||
import { Head, Link, router } from '@inertiajs/vue3';
|
||||
import { reactive, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
machines: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
statusOptions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
typeOptions: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const localFilters = reactive({
|
||||
search: props.filters.search ?? '',
|
||||
status: props.filters.status ?? '',
|
||||
type: props.filters.type ?? '',
|
||||
});
|
||||
|
||||
let debounceTimer = null;
|
||||
|
||||
watch(localFilters, () => {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(() => {
|
||||
router.get(route('supervisor.machines.index'), localFilters, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
});
|
||||
}, 300);
|
||||
});
|
||||
|
||||
const statusColor = (status) => {
|
||||
const colors = {
|
||||
available: 'bg-green-100 text-green-800',
|
||||
reserved: 'bg-yellow-100 text-yellow-800',
|
||||
running: 'bg-blue-100 text-blue-800',
|
||||
maintenance: 'bg-orange-100 text-orange-800',
|
||||
offline: 'bg-gray-100 text-gray-800',
|
||||
error: 'bg-red-100 text-red-800',
|
||||
};
|
||||
return colors[status] ?? 'bg-gray-100 text-gray-800';
|
||||
};
|
||||
|
||||
const formatDate = (iso) => {
|
||||
if (!iso) return '—';
|
||||
return new Intl.DateTimeFormat('fr-FR', {
|
||||
dateStyle: 'short',
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(iso));
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Machines" />
|
||||
|
||||
<SupervisorLayout title="Machines">
|
||||
<!-- Filters -->
|
||||
<div class="mb-6 flex flex-wrap gap-4 rounded-lg bg-white p-4 shadow">
|
||||
<div class="min-w-[200px] flex-1">
|
||||
<label class="block text-xs font-medium text-gray-500">Recherche</label>
|
||||
<input
|
||||
v-model="localFilters.search"
|
||||
type="text"
|
||||
placeholder="Nom ou QR code…"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Statut</label>
|
||||
<select
|
||||
v-model="localFilters.status"
|
||||
class="mt-1 block w-full 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">Type</label>
|
||||
<select
|
||||
v-model="localFilters.type"
|
||||
class="mt-1 block w-full 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 typeOptions" :key="value" :value="value">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<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 tracking-wider text-gray-500">
|
||||
Machine
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
|
||||
Établissement
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
|
||||
Type
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
|
||||
Statut
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
|
||||
Dernier signal
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100 bg-white">
|
||||
<tr v-if="machines.data.length === 0">
|
||||
<td colspan="5" class="px-4 py-8 text-center text-sm text-gray-500">
|
||||
Aucune machine trouvée.
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="machine in machines.data" :key="machine.uuid" class="hover:bg-gray-50">
|
||||
<td class="whitespace-nowrap px-4 py-3">
|
||||
<Link
|
||||
:href="route('supervisor.machines.show', machine.uuid)"
|
||||
class="font-medium text-indigo-600 hover:text-indigo-800"
|
||||
>
|
||||
{{ machine.name }}
|
||||
</Link>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600">
|
||||
{{ machine.establishment_name ?? '—' }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600">
|
||||
{{ machine.type_label }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3">
|
||||
<span
|
||||
class="rounded-full px-2.5 py-0.5 text-xs font-medium"
|
||||
:class="statusColor(machine.status)"
|
||||
>
|
||||
{{ machine.status_label }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-sm text-gray-500">
|
||||
{{ formatDate(machine.last_heartbeat_at) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div v-if="machines.links.length > 3" class="flex items-center justify-between border-t px-4 py-3">
|
||||
<p class="text-sm text-gray-600">
|
||||
{{ machines.from ?? 0 }}–{{ machines.to ?? 0 }} sur {{ machines.total }}
|
||||
</p>
|
||||
<div class="flex gap-1">
|
||||
<Link
|
||||
v-for="link in machines.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>
|
||||
@@ -0,0 +1,142 @@
|
||||
<script setup>
|
||||
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
|
||||
defineProps({
|
||||
machine: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
recentEvents: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const formatDate = (iso) => {
|
||||
if (!iso) return '—';
|
||||
return new Intl.DateTimeFormat('fr-FR', {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(iso));
|
||||
};
|
||||
|
||||
const statusColor = (status) => {
|
||||
const colors = {
|
||||
available: 'bg-green-100 text-green-800',
|
||||
reserved: 'bg-yellow-100 text-yellow-800',
|
||||
running: 'bg-blue-100 text-blue-800',
|
||||
maintenance: 'bg-orange-100 text-orange-800',
|
||||
offline: 'bg-gray-100 text-gray-800',
|
||||
error: 'bg-red-100 text-red-800',
|
||||
};
|
||||
return colors[status] ?? 'bg-gray-100 text-gray-800';
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head :title="machine.name" />
|
||||
|
||||
<SupervisorLayout>
|
||||
<template #header>
|
||||
<Link
|
||||
:href="route('supervisor.machines.index')"
|
||||
class="text-sm text-indigo-600 hover:text-indigo-800"
|
||||
>
|
||||
← Retour aux machines
|
||||
</Link>
|
||||
</template>
|
||||
|
||||
<div class="mb-4">
|
||||
<h1 class="text-2xl font-bold text-gray-900">{{ machine.name }}</h1>
|
||||
<p class="text-sm text-gray-500">{{ machine.establishment?.name }}</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<!-- Details -->
|
||||
<div class="rounded-lg bg-white p-6 shadow">
|
||||
<h2 class="mb-4 text-lg font-semibold text-gray-800">Informations</h2>
|
||||
<dl class="space-y-3 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-500">Type</dt>
|
||||
<dd class="font-medium text-gray-800">{{ machine.type_label }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-500">Statut</dt>
|
||||
<dd>
|
||||
<span
|
||||
class="rounded-full px-2.5 py-0.5 text-xs font-medium"
|
||||
:class="statusColor(machine.status)"
|
||||
>
|
||||
{{ machine.status_label }}
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-500">QR code</dt>
|
||||
<dd class="font-mono text-gray-800">{{ machine.qr_code }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-500">Dernier signal</dt>
|
||||
<dd class="text-gray-800">{{ formatDate(machine.last_heartbeat_at) }}</dd>
|
||||
</div>
|
||||
<div v-if="machine.cycle_started_at" class="flex justify-between">
|
||||
<dt class="text-gray-500">Cycle démarré</dt>
|
||||
<dd class="text-gray-800">{{ formatDate(machine.cycle_started_at) }}</dd>
|
||||
</div>
|
||||
<div v-if="machine.cycle_ends_at" class="flex justify-between">
|
||||
<dt class="text-gray-500">Fin de cycle prévue</dt>
|
||||
<dd class="text-gray-800">{{ formatDate(machine.cycle_ends_at) }}</dd>
|
||||
</div>
|
||||
<div v-if="machine.current_user" class="flex justify-between">
|
||||
<dt class="text-gray-500">Utilisateur actuel</dt>
|
||||
<dd class="text-gray-800">
|
||||
{{ machine.current_user.name }}
|
||||
<span class="text-gray-500">({{ machine.current_user.email }})</span>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div v-if="machine.establishment" class="mt-6 border-t pt-4">
|
||||
<h3 class="mb-2 text-sm font-semibold text-gray-700">Établissement</h3>
|
||||
<p class="text-sm text-gray-600">{{ machine.establishment.address }}</p>
|
||||
<p v-if="machine.establishment.city" class="text-sm text-gray-600">
|
||||
{{ machine.establishment.city }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="machine.integration" class="mt-6 border-t pt-4">
|
||||
<h3 class="mb-2 text-sm font-semibold text-gray-700">Intégration</h3>
|
||||
<dl class="space-y-2 text-sm">
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-500">Fournisseur</dt>
|
||||
<dd>{{ machine.integration.provider }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-500">Mode</dt>
|
||||
<dd>{{ machine.integration.mode }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-500">Active</dt>
|
||||
<dd>{{ machine.integration.is_active ? 'Oui' : 'Non' }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Events -->
|
||||
<div class="rounded-lg bg-white p-6 shadow">
|
||||
<h2 class="mb-4 text-lg font-semibold text-gray-800">Événements récents</h2>
|
||||
<div v-if="recentEvents.length === 0" class="text-sm text-gray-500">
|
||||
Aucun événement enregistré.
|
||||
</div>
|
||||
<ul v-else class="divide-y divide-gray-100">
|
||||
<li v-for="(event, index) in recentEvents" :key="index" class="py-3">
|
||||
<p class="text-sm font-medium text-gray-800">{{ event.event_type_label }}</p>
|
||||
<p class="text-xs text-gray-500">{{ formatDate(event.occurred_at) }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</SupervisorLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,242 @@
|
||||
<script setup>
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import SecondaryButton from '@/Components/SecondaryButton.vue';
|
||||
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
|
||||
import { Head, useForm } from '@inertiajs/vue3';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
rules: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
establishments: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
machineTypes: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
dayTypes: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const editingId = ref(null);
|
||||
const showForm = ref(false);
|
||||
|
||||
const emptyForm = () => ({
|
||||
establishment_id: props.establishments[0]?.id ?? '',
|
||||
machine_id: null,
|
||||
machine_type: '',
|
||||
day_type: 'all',
|
||||
slot_start: '08:00',
|
||||
slot_end: '22:00',
|
||||
price: '',
|
||||
label: '',
|
||||
requires_app: false,
|
||||
priority: 100,
|
||||
is_active: true,
|
||||
});
|
||||
|
||||
const form = useForm(emptyForm());
|
||||
|
||||
const startCreate = () => {
|
||||
editingId.value = null;
|
||||
form.defaults(emptyForm());
|
||||
form.reset();
|
||||
showForm.value = true;
|
||||
};
|
||||
|
||||
const startEdit = (rule) => {
|
||||
editingId.value = rule.id;
|
||||
form.defaults({
|
||||
establishment_id: rule.establishment_id,
|
||||
machine_id: rule.machine_id,
|
||||
machine_type: rule.machine_type ?? '',
|
||||
day_type: rule.day_type,
|
||||
slot_start: rule.slot_start,
|
||||
slot_end: rule.slot_end,
|
||||
price: rule.price,
|
||||
label: rule.label ?? '',
|
||||
requires_app: rule.requires_app,
|
||||
priority: rule.priority,
|
||||
is_active: rule.is_active,
|
||||
});
|
||||
form.reset();
|
||||
showForm.value = true;
|
||||
};
|
||||
|
||||
const cancelForm = () => {
|
||||
showForm.value = false;
|
||||
editingId.value = null;
|
||||
form.reset();
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
const payload = {
|
||||
...form.data(),
|
||||
machine_id: form.machine_id || null,
|
||||
machine_type: form.machine_type || null,
|
||||
};
|
||||
|
||||
if (editingId.value) {
|
||||
form.transform(() => payload).put(route('supervisor.pricing.update', editingId.value), {
|
||||
onSuccess: cancelForm,
|
||||
});
|
||||
} else {
|
||||
form.transform(() => payload).post(route('supervisor.pricing.store'), {
|
||||
onSuccess: cancelForm,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const destroy = (id) => {
|
||||
if (confirm('Supprimer cette règle tarifaire ?')) {
|
||||
useForm({}).delete(route('supervisor.pricing.destroy', id));
|
||||
}
|
||||
};
|
||||
|
||||
const formatCurrency = (value) =>
|
||||
new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(value ?? 0);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Tarifs" />
|
||||
|
||||
<SupervisorLayout title="Tarifs">
|
||||
<div class="mb-4 flex justify-end">
|
||||
<PrimaryButton v-if="!showForm" @click="startCreate">
|
||||
Nouvelle règle
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
|
||||
<!-- Inline form -->
|
||||
<div v-if="showForm" class="mb-6 rounded-lg border border-indigo-200 bg-white p-6 shadow">
|
||||
<h2 class="mb-4 text-lg font-semibold text-gray-800">
|
||||
{{ editingId ? 'Modifier la règle' : 'Nouvelle règle tarifaire' }}
|
||||
</h2>
|
||||
<form @submit.prevent="submit" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Établissement</label>
|
||||
<select
|
||||
v-model="form.establishment_id"
|
||||
required
|
||||
class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm"
|
||||
>
|
||||
<option v-for="est in establishments" :key="est.id" :value="est.id">
|
||||
{{ est.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Type de machine</label>
|
||||
<select v-model="form.machine_type" class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm">
|
||||
<option value="">Tous types</option>
|
||||
<option v-for="(label, value) in machineTypes" :key="value" :value="value">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Jour</label>
|
||||
<select v-model="form.day_type" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm">
|
||||
<option v-for="(label, value) in dayTypes" :key="value" :value="value">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Début créneau</label>
|
||||
<input v-model="form.slot_start" type="time" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Fin créneau</label>
|
||||
<input v-model="form.slot_end" type="time" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Prix (€)</label>
|
||||
<input v-model="form.price" type="number" step="0.01" min="0" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Libellé</label>
|
||||
<input v-model="form.label" type="text" class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Priorité</label>
|
||||
<input v-model="form.priority" type="number" min="0" class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
|
||||
</div>
|
||||
<div class="flex items-end gap-4">
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input v-model="form.requires_app" type="checkbox" class="rounded border-gray-300 text-indigo-600" />
|
||||
App requise
|
||||
</label>
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input v-model="form.is_active" type="checkbox" class="rounded border-gray-300 text-indigo-600" />
|
||||
Active
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex gap-2 sm:col-span-2 lg:col-span-3">
|
||||
<PrimaryButton type="submit" :disabled="form.processing">
|
||||
{{ editingId ? 'Enregistrer' : 'Créer' }}
|
||||
</PrimaryButton>
|
||||
<SecondaryButton type="button" @click="cancelForm">Annuler</SecondaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Rules list -->
|
||||
<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">Établissement</th>
|
||||
<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">Type</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Prix</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-right text-xs font-medium uppercase text-gray-500">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tr v-if="rules.length === 0">
|
||||
<td colspan="6" class="px-4 py-8 text-center text-sm text-gray-500">
|
||||
Aucune règle tarifaire configurée.
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="rule in rules" :key="rule.id" class="hover:bg-gray-50">
|
||||
<td class="px-4 py-3 text-sm text-gray-800">{{ rule.establishment_name }}</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">
|
||||
{{ rule.slot_start }} – {{ rule.slot_end }}
|
||||
<span class="text-xs text-gray-400">({{ rule.day_type_label }})</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">
|
||||
{{ rule.machine_type_label ?? 'Tous' }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm font-medium text-gray-800">
|
||||
{{ formatCurrency(rule.price) }}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="rounded-full px-2.5 py-0.5 text-xs font-medium"
|
||||
:class="rule.is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600'"
|
||||
>
|
||||
{{ rule.is_active ? 'Active' : 'Inactive' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right text-sm">
|
||||
<button @click="startEdit(rule)" class="text-indigo-600 hover:text-indigo-800">
|
||||
Modifier
|
||||
</button>
|
||||
<button @click="destroy(rule.id)" class="ms-3 text-red-600 hover:text-red-800">
|
||||
Supprimer
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</SupervisorLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,246 @@
|
||||
<script setup>
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import SecondaryButton from '@/Components/SecondaryButton.vue';
|
||||
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
|
||||
import { Head, useForm } from '@inertiajs/vue3';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
promotions: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
establishments: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
machineTypes: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
discountTypes: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const editingId = ref(null);
|
||||
const showForm = ref(false);
|
||||
|
||||
const emptyForm = () => ({
|
||||
establishment_id: props.establishments[0]?.id ?? '',
|
||||
machine_type: 'all',
|
||||
discount_type: 'percent',
|
||||
discount_value: '',
|
||||
starts_at: '',
|
||||
ends_at: '',
|
||||
description: '',
|
||||
is_active: true,
|
||||
});
|
||||
|
||||
const form = useForm(emptyForm());
|
||||
|
||||
const startCreate = () => {
|
||||
editingId.value = null;
|
||||
form.defaults(emptyForm());
|
||||
form.reset();
|
||||
showForm.value = true;
|
||||
};
|
||||
|
||||
const startEdit = (promotion) => {
|
||||
editingId.value = promotion.id;
|
||||
form.defaults({
|
||||
establishment_id: promotion.establishment_id,
|
||||
machine_type: promotion.machine_type,
|
||||
discount_type: promotion.discount_type,
|
||||
discount_value: promotion.discount_value,
|
||||
starts_at: promotion.starts_at,
|
||||
ends_at: promotion.ends_at,
|
||||
description: promotion.description ?? '',
|
||||
is_active: promotion.is_active,
|
||||
});
|
||||
form.reset();
|
||||
showForm.value = true;
|
||||
};
|
||||
|
||||
const cancelForm = () => {
|
||||
showForm.value = false;
|
||||
editingId.value = null;
|
||||
form.reset();
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
if (editingId.value) {
|
||||
form.put(route('supervisor.promotions.update', editingId.value), {
|
||||
onSuccess: cancelForm,
|
||||
});
|
||||
} else {
|
||||
form.post(route('supervisor.promotions.store'), {
|
||||
onSuccess: cancelForm,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const destroy = (id) => {
|
||||
if (confirm('Supprimer cette promotion ?')) {
|
||||
useForm({}).delete(route('supervisor.promotions.destroy', id));
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (iso) => {
|
||||
if (!iso) return '—';
|
||||
return new Intl.DateTimeFormat('fr-FR', {
|
||||
dateStyle: 'short',
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(iso));
|
||||
};
|
||||
|
||||
const formatDiscount = (promotion) => {
|
||||
if (promotion.discount_type === 'percent') {
|
||||
return `-${promotion.discount_value} %`;
|
||||
}
|
||||
return `-${new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(promotion.discount_value)}`;
|
||||
};
|
||||
|
||||
const isCurrentlyActive = (promotion) => {
|
||||
const now = new Date();
|
||||
return (
|
||||
promotion.is_active &&
|
||||
new Date(promotion.starts_at) <= now &&
|
||||
new Date(promotion.ends_at) >= now
|
||||
);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Promotions" />
|
||||
|
||||
<SupervisorLayout title="Promotions">
|
||||
<div class="mb-4 flex justify-end">
|
||||
<PrimaryButton v-if="!showForm" @click="startCreate">
|
||||
Nouvelle promotion
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
|
||||
<div v-if="showForm" class="mb-6 rounded-lg border border-indigo-200 bg-white p-6 shadow">
|
||||
<h2 class="mb-4 text-lg font-semibold text-gray-800">
|
||||
{{ editingId ? 'Modifier la promotion' : 'Nouvelle promotion' }}
|
||||
</h2>
|
||||
<form @submit.prevent="submit" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Établissement</label>
|
||||
<select v-model="form.establishment_id" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm">
|
||||
<option v-for="est in establishments" :key="est.id" :value="est.id">
|
||||
{{ est.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Type de machine</label>
|
||||
<select v-model="form.machine_type" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm">
|
||||
<option v-for="(label, value) in machineTypes" :key="value" :value="value">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Type de remise</label>
|
||||
<select v-model="form.discount_type" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm">
|
||||
<option v-for="(label, value) in discountTypes" :key="value" :value="value">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Valeur</label>
|
||||
<input v-model="form.discount_value" type="number" step="0.01" min="0" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Début</label>
|
||||
<input v-model="form.starts_at" type="datetime-local" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-500">Fin</label>
|
||||
<input v-model="form.ends_at" type="datetime-local" required class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
|
||||
</div>
|
||||
<div class="sm:col-span-2 lg:col-span-3">
|
||||
<label class="block text-xs font-medium text-gray-500">Description</label>
|
||||
<textarea v-model="form.description" rows="2" class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" />
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input v-model="form.is_active" type="checkbox" class="rounded border-gray-300 text-indigo-600" />
|
||||
Active
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex gap-2 sm:col-span-2 lg:col-span-3">
|
||||
<PrimaryButton type="submit" :disabled="form.processing">
|
||||
{{ editingId ? 'Enregistrer' : 'Créer' }}
|
||||
</PrimaryButton>
|
||||
<SecondaryButton type="button" @click="cancelForm">Annuler</SecondaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</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">Établissement</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Remise</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Période</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Machines</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-right text-xs font-medium uppercase text-gray-500">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tr v-if="promotions.length === 0">
|
||||
<td colspan="6" class="px-4 py-8 text-center text-sm text-gray-500">
|
||||
Aucune promotion configurée.
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="promotion in promotions" :key="promotion.id" class="hover:bg-gray-50">
|
||||
<td class="px-4 py-3 text-sm text-gray-800">{{ promotion.establishment_name }}</td>
|
||||
<td class="px-4 py-3 text-sm font-medium text-green-700">
|
||||
{{ formatDiscount(promotion) }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">
|
||||
<div>{{ formatDate(promotion.starts_at) }}</div>
|
||||
<div class="text-xs text-gray-400">→ {{ formatDate(promotion.ends_at) }}</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-600">{{ promotion.machine_type_label }}</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="rounded-full px-2.5 py-0.5 text-xs font-medium"
|
||||
:class="
|
||||
isCurrentlyActive(promotion)
|
||||
? 'bg-green-100 text-green-800'
|
||||
: promotion.is_active
|
||||
? 'bg-yellow-100 text-yellow-800'
|
||||
: 'bg-gray-100 text-gray-600'
|
||||
"
|
||||
>
|
||||
{{
|
||||
isCurrentlyActive(promotion)
|
||||
? 'En cours'
|
||||
: promotion.is_active
|
||||
? 'Programmée'
|
||||
: 'Inactive'
|
||||
}}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right text-sm">
|
||||
<button @click="startEdit(promotion)" class="text-indigo-600 hover:text-indigo-800">
|
||||
Modifier
|
||||
</button>
|
||||
<button @click="destroy(promotion.id)" class="ms-3 text-red-600 hover:text-red-800">
|
||||
Supprimer
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</SupervisorLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,161 @@
|
||||
<script setup>
|
||||
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
|
||||
import { Head, Link, router } from '@inertiajs/vue3';
|
||||
import { reactive, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
washes: {
|
||||
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.washes.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_start: 'bg-gray-100 text-gray-800',
|
||||
running: 'bg-blue-100 text-blue-800',
|
||||
completed: 'bg-green-100 text-green-800',
|
||||
failed: 'bg-red-100 text-red-800',
|
||||
cancelled: 'bg-yellow-100 text-yellow-800',
|
||||
};
|
||||
return colors[status] ?? 'bg-gray-100 text-gray-800';
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Lavages" />
|
||||
|
||||
<SupervisorLayout title="Lavages">
|
||||
<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">Début</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">Durée</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-500">Coût</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
<tr v-if="washes.data.length === 0">
|
||||
<td colspan="6" class="px-4 py-8 text-center text-sm text-gray-500">
|
||||
Aucun lavage trouvé.
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="wash in washes.data" :key="wash.uuid" class="hover:bg-gray-50">
|
||||
<td class="whitespace-nowrap px-4 py-3 text-sm text-gray-800">
|
||||
{{ formatDate(wash.started_at) }}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<div class="font-medium text-gray-800">{{ wash.user?.name ?? '—' }}</div>
|
||||
<div class="text-xs text-gray-500">{{ wash.user?.email }}</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm">
|
||||
<Link
|
||||
v-if="wash.machine"
|
||||
:href="route('supervisor.machines.show', wash.machine.uuid)"
|
||||
class="text-indigo-600 hover:text-indigo-800"
|
||||
>
|
||||
{{ wash.machine.name }}
|
||||
</Link>
|
||||
<span v-else>—</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span
|
||||
class="rounded-full px-2.5 py-0.5 text-xs font-medium"
|
||||
:class="statusColor(wash.status)"
|
||||
>
|
||||
{{ wash.status_label }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-sm text-gray-600">
|
||||
{{ wash.duration_minutes ? `${wash.duration_minutes} min` : '—' }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-sm font-medium text-gray-800">
|
||||
{{ formatCurrency(wash.cost) }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div v-if="washes.links.length > 3" class="flex items-center justify-between border-t px-4 py-3">
|
||||
<p class="text-sm text-gray-600">
|
||||
{{ washes.from ?? 0 }}–{{ washes.to ?? 0 }} sur {{ washes.total }}
|
||||
</p>
|
||||
<div class="flex gap-1">
|
||||
<Link
|
||||
v-for="link in washes.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