Intégration fonctionnalites V1
This commit is contained in:
bastien
@@ -0,0 +1,67 @@
|
||||
<script setup>
|
||||
import DangerButton from '@/Components/DangerButton.vue';
|
||||
import Modal from '@/Components/Modal.vue';
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import SecondaryButton from '@/Components/SecondaryButton.vue';
|
||||
|
||||
defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Confirmer la suppression',
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
confirmLabel: {
|
||||
type: String,
|
||||
default: 'Supprimer',
|
||||
},
|
||||
warning: {
|
||||
type: String,
|
||||
default: 'Cette action est irréversible.',
|
||||
},
|
||||
processing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
danger: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close', 'confirm']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :show="show" max-width="md" @close="emit('close')">
|
||||
<div class="p-6">
|
||||
<h2 class="text-lg font-semibold text-slate-900">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<p class="mt-2 text-sm text-slate-600">
|
||||
{{ message }}
|
||||
</p>
|
||||
<p v-if="warning" class="mt-2 rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-800">
|
||||
{{ warning }}
|
||||
</p>
|
||||
|
||||
<div class="mt-6 flex justify-end gap-3">
|
||||
<SecondaryButton type="button" :disabled="processing" @click="emit('close')">
|
||||
Annuler
|
||||
</SecondaryButton>
|
||||
<DangerButton v-if="danger" type="button" :disabled="processing" @click="emit('confirm')">
|
||||
{{ confirmLabel }}
|
||||
</DangerButton>
|
||||
<PrimaryButton v-else type="button" :disabled="processing" @click="emit('confirm')">
|
||||
{{ confirmLabel }}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
import { computed, onUnmounted, ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
align: {
|
||||
@@ -16,47 +16,65 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const open = ref(false);
|
||||
const dropdownRef = ref(null);
|
||||
|
||||
const closeOnEscape = (e) => {
|
||||
if (open.value && e.key === 'Escape') {
|
||||
open.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => document.addEventListener('keydown', closeOnEscape));
|
||||
onUnmounted(() => document.removeEventListener('keydown', closeOnEscape));
|
||||
const closeOnClickOutside = (e) => {
|
||||
if (open.value && dropdownRef.value && !dropdownRef.value.contains(e.target)) {
|
||||
open.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
watch(open, (isOpen) => {
|
||||
if (isOpen) {
|
||||
document.addEventListener('keydown', closeOnEscape);
|
||||
document.addEventListener('click', closeOnClickOutside);
|
||||
} else {
|
||||
document.removeEventListener('keydown', closeOnEscape);
|
||||
document.removeEventListener('click', closeOnClickOutside);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', closeOnEscape);
|
||||
document.removeEventListener('click', closeOnClickOutside);
|
||||
});
|
||||
|
||||
const widthClass = computed(() => {
|
||||
return {
|
||||
const widths = {
|
||||
48: 'w-48',
|
||||
}[props.width.toString()];
|
||||
56: 'w-56',
|
||||
64: 'w-64',
|
||||
72: 'w-72',
|
||||
};
|
||||
|
||||
return widths[props.width.toString()] ?? 'w-48';
|
||||
});
|
||||
|
||||
const alignmentClasses = computed(() => {
|
||||
if (props.align === 'left') {
|
||||
return 'ltr:origin-top-left rtl:origin-top-right start-0';
|
||||
} else if (props.align === 'right') {
|
||||
return 'ltr:origin-top-right rtl:origin-top-left end-0';
|
||||
} else {
|
||||
return 'origin-top';
|
||||
}
|
||||
});
|
||||
if (props.align === 'right') {
|
||||
return 'ltr:origin-top-right rtl:origin-top-left end-0';
|
||||
}
|
||||
|
||||
const open = ref(false);
|
||||
return 'origin-top';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<div @click="open = !open">
|
||||
<div ref="dropdownRef" class="relative">
|
||||
<div @click.stop="open = !open">
|
||||
<slot name="trigger" />
|
||||
</div>
|
||||
|
||||
<!-- Full Screen Dropdown Overlay -->
|
||||
<div
|
||||
v-show="open"
|
||||
class="fixed inset-0 z-40"
|
||||
@click="open = false"
|
||||
></div>
|
||||
|
||||
<Transition
|
||||
enter-active-class="transition ease-out duration-200"
|
||||
enter-from-class="opacity-0 scale-95"
|
||||
@@ -69,8 +87,6 @@ const open = ref(false);
|
||||
v-show="open"
|
||||
class="absolute z-50 mt-2 rounded-md shadow-lg"
|
||||
:class="[widthClass, alignmentClasses]"
|
||||
style="display: none"
|
||||
@click="open = false"
|
||||
>
|
||||
<div
|
||||
class="rounded-md ring-1 ring-black ring-opacity-5"
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true">
|
||||
<path
|
||||
d="M18 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2ZM8 4h8v2H8V4Zm-2 4h12v12H6V8Zm6 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
@@ -70,6 +70,7 @@ const maxWidthClass = computed(() => {
|
||||
lg: 'sm:max-w-lg',
|
||||
xl: 'sm:max-w-xl',
|
||||
'2xl': 'sm:max-w-2xl',
|
||||
'3xl': 'sm:max-w-3xl',
|
||||
}[props.maxWidth];
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<button
|
||||
class="inline-flex items-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-xs font-semibold uppercase tracking-widest text-white transition duration-150 ease-in-out hover:bg-gray-700 focus:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 active:bg-gray-900"
|
||||
class="inline-flex items-center rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500/30 focus:ring-offset-2 active:bg-indigo-800 disabled:opacity-50"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
|
||||
@@ -10,7 +10,7 @@ defineProps({
|
||||
<template>
|
||||
<button
|
||||
:type="type"
|
||||
class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-xs font-semibold uppercase tracking-widest text-gray-700 shadow-sm transition duration-150 ease-in-out hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25"
|
||||
class="inline-flex items-center rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:ring-offset-2 disabled:opacity-50"
|
||||
>
|
||||
<slot />
|
||||
</button>
|
||||
|
||||
@@ -0,0 +1,162 @@
|
||||
<script setup>
|
||||
import { filterInputClass } from '@/Components/Supervisor/ui.js';
|
||||
import { onMounted, onUnmounted, ref, watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
address: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
city: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
zipCode: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:address', 'update:city', 'update:zipCode']);
|
||||
|
||||
const root = ref(null);
|
||||
const query = ref(props.address ?? '');
|
||||
const suggestions = ref([]);
|
||||
const isOpen = ref(false);
|
||||
const isLoading = ref(false);
|
||||
const activeIndex = ref(-1);
|
||||
|
||||
let debounceTimer = null;
|
||||
|
||||
watch(
|
||||
() => props.address,
|
||||
(value) => {
|
||||
if (value !== query.value) {
|
||||
query.value = value ?? '';
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const closeSuggestions = () => {
|
||||
isOpen.value = false;
|
||||
activeIndex.value = -1;
|
||||
};
|
||||
|
||||
const searchAddresses = async () => {
|
||||
if (query.value.trim().length < 3) {
|
||||
suggestions.value = [];
|
||||
closeSuggestions();
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading.value = true;
|
||||
|
||||
try {
|
||||
const response = await window.axios.get(route('supervisor.organizations.addresses.search'), {
|
||||
params: { q: query.value.trim() },
|
||||
});
|
||||
|
||||
suggestions.value = response.data ?? [];
|
||||
isOpen.value = suggestions.value.length > 0;
|
||||
activeIndex.value = -1;
|
||||
} catch {
|
||||
suggestions.value = [];
|
||||
closeSuggestions();
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onInput = () => {
|
||||
emit('update:address', query.value);
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(searchAddresses, 300);
|
||||
};
|
||||
|
||||
const selectSuggestion = (suggestion) => {
|
||||
query.value = suggestion.address;
|
||||
emit('update:address', suggestion.address);
|
||||
emit('update:city', suggestion.city ?? '');
|
||||
emit('update:zipCode', suggestion.zip_code ?? '');
|
||||
closeSuggestions();
|
||||
};
|
||||
|
||||
const onKeydown = (event) => {
|
||||
if (!isOpen.value || suggestions.value.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowDown') {
|
||||
event.preventDefault();
|
||||
activeIndex.value = (activeIndex.value + 1) % suggestions.value.length;
|
||||
} else if (event.key === 'ArrowUp') {
|
||||
event.preventDefault();
|
||||
activeIndex.value = activeIndex.value <= 0
|
||||
? suggestions.value.length - 1
|
||||
: activeIndex.value - 1;
|
||||
} else if (event.key === 'Enter' && activeIndex.value >= 0) {
|
||||
event.preventDefault();
|
||||
selectSuggestion(suggestions.value[activeIndex.value]);
|
||||
} else if (event.key === 'Escape') {
|
||||
closeSuggestions();
|
||||
}
|
||||
};
|
||||
|
||||
const onClickOutside = (event) => {
|
||||
if (root.value && !root.value.contains(event.target)) {
|
||||
closeSuggestions();
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => document.addEventListener('click', onClickOutside));
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', onClickOutside);
|
||||
clearTimeout(debounceTimer);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="root" class="relative">
|
||||
<input
|
||||
v-model="query"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
placeholder="Rechercher une adresse…"
|
||||
:required="required"
|
||||
:class="filterInputClass"
|
||||
@input="onInput"
|
||||
@focus="searchAddresses"
|
||||
@keydown="onKeydown"
|
||||
/>
|
||||
|
||||
<p v-if="isLoading" class="mt-1 text-xs text-slate-400">
|
||||
Recherche en cours…
|
||||
</p>
|
||||
|
||||
<ul
|
||||
v-if="isOpen && suggestions.length > 0"
|
||||
class="absolute z-20 mt-1 max-h-56 w-full overflow-y-auto rounded-xl border border-slate-200 bg-white py-1 shadow-lg"
|
||||
>
|
||||
<li
|
||||
v-for="(suggestion, index) in suggestions"
|
||||
:key="`${suggestion.label}-${index}`"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="block w-full px-3 py-2 text-left text-sm transition hover:bg-indigo-50"
|
||||
:class="index === activeIndex ? 'bg-indigo-50 text-indigo-700' : 'text-slate-700'"
|
||||
@mousedown.prevent="selectSuggestion(suggestion)"
|
||||
>
|
||||
<span class="block font-medium">{{ suggestion.address }}</span>
|
||||
<span class="block text-xs text-slate-400">
|
||||
{{ [suggestion.zip_code, suggestion.city].filter(Boolean).join(' ') }}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
default: 'error',
|
||||
},
|
||||
});
|
||||
|
||||
const styles = {
|
||||
error: 'border-red-200 bg-red-50 text-red-800',
|
||||
success: 'border-emerald-200 bg-emerald-50 text-emerald-800',
|
||||
info: 'border-sky-200 bg-sky-50 text-sky-800',
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="mb-4 flex items-start gap-2 rounded-xl border px-4 py-3 text-sm"
|
||||
:class="styles[type] ?? styles.error"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup>
|
||||
import { cardClass } from '@/Components/Supervisor/ui.js';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="cardClass">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-slate-100">
|
||||
<thead class="bg-slate-50/80">
|
||||
<slot name="head" />
|
||||
</thead>
|
||||
<tbody
|
||||
class="divide-y divide-slate-100 bg-white [&_tr_td]:border-l-2 [&_tr_td]:border-l-transparent [&_tr_td]:transition-colors [&_tr_td]:duration-150 [&_tr:hover_td]:bg-indigo-50/70 [&_tr:hover_td:first-child]:border-l-indigo-500"
|
||||
>
|
||||
<slot />
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<slot name="footer" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script setup>
|
||||
import { labelClass } from '@/Components/Supervisor/ui.js';
|
||||
|
||||
defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
hint: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
fieldClass: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="fieldClass">
|
||||
<label class="block">
|
||||
<span :class="labelClass">{{ label }}</span>
|
||||
<slot />
|
||||
</label>
|
||||
<p v-if="hint" class="mt-1 text-xs text-slate-400">{{ hint }}</p>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,55 @@
|
||||
<script setup>
|
||||
import Modal from '@/Components/Modal.vue';
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import SecondaryButton from '@/Components/SecondaryButton.vue';
|
||||
|
||||
defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
submitLabel: {
|
||||
type: String,
|
||||
default: 'Enregistrer',
|
||||
},
|
||||
processing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
maxWidth: {
|
||||
type: String,
|
||||
default: '2xl',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close', 'submit']);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :show="show" :max-width="maxWidth" @close="emit('close')">
|
||||
<form class="flex max-h-[calc(100vh-6rem)] flex-col" @submit.prevent="emit('submit')">
|
||||
<div class="border-b border-slate-200 px-6 py-4">
|
||||
<h2 class="text-lg font-semibold text-slate-900">
|
||||
{{ title }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="overflow-y-auto px-6 py-5">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3 border-t border-slate-200 bg-slate-50 px-6 py-4">
|
||||
<SecondaryButton type="button" :disabled="processing" @click="emit('close')">
|
||||
Annuler
|
||||
</SecondaryButton>
|
||||
<PrimaryButton type="submit" :disabled="processing">
|
||||
{{ submitLabel }}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -0,0 +1,266 @@
|
||||
<script setup>
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: '',
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: 'Sélectionner…',
|
||||
},
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'dark',
|
||||
validator: (value) => ['dark', 'light'].includes(value),
|
||||
},
|
||||
bordered: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'change']);
|
||||
|
||||
const root = ref(null);
|
||||
const isOpen = ref(false);
|
||||
const activeIndex = ref(-1);
|
||||
|
||||
const normalizedValue = computed(() => {
|
||||
const value = props.modelValue;
|
||||
|
||||
return value === null || value === undefined ? '' : String(value);
|
||||
});
|
||||
|
||||
const selectedLabel = computed(() => {
|
||||
const selected = props.options.find((option) => String(option.value) === normalizedValue.value);
|
||||
|
||||
return selected?.label ?? props.placeholder;
|
||||
});
|
||||
|
||||
const isDark = computed(() => props.variant === 'dark');
|
||||
|
||||
const wrapperClass = computed(() => (
|
||||
props.bordered
|
||||
? (isDark.value ? 'rounded-xl border border-white/25 p-4' : 'rounded-xl border border-slate-200 p-4')
|
||||
: ''
|
||||
));
|
||||
|
||||
const labelClass = computed(() => (
|
||||
isDark.value
|
||||
? 'flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-indigo-200'
|
||||
: 'flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-slate-500'
|
||||
));
|
||||
|
||||
const triggerClass = computed(() => (
|
||||
isDark.value
|
||||
? 'border-white/20 bg-transparent text-white hover:border-white/30 focus:border-white/40 focus:ring-white/15'
|
||||
: 'border-slate-200 bg-white text-slate-800 hover:border-slate-300 focus:border-indigo-400 focus:ring-indigo-500/20'
|
||||
));
|
||||
|
||||
const menuClass = computed(() => (
|
||||
isDark.value
|
||||
? 'border-white/20 bg-slate-900/95 text-white shadow-xl shadow-black/30 backdrop-blur-md'
|
||||
: 'border-slate-200 bg-white text-slate-800 shadow-lg shadow-slate-200/60'
|
||||
));
|
||||
|
||||
const chevronClass = computed(() => (
|
||||
isDark.value ? 'text-indigo-200' : 'text-slate-400'
|
||||
));
|
||||
|
||||
const optionClass = (option, index) => {
|
||||
const isSelected = String(option.value) === normalizedValue.value;
|
||||
const isActive = index === activeIndex.value;
|
||||
|
||||
if (isDark.value) {
|
||||
if (isSelected) {
|
||||
return 'bg-indigo-500/25 text-white';
|
||||
}
|
||||
|
||||
if (isActive) {
|
||||
return 'bg-white/10 text-white';
|
||||
}
|
||||
|
||||
return 'text-indigo-100 hover:bg-white/10 hover:text-white';
|
||||
}
|
||||
|
||||
if (isSelected) {
|
||||
return 'bg-indigo-50 text-indigo-700';
|
||||
}
|
||||
|
||||
if (isActive) {
|
||||
return 'bg-slate-50 text-slate-900';
|
||||
}
|
||||
|
||||
return 'text-slate-700 hover:bg-slate-50';
|
||||
};
|
||||
|
||||
const toggle = () => {
|
||||
isOpen.value = !isOpen.value;
|
||||
|
||||
if (isOpen.value) {
|
||||
const selectedIndex = props.options.findIndex((option) => String(option.value) === normalizedValue.value);
|
||||
activeIndex.value = selectedIndex >= 0 ? selectedIndex : 0;
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
isOpen.value = false;
|
||||
activeIndex.value = -1;
|
||||
};
|
||||
|
||||
const selectOption = (option) => {
|
||||
emit('update:modelValue', option.value);
|
||||
emit('change', option.value);
|
||||
close();
|
||||
};
|
||||
|
||||
const onClickOutside = (event) => {
|
||||
if (isOpen.value && root.value && !root.value.contains(event.target)) {
|
||||
close();
|
||||
}
|
||||
};
|
||||
|
||||
const onKeydown = (event) => {
|
||||
if (!isOpen.value) {
|
||||
if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {
|
||||
event.preventDefault();
|
||||
isOpen.value = true;
|
||||
activeIndex.value = Math.max(
|
||||
0,
|
||||
props.options.findIndex((option) => String(option.value) === normalizedValue.value),
|
||||
);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
close();
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowDown') {
|
||||
event.preventDefault();
|
||||
activeIndex.value = Math.min(activeIndex.value + 1, props.options.length - 1);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowUp') {
|
||||
event.preventDefault();
|
||||
activeIndex.value = Math.max(activeIndex.value - 1, 0);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
|
||||
if (props.options[activeIndex.value]) {
|
||||
selectOption(props.options[activeIndex.value]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', onClickOutside);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', onClickOutside);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="root" :class="wrapperClass">
|
||||
<label
|
||||
v-if="label"
|
||||
:for="id"
|
||||
:class="labelClass"
|
||||
>
|
||||
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
|
||||
</svg>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
||||
<div class="relative" :class="label ? 'mt-2' : ''">
|
||||
<button
|
||||
:id="id"
|
||||
type="button"
|
||||
class="flex w-full items-center justify-between gap-3 rounded-lg border py-2.5 pl-3 pr-3 text-left text-sm font-medium transition focus:outline-none focus:ring-2"
|
||||
:class="triggerClass"
|
||||
:aria-expanded="isOpen"
|
||||
aria-haspopup="listbox"
|
||||
@click.stop="toggle"
|
||||
@keydown="onKeydown"
|
||||
>
|
||||
<span class="truncate">{{ selectedLabel }}</span>
|
||||
<svg
|
||||
class="h-4 w-4 shrink-0 transition-transform duration-200"
|
||||
:class="[chevronClass, isOpen ? 'rotate-180' : '']"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<Transition
|
||||
enter-active-class="transition ease-out duration-150"
|
||||
enter-from-class="opacity-0 -translate-y-1 scale-[0.98]"
|
||||
enter-to-class="opacity-100 translate-y-0 scale-100"
|
||||
leave-active-class="transition ease-in duration-100"
|
||||
leave-from-class="opacity-100 translate-y-0 scale-100"
|
||||
leave-to-class="opacity-0 -translate-y-1 scale-[0.98]"
|
||||
>
|
||||
<ul
|
||||
v-show="isOpen"
|
||||
class="absolute z-[100] mt-2 max-h-60 w-full overflow-auto rounded-xl border p-1.5"
|
||||
:class="menuClass"
|
||||
role="listbox"
|
||||
:aria-labelledby="id"
|
||||
>
|
||||
<li
|
||||
v-for="(option, index) in options"
|
||||
:key="`${option.value}-${index}`"
|
||||
role="option"
|
||||
:aria-selected="String(option.value) === normalizedValue"
|
||||
class="flex cursor-pointer items-center justify-between gap-2 rounded-lg px-3 py-2.5 text-sm transition"
|
||||
:class="optionClass(option, index)"
|
||||
@click.stop="selectOption(option)"
|
||||
@mouseenter="activeIndex = index"
|
||||
>
|
||||
<span class="truncate">{{ option.label }}</span>
|
||||
<svg
|
||||
v-if="String(option.value) === normalizedValue"
|
||||
class="h-4 w-4 shrink-0"
|
||||
:class="isDark ? 'text-indigo-300' : 'text-indigo-500'"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
</li>
|
||||
</ul>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
description: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p v-if="description" class="text-sm text-slate-500">{{ description }}</p>
|
||||
<div v-else class="flex-1" />
|
||||
<div class="flex shrink-0 items-center gap-3">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,96 @@
|
||||
<script setup>
|
||||
import { filterSelectClass } from '@/Components/Supervisor/ui.js';
|
||||
import { listPerPageOptions } from '@/Components/Supervisor/useListFilters.js';
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
|
||||
defineProps({
|
||||
paginator: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
perPage: {
|
||||
type: [Number, String],
|
||||
default: 10,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:perPage']);
|
||||
|
||||
const formatLabel = (label) => {
|
||||
const text = String(label)
|
||||
.replace(/«/g, '‹')
|
||||
.replace(/»/g, '›')
|
||||
.trim();
|
||||
|
||||
if (/previous/i.test(text)) {
|
||||
return 'Précédent';
|
||||
}
|
||||
|
||||
if (/next/i.test(text)) {
|
||||
return 'Suivant';
|
||||
}
|
||||
|
||||
return text;
|
||||
};
|
||||
|
||||
const onPerPageChange = (event) => {
|
||||
emit('update:perPage', Number(event.target.value));
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="paginator.total > 0"
|
||||
class="flex flex-wrap items-center justify-between gap-x-6 gap-y-3 border-t border-slate-100 px-6 py-4"
|
||||
>
|
||||
<p class="shrink-0 text-sm text-slate-500">
|
||||
{{ paginator.from ?? 0 }}–{{ paginator.to ?? 0 }}
|
||||
<span class="text-slate-400">sur</span>
|
||||
{{ paginator.total }}
|
||||
<span class="text-slate-400">résultat(s)</span>
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<label class="flex shrink-0 items-center gap-2 text-sm text-slate-600">
|
||||
<span class="whitespace-nowrap">Lignes par page</span>
|
||||
<select
|
||||
:value="perPage"
|
||||
:class="filterSelectClass"
|
||||
@change="onPerPageChange"
|
||||
>
|
||||
<option v-for="option in listPerPageOptions" :key="option" :value="option">
|
||||
{{ option }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<nav
|
||||
v-if="paginator.last_page > 1"
|
||||
class="flex flex-wrap items-center gap-1"
|
||||
>
|
||||
<template v-for="link in paginator.links" :key="link.label">
|
||||
<Link
|
||||
v-if="link.url"
|
||||
:href="link.url"
|
||||
class="rounded-lg px-3 py-1.5 text-sm font-medium transition"
|
||||
:class="
|
||||
link.active
|
||||
? 'bg-indigo-600 text-white shadow-sm'
|
||||
: 'text-slate-600 hover:bg-slate-100'
|
||||
"
|
||||
preserve-state
|
||||
>
|
||||
{{ formatLabel(link.label) }}
|
||||
</Link>
|
||||
<span
|
||||
v-else
|
||||
class="cursor-not-allowed rounded-lg px-3 py-1.5 text-sm font-medium text-slate-300"
|
||||
:class="link.active ? 'bg-indigo-600 text-white shadow-sm' : ''"
|
||||
>
|
||||
{{ formatLabel(link.label) }}
|
||||
</span>
|
||||
</template>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup>
|
||||
defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
colorClass: {
|
||||
type: String,
|
||||
default: 'bg-slate-100 text-slate-700 ring-slate-500/20',
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span
|
||||
class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset"
|
||||
:class="colorClass"
|
||||
>
|
||||
{{ label }}
|
||||
</span>
|
||||
</template>
|
||||
@@ -0,0 +1,96 @@
|
||||
<script setup>
|
||||
import { filterInputClass, filterLabelClass, thFilterClass } from '@/Components/Supervisor/ui.js';
|
||||
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
align: {
|
||||
type: String,
|
||||
default: 'left',
|
||||
},
|
||||
sortable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
sortKey: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
activeSort: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
sortDirection: {
|
||||
type: String,
|
||||
default: 'asc',
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['sort']);
|
||||
|
||||
const isActive = () => props.sortable && props.activeSort === props.sortKey;
|
||||
|
||||
const handleSort = () => {
|
||||
if (props.sortable && props.sortKey) {
|
||||
emit('sort', props.sortKey);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<th
|
||||
:class="[
|
||||
thFilterClass,
|
||||
align === 'right' ? 'text-right' : 'text-left',
|
||||
]"
|
||||
>
|
||||
<button
|
||||
v-if="sortable"
|
||||
type="button"
|
||||
class="mb-1.5 flex items-center gap-1 text-xs font-semibold uppercase tracking-wide transition"
|
||||
:class="[
|
||||
align === 'right' ? 'ml-auto' : '',
|
||||
isActive() ? 'text-indigo-600' : 'text-slate-600 hover:text-indigo-600',
|
||||
]"
|
||||
@click="handleSort"
|
||||
>
|
||||
<span>{{ label }}</span>
|
||||
<svg
|
||||
v-if="isActive() && sortDirection === 'asc'"
|
||||
class="h-3.5 w-3.5 flex-shrink-0"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7" />
|
||||
</svg>
|
||||
<svg
|
||||
v-else-if="isActive() && sortDirection === 'desc'"
|
||||
class="h-3.5 w-3.5 flex-shrink-0"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
<svg
|
||||
v-else
|
||||
class="h-3.5 w-3.5 flex-shrink-0 text-slate-300"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l4-4 4 4M8 15l4 4 4-4" />
|
||||
</svg>
|
||||
</button>
|
||||
<span v-else :class="filterLabelClass">{{ label }}</span>
|
||||
<slot>
|
||||
<span class="block h-[34px]" aria-hidden="true" />
|
||||
</slot>
|
||||
</th>
|
||||
</template>
|
||||
@@ -0,0 +1,67 @@
|
||||
export const labelClass = 'block text-xs font-semibold uppercase tracking-wide text-slate-500';
|
||||
|
||||
export const inputClass =
|
||||
'mt-1.5 block w-full rounded-xl border-slate-200 bg-white px-3 py-2.5 text-sm text-slate-800 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/20';
|
||||
|
||||
export const selectClass = inputClass;
|
||||
|
||||
export const cardClass = 'overflow-hidden rounded-2xl border border-slate-200/80 bg-white shadow-sm';
|
||||
|
||||
export const filterBarClass =
|
||||
'mb-6 flex flex-wrap gap-4 rounded-2xl border border-slate-200/80 bg-white p-5 shadow-sm';
|
||||
|
||||
export const thFilterClass = 'px-6 py-3 align-bottom';
|
||||
|
||||
export const filterLabelClass =
|
||||
'mb-1.5 block text-xs font-semibold uppercase tracking-wide text-slate-600';
|
||||
|
||||
export const filterInputClass =
|
||||
'block w-full min-w-[7rem] rounded-lg border-slate-200 bg-white px-2.5 py-1.5 text-sm text-slate-800 shadow-sm transition placeholder:text-slate-400 focus:border-indigo-400 focus:outline-none focus:ring-2 focus:ring-indigo-500/20';
|
||||
|
||||
export const filterSelectClass = filterInputClass;
|
||||
|
||||
export const formPanelClass =
|
||||
'mb-6 rounded-2xl border border-indigo-200/60 bg-white p-6 shadow-sm ring-1 ring-indigo-50';
|
||||
|
||||
export const thClass =
|
||||
'px-6 py-4 text-left text-xs font-semibold uppercase tracking-wide text-slate-600';
|
||||
|
||||
export const tdClass = 'px-6 py-4 text-sm text-slate-600';
|
||||
|
||||
export const rowClass = '';
|
||||
|
||||
export const linkClass = 'font-medium text-indigo-600 transition hover:text-indigo-800';
|
||||
|
||||
export const machineStatusColors = {
|
||||
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',
|
||||
};
|
||||
|
||||
export const bookingStatusColors = {
|
||||
pending: 'bg-slate-100 text-slate-600 ring-slate-500/20',
|
||||
confirmed: 'bg-sky-100 text-sky-800 ring-sky-600/20',
|
||||
expired: 'bg-orange-100 text-orange-800 ring-orange-600/20',
|
||||
active: 'bg-emerald-100 text-emerald-800 ring-emerald-600/20',
|
||||
completed: 'bg-indigo-100 text-indigo-800 ring-indigo-600/20',
|
||||
cancelled: 'bg-amber-100 text-amber-800 ring-amber-600/20',
|
||||
no_show: 'bg-red-100 text-red-800 ring-red-600/20',
|
||||
};
|
||||
|
||||
export const washStatusColors = {
|
||||
pending_start: 'bg-slate-100 text-slate-600 ring-slate-500/20',
|
||||
running: 'bg-sky-100 text-sky-800 ring-sky-600/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-amber-100 text-amber-800 ring-amber-600/20',
|
||||
};
|
||||
|
||||
export const activeStatusColors = {
|
||||
active: 'bg-emerald-100 text-emerald-800 ring-emerald-600/20',
|
||||
inactive: 'bg-slate-100 text-slate-600 ring-slate-500/20',
|
||||
};
|
||||
|
||||
export const getStatusColor = (status, map) => map[status] ?? 'bg-slate-100 text-slate-700 ring-slate-500/20';
|
||||
@@ -0,0 +1,75 @@
|
||||
import { router } from '@inertiajs/vue3';␍
|
||||
import { reactive, watch } from 'vue';␍
|
||||
␍
|
||||
export const listPerPageOptions = [10, 25, 50];␍
|
||||
␍
|
||||
export function useListFilters(routeName, initialFilters, { debounceKeys = [] } = {}) {␍
|
||||
const localFilters = reactive({ ...initialFilters });␍
|
||||
␍
|
||||
const buildParams = ({ resetPage = false } = {}) => {␍
|
||||
const params = { ...localFilters };␍
|
||||
␍
|
||||
if (resetPage) {␍
|
||||
delete params.page;␍
|
||||
}␍
|
||||
␍
|
||||
Object.keys(params).forEach((key) => {␍
|
||||
if (params[key] === '' || params[key] === null || params[key] === undefined) {␍
|
||||
delete params[key];␍
|
||||
}␍
|
||||
});␍
|
||||
␍
|
||||
return params;␍
|
||||
};␍
|
||||
␍
|
||||
const fetchList = ({ resetPage = false } = {}) => {␍
|
||||
router.get(route(routeName), buildParams({ resetPage }), {␍
|
||||
preserveState: true,␍
|
||||
replace: true,␍
|
||||
});␍
|
||||
};␍
|
||||
␍
|
||||
let debounceTimer = null;␍
|
||||
␍
|
||||
if (debounceKeys.length > 0) {␍
|
||||
debounceKeys.forEach((key) => {␍
|
||||
watch(␍
|
||||
() => localFilters[key],␍
|
||||
() => {␍
|
||||
clearTimeout(debounceTimer);␍
|
||||
debounceTimer = setTimeout(() => fetchList({ resetPage: true }), 300);␍
|
||||
},␍
|
||||
);␍
|
||||
});␍
|
||||
}␍
|
||||
␍
|
||||
const immediateKeys = Object.keys(initialFilters).filter(␍
|
||||
(key) => !debounceKeys.includes(key) && key !== 'per_page',␍
|
||||
);␍
|
||||
␍
|
||||
if (immediateKeys.length > 0) {␍
|
||||
watch(␍
|
||||
() => immediateKeys.map((key) => localFilters[key]),␍
|
||||
() => fetchList({ resetPage: true }),␍
|
||||
);␍
|
||||
}␍
|
||||
␍
|
||||
if ('per_page' in initialFilters) {␍
|
||||
watch(␍
|
||||
() => localFilters.per_page,␍
|
||||
() => fetchList({ resetPage: true }),␍
|
||||
);␍
|
||||
}␍
|
||||
␍
|
||||
const toggleSort = (key, descFirstKeys = []) => {␍
|
||||
if (localFilters.sort === key) {␍
|
||||
localFilters.direction = localFilters.direction === 'asc' ? 'desc' : 'asc';␍
|
||||
return;␍
|
||||
}␍
|
||||
␍
|
||||
localFilters.sort = key;␍
|
||||
localFilters.direction = descFirstKeys.includes(key) ? 'desc' : 'asc';␍
|
||||
};␍
|
||||
␍
|
||||
return { localFilters, toggleSort };␍
|
||||
}␍
|
||||
@@ -1,7 +1,8 @@
|
||||
<script setup>
|
||||
import ApplicationLogo from '@/Components/ApplicationLogo.vue';
|
||||
import LaverieLogo from '@/Components/LaverieLogo.vue';
|
||||
import Dropdown from '@/Components/Dropdown.vue';
|
||||
import { Link, usePage } from '@inertiajs/vue3';
|
||||
import { computed } from 'vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
|
||||
defineProps({
|
||||
title: {
|
||||
@@ -10,120 +11,308 @@ defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const STORAGE_KEY = 'supervisor-sidebar-collapsed';
|
||||
|
||||
const page = usePage();
|
||||
const supervisor = computed(() => page.props.auth.supervisor);
|
||||
const sidebarCollapsed = ref(false);
|
||||
|
||||
const navItems = [
|
||||
{ label: 'Tableau de bord', route: 'supervisor.dashboard', icon: 'dashboard' },
|
||||
{ label: 'Machines', route: 'supervisor.machines.index', icon: 'machines' },
|
||||
{ label: 'Réservations', route: 'supervisor.bookings.index', icon: 'bookings' },
|
||||
{ label: 'Lavages', route: 'supervisor.washes.index', icon: 'washes' },
|
||||
{ label: 'Tarifs', route: 'supervisor.pricing.index', icon: 'pricing' },
|
||||
{ label: 'Promotions', route: 'supervisor.promotions.index', icon: 'promotions' },
|
||||
onMounted(() => {
|
||||
sidebarCollapsed.value = localStorage.getItem(STORAGE_KEY) === '1';
|
||||
});
|
||||
|
||||
watch(sidebarCollapsed, (value) => {
|
||||
localStorage.setItem(STORAGE_KEY, value ? '1' : '0');
|
||||
});
|
||||
|
||||
const toggleSidebar = () => {
|
||||
sidebarCollapsed.value = !sidebarCollapsed.value;
|
||||
};
|
||||
const navGroups = [
|
||||
{
|
||||
label: 'Vue d\'ensemble',
|
||||
items: [
|
||||
{ label: 'Tableau de bord', route: 'supervisor.dashboard', icon: 'dashboard' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Exploitation',
|
||||
items: [
|
||||
{ label: 'Enseignes', route: 'supervisor.organizations.index', icon: 'organizations' },
|
||||
{ label: 'Machines', route: 'supervisor.machines.index', icon: 'machines' },
|
||||
{ label: 'Réservations', route: 'supervisor.bookings.index', icon: 'bookings' },
|
||||
{ label: 'Lavages', route: 'supervisor.washes.index', icon: 'washes' },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Commercial',
|
||||
items: [
|
||||
{ label: 'Tarifs', route: 'supervisor.pricing.index', icon: 'pricing' },
|
||||
{ label: 'Promotions', route: 'supervisor.promotions.index', icon: 'promotions' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const roleLabels = {
|
||||
platform_admin: 'Administrateur',
|
||||
owner: 'Propriétaire',
|
||||
manager: 'Gestionnaire',
|
||||
viewer: 'Lecture seule',
|
||||
};
|
||||
|
||||
const initials = computed(() => {
|
||||
const name = supervisor.value?.name?.trim() ?? '';
|
||||
if (!name) return '?';
|
||||
const parts = name.split(/\s+/);
|
||||
if (parts.length >= 2) {
|
||||
return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
|
||||
}
|
||||
return name.slice(0, 2).toUpperCase();
|
||||
});
|
||||
|
||||
const isActive = (routeName) => {
|
||||
if (routeName === 'supervisor.machines.index') {
|
||||
return route().current('supervisor.machines.*');
|
||||
}
|
||||
if (routeName === 'supervisor.organizations.index') {
|
||||
return route().current('supervisor.organizations.*');
|
||||
}
|
||||
return route().current(routeName);
|
||||
};
|
||||
|
||||
const iconPaths = {
|
||||
dashboard: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6',
|
||||
organizations: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
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',
|
||||
promotions: 'M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z',
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-100">
|
||||
<div class="min-h-screen bg-slate-50">
|
||||
<div class="flex min-h-screen">
|
||||
<!-- Sidebar -->
|
||||
<aside class="hidden w-64 flex-shrink-0 bg-indigo-900 lg:flex lg:flex-col">
|
||||
<div class="flex h-16 items-center px-6">
|
||||
<Link :href="route('supervisor.dashboard')" class="flex items-center gap-2">
|
||||
<ApplicationLogo class="h-8 w-auto fill-current text-white" />
|
||||
<span class="text-lg font-semibold text-white">Laverie</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<nav class="mt-4 flex-1 space-y-1 px-3">
|
||||
<Link
|
||||
v-for="item in navItems"
|
||||
:key="item.route"
|
||||
:href="route(item.route)"
|
||||
class="flex items-center rounded-md px-3 py-2 text-sm font-medium transition"
|
||||
:class="
|
||||
isActive(item.route)
|
||||
? 'bg-indigo-800 text-white'
|
||||
: 'text-indigo-100 hover:bg-indigo-800 hover:text-white'
|
||||
"
|
||||
<aside
|
||||
class="hidden flex-shrink-0 transition-[width] duration-300 ease-in-out lg:flex lg:flex-col"
|
||||
:class="sidebarCollapsed ? 'w-[4.75rem]' : 'w-72'"
|
||||
>
|
||||
<div class="flex h-full flex-col bg-gradient-to-b from-slate-900 via-slate-900 to-indigo-950 shadow-xl">
|
||||
<!-- Logo + toggle -->
|
||||
<div
|
||||
class="flex items-center border-b border-white/5"
|
||||
:class="sidebarCollapsed ? 'flex-col justify-center gap-2 py-3 px-2' : 'h-16 justify-between px-4'"
|
||||
>
|
||||
{{ item.label }}
|
||||
</Link>
|
||||
</nav>
|
||||
<button
|
||||
v-if="sidebarCollapsed"
|
||||
type="button"
|
||||
class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-slate-400 transition hover:bg-white/10 hover:text-white"
|
||||
title="Agrandir le menu"
|
||||
@click="toggleSidebar"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="border-t border-indigo-800 p-4">
|
||||
<p class="truncate text-sm font-medium text-white">
|
||||
{{ supervisor?.name }}
|
||||
</p>
|
||||
<p class="truncate text-xs text-indigo-300">
|
||||
{{ supervisor?.email }}
|
||||
</p>
|
||||
<Link
|
||||
:href="route('supervisor.dashboard')"
|
||||
class="flex items-center rounded-xl transition hover:opacity-90"
|
||||
:class="sidebarCollapsed ? 'justify-center' : 'gap-3'"
|
||||
:title="sidebarCollapsed ? 'Laverie' : undefined"
|
||||
>
|
||||
<div class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-white/10 ring-1 ring-white/20">
|
||||
<LaverieLogo class="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<div v-show="!sidebarCollapsed" class="min-w-0">
|
||||
<span class="text-base font-semibold tracking-tight text-white">Laverie</span>
|
||||
<p class="text-[10px] font-medium uppercase tracking-widest text-indigo-300/80">
|
||||
Back-office
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<button
|
||||
v-if="!sidebarCollapsed"
|
||||
type="button"
|
||||
class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg text-slate-400 transition hover:bg-white/10 hover:text-white"
|
||||
title="Réduire le menu"
|
||||
@click="toggleSidebar"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav
|
||||
class="mt-2 flex-1 space-y-4 overflow-y-auto pb-4"
|
||||
:class="sidebarCollapsed ? 'px-2' : 'px-3'"
|
||||
>
|
||||
<div v-for="(group, groupIndex) in navGroups" :key="group.label">
|
||||
<p
|
||||
v-show="!sidebarCollapsed"
|
||||
class="mb-2 px-3 text-[11px] font-semibold uppercase tracking-wider text-slate-500"
|
||||
>
|
||||
{{ group.label }}
|
||||
</p>
|
||||
<div
|
||||
v-if="sidebarCollapsed && groupIndex > 0"
|
||||
class="mx-auto mb-2 h-px w-8 bg-white/10"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div class="space-y-0.5">
|
||||
<Link
|
||||
v-for="item in group.items"
|
||||
:key="item.route"
|
||||
:href="route(item.route)"
|
||||
class="group relative flex items-center rounded-xl text-sm font-medium transition-all duration-150"
|
||||
:class="[
|
||||
sidebarCollapsed ? 'justify-center px-0 py-2.5' : 'gap-3 px-3 py-2.5',
|
||||
isActive(item.route)
|
||||
? 'bg-white/10 text-white shadow-sm ring-1 ring-white/10'
|
||||
: 'text-slate-400 hover:bg-white/5 hover:text-white',
|
||||
]"
|
||||
:title="sidebarCollapsed ? item.label : undefined"
|
||||
>
|
||||
<span
|
||||
class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg transition-colors"
|
||||
:class="
|
||||
isActive(item.route)
|
||||
? 'bg-indigo-500/30 text-indigo-200'
|
||||
: 'bg-white/5 text-slate-500 group-hover:bg-white/10 group-hover:text-slate-300'
|
||||
"
|
||||
>
|
||||
<svg
|
||||
class="h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
:d="iconPaths[item.icon]"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span v-show="!sidebarCollapsed">{{ item.label }}</span>
|
||||
<span
|
||||
v-if="isActive(item.route) && !sidebarCollapsed"
|
||||
class="ml-auto h-1.5 w-1.5 rounded-full bg-indigo-400"
|
||||
/>
|
||||
|
||||
<!-- Tooltip mode réduit -->
|
||||
<span
|
||||
v-if="sidebarCollapsed"
|
||||
class="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-lg bg-slate-800 px-2.5 py-1.5 text-xs font-medium text-white shadow-lg ring-1 ring-white/10 group-hover:block"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="flex flex-1 flex-col">
|
||||
<div class="flex min-w-0 flex-1 flex-col">
|
||||
<!-- Header -->
|
||||
<header class="border-b border-gray-200 bg-white shadow-sm">
|
||||
<header class="sticky top-0 z-10 border-b border-slate-200/80 bg-white/80 backdrop-blur-md">
|
||||
<div class="flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex min-w-0 items-center gap-4">
|
||||
<Link
|
||||
:href="route('supervisor.dashboard')"
|
||||
class="text-lg font-semibold text-gray-800 lg:hidden"
|
||||
class="text-lg font-semibold text-slate-800 lg:hidden"
|
||||
>
|
||||
Laverie
|
||||
</Link>
|
||||
<h1 v-if="title" class="text-lg font-semibold text-gray-800">
|
||||
{{ title }}
|
||||
</h1>
|
||||
<div v-if="title" class="min-w-0">
|
||||
<h1 class="truncate text-lg font-semibold text-slate-900">
|
||||
{{ title }}
|
||||
</h1>
|
||||
</div>
|
||||
<slot name="header" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="hidden text-sm text-gray-600 sm:inline">
|
||||
{{ supervisor?.name }}
|
||||
</span>
|
||||
<Link
|
||||
:href="route('logout')"
|
||||
method="post"
|
||||
as="button"
|
||||
class="rounded-md bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-200"
|
||||
>
|
||||
Déconnexion
|
||||
</Link>
|
||||
<div class="flex items-center gap-3">
|
||||
<slot name="actions" />
|
||||
<Dropdown align="right" width="64" content-classes="overflow-hidden rounded-xl bg-white py-0 shadow-xl ring-1 ring-slate-200">
|
||||
<template #trigger>
|
||||
<button
|
||||
type="button"
|
||||
class="flex h-9 w-9 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 text-xs font-bold text-white shadow-sm ring-2 ring-white transition hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-indigo-500/30"
|
||||
:title="supervisor?.name"
|
||||
>
|
||||
{{ initials }}
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<template #content>
|
||||
<div class="border-b border-slate-100 px-5 py-4">
|
||||
<p class="truncate text-base font-semibold text-slate-900">
|
||||
{{ supervisor?.name }}
|
||||
</p>
|
||||
<p class="mt-0.5 truncate text-sm text-slate-500">
|
||||
{{ supervisor?.email }}
|
||||
</p>
|
||||
<p class="mt-2 inline-flex rounded-full bg-indigo-50 px-2.5 py-1 text-xs font-medium text-indigo-700">
|
||||
{{ roleLabels[supervisor?.role] ?? supervisor?.role }}
|
||||
</p>
|
||||
</div>
|
||||
<Link
|
||||
:href="route('logout')"
|
||||
method="post"
|
||||
as="button"
|
||||
class="flex w-full items-center gap-2.5 px-5 py-3 text-sm font-medium text-red-600 transition hover:bg-red-50"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.75">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
|
||||
/>
|
||||
</svg>
|
||||
Déconnexion
|
||||
</Link>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile nav -->
|
||||
<nav class="flex gap-1 overflow-x-auto border-t border-gray-100 px-4 py-2 lg:hidden">
|
||||
<Link
|
||||
v-for="item in navItems"
|
||||
:key="item.route"
|
||||
:href="route(item.route)"
|
||||
class="whitespace-nowrap rounded-md px-3 py-1.5 text-xs font-medium"
|
||||
:class="
|
||||
isActive(item.route)
|
||||
? 'bg-indigo-100 text-indigo-800'
|
||||
: 'text-gray-600 hover:bg-gray-100'
|
||||
"
|
||||
>
|
||||
{{ item.label }}
|
||||
</Link>
|
||||
<nav class="flex gap-1 overflow-x-auto border-t border-slate-100 px-3 py-2 lg:hidden">
|
||||
<template v-for="group in navGroups" :key="group.label">
|
||||
<Link
|
||||
v-for="item in group.items"
|
||||
:key="item.route"
|
||||
:href="route(item.route)"
|
||||
class="whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-medium transition"
|
||||
:class="
|
||||
isActive(item.route)
|
||||
? 'bg-indigo-50 text-indigo-700 ring-1 ring-indigo-200'
|
||||
: 'text-slate-600 hover:bg-slate-100'
|
||||
"
|
||||
>
|
||||
{{ item.label }}
|
||||
</Link>
|
||||
</template>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Flash message -->
|
||||
<div
|
||||
v-if="page.props.flash?.success"
|
||||
class="mx-4 mt-4 rounded-md bg-green-50 px-4 py-3 text-sm text-green-800 sm:mx-6 lg:mx-8"
|
||||
class="mx-4 mt-4 flex items-center gap-2 rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800 sm:mx-6 lg:mx-8"
|
||||
>
|
||||
<svg class="h-4 w-4 flex-shrink-0" 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>
|
||||
{{ page.props.flash.success }}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<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 LaverieLogo from '@/Components/LaverieLogo.vue';
|
||||
import { inputClass, labelClass } from '@/Components/Supervisor/ui.js';
|
||||
import { Head, useForm } from '@inertiajs/vue3';
|
||||
|
||||
defineProps({
|
||||
@@ -29,65 +29,60 @@ const submit = () => {
|
||||
<template>
|
||||
<Head title="Connexion superviseur" />
|
||||
|
||||
<div class="flex min-h-screen flex-col items-center justify-center bg-gray-100 px-4">
|
||||
<div class="flex min-h-screen flex-col items-center justify-center bg-gradient-to-br from-slate-900 via-slate-900 to-indigo-950 px-4 py-12">
|
||||
<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 class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-white/10 ring-1 ring-white/20">
|
||||
<LaverieLogo class="h-8 w-8 text-white" />
|
||||
</div>
|
||||
<h1 class="text-2xl font-bold tracking-tight text-white">Laverie</h1>
|
||||
<p class="mt-1 text-sm text-indigo-200/80">Back-office — 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">
|
||||
<div class="w-full max-w-md overflow-hidden rounded-2xl border border-white/10 bg-white p-8 shadow-2xl">
|
||||
<div v-if="status" class="mb-4 rounded-xl bg-emerald-50 px-4 py-3 text-sm font-medium text-emerald-700">
|
||||
{{ status }}
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="submit">
|
||||
<form @submit.prevent="submit" class="space-y-5">
|
||||
<div>
|
||||
<InputLabel for="email" value="Adresse e-mail" />
|
||||
|
||||
<TextInput
|
||||
<label for="email" :class="labelClass">Adresse e-mail</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
class="mt-1 block w-full"
|
||||
v-model="form.email"
|
||||
type="email"
|
||||
required
|
||||
autofocus
|
||||
autocomplete="username"
|
||||
:class="inputClass"
|
||||
/>
|
||||
|
||||
<InputError class="mt-2" :message="form.errors.email" />
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<InputLabel for="password" value="Mot de passe" />
|
||||
|
||||
<TextInput
|
||||
<div>
|
||||
<label for="password" :class="labelClass">Mot de passe</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
class="mt-1 block w-full"
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
:class="inputClass"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<label class="flex items-center gap-2">
|
||||
<Checkbox name="remember" v-model:checked="form.remember" />
|
||||
<span class="text-sm text-slate-600">Se souvenir de moi</span>
|
||||
</label>
|
||||
|
||||
<div class="mt-6">
|
||||
<PrimaryButton
|
||||
class="w-full justify-center"
|
||||
:class="{ 'opacity-25': form.processing }"
|
||||
:disabled="form.processing"
|
||||
>
|
||||
Se connecter
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
<PrimaryButton
|
||||
class="w-full justify-center"
|
||||
:class="{ 'opacity-50': form.processing }"
|
||||
:disabled="form.processing"
|
||||
>
|
||||
Se connecter
|
||||
</PrimaryButton>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,31 @@
|
||||
<script setup>
|
||||
import DataTable from '@/Components/Supervisor/DataTable.vue';
|
||||
import Pagination from '@/Components/Supervisor/Pagination.vue';
|
||||
import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
|
||||
import TableHeaderCell from '@/Components/Supervisor/TableHeaderCell.vue';
|
||||
import { useListFilters } from '@/Components/Supervisor/useListFilters.js';
|
||||
import {
|
||||
bookingStatusColors,
|
||||
filterInputClass,
|
||||
filterSelectClass,
|
||||
getStatusColor,
|
||||
linkClass,
|
||||
rowClass,
|
||||
tdClass,
|
||||
} from '@/Components/Supervisor/ui.js';
|
||||
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
|
||||
import { Head, Link, router } from '@inertiajs/vue3';
|
||||
import { reactive, watch } from 'vue';
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
bookings: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
establishments: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
@@ -18,17 +36,19 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const localFilters = reactive({
|
||||
const { localFilters, toggleSort } = useListFilters('supervisor.bookings.index', {
|
||||
establishment_id: props.filters.establishment_id ?? '',
|
||||
user: props.filters.user ?? '',
|
||||
status: props.filters.status ?? '',
|
||||
date: props.filters.date ?? '',
|
||||
});
|
||||
sort: props.filters.sort ?? 'slot_start',
|
||||
direction: props.filters.direction ?? 'desc',
|
||||
per_page: props.filters.per_page ?? 10,
|
||||
}, { debounceKeys: ['user'] });
|
||||
|
||||
watch(localFilters, () => {
|
||||
router.get(route('supervisor.bookings.index'), localFilters, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
});
|
||||
});
|
||||
const showEstablishmentFilter = computed(() => props.establishments.length > 1);
|
||||
|
||||
const handleSort = (key) => toggleSort(key, ['slot_start', 'booking_fee']);
|
||||
|
||||
const formatDate = (iso) => {
|
||||
if (!iso) return '—';
|
||||
@@ -40,124 +60,130 @@ const formatDate = (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
|
||||
<DataTable>
|
||||
<template #head>
|
||||
<tr>
|
||||
<TableHeaderCell
|
||||
label="Créneau"
|
||||
sortable
|
||||
sort-key="slot_start"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<input v-model="localFilters.date" type="date" :class="filterInputClass" />
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Utilisateur"
|
||||
sortable
|
||||
sort-key="user"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<input
|
||||
v-model="localFilters.user"
|
||||
type="text"
|
||||
placeholder="Nom ou e-mail…"
|
||||
:class="filterInputClass"
|
||||
/>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Machine"
|
||||
sortable
|
||||
sort-key="machine"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<select
|
||||
v-if="showEstablishmentFilter"
|
||||
v-model="localFilters.establishment_id"
|
||||
:class="filterSelectClass"
|
||||
>
|
||||
<option value="">Toutes</option>
|
||||
<option v-for="est in establishments" :key="est.id" :value="est.id">
|
||||
{{ est.name }}
|
||||
</option>
|
||||
</select>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Statut"
|
||||
sortable
|
||||
sort-key="status"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<select v-model="localFilters.status" :class="filterSelectClass">
|
||||
<option value="">Tous</option>
|
||||
<option v-for="(label, value) in statusOptions" :key="value" :value="value">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Frais"
|
||||
sortable
|
||||
sort-key="booking_fee"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<tr v-if="bookings.data.length === 0">
|
||||
<td colspan="5" class="px-6 py-12 text-center text-sm text-slate-400">
|
||||
Aucune réservation trouvée.
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="booking in bookings.data" :key="booking.uuid" :class="rowClass">
|
||||
<td :class="tdClass">
|
||||
<div class="font-medium text-slate-800">{{ formatDate(booking.slot_start) }}</div>
|
||||
<div class="mt-0.5 text-xs text-slate-400">→ {{ formatDate(booking.slot_end) }}</div>
|
||||
</td>
|
||||
<td :class="tdClass">
|
||||
<div class="font-medium text-slate-800">{{ booking.user?.name ?? '—' }}</div>
|
||||
<div class="text-xs text-slate-400">{{ booking.user?.email }}</div>
|
||||
</td>
|
||||
<td :class="tdClass">
|
||||
<Link
|
||||
v-if="booking.machine"
|
||||
:href="route('supervisor.machines.show', booking.machine.uuid)"
|
||||
:class="linkClass"
|
||||
>
|
||||
{{ booking.machine.name }}
|
||||
</Link>
|
||||
<span v-else>—</span>
|
||||
<div v-if="booking.machine?.establishment_name" class="mt-0.5 text-xs text-slate-400">
|
||||
{{ booking.machine.establishment_name }}
|
||||
</div>
|
||||
</td>
|
||||
<td :class="tdClass">
|
||||
<StatusBadge
|
||||
:label="booking.status_label"
|
||||
:color-class="getStatusColor(booking.status, bookingStatusColors)"
|
||||
/>
|
||||
</td>
|
||||
<td :class="[tdClass, 'font-semibold text-slate-800']">
|
||||
{{ formatCurrency(booking.booking_fee) }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<template #footer>
|
||||
<Pagination
|
||||
:paginator="bookings"
|
||||
:per-page="localFilters.per_page"
|
||||
@update:per-page="(value) => { localFilters.per_page = value; }"
|
||||
/>
|
||||
</template>
|
||||
</DataTable>
|
||||
</SupervisorLayout>
|
||||
</template>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,13 +1,42 @@
|
||||
<script setup>
|
||||
import AlertBanner from '@/Components/Supervisor/AlertBanner.vue';
|
||||
import DataTable from '@/Components/Supervisor/DataTable.vue';
|
||||
import FormField from '@/Components/Supervisor/FormField.vue';
|
||||
import FormModal from '@/Components/Supervisor/FormModal.vue';
|
||||
import Pagination from '@/Components/Supervisor/Pagination.vue';
|
||||
import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
|
||||
import TableHeaderCell from '@/Components/Supervisor/TableHeaderCell.vue';
|
||||
import { useListFilters } from '@/Components/Supervisor/useListFilters.js';
|
||||
import {
|
||||
filterInputClass,
|
||||
filterSelectClass,
|
||||
getStatusColor,
|
||||
inputClass,
|
||||
linkClass,
|
||||
machineStatusColors,
|
||||
rowClass,
|
||||
selectClass,
|
||||
tdClass,
|
||||
} from '@/Components/Supervisor/ui.js';
|
||||
import ConfirmDeleteModal from '@/Components/ConfirmDeleteModal.vue';
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
|
||||
import { Head, Link, router } from '@inertiajs/vue3';
|
||||
import { reactive, watch } from 'vue';
|
||||
import { Head, Link, useForm, usePage } from '@inertiajs/vue3';
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
machines: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
establishments: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
canManageMachines: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
@@ -22,34 +51,93 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const localFilters = reactive({
|
||||
const page = usePage();
|
||||
const editingUuid = ref(null);
|
||||
const showForm = ref(false);
|
||||
const deleteTarget = ref(null);
|
||||
const deleteForm = useForm({});
|
||||
|
||||
const { localFilters, toggleSort } = useListFilters('supervisor.machines.index', {
|
||||
establishment_id: props.filters.establishment_id ?? '',
|
||||
search: props.filters.search ?? '',
|
||||
status: props.filters.status ?? '',
|
||||
type: props.filters.type ?? '',
|
||||
sort: props.filters.sort ?? 'name',
|
||||
direction: props.filters.direction ?? 'asc',
|
||||
per_page: props.filters.per_page ?? 10,
|
||||
}, { debounceKeys: ['search'] });
|
||||
|
||||
const showEstablishmentFilter = computed(() => props.establishments.length > 1);
|
||||
|
||||
const handleSort = (key) => toggleSort(key, ['last_heartbeat_at']);
|
||||
|
||||
const emptyForm = () => ({
|
||||
establishment_id: props.establishments[0]?.id ?? '',
|
||||
name: '',
|
||||
type: '',
|
||||
qr_code: '',
|
||||
status: 'available',
|
||||
});
|
||||
|
||||
let debounceTimer = null;
|
||||
const form = useForm(emptyForm());
|
||||
|
||||
watch(localFilters, () => {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(() => {
|
||||
router.get(route('supervisor.machines.index'), localFilters, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
});
|
||||
}, 300);
|
||||
});
|
||||
const startCreate = () => {
|
||||
editingUuid.value = null;
|
||||
form.defaults(emptyForm());
|
||||
form.reset();
|
||||
showForm.value = true;
|
||||
};
|
||||
|
||||
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',
|
||||
const startEdit = (machine) => {
|
||||
editingUuid.value = machine.uuid;
|
||||
form.defaults({
|
||||
establishment_id: machine.establishment_id,
|
||||
name: machine.name,
|
||||
type: machine.type,
|
||||
qr_code: machine.qr_code,
|
||||
status: machine.status,
|
||||
});
|
||||
form.reset();
|
||||
showForm.value = true;
|
||||
};
|
||||
|
||||
const cancelForm = () => {
|
||||
showForm.value = false;
|
||||
editingUuid.value = null;
|
||||
form.reset();
|
||||
};
|
||||
|
||||
const submit = () => {
|
||||
const payload = {
|
||||
...form.data(),
|
||||
qr_code: form.qr_code || null,
|
||||
};
|
||||
return colors[status] ?? 'bg-gray-100 text-gray-800';
|
||||
|
||||
if (editingUuid.value) {
|
||||
form.transform(() => payload).put(route('supervisor.machines.update', editingUuid.value), {
|
||||
onSuccess: cancelForm,
|
||||
});
|
||||
} else {
|
||||
form.transform(() => payload).post(route('supervisor.machines.store'), {
|
||||
onSuccess: cancelForm,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const openDeleteModal = (machine) => {
|
||||
deleteTarget.value = machine;
|
||||
};
|
||||
|
||||
const closeDeleteModal = () => {
|
||||
deleteTarget.value = null;
|
||||
};
|
||||
|
||||
const confirmDelete = () => {
|
||||
if (!deleteTarget.value) return;
|
||||
|
||||
deleteForm.delete(route('supervisor.machines.destroy', deleteTarget.value.uuid), {
|
||||
onSuccess: closeDeleteModal,
|
||||
});
|
||||
};
|
||||
|
||||
const formatDate = (iso) => {
|
||||
@@ -65,124 +153,185 @@ const formatDate = (iso) => {
|
||||
<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>
|
||||
<template #actions>
|
||||
<PrimaryButton
|
||||
v-if="canManageMachines && establishments.length > 0"
|
||||
@click="startCreate"
|
||||
>
|
||||
Nouvelle machine
|
||||
</PrimaryButton>
|
||||
</template>
|
||||
|
||||
<!-- 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>
|
||||
<AlertBanner v-if="page.props.errors?.delete">
|
||||
{{ page.props.errors.delete }}
|
||||
</AlertBanner>
|
||||
|
||||
<!-- 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
|
||||
<FormModal
|
||||
:show="showForm"
|
||||
:title="editingUuid ? 'Modifier la machine' : 'Nouvelle machine'"
|
||||
:submit-label="editingUuid ? 'Enregistrer' : 'Créer'"
|
||||
:processing="form.processing"
|
||||
@close="cancelForm"
|
||||
@submit="submit"
|
||||
>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<FormField label="Enseigne">
|
||||
<select v-model="form.establishment_id" required :class="selectClass">
|
||||
<option v-for="est in establishments" :key="est.id" :value="est.id">
|
||||
{{ est.name }}
|
||||
</option>
|
||||
</select>
|
||||
</FormField>
|
||||
<FormField label="Nom">
|
||||
<input v-model="form.name" type="text" required :class="inputClass" />
|
||||
</FormField>
|
||||
<FormField label="Type">
|
||||
<select v-model="form.type" required :class="selectClass">
|
||||
<option value="" disabled>Sélectionner…</option>
|
||||
<option v-for="(label, value) in typeOptions" :key="value" :value="value">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</FormField>
|
||||
<FormField label="QR code" :hint="editingUuid ? '' : 'Généré automatiquement si vide'">
|
||||
<input v-model="form.qr_code" type="text" :class="inputClass" />
|
||||
</FormField>
|
||||
<FormField label="Statut">
|
||||
<select v-model="form.status" required :class="selectClass">
|
||||
<option v-for="(label, value) in statusOptions" :key="value" :value="value">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</FormField>
|
||||
</div>
|
||||
</FormModal>
|
||||
|
||||
<DataTable>
|
||||
<template #head>
|
||||
<tr>
|
||||
<TableHeaderCell
|
||||
label="Machine"
|
||||
sortable
|
||||
sort-key="name"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<input
|
||||
v-model="localFilters.search"
|
||||
type="text"
|
||||
placeholder="Nom ou QR…"
|
||||
:class="filterInputClass"
|
||||
/>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Enseigne"
|
||||
sortable
|
||||
sort-key="establishment"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<select
|
||||
v-if="showEstablishmentFilter"
|
||||
v-model="localFilters.establishment_id"
|
||||
:class="filterSelectClass"
|
||||
>
|
||||
<option value="">Toutes</option>
|
||||
<option v-for="est in establishments" :key="est.id" :value="est.id">
|
||||
{{ est.name }}
|
||||
</option>
|
||||
</select>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Type"
|
||||
sortable
|
||||
sort-key="type"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<select v-model="localFilters.type" :class="filterSelectClass">
|
||||
<option value="">Tous</option>
|
||||
<option v-for="(label, value) in typeOptions" :key="value" :value="value">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Statut"
|
||||
sortable
|
||||
sort-key="status"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<select v-model="localFilters.status" :class="filterSelectClass">
|
||||
<option value="">Tous</option>
|
||||
<option v-for="(label, value) in statusOptions" :key="value" :value="value">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Dernier signal"
|
||||
sortable
|
||||
sort-key="last_heartbeat_at"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TableHeaderCell v-if="canManageMachines" label="Actions" align="right" />
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<tr v-if="machines.data.length === 0">
|
||||
<td :colspan="canManageMachines ? 6 : 5" class="px-6 py-12 text-center text-sm text-slate-400">
|
||||
Aucune machine trouvée.
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="machine in machines.data" :key="machine.uuid" :class="rowClass">
|
||||
<td :class="tdClass">
|
||||
<Link :href="route('supervisor.machines.show', machine.uuid)" :class="linkClass">
|
||||
{{ machine.name }}
|
||||
</Link>
|
||||
<p class="mt-0.5 font-mono text-xs text-slate-400">{{ machine.qr_code }}</p>
|
||||
</td>
|
||||
<td :class="tdClass">{{ machine.establishment_name ?? '—' }}</td>
|
||||
<td :class="tdClass">{{ machine.type_label }}</td>
|
||||
<td :class="tdClass">
|
||||
<StatusBadge
|
||||
:label="machine.status_label"
|
||||
:color-class="getStatusColor(machine.status, machineStatusColors)"
|
||||
/>
|
||||
</td>
|
||||
<td :class="tdClass">{{ formatDate(machine.last_heartbeat_at) }}</td>
|
||||
<td v-if="canManageMachines" :class="[tdClass, 'text-right']">
|
||||
<button class="font-medium text-indigo-600 transition hover:text-indigo-800" @click="startEdit(machine)">
|
||||
Modifier
|
||||
</button>
|
||||
<button class="ms-3 font-medium text-red-600 transition hover:text-red-800" @click="openDeleteModal(machine)">
|
||||
Supprimer
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<template #footer>
|
||||
<Pagination
|
||||
:paginator="machines"
|
||||
:per-page="localFilters.per_page"
|
||||
@update:per-page="(value) => { localFilters.per_page = value; }"
|
||||
/>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<ConfirmDeleteModal
|
||||
:show="deleteTarget !== null"
|
||||
title="Supprimer la machine"
|
||||
:message="deleteTarget ? `Voulez-vous supprimer « ${deleteTarget.name} » ?` : ''"
|
||||
:processing="deleteForm.processing"
|
||||
@close="closeDeleteModal"
|
||||
@confirm="confirmDelete"
|
||||
/>
|
||||
</SupervisorLayout>
|
||||
</template>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script setup>
|
||||
import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
|
||||
import { cardClass, getStatusColor, machineStatusColors } from '@/Components/Supervisor/ui.js';
|
||||
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
|
||||
@@ -20,18 +22,6 @@ const formatDate = (iso) => {
|
||||
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>
|
||||
@@ -41,99 +31,97 @@ const statusColor = (status) => {
|
||||
<template #header>
|
||||
<Link
|
||||
:href="route('supervisor.machines.index')"
|
||||
class="text-sm text-indigo-600 hover:text-indigo-800"
|
||||
class="text-sm font-medium text-indigo-600 transition 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 class="mb-6">
|
||||
<div class="flex flex-wrap items-start gap-4">
|
||||
<div class="flex-1">
|
||||
<h1 class="text-2xl font-bold tracking-tight text-slate-900">{{ machine.name }}</h1>
|
||||
<p class="mt-1 text-sm text-slate-500">{{ machine.establishment?.name }}</p>
|
||||
</div>
|
||||
<StatusBadge
|
||||
:label="machine.status_label"
|
||||
:color-class="getStatusColor(machine.status, machineStatusColors)"
|
||||
/>
|
||||
</div>
|
||||
</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 :class="[cardClass, 'p-6']">
|
||||
<h2 class="mb-5 text-base font-semibold text-slate-900">Informations</h2>
|
||||
<dl class="space-y-4 text-sm">
|
||||
<div class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
|
||||
<dt class="text-slate-500">Type</dt>
|
||||
<dd class="font-medium text-slate-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 class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
|
||||
<dt class="text-slate-500">QR code</dt>
|
||||
<dd class="font-mono text-slate-800">{{ machine.qr_code }}</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 class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
|
||||
<dt class="text-slate-500">Dernier signal</dt>
|
||||
<dd class="text-slate-800">{{ formatDate(machine.last_heartbeat_at) }}</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 v-if="machine.cycle_started_at" class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
|
||||
<dt class="text-slate-500">Cycle démarré</dt>
|
||||
<dd class="text-slate-800">{{ formatDate(machine.cycle_started_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 v-if="machine.cycle_ends_at" class="flex items-center justify-between gap-4 border-b border-slate-100 pb-3">
|
||||
<dt class="text-slate-500">Fin de cycle prévue</dt>
|
||||
<dd class="text-slate-800">{{ formatDate(machine.cycle_ends_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">
|
||||
<div v-if="machine.current_user" class="flex items-center justify-between gap-4">
|
||||
<dt class="text-slate-500">Utilisateur actuel</dt>
|
||||
<dd class="text-right text-slate-800">
|
||||
{{ machine.current_user.name }}
|
||||
<span class="text-gray-500">({{ machine.current_user.email }})</span>
|
||||
<span class="block text-xs text-slate-400">{{ 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">
|
||||
<div v-if="machine.establishment" class="mt-6 rounded-xl bg-slate-50 p-4">
|
||||
<h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">Établissement</h3>
|
||||
<p class="text-sm text-slate-700">{{ machine.establishment.address }}</p>
|
||||
<p v-if="machine.establishment.city" class="text-sm text-slate-700">
|
||||
{{ 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>
|
||||
<div v-if="machine.integration" class="mt-4 rounded-xl bg-indigo-50/50 p-4 ring-1 ring-indigo-100">
|
||||
<h3 class="mb-3 text-xs font-semibold uppercase tracking-wide text-indigo-600">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>
|
||||
<dt class="text-slate-500">Fournisseur</dt>
|
||||
<dd class="font-medium text-slate-800">{{ machine.integration.provider }}</dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-gray-500">Mode</dt>
|
||||
<dd>{{ machine.integration.mode }}</dd>
|
||||
<dt class="text-slate-500">Mode</dt>
|
||||
<dd class="font-medium text-slate-800">{{ 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>
|
||||
<dt class="text-slate-500">Active</dt>
|
||||
<dd class="font-medium text-slate-800">{{ 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">
|
||||
<div :class="[cardClass, 'p-6']">
|
||||
<h2 class="mb-5 text-base font-semibold text-slate-900">Événements récents</h2>
|
||||
<div v-if="recentEvents.length === 0" class="py-8 text-center text-sm text-slate-400">
|
||||
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>
|
||||
<ul v-else class="divide-y divide-slate-100">
|
||||
<li v-for="(event, index) in recentEvents" :key="index" class="flex items-start gap-3 py-3 first:pt-0">
|
||||
<span class="mt-1.5 h-2 w-2 flex-shrink-0 rounded-full bg-indigo-400" />
|
||||
<div>
|
||||
<p class="text-sm font-medium text-slate-800">{{ event.event_type_label }}</p>
|
||||
<p class="mt-0.5 text-xs text-slate-400">{{ formatDate(event.occurred_at) }}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,490 @@
|
||||
<script setup>
|
||||
import AddressAutocomplete from '@/Components/Supervisor/AddressAutocomplete.vue';
|
||||
import AlertBanner from '@/Components/Supervisor/AlertBanner.vue';
|
||||
import DataTable from '@/Components/Supervisor/DataTable.vue';
|
||||
import FormField from '@/Components/Supervisor/FormField.vue';
|
||||
import FormModal from '@/Components/Supervisor/FormModal.vue';
|
||||
import Pagination from '@/Components/Supervisor/Pagination.vue';
|
||||
import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
|
||||
import TableHeaderCell from '@/Components/Supervisor/TableHeaderCell.vue';
|
||||
import { useListFilters } from '@/Components/Supervisor/useListFilters.js';
|
||||
import {
|
||||
activeStatusColors,
|
||||
cardClass,
|
||||
filterInputClass,
|
||||
filterSelectClass,
|
||||
getStatusColor,
|
||||
inputClass,
|
||||
rowClass,
|
||||
tdClass,
|
||||
} from '@/Components/Supervisor/ui.js';
|
||||
import ConfirmDeleteModal from '@/Components/ConfirmDeleteModal.vue';
|
||||
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
||||
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
|
||||
import { Head, useForm } from '@inertiajs/vue3';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
establishments: {
|
||||
type: [Array, Object],
|
||||
default: () => [],
|
||||
},
|
||||
viewMode: {
|
||||
type: String,
|
||||
default: 'list',
|
||||
},
|
||||
canManageEstablishments: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
canCreateEstablishments: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const { localFilters, toggleSort } = useListFilters('supervisor.organizations.index', {
|
||||
search: props.filters.search ?? '',
|
||||
is_active: props.filters.is_active ?? '',
|
||||
sort: props.filters.sort ?? 'name',
|
||||
direction: props.filters.direction ?? 'asc',
|
||||
per_page: props.filters.per_page ?? 10,
|
||||
}, { debounceKeys: ['search'] });
|
||||
|
||||
const handleSort = (key) => toggleSort(key);
|
||||
|
||||
const isSingleView = computed(() => props.viewMode === 'single');
|
||||
const singleEstablishment = computed(() => {
|
||||
if (!isSingleView.value || !Array.isArray(props.establishments)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return props.establishments[0] ?? null;
|
||||
});
|
||||
|
||||
const establishmentRows = computed(() => {
|
||||
if (isSingleView.value) {
|
||||
return Array.isArray(props.establishments) ? props.establishments : [];
|
||||
}
|
||||
|
||||
return props.establishments?.data ?? [];
|
||||
});
|
||||
|
||||
const establishmentListCount = computed(() => {
|
||||
if (isSingleView.value) {
|
||||
return establishmentRows.value.length;
|
||||
}
|
||||
|
||||
return props.establishments?.total ?? establishmentRows.value.length;
|
||||
});
|
||||
|
||||
const editingEstablishmentId = ref(null);
|
||||
const showEstablishmentForm = ref(false);
|
||||
const toggleTarget = ref(null);
|
||||
const toggleForm = useForm({});
|
||||
|
||||
const establishmentFormTitle = computed(() => {
|
||||
if (editingEstablishmentId.value || isSingleView.value) {
|
||||
return 'Modifier l\'enseigne';
|
||||
}
|
||||
|
||||
return 'Nouvelle enseigne';
|
||||
});
|
||||
|
||||
const establishmentSubmitLabel = computed(() => {
|
||||
if (editingEstablishmentId.value || isSingleView.value) {
|
||||
return 'Enregistrer';
|
||||
}
|
||||
|
||||
return 'Créer';
|
||||
});
|
||||
|
||||
const establishmentToForm = (establishment) => ({
|
||||
name: establishment?.name ?? '',
|
||||
address: establishment?.address ?? '',
|
||||
city: establishment?.city ?? '',
|
||||
zip_code: establishment?.zip_code ?? '',
|
||||
timezone: establishment?.timezone ?? 'Europe/Paris',
|
||||
is_active: establishment?.is_active ?? true,
|
||||
});
|
||||
|
||||
const emptyEstablishmentForm = () => ({
|
||||
name: '',
|
||||
address: '',
|
||||
city: '',
|
||||
zip_code: '',
|
||||
timezone: 'Europe/Paris',
|
||||
is_active: true,
|
||||
});
|
||||
|
||||
const establishmentForm = useForm(
|
||||
isSingleView.value && singleEstablishment.value
|
||||
? establishmentToForm(singleEstablishment.value)
|
||||
: emptyEstablishmentForm(),
|
||||
);
|
||||
|
||||
const startCreateEstablishment = () => {
|
||||
editingEstablishmentId.value = null;
|
||||
establishmentForm.defaults(emptyEstablishmentForm());
|
||||
establishmentForm.reset();
|
||||
showEstablishmentForm.value = true;
|
||||
};
|
||||
|
||||
const startEditEstablishment = (establishment) => {
|
||||
editingEstablishmentId.value = establishment.id;
|
||||
establishmentForm.defaults(establishmentToForm(establishment));
|
||||
establishmentForm.reset();
|
||||
showEstablishmentForm.value = true;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (!isSingleView.value && establishmentListCount.value === 0 && props.canCreateEstablishments) {
|
||||
startCreateEstablishment();
|
||||
}
|
||||
});
|
||||
|
||||
const cancelEstablishmentForm = () => {
|
||||
showEstablishmentForm.value = false;
|
||||
editingEstablishmentId.value = null;
|
||||
|
||||
if (isSingleView.value && singleEstablishment.value) {
|
||||
establishmentForm.defaults(establishmentToForm(singleEstablishment.value));
|
||||
}
|
||||
|
||||
establishmentForm.reset();
|
||||
};
|
||||
|
||||
const submitEstablishment = () => {
|
||||
const targetId = isSingleView.value ? singleEstablishment.value?.id : editingEstablishmentId.value;
|
||||
const wasActive = isSingleView.value
|
||||
? singleEstablishment.value?.is_active
|
||||
: establishmentRows.value.find((e) => e.id === editingEstablishmentId.value)?.is_active;
|
||||
|
||||
if (targetId && wasActive && !establishmentForm.is_active) {
|
||||
toggleTarget.value = { action: 'deactivate', source: 'form' };
|
||||
return;
|
||||
}
|
||||
|
||||
if (targetId && !wasActive && establishmentForm.is_active) {
|
||||
toggleTarget.value = { action: 'reactivate', source: 'form' };
|
||||
return;
|
||||
}
|
||||
|
||||
performSubmit();
|
||||
};
|
||||
|
||||
const isReactivateAction = computed(() => toggleTarget.value?.action === 'reactivate');
|
||||
|
||||
const toggleModalTitle = computed(() =>
|
||||
isReactivateAction.value ? 'Réactiver l\'enseigne' : 'Désactiver l\'enseigne',
|
||||
);
|
||||
|
||||
const toggleModalMessage = computed(() => {
|
||||
if (!toggleTarget.value) return '';
|
||||
|
||||
if (toggleTarget.value.action === 'reactivate') {
|
||||
if (toggleTarget.value.source === 'toggle') {
|
||||
return `Voulez-vous réactiver « ${toggleTarget.value.establishment.name} » ? Elle redeviendra visible par les utilisateurs.`;
|
||||
}
|
||||
|
||||
return 'Voulez-vous réactiver cette enseigne ? Elle redeviendra visible par les utilisateurs.';
|
||||
}
|
||||
|
||||
if (toggleTarget.value.source === 'toggle') {
|
||||
return `Voulez-vous désactiver « ${toggleTarget.value.establishment.name} » ? Elle ne sera plus visible par les utilisateurs.`;
|
||||
}
|
||||
|
||||
return 'Voulez-vous désactiver cette enseigne ? Elle ne sera plus visible par les utilisateurs.';
|
||||
});
|
||||
|
||||
const toggleModalWarning = computed(() =>
|
||||
isReactivateAction.value
|
||||
? 'Vérifiez que le nom, l\'adresse et le fuseau horaire sont corrects avant de réactiver.'
|
||||
: 'Vous pourrez la réactiver à tout moment.',
|
||||
);
|
||||
|
||||
const toggleModalConfirmLabel = computed(() =>
|
||||
isReactivateAction.value ? 'Réactiver' : 'Désactiver',
|
||||
);
|
||||
|
||||
const toggleFormErrors = computed(() => Object.values(toggleForm.errors));
|
||||
|
||||
const performSubmit = () => {
|
||||
const targetId = isSingleView.value ? singleEstablishment.value?.id : editingEstablishmentId.value;
|
||||
|
||||
if (targetId) {
|
||||
establishmentForm.put(
|
||||
route('supervisor.organizations.establishments.update', targetId),
|
||||
{
|
||||
onSuccess: () => {
|
||||
closeToggleModal();
|
||||
cancelEstablishmentForm();
|
||||
},
|
||||
},
|
||||
);
|
||||
} else {
|
||||
establishmentForm.post(route('supervisor.organizations.establishments.store'), {
|
||||
onSuccess: () => {
|
||||
closeToggleModal();
|
||||
cancelEstablishmentForm();
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const requestToggle = (establishment) => {
|
||||
toggleTarget.value = {
|
||||
action: establishment.is_active ? 'deactivate' : 'reactivate',
|
||||
source: 'toggle',
|
||||
establishment,
|
||||
};
|
||||
};
|
||||
|
||||
const closeToggleModal = () => {
|
||||
toggleTarget.value = null;
|
||||
};
|
||||
|
||||
const confirmToggle = () => {
|
||||
if (!toggleTarget.value) return;
|
||||
|
||||
if (toggleTarget.value.source === 'toggle') {
|
||||
toggleForm.patch(
|
||||
route('supervisor.organizations.establishments.toggle-active', toggleTarget.value.establishment.id),
|
||||
{
|
||||
preserveScroll: true,
|
||||
onSuccess: closeToggleModal,
|
||||
},
|
||||
);
|
||||
} else {
|
||||
performSubmit();
|
||||
}
|
||||
};
|
||||
|
||||
const formatAddress = (establishment) => {
|
||||
const parts = [establishment.address, establishment.zip_code, establishment.city].filter(Boolean);
|
||||
return parts.join(', ');
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Enseignes" />
|
||||
|
||||
<SupervisorLayout title="Enseignes">
|
||||
<template #actions>
|
||||
<PrimaryButton
|
||||
v-if="!isSingleView && canCreateEstablishments"
|
||||
@click="startCreateEstablishment"
|
||||
>
|
||||
Nouvelle enseigne
|
||||
</PrimaryButton>
|
||||
</template>
|
||||
|
||||
<AlertBanner v-if="toggleFormErrors.length > 0">
|
||||
<ul class="space-y-1">
|
||||
<li v-for="(error, index) in toggleFormErrors" :key="index">{{ error }}</li>
|
||||
</ul>
|
||||
</AlertBanner>
|
||||
|
||||
<section v-if="isSingleView && singleEstablishment">
|
||||
<div class="mb-6 flex items-center justify-between">
|
||||
<p class="text-sm text-slate-500">Informations de votre laverie</p>
|
||||
<StatusBadge
|
||||
:label="singleEstablishment.is_active ? 'Active' : 'Inactive'"
|
||||
:color-class="getStatusColor(singleEstablishment.is_active ? 'active' : 'inactive', activeStatusColors)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div :class="[cardClass, 'p-6']">
|
||||
<dl class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Nom</dt>
|
||||
<dd class="mt-1 text-sm font-medium text-slate-900">{{ singleEstablishment.name }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Adresse</dt>
|
||||
<dd class="mt-1 text-sm text-slate-700">{{ formatAddress(singleEstablishment) }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Fuseau horaire</dt>
|
||||
<dd class="mt-1 text-sm text-slate-700">{{ singleEstablishment.timezone }}</dd>
|
||||
</div>
|
||||
<div v-if="singleEstablishment.latitude != null && singleEstablishment.longitude != null">
|
||||
<dt class="text-xs font-medium uppercase tracking-wide text-slate-400">Coordonnées GPS</dt>
|
||||
<dd class="mt-1 text-sm text-slate-700">
|
||||
{{ singleEstablishment.latitude }}, {{ singleEstablishment.longitude }}
|
||||
</dd>
|
||||
<p class="mt-0.5 text-xs text-slate-400">Calculées automatiquement à partir de l'adresse.</p>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<div v-if="canManageEstablishments" class="mt-6">
|
||||
<PrimaryButton @click="startEditEstablishment(singleEstablishment)">
|
||||
Modifier
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="!canManageEstablishments" class="mt-4 rounded-xl bg-slate-50 px-4 py-3 text-sm text-slate-500">
|
||||
Consultation seule — contactez votre administrateur pour modifier ces informations.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section v-else>
|
||||
<p class="mb-4 text-sm text-slate-500">
|
||||
{{ establishmentListCount }} enseigne(s)
|
||||
</p>
|
||||
|
||||
<DataTable>
|
||||
<template #head>
|
||||
<tr>
|
||||
<TableHeaderCell
|
||||
label="Nom"
|
||||
sortable
|
||||
sort-key="name"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<input
|
||||
v-model="localFilters.search"
|
||||
type="text"
|
||||
placeholder="Nom, adresse…"
|
||||
:class="filterInputClass"
|
||||
/>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Adresse"
|
||||
sortable
|
||||
sort-key="city"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
/>
|
||||
<TableHeaderCell
|
||||
label="Machines"
|
||||
sortable
|
||||
sort-key="machines_count"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
/>
|
||||
<TableHeaderCell
|
||||
label="Statut"
|
||||
sortable
|
||||
sort-key="is_active"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<select v-model="localFilters.is_active" :class="filterSelectClass">
|
||||
<option value="">Tous</option>
|
||||
<option value="1">Active</option>
|
||||
<option value="0">Inactive</option>
|
||||
</select>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell v-if="canManageEstablishments" label="Actions" align="right" />
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<tr v-if="establishmentRows.length === 0">
|
||||
<td :colspan="canManageEstablishments ? 5 : 4" class="px-6 py-12 text-center text-sm text-slate-400">
|
||||
Aucune enseigne trouvée.
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="establishment in establishmentRows" :key="establishment.id" :class="rowClass">
|
||||
<td :class="[tdClass, 'font-medium text-slate-800']">{{ establishment.name }}</td>
|
||||
<td :class="tdClass">{{ formatAddress(establishment) }}</td>
|
||||
<td :class="tdClass">{{ establishment.machines_count }}</td>
|
||||
<td :class="tdClass">
|
||||
<StatusBadge
|
||||
:label="establishment.is_active ? 'Active' : 'Inactive'"
|
||||
:color-class="getStatusColor(establishment.is_active ? 'active' : 'inactive', activeStatusColors)"
|
||||
/>
|
||||
</td>
|
||||
<td v-if="canManageEstablishments" :class="[tdClass, 'text-right']">
|
||||
<button class="font-medium text-indigo-600 transition hover:text-indigo-800" @click="startEditEstablishment(establishment)">
|
||||
Modifier
|
||||
</button>
|
||||
<button
|
||||
class="ms-3 font-medium transition"
|
||||
:class="establishment.is_active ? 'text-orange-600 hover:text-orange-800' : 'text-emerald-600 hover:text-emerald-800'"
|
||||
:disabled="toggleForm.processing || establishmentForm.processing"
|
||||
@click="requestToggle(establishment)"
|
||||
>
|
||||
{{ establishment.is_active ? 'Désactiver' : 'Réactiver' }}
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<template #footer>
|
||||
<Pagination
|
||||
:paginator="establishments"
|
||||
:per-page="localFilters.per_page"
|
||||
@update:per-page="(value) => { localFilters.per_page = value; }"
|
||||
/>
|
||||
</template>
|
||||
</DataTable>
|
||||
</section>
|
||||
|
||||
<FormModal
|
||||
:show="showEstablishmentForm"
|
||||
:title="establishmentFormTitle"
|
||||
:submit-label="establishmentSubmitLabel"
|
||||
:processing="establishmentForm.processing"
|
||||
max-width="3xl"
|
||||
@close="cancelEstablishmentForm"
|
||||
@submit="submitEstablishment"
|
||||
>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<FormField label="Nom">
|
||||
<input v-model="establishmentForm.name" type="text" required :class="inputClass" />
|
||||
</FormField>
|
||||
<FormField label="Adresse" field-class="sm:col-span-2">
|
||||
<AddressAutocomplete
|
||||
v-model:address="establishmentForm.address"
|
||||
v-model:city="establishmentForm.city"
|
||||
v-model:zip-code="establishmentForm.zip_code"
|
||||
required
|
||||
/>
|
||||
<p class="mt-1 text-xs text-slate-400">
|
||||
Les coordonnées GPS seront calculées automatiquement à l'enregistrement.
|
||||
</p>
|
||||
</FormField>
|
||||
<FormField label="Code postal">
|
||||
<input v-model="establishmentForm.zip_code" type="text" :class="inputClass" />
|
||||
</FormField>
|
||||
<FormField label="Ville">
|
||||
<input v-model="establishmentForm.city" type="text" :class="inputClass" />
|
||||
</FormField>
|
||||
<FormField label="Fuseau horaire">
|
||||
<input v-model="establishmentForm.timezone" type="text" required :class="inputClass" />
|
||||
</FormField>
|
||||
<div class="sm:col-span-2 lg:col-span-3">
|
||||
<label class="flex items-center gap-2 text-sm text-slate-700">
|
||||
<input v-model="establishmentForm.is_active" type="checkbox" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20" />
|
||||
Enseigne active
|
||||
</label>
|
||||
<p class="mt-1 text-xs text-slate-400">
|
||||
Décochez pour désactiver cette enseigne sans la supprimer.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</FormModal>
|
||||
|
||||
<ConfirmDeleteModal
|
||||
:show="toggleTarget !== null"
|
||||
:title="toggleModalTitle"
|
||||
:message="toggleModalMessage"
|
||||
:confirm-label="toggleModalConfirmLabel"
|
||||
:warning="toggleModalWarning"
|
||||
:danger="!isReactivateAction"
|
||||
:processing="toggleForm.processing || establishmentForm.processing"
|
||||
@close="closeToggleModal"
|
||||
@confirm="confirmToggle"
|
||||
/>
|
||||
</SupervisorLayout>
|
||||
</template>
|
||||
@@ -1,14 +1,31 @@
|
||||
<script setup>
|
||||
import DataTable from '@/Components/Supervisor/DataTable.vue';
|
||||
import FormField from '@/Components/Supervisor/FormField.vue';
|
||||
import FormModal from '@/Components/Supervisor/FormModal.vue';
|
||||
import Pagination from '@/Components/Supervisor/Pagination.vue';
|
||||
import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
|
||||
import TableHeaderCell from '@/Components/Supervisor/TableHeaderCell.vue';
|
||||
import { useListFilters } from '@/Components/Supervisor/useListFilters.js';
|
||||
import {
|
||||
activeStatusColors,
|
||||
filterInputClass,
|
||||
filterSelectClass,
|
||||
getStatusColor,
|
||||
inputClass,
|
||||
rowClass,
|
||||
selectClass,
|
||||
tdClass,
|
||||
} from '@/Components/Supervisor/ui.js';
|
||||
import ConfirmDeleteModal from '@/Components/ConfirmDeleteModal.vue';
|
||||
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';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
rules: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
establishments: {
|
||||
type: Array,
|
||||
@@ -22,10 +39,30 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const { localFilters, toggleSort } = useListFilters('supervisor.pricing.index', {
|
||||
establishment_id: props.filters.establishment_id ?? '',
|
||||
machine_type: props.filters.machine_type ?? '',
|
||||
day_type: props.filters.day_type ?? '',
|
||||
is_active: props.filters.is_active ?? '',
|
||||
search: props.filters.search ?? '',
|
||||
sort: props.filters.sort ?? 'priority',
|
||||
direction: props.filters.direction ?? 'asc',
|
||||
per_page: props.filters.per_page ?? 10,
|
||||
}, { debounceKeys: ['search'] });
|
||||
|
||||
const showEstablishmentFilter = computed(() => props.establishments.length > 1);
|
||||
const handleSort = (key) => toggleSort(key);
|
||||
|
||||
const editingId = ref(null);
|
||||
const showForm = ref(false);
|
||||
const deleteTarget = ref(null);
|
||||
const deleteForm = useForm({});
|
||||
|
||||
const emptyForm = () => ({
|
||||
establishment_id: props.establishments[0]?.id ?? '',
|
||||
@@ -93,10 +130,20 @@ const submit = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const destroy = (id) => {
|
||||
if (confirm('Supprimer cette règle tarifaire ?')) {
|
||||
useForm({}).delete(route('supervisor.pricing.destroy', id));
|
||||
}
|
||||
const openDeleteModal = (rule) => {
|
||||
deleteTarget.value = rule;
|
||||
};
|
||||
|
||||
const closeDeleteModal = () => {
|
||||
deleteTarget.value = null;
|
||||
};
|
||||
|
||||
const confirmDelete = () => {
|
||||
if (!deleteTarget.value) return;
|
||||
|
||||
deleteForm.delete(route('supervisor.pricing.destroy', deleteTarget.value.id), {
|
||||
onSuccess: closeDeleteModal,
|
||||
});
|
||||
};
|
||||
|
||||
const formatCurrency = (value) =>
|
||||
@@ -107,136 +154,202 @@ const formatCurrency = (value) =>
|
||||
<Head title="Tarifs" />
|
||||
|
||||
<SupervisorLayout title="Tarifs">
|
||||
<div class="mb-4 flex justify-end">
|
||||
<PrimaryButton v-if="!showForm" @click="startCreate">
|
||||
<template #actions>
|
||||
<PrimaryButton @click="startCreate">
|
||||
Nouvelle règle
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 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"
|
||||
>
|
||||
<FormModal
|
||||
:show="showForm"
|
||||
:title="editingId ? 'Modifier la règle' : 'Nouvelle règle tarifaire'"
|
||||
:submit-label="editingId ? 'Enregistrer' : 'Créer'"
|
||||
:processing="form.processing"
|
||||
max-width="3xl"
|
||||
@close="cancelForm"
|
||||
@submit="submit"
|
||||
>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<FormField label="Établissement">
|
||||
<select v-model="form.establishment_id" required :class="selectClass">
|
||||
<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">
|
||||
</FormField>
|
||||
<FormField label="Type de machine">
|
||||
<select v-model="form.machine_type" :class="selectClass">
|
||||
<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">
|
||||
</FormField>
|
||||
<FormField label="Jour">
|
||||
<select v-model="form.day_type" required :class="selectClass">
|
||||
<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" />
|
||||
</FormField>
|
||||
<FormField label="Début créneau">
|
||||
<input v-model="form.slot_start" type="time" required :class="inputClass" />
|
||||
</FormField>
|
||||
<FormField label="Fin créneau">
|
||||
<input v-model="form.slot_end" type="time" required :class="inputClass" />
|
||||
</FormField>
|
||||
<FormField label="Prix (€)">
|
||||
<input v-model="form.price" type="number" step="0.01" min="0" required :class="inputClass" />
|
||||
</FormField>
|
||||
<FormField label="Libellé">
|
||||
<input v-model="form.label" type="text" :class="inputClass" />
|
||||
</FormField>
|
||||
<FormField label="Priorité">
|
||||
<input v-model="form.priority" type="number" min="0" :class="inputClass" />
|
||||
</FormField>
|
||||
<div class="flex items-end gap-4 sm:col-span-2 lg:col-span-3">
|
||||
<label class="flex items-center gap-2 text-sm text-slate-700">
|
||||
<input v-model="form.requires_app" type="checkbox" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20" />
|
||||
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" />
|
||||
<label class="flex items-center gap-2 text-sm text-slate-700">
|
||||
<input v-model="form.is_active" type="checkbox" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20" />
|
||||
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>
|
||||
</FormModal>
|
||||
|
||||
<!-- 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>
|
||||
<DataTable>
|
||||
<template #head>
|
||||
<tr>
|
||||
<TableHeaderCell
|
||||
label="Établissement"
|
||||
sortable
|
||||
sort-key="establishment"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<select
|
||||
v-if="showEstablishmentFilter"
|
||||
v-model="localFilters.establishment_id"
|
||||
:class="filterSelectClass"
|
||||
>
|
||||
<option value="">Toutes</option>
|
||||
<option v-for="est in establishments" :key="est.id" :value="est.id">
|
||||
{{ est.name }}
|
||||
</option>
|
||||
</select>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Créneau"
|
||||
sortable
|
||||
sort-key="slot_start"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<select v-model="localFilters.day_type" :class="filterSelectClass">
|
||||
<option value="">Tous</option>
|
||||
<option v-for="(label, value) in dayTypes" :key="value" :value="value">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Type"
|
||||
sortable
|
||||
sort-key="machine_type"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<select v-model="localFilters.machine_type" :class="filterSelectClass">
|
||||
<option value="">Tous</option>
|
||||
<option v-for="(label, value) in machineTypes" :key="value" :value="value">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Prix"
|
||||
sortable
|
||||
sort-key="price"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<input
|
||||
v-model="localFilters.search"
|
||||
type="text"
|
||||
placeholder="Libellé…"
|
||||
:class="filterInputClass"
|
||||
/>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Statut"
|
||||
sortable
|
||||
sort-key="is_active"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<select v-model="localFilters.is_active" :class="filterSelectClass">
|
||||
<option value="">Tous</option>
|
||||
<option value="1">Active</option>
|
||||
<option value="0">Inactive</option>
|
||||
</select>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell label="Actions" align="right" />
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<tr v-if="rules.data.length === 0">
|
||||
<td colspan="6" class="px-6 py-12 text-center text-sm text-slate-400">
|
||||
Aucune règle tarifaire trouvée.
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="rule in rules.data" :key="rule.id" :class="rowClass">
|
||||
<td :class="[tdClass, 'font-medium text-slate-800']">{{ rule.establishment_name }}</td>
|
||||
<td :class="tdClass">
|
||||
{{ rule.slot_start }} – {{ rule.slot_end }}
|
||||
<span class="text-xs text-slate-400">({{ rule.day_type_label }})</span>
|
||||
</td>
|
||||
<td :class="tdClass">{{ rule.machine_type_label ?? 'Tous' }}</td>
|
||||
<td :class="[tdClass, 'font-semibold text-slate-800']">{{ formatCurrency(rule.price) }}</td>
|
||||
<td :class="tdClass">
|
||||
<StatusBadge
|
||||
:label="rule.is_active ? 'Active' : 'Inactive'"
|
||||
:color-class="getStatusColor(rule.is_active ? 'active' : 'inactive', activeStatusColors)"
|
||||
/>
|
||||
</td>
|
||||
<td :class="[tdClass, 'text-right']">
|
||||
<button class="font-medium text-indigo-600 transition hover:text-indigo-800" @click="startEdit(rule)">
|
||||
Modifier
|
||||
</button>
|
||||
<button class="ms-3 font-medium text-red-600 transition hover:text-red-800" @click="openDeleteModal(rule)">
|
||||
Supprimer
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<template #footer>
|
||||
<Pagination
|
||||
:paginator="rules"
|
||||
:per-page="localFilters.per_page"
|
||||
@update:per-page="(value) => { localFilters.per_page = value; }"
|
||||
/>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<ConfirmDeleteModal
|
||||
:show="deleteTarget !== null"
|
||||
title="Supprimer la règle tarifaire"
|
||||
:message="deleteTarget ? `Voulez-vous supprimer la règle « ${deleteTarget.label || deleteTarget.establishment_name} » ?` : ''"
|
||||
:processing="deleteForm.processing"
|
||||
@close="closeDeleteModal"
|
||||
@confirm="confirmDelete"
|
||||
/>
|
||||
</SupervisorLayout>
|
||||
</template>
|
||||
|
||||
@@ -1,14 +1,29 @@
|
||||
<script setup>
|
||||
import DataTable from '@/Components/Supervisor/DataTable.vue';
|
||||
import FormField from '@/Components/Supervisor/FormField.vue';
|
||||
import FormModal from '@/Components/Supervisor/FormModal.vue';
|
||||
import Pagination from '@/Components/Supervisor/Pagination.vue';
|
||||
import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
|
||||
import TableHeaderCell from '@/Components/Supervisor/TableHeaderCell.vue';
|
||||
import { useListFilters } from '@/Components/Supervisor/useListFilters.js';
|
||||
import {
|
||||
filterInputClass,
|
||||
filterSelectClass,
|
||||
inputClass,
|
||||
rowClass,
|
||||
selectClass,
|
||||
tdClass,
|
||||
} from '@/Components/Supervisor/ui.js';
|
||||
import ConfirmDeleteModal from '@/Components/ConfirmDeleteModal.vue';
|
||||
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';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
promotions: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
establishments: {
|
||||
type: Array,
|
||||
@@ -22,10 +37,29 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
|
||||
const { localFilters, toggleSort } = useListFilters('supervisor.promotions.index', {
|
||||
establishment_id: props.filters.establishment_id ?? '',
|
||||
machine_type: props.filters.machine_type ?? '',
|
||||
is_active: props.filters.is_active ?? '',
|
||||
search: props.filters.search ?? '',
|
||||
sort: props.filters.sort ?? 'starts_at',
|
||||
direction: props.filters.direction ?? 'desc',
|
||||
per_page: props.filters.per_page ?? 10,
|
||||
}, { debounceKeys: ['search'] });
|
||||
|
||||
const showEstablishmentFilter = computed(() => props.establishments.length > 1);
|
||||
const handleSort = (key) => toggleSort(key, ['starts_at', 'ends_at', 'discount_value']);
|
||||
|
||||
const editingId = ref(null);
|
||||
const showForm = ref(false);
|
||||
const deleteTarget = ref(null);
|
||||
const deleteForm = useForm({});
|
||||
|
||||
const emptyForm = () => ({
|
||||
establishment_id: props.establishments[0]?.id ?? '',
|
||||
@@ -81,10 +115,20 @@ const submit = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const destroy = (id) => {
|
||||
if (confirm('Supprimer cette promotion ?')) {
|
||||
useForm({}).delete(route('supervisor.promotions.destroy', id));
|
||||
}
|
||||
const openDeleteModal = (promotion) => {
|
||||
deleteTarget.value = promotion;
|
||||
};
|
||||
|
||||
const closeDeleteModal = () => {
|
||||
deleteTarget.value = null;
|
||||
};
|
||||
|
||||
const confirmDelete = () => {
|
||||
if (!deleteTarget.value) return;
|
||||
|
||||
deleteForm.delete(route('supervisor.promotions.destroy', deleteTarget.value.id), {
|
||||
onSuccess: closeDeleteModal,
|
||||
});
|
||||
};
|
||||
|
||||
const formatDate = (iso) => {
|
||||
@@ -110,137 +154,210 @@ const isCurrentlyActive = (promotion) => {
|
||||
new Date(promotion.ends_at) >= now
|
||||
);
|
||||
};
|
||||
|
||||
const promotionStatusColor = (promotion) => {
|
||||
if (isCurrentlyActive(promotion)) {
|
||||
return 'bg-emerald-100 text-emerald-800 ring-emerald-600/20';
|
||||
}
|
||||
if (promotion.is_active) {
|
||||
return 'bg-amber-100 text-amber-800 ring-amber-600/20';
|
||||
}
|
||||
return 'bg-slate-100 text-slate-600 ring-slate-500/20';
|
||||
};
|
||||
|
||||
const promotionStatusLabel = (promotion) => {
|
||||
if (isCurrentlyActive(promotion)) return 'En cours';
|
||||
if (promotion.is_active) return 'Programmée';
|
||||
return 'Inactive';
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Promotions" />
|
||||
|
||||
<SupervisorLayout title="Promotions">
|
||||
<div class="mb-4 flex justify-end">
|
||||
<PrimaryButton v-if="!showForm" @click="startCreate">
|
||||
<template #actions>
|
||||
<PrimaryButton @click="startCreate">
|
||||
Nouvelle promotion
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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">
|
||||
<FormModal
|
||||
:show="showForm"
|
||||
:title="editingId ? 'Modifier la promotion' : 'Nouvelle promotion'"
|
||||
:submit-label="editingId ? 'Enregistrer' : 'Créer'"
|
||||
:processing="form.processing"
|
||||
max-width="3xl"
|
||||
@close="cancelForm"
|
||||
@submit="submit"
|
||||
>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<FormField label="Établissement">
|
||||
<select v-model="form.establishment_id" required :class="selectClass">
|
||||
<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">
|
||||
</FormField>
|
||||
<FormField label="Type de machine">
|
||||
<select v-model="form.machine_type" required :class="selectClass">
|
||||
<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">
|
||||
</FormField>
|
||||
<FormField label="Type de remise">
|
||||
<select v-model="form.discount_type" required :class="selectClass">
|
||||
<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" />
|
||||
</FormField>
|
||||
<FormField label="Valeur">
|
||||
<input v-model="form.discount_value" type="number" step="0.01" min="0" required :class="inputClass" />
|
||||
</FormField>
|
||||
<FormField label="Début">
|
||||
<input v-model="form.starts_at" type="datetime-local" required :class="inputClass" />
|
||||
</FormField>
|
||||
<FormField label="Fin">
|
||||
<input v-model="form.ends_at" type="datetime-local" required :class="inputClass" />
|
||||
</FormField>
|
||||
<FormField label="Description" field-class="sm:col-span-2 lg:col-span-3">
|
||||
<textarea v-model="form.description" rows="2" :class="inputClass" />
|
||||
</FormField>
|
||||
<div class="flex items-center sm:col-span-2 lg:col-span-3">
|
||||
<label class="flex items-center gap-2 text-sm text-slate-700">
|
||||
<input v-model="form.is_active" type="checkbox" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20" />
|
||||
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>
|
||||
</FormModal>
|
||||
|
||||
<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'
|
||||
"
|
||||
<DataTable>
|
||||
<template #head>
|
||||
<tr>
|
||||
<TableHeaderCell
|
||||
label="Établissement"
|
||||
sortable
|
||||
sort-key="establishment"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<div class="flex flex-col gap-1.5">
|
||||
<select
|
||||
v-if="showEstablishmentFilter"
|
||||
v-model="localFilters.establishment_id"
|
||||
:class="filterSelectClass"
|
||||
>
|
||||
{{
|
||||
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>
|
||||
<option value="">Toutes</option>
|
||||
<option v-for="est in establishments" :key="est.id" :value="est.id">
|
||||
{{ est.name }}
|
||||
</option>
|
||||
</select>
|
||||
<input
|
||||
v-model="localFilters.search"
|
||||
type="text"
|
||||
placeholder="Description…"
|
||||
:class="filterInputClass"
|
||||
/>
|
||||
</div>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Remise"
|
||||
sortable
|
||||
sort-key="discount_value"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
/>
|
||||
<TableHeaderCell
|
||||
label="Période"
|
||||
sortable
|
||||
sort-key="starts_at"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
/>
|
||||
<TableHeaderCell
|
||||
label="Machines"
|
||||
sortable
|
||||
sort-key="machine_type"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<select v-model="localFilters.machine_type" :class="filterSelectClass">
|
||||
<option value="">Toutes</option>
|
||||
<option v-for="(label, value) in machineTypes" :key="value" :value="value">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Statut"
|
||||
sortable
|
||||
sort-key="is_active"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<select v-model="localFilters.is_active" :class="filterSelectClass">
|
||||
<option value="">Tous</option>
|
||||
<option value="1">Active</option>
|
||||
<option value="0">Inactive</option>
|
||||
</select>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell label="Actions" align="right" />
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<tr v-if="promotions.data.length === 0">
|
||||
<td colspan="6" class="px-6 py-12 text-center text-sm text-slate-400">
|
||||
Aucune promotion trouvée.
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="promotion in promotions.data" :key="promotion.id" :class="rowClass">
|
||||
<td :class="[tdClass, 'font-medium text-slate-800']">{{ promotion.establishment_name }}</td>
|
||||
<td :class="[tdClass, 'font-semibold text-emerald-700']">{{ formatDiscount(promotion) }}</td>
|
||||
<td :class="tdClass">
|
||||
<div>{{ formatDate(promotion.starts_at) }}</div>
|
||||
<div class="text-xs text-slate-400">→ {{ formatDate(promotion.ends_at) }}</div>
|
||||
</td>
|
||||
<td :class="tdClass">{{ promotion.machine_type_label }}</td>
|
||||
<td :class="tdClass">
|
||||
<StatusBadge
|
||||
:label="promotionStatusLabel(promotion)"
|
||||
:color-class="promotionStatusColor(promotion)"
|
||||
/>
|
||||
</td>
|
||||
<td :class="[tdClass, 'text-right']">
|
||||
<button class="font-medium text-indigo-600 transition hover:text-indigo-800" @click="startEdit(promotion)">
|
||||
Modifier
|
||||
</button>
|
||||
<button class="ms-3 font-medium text-red-600 transition hover:text-red-800" @click="openDeleteModal(promotion)">
|
||||
Supprimer
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<template #footer>
|
||||
<Pagination
|
||||
:paginator="promotions"
|
||||
:per-page="localFilters.per_page"
|
||||
@update:per-page="(value) => { localFilters.per_page = value; }"
|
||||
/>
|
||||
</template>
|
||||
</DataTable>
|
||||
|
||||
<ConfirmDeleteModal
|
||||
:show="deleteTarget !== null"
|
||||
title="Supprimer la promotion"
|
||||
:message="deleteTarget ? `Voulez-vous supprimer la promotion « ${deleteTarget.description || deleteTarget.establishment_name} » ?` : ''"
|
||||
:processing="deleteForm.processing"
|
||||
@close="closeDeleteModal"
|
||||
@confirm="confirmDelete"
|
||||
/>
|
||||
</SupervisorLayout>
|
||||
</template>
|
||||
|
||||
@@ -1,13 +1,31 @@
|
||||
<script setup>
|
||||
import DataTable from '@/Components/Supervisor/DataTable.vue';
|
||||
import Pagination from '@/Components/Supervisor/Pagination.vue';
|
||||
import StatusBadge from '@/Components/Supervisor/StatusBadge.vue';
|
||||
import TableHeaderCell from '@/Components/Supervisor/TableHeaderCell.vue';
|
||||
import { useListFilters } from '@/Components/Supervisor/useListFilters.js';
|
||||
import {
|
||||
filterInputClass,
|
||||
filterSelectClass,
|
||||
getStatusColor,
|
||||
linkClass,
|
||||
rowClass,
|
||||
tdClass,
|
||||
washStatusColors,
|
||||
} from '@/Components/Supervisor/ui.js';
|
||||
import SupervisorLayout from '@/Layouts/SupervisorLayout.vue';
|
||||
import { Head, Link, router } from '@inertiajs/vue3';
|
||||
import { reactive, watch } from 'vue';
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
washes: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
establishments: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
@@ -18,17 +36,19 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const localFilters = reactive({
|
||||
const { localFilters, toggleSort } = useListFilters('supervisor.washes.index', {
|
||||
establishment_id: props.filters.establishment_id ?? '',
|
||||
user: props.filters.user ?? '',
|
||||
status: props.filters.status ?? '',
|
||||
date: props.filters.date ?? '',
|
||||
});
|
||||
sort: props.filters.sort ?? 'started_at',
|
||||
direction: props.filters.direction ?? 'desc',
|
||||
per_page: props.filters.per_page ?? 10,
|
||||
}, { debounceKeys: ['user'] });
|
||||
|
||||
watch(localFilters, () => {
|
||||
router.get(route('supervisor.washes.index'), localFilters, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
});
|
||||
});
|
||||
const showEstablishmentFilter = computed(() => props.establishments.length > 1);
|
||||
|
||||
const handleSort = (key) => toggleSort(key, ['started_at', 'duration_minutes', 'cost']);
|
||||
|
||||
const formatDate = (iso) => {
|
||||
if (!iso) return '—';
|
||||
@@ -40,122 +60,137 @@ const formatDate = (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
|
||||
<DataTable>
|
||||
<template #head>
|
||||
<tr>
|
||||
<TableHeaderCell
|
||||
label="Début"
|
||||
sortable
|
||||
sort-key="started_at"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<input v-model="localFilters.date" type="date" :class="filterInputClass" />
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Utilisateur"
|
||||
sortable
|
||||
sort-key="user"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<input
|
||||
v-model="localFilters.user"
|
||||
type="text"
|
||||
placeholder="Nom ou e-mail…"
|
||||
:class="filterInputClass"
|
||||
/>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Machine"
|
||||
sortable
|
||||
sort-key="machine"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<select
|
||||
v-if="showEstablishmentFilter"
|
||||
v-model="localFilters.establishment_id"
|
||||
:class="filterSelectClass"
|
||||
>
|
||||
<option value="">Toutes</option>
|
||||
<option v-for="est in establishments" :key="est.id" :value="est.id">
|
||||
{{ est.name }}
|
||||
</option>
|
||||
</select>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Statut"
|
||||
sortable
|
||||
sort-key="status"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
>
|
||||
<select v-model="localFilters.status" :class="filterSelectClass">
|
||||
<option value="">Tous</option>
|
||||
<option v-for="(label, value) in statusOptions" :key="value" :value="value">
|
||||
{{ label }}
|
||||
</option>
|
||||
</select>
|
||||
</TableHeaderCell>
|
||||
<TableHeaderCell
|
||||
label="Durée"
|
||||
sortable
|
||||
sort-key="duration_minutes"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<TableHeaderCell
|
||||
label="Coût"
|
||||
sortable
|
||||
sort-key="cost"
|
||||
:active-sort="localFilters.sort"
|
||||
:sort-direction="localFilters.direction"
|
||||
@sort="handleSort"
|
||||
/>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<tr v-if="washes.data.length === 0">
|
||||
<td colspan="6" class="px-6 py-12 text-center text-sm text-slate-400">
|
||||
Aucun lavage trouvé.
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="wash in washes.data" :key="wash.uuid" :class="rowClass">
|
||||
<td :class="[tdClass, 'font-medium text-slate-800']">
|
||||
{{ formatDate(wash.started_at) }}
|
||||
</td>
|
||||
<td :class="tdClass">
|
||||
<div class="font-medium text-slate-800">{{ wash.user?.name ?? '—' }}</div>
|
||||
<div class="text-xs text-slate-400">{{ wash.user?.email }}</div>
|
||||
</td>
|
||||
<td :class="tdClass">
|
||||
<Link
|
||||
v-if="wash.machine"
|
||||
:href="route('supervisor.machines.show', wash.machine.uuid)"
|
||||
:class="linkClass"
|
||||
>
|
||||
{{ wash.machine.name }}
|
||||
</Link>
|
||||
<span v-else>—</span>
|
||||
</td>
|
||||
<td :class="tdClass">
|
||||
<StatusBadge
|
||||
:label="wash.status_label"
|
||||
:color-class="getStatusColor(wash.status, washStatusColors)"
|
||||
/>
|
||||
</td>
|
||||
<td :class="tdClass">
|
||||
{{ wash.duration_minutes ? `${wash.duration_minutes} min` : '—' }}
|
||||
</td>
|
||||
<td :class="[tdClass, 'font-semibold text-slate-800']">
|
||||
{{ formatCurrency(wash.cost) }}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<template #footer>
|
||||
<Pagination
|
||||
:paginator="washes"
|
||||
:per-page="localFilters.per_page"
|
||||
@update:per-page="(value) => { localFilters.per_page = value; }"
|
||||
/>
|
||||
</template>
|
||||
</DataTable>
|
||||
</SupervisorLayout>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user