Laverie/backend
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Intégration fonctionnalites V1

Browse Source
This commit is contained in:
bastien
2026-07-04 22:30:18 +02:00
parent 55a558b536
commit 10ee859602
54 changed files with 4802 additions and 1018 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Pages/Supervisor/Dashboard.vue
+486 -72
View File
@@ -1,8 +1,10 @@
<script setup>
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
import { Head, Link } from '@inertiajs/vue3';
import OutlineSelect from '@/Components/Supervisor/OutlineSelect.vue';
import {Head, Link, router, usePage} from '@inertiajs/vue3';
import {computed, ref, watch} from 'vue';
defineProps({
const props = defineProps({
kpis: {
type: Object,
required: true,
@@ -15,10 +17,94 @@ defineProps({
type: Array,
default: () => [],
},
machineStatusBreakdown: {
type: Object,
default: () => ({}),
},
recentWashes: {
type: Array,
default: () => [],
},
context: {
type: Object,
default: () => ({}),
},
establishments: {
type: Array,
default: () => [],
},
showEstablishmentFilter: {
type: Boolean,
default: false,
},
filters: {
type: Object,
default: () => ({}),
},
});
const page = usePage();
const supervisor = computed(() => page.props.auth.supervisor);
const greeting = computed(() => {
const hour = new Date().getHours();
if (hour < 12) return 'Bonjour';
if (hour < 18) return 'Bon après-midi';
return 'Bonsoir';
});
const todayLabel = computed(() => {
const formatted = new Intl.DateTimeFormat('fr-FR', {
weekday: 'long',
day: 'numeric',
month: 'long',
}).format(new Date());
return formatted.charAt(0).toUpperCase() + formatted.slice(1);
});
const firstName = computed(() => supervisor.value?.name?.split(' ')[0] ?? '');
const scopeTitle = computed(() => {
if (props.context.is_all_establishments) {
return 'Toutes les enseignes';
}
return props.context.establishment_name ?? 'Enseigne sélectionnée';
});
const establishmentOptions = computed(() => [
{ value: '', label: 'Toutes les enseignes' },
...props.establishments.map((establishment) => ({
value: establishment.id,
label: establishment.name,
})),
]);
const selectedEstablishmentId = ref(props.filters.establishment_id ?? '');
watch(
() => props.filters.establishment_id,
(value) => {
selectedEstablishmentId.value = value ?? '';
},
);
const onEstablishmentChange = () => {
router.get(
route('supervisor.dashboard'),
{
establishment_id: selectedEstablishmentId.value || undefined,
},
{
preserveScroll: true,
replace: true,
},
);
};
const formatCurrency = (value) =>
new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(value ?? 0);
new Intl.NumberFormat('fr-FR', {style: 'currency', currency: 'EUR'}).format(value ?? 0);
const formatDate = (iso) => {
if (!iso) return '—';
@@ -30,110 +116,438 @@ const formatDate = (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',
available: 'bg-emerald-100 text-emerald-800 ring-emerald-600/20',
reserved: 'bg-amber-100 text-amber-800 ring-amber-600/20',
running: 'bg-sky-100 text-sky-800 ring-sky-600/20',
maintenance: 'bg-orange-100 text-orange-800 ring-orange-600/20',
offline: 'bg-slate-100 text-slate-600 ring-slate-500/20',
error: 'bg-red-100 text-red-800 ring-red-600/20',
pending_start: 'bg-slate-100 text-slate-600 ring-slate-500/20',
completed: 'bg-emerald-100 text-emerald-800 ring-emerald-600/20',
failed: 'bg-red-100 text-red-800 ring-red-600/20',
cancelled: 'bg-slate-100 text-slate-500 ring-slate-500/20',
};
return colors[status] ?? 'bg-gray-100 text-gray-800';
return colors[status] ?? 'bg-slate-100 text-slate-800';
};
const statusDotColor = (status) => {
const colors = {
available: 'bg-emerald-500',
reserved: 'bg-amber-500',
running: 'bg-sky-500',
maintenance: 'bg-orange-500',
offline: 'bg-slate-400',
error: 'bg-red-500',
};
return colors[status] ?? 'bg-slate-400';
};
const severityColor = (severity) => {
return severity === 'high' ? 'border-red-400 bg-red-50' : 'border-yellow-400 bg-yellow-50';
return severity === 'high'
? 'border-red-400 bg-red-50 ring-red-100'
: 'border-amber-400 bg-amber-50 ring-amber-100';
};
const machineAnomalyCount = computed(() => {
const breakdown = props.machineStatusBreakdown;
return (breakdown.offline ?? 0) + (breakdown.maintenance ?? 0) + (breakdown.error ?? 0);
});
const kpiCards = computed(() => {
const hasMachineAnomaly = machineAnomalyCount.value > 0;
return [
{
label: "Chiffre d'affaires",
sublabel: "Aujourd'hui",
value: formatCurrency(props.kpis.revenue_today),
icon: 'revenue',
bg: 'bg-emerald-50',
text: 'text-emerald-600',
ring: 'ring-emerald-100',
},
{
label: 'Lavages',
sublabel: "Aujourd'hui",
value: props.kpis.washes_today,
icon: 'washes',
bg: 'bg-sky-50',
text: 'text-sky-600',
ring: 'ring-sky-100',
},
{
label: 'Réservations',
sublabel: "Aujourd'hui",
value: props.kpis.bookings_today,
icon: 'bookings',
bg: 'bg-violet-50',
text: 'text-violet-600',
ring: 'ring-violet-100',
},
{
label: 'Machines actives',
sublabel: `${props.kpis.running_machines ?? 0} en cours · ${props.kpis.available_machines ?? 0} dispo.`,
value: `${props.kpis.machines_total - machineAnomalyCount.value}`,
suffix: `/ ${props.kpis.machines_total}`,
icon: 'machines',
bg: hasMachineAnomaly ? 'bg-red-50' : 'bg-indigo-50',
text: hasMachineAnomaly ? 'text-red-600' : 'text-indigo-600',
ring: hasMachineAnomaly ? 'ring-red-100' : 'ring-indigo-100',
alert: hasMachineAnomaly ? `${machineAnomalyCount.value} indisponible${machineAnomalyCount.value > 1 ? 's' : ''}` : null,
},
];
});
const statusBreakdownItems = computed(() => {
const labels = {
available: 'Disponibles',
reserved: 'Réservées',
running: 'En cours',
maintenance: 'Maintenance',
offline: 'Hors ligne',
error: 'Erreur',
};
const total = props.kpis.machines_total || 1;
return Object.entries(props.machineStatusBreakdown)
.filter(([, count]) => count > 0)
.map(([status, count]) => ({
status,
label: labels[status] ?? status,
count,
percent: Math.round((count / total) * 100),
}))
.sort((a, b) => b.count - a.count);
});
const quickActions = [
{
label: 'Voir les machines',
route: 'supervisor.machines.index',
icon: 'machines',
color: 'hover:border-indigo-300 hover:bg-indigo-50'
},
{
label: 'Réservations du jour',
route: 'supervisor.bookings.index',
icon: 'bookings',
color: 'hover:border-violet-300 hover:bg-violet-50'
},
{
label: 'Historique lavages',
route: 'supervisor.washes.index',
icon: 'washes',
color: 'hover:border-sky-300 hover:bg-sky-50'
},
{
label: 'Gérer les tarifs',
route: 'supervisor.pricing.index',
icon: 'pricing',
color: 'hover:border-emerald-300 hover:bg-emerald-50'
},
];
const kpiIconPaths = {
revenue: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
washes: 'M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z',
bookings: 'M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
machines: 'M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15',
pricing: 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
};
</script>
<template>
<Head title="Tableau de bord" />
<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>
<SupervisorLayout>
<template #header>
<span class="hidden text-sm text-slate-400 sm:inline">/</span>
<span class="hidden text-sm text-slate-500 sm:inline">Tableau de bord</span>
</template>
<!-- Welcome banner -->
<div
class="relative overflow-visible rounded-2xl border border-indigo-500/20 bg-gradient-to-br from-slate-900 via-indigo-950 to-indigo-900 shadow-xl shadow-indigo-950/20">
<!-- Décorations (clipées sans couper le sélecteur) -->
<div class="pointer-events-none absolute inset-0 overflow-hidden rounded-2xl">
<div
class="absolute inset-0 opacity-[0.35]"
style="background-image: radial-gradient(circle at 1px 1px, rgb(255 255 255 / 0.08) 1px, transparent 0); background-size: 24px 24px;"
/>
<div class="absolute -right-16 -top-16 h-56 w-56 rounded-full bg-indigo-500/25 blur-3xl"/>
<div class="absolute -bottom-20 -left-10 h-48 w-48 rounded-full bg-violet-600/20 blur-3xl"/>
</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 class="relative flex flex-col gap-6 p-6 sm:p-8 lg:flex-row lg:items-center lg:justify-between">
<div class="flex min-w-0 items-start gap-4 sm:gap-5">
<div class="min-w-0">
<p class="inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-xs font-medium text-indigo-200 ring-1 ring-white/10">
{{ todayLabel }}
</p>
<h2 class="mt-3 text-2xl font-bold tracking-tight text-white sm:text-3xl">
{{ greeting }}<span v-if="firstName">, {{ firstName }}</span>
</h2>
<div class="mt-4 flex flex-wrap items-center gap-2">
<span
class="inline-flex items-center gap-2 rounded-xl bg-white/10 px-3 py-1.5 text-sm font-medium text-white ring-1 ring-white/10">
<svg class="h-4 w-4 shrink-0 text-indigo-300" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.75">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
</svg>
<span class="truncate">{{ scopeTitle }}</span>
</span>
<span
v-if="kpis.active_bookings > 0"
class="inline-flex items-center gap-1.5 rounded-xl bg-amber-400/15 px-3 py-1.5 text-sm font-medium text-amber-100 ring-1 ring-amber-300/20"
>
<span class="h-1.5 w-1.5 animate-pulse rounded-full bg-amber-300"/>
{{ kpis.active_bookings }} réservation{{ kpis.active_bookings > 1 ? 's' : '' }} en cours
</span>
</div>
</div>
</div>
<div v-if="showEstablishmentFilter" class="relative z-20 w-full shrink-0 lg:w-72">
<OutlineSelect
id="dashboard-establishment"
v-model="selectedEstablishmentId"
:options="establishmentOptions"
variant="dark"
@change="onEstablishmentChange"
/>
</div>
</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.
<!-- KPI cards -->
<div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
<div
v-for="card in kpiCards"
:key="card.label"
class="rounded-2xl border border-slate-200/80 bg-white p-4 shadow-sm transition hover:shadow-md sm:p-5"
>
<div class="flex items-center gap-4">
<!-- Icône à gauche -->
<div
class="flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-2xl ring-4"
:class="[card.bg, card.ring]"
>
<svg
class="h-7 w-7"
:class="card.text"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.75"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
:d="kpiIconPaths[card.icon]"
/>
</svg>
</div>
<!-- Chiffres à droite -->
<div class="min-w-0 flex-1 text-right">
<p class="text-sm font-medium text-slate-500">{{ card.label }}</p>
<p class="mt-0.5 flex items-baseline justify-end gap-1">
<span class="text-2xl font-bold tracking-tight text-slate-900">{{ card.value }}</span>
<span v-if="card.suffix" class="text-base font-normal text-slate-400">{{
card.suffix
}}</span>
</p>
<p class="mt-0.5 text-xs text-slate-400">{{ card.sublabel }}</p>
<p
v-if="card.alert"
class="mt-1.5 inline-flex items-center gap-1 rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700"
>
<span class="h-1.5 w-1.5 rounded-full bg-red-500"/>
{{ card.alert }}
</p>
</div>
</div>
<ul v-else class="space-y-3">
</div>
</div>
<!-- Quick actions -->
<div class="mt-6">
<h3 class="mb-3 text-sm font-semibold uppercase tracking-wider text-slate-400">Accès rapides</h3>
<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
<Link
v-for="action in quickActions"
:key="action.route"
:href="route(action.route)"
class="flex items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-medium text-slate-700 shadow-sm transition"
:class="action.color"
>
<svg class="h-4 w-4 flex-shrink-0 text-slate-400" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="1.75">
<path stroke-linecap="round" stroke-linejoin="round" :d="kpiIconPaths[action.icon]"/>
</svg>
{{ action.label }}
</Link>
</div>
</div>
<div class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-3">
<!-- Machine status breakdown -->
<div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm lg:col-span-1">
<h2 class="text-base font-semibold text-slate-900">État du parc</h2>
<p class="mt-0.5 text-sm text-slate-500">{{ kpis.machines_total }}
machine{{ kpis.machines_total > 1 ? 's' : '' }} au total</p>
<div v-if="statusBreakdownItems.length === 0" class="mt-6 text-sm text-slate-400">
Aucune machine dans votre périmètre.
</div>
<div v-else class="mt-5 space-y-3">
<div v-for="item in statusBreakdownItems" :key="item.status">
<div class="mb-1 flex items-center justify-between text-sm">
<span class="flex items-center gap-2 text-slate-600">
<span class="h-2 w-2 rounded-full" :class="statusDotColor(item.status)"/>
{{ item.label }}
</span>
<span class="font-medium text-slate-900">{{ item.count }}</span>
</div>
<div class="h-2 overflow-hidden rounded-full bg-slate-100">
<div
class="h-full rounded-full transition-all duration-500"
:class="statusDotColor(item.status)"
:style="{ width: `${item.percent}%` }"
/>
</div>
</div>
</div>
</div>
<!-- Alerts -->
<div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm lg:col-span-1">
<div class="flex items-center justify-between">
<h2 class="text-base font-semibold text-slate-900">Alertes</h2>
<span
v-if="alerts.length > 0"
class="rounded-full bg-red-100 px-2 py-0.5 text-xs font-medium text-red-700"
>
{{ alerts.length }}
</span>
</div>
<div v-if="alerts.length === 0" class="mt-8 flex flex-col items-center py-4 text-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-emerald-50">
<svg class="h-6 w-6 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
</svg>
</div>
<p class="mt-3 text-sm font-medium text-slate-600">Tout va bien</p>
<p class="mt-1 text-xs text-slate-400">Aucune alerte pour le moment.</p>
</div>
<ul v-else class="mt-4 max-h-72 space-y-2 overflow-y-auto">
<li
v-for="(alert, index) in alerts"
:key="index"
class="rounded-md border-l-4 px-3 py-2 text-sm"
class="rounded-xl border-l-4 px-3 py-2.5 text-sm ring-1 ring-inset"
: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>
<p class="font-medium text-slate-800">{{ alert.message }}</p>
<p class="mt-1 text-xs text-slate-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>
<!-- Recent washes -->
<div class="rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm lg:col-span-1">
<div class="flex items-center justify-between">
<h2 class="text-base font-semibold text-slate-900">Derniers lavages</h2>
<Link
:href="route('supervisor.machines.index')"
class="text-sm text-indigo-600 hover:text-indigo-800"
:href="route('supervisor.washes.index')"
class="text-xs font-medium text-indigo-600 hover:text-indigo-800"
>
Voir tout →
Tout voir →
</Link>
</div>
<div v-if="machinesOverview.length === 0" class="text-sm text-gray-500">
Aucune machine dans votre périmètre.
<div v-if="recentWashes.length === 0" class="mt-6 text-sm text-slate-400">
Aucun lavage récent.
</div>
<ul v-else class="divide-y divide-gray-100">
<ul v-else class="mt-4 divide-y divide-slate-100">
<li
v-for="machine in machinesOverview"
:key="machine.uuid"
class="flex items-center justify-between py-3"
v-for="wash in recentWashes"
:key="wash.uuid"
class="flex items-center justify-between py-3 first:pt-0"
>
<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 }}
<div class="min-w-0">
<p class="truncate text-sm font-medium text-slate-800">{{ wash.machine_name }}</p>
<p class="truncate text-xs text-slate-400">
{{ wash.establishment_name }} · {{ formatDate(wash.started_at) }}
</p>
</div>
<span
class="rounded-full px-2.5 py-0.5 text-xs font-medium"
:class="statusColor(machine.status)"
>
{{ machine.status_label }}
</span>
<div class="ml-3 flex-shrink-0 text-right">
<p class="text-sm font-semibold text-slate-900">{{ formatCurrency(wash.cost) }}</p>
<span
class="mt-0.5 inline-block rounded-full px-2 py-0.5 text-[10px] font-medium ring-1 ring-inset"
:class="statusColor(wash.status)"
>
{{ wash.status_label }}
</span>
</div>
</li>
</ul>
</div>
</div>
<!-- Machines overview -->
<div class="mt-6 rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm">
<div class="mb-4 flex items-center justify-between">
<div>
<h2 class="text-base font-semibold text-slate-900">Parc machines</h2>
<p class="mt-0.5 text-sm text-slate-500">Aperçu en temps réel de vos équipements</p>
</div>
<Link
:href="route('supervisor.machines.index')"
class="rounded-lg bg-indigo-50 px-3 py-1.5 text-sm font-medium text-indigo-700 transition hover:bg-indigo-100"
>
Gérer le parc →
</Link>
</div>
<div v-if="machinesOverview.length === 0" class="py-8 text-center text-sm text-slate-400">
Aucune machine dans votre périmètre.
</div>
<div v-else class="grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-3">
<Link
v-for="machine in machinesOverview"
:key="machine.uuid"
:href="route('supervisor.machines.show', machine.uuid)"
class="group flex items-center gap-3 rounded-xl border border-slate-200 p-4 transition hover:border-indigo-200 hover:bg-indigo-50/30 hover:shadow-sm"
>
<div
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-slate-100 transition group-hover:bg-white"
>
<span class="h-2.5 w-2.5 rounded-full" :class="statusDotColor(machine.status)"/>
</div>
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-medium text-slate-800 group-hover:text-indigo-700">
{{ machine.name }}
</p>
<p class="truncate text-xs text-slate-400">
{{ machine.establishment_name }} · {{ machine.type_label }}
</p>
</div>
<span
class="flex-shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset"
:class="statusColor(machine.status)"
>
{{ machine.status_label }}
</span>
</Link>
</div>
</div>
</SupervisorLayout>
</template>