369 lines
21 KiB
Vue
369 lines
21 KiB
Vue
<script setup>
|
|
import { ref, computed, watch } from 'vue';
|
|
import { Head, Link, router } from '@inertiajs/vue3';
|
|
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
|
|
import MetricCard from '@/Components/MetricCard.vue';
|
|
|
|
const props = defineProps({
|
|
hardwares: Object,
|
|
metrics: Object,
|
|
filters: Object,
|
|
});
|
|
|
|
// État des filtres
|
|
const search = ref(props.filters.search || '');
|
|
const status = ref(props.filters.status || '');
|
|
const type = ref(props.filters.type || '');
|
|
|
|
// Recherche réactive avec debouncing
|
|
let timeout;
|
|
const handleSearch = () => {
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(() => {
|
|
runFilters();
|
|
}, 300);
|
|
};
|
|
|
|
const runFilters = () => {
|
|
router.get(route('materiels.index'), {
|
|
search: search.value,
|
|
status: status.value,
|
|
type: type.value,
|
|
}, {
|
|
preserveState: true,
|
|
replace: true,
|
|
});
|
|
};
|
|
|
|
const resetFilters = () => {
|
|
search.value = '';
|
|
status.value = '';
|
|
type.value = '';
|
|
runFilters();
|
|
};
|
|
|
|
// Exporter en CSV
|
|
const exportCsv = () => {
|
|
window.location.href = route('materiels.index', {
|
|
search: search.value,
|
|
status: status.value,
|
|
type: type.value,
|
|
export: 1,
|
|
});
|
|
};
|
|
|
|
// Alerte de garanties expirées ou arrivant à expiration sous 30 jours
|
|
const expiringOrExpiredHardwares = computed(() => {
|
|
return props.hardwares.data.filter(hw => {
|
|
if (!hw.warranty_expiration_date) return false;
|
|
// Si le matériel a une garantie de 0 jours restants ou moins de 30 jours restants
|
|
return hw.warranty_remaining_days <= 30 || !hw.is_under_warranty;
|
|
});
|
|
});
|
|
|
|
// Formatage français pour le type
|
|
const getTypeLabel = (type) => {
|
|
switch (type) {
|
|
case 'serveur': return 'Serveur';
|
|
case 'switch': return 'Switch';
|
|
case 'routeur': return 'Routeur';
|
|
case 'onduleur': return 'Onduleur';
|
|
case 'stockage': return 'Stockage (NAS/SAN)';
|
|
case 'pare-feu': return 'Pare-feu';
|
|
case 'poste_travail': return 'Poste de travail';
|
|
case 'autre': return 'Autre';
|
|
default: return type;
|
|
}
|
|
};
|
|
|
|
// Stylisation des badges de statut
|
|
const getStatusClasses = (status) => {
|
|
switch (status) {
|
|
case 'en_stock':
|
|
return 'bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-950/40 dark:text-blue-300 dark:border-blue-900';
|
|
case 'en_service':
|
|
return 'bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-950/40 dark:text-emerald-300 dark:border-emerald-900';
|
|
case 'en_panne':
|
|
return 'bg-rose-100 text-rose-800 border-rose-200 dark:bg-rose-950/40 dark:text-rose-300 dark:border-rose-900';
|
|
case 'au_rebut':
|
|
return 'bg-slate-100 text-slate-800 border-slate-200 dark:bg-slate-900/60 dark:text-slate-400 dark:border-slate-800';
|
|
default:
|
|
return 'bg-gray-100 text-gray-800 border-gray-200 dark:bg-gray-800 dark:text-gray-300';
|
|
}
|
|
};
|
|
|
|
const getStatusLabel = (status) => {
|
|
switch (status) {
|
|
case 'en_stock': return 'En stock';
|
|
case 'en_service': return 'En service';
|
|
case 'en_panne': return 'En panne';
|
|
case 'au_rebut': return 'Au rebut';
|
|
default: return status;
|
|
}
|
|
};
|
|
|
|
// Stylisation de la garantie
|
|
const getWarrantyClasses = (hw) => {
|
|
if (!hw.warranty_expiration_date) {
|
|
return 'text-slate-400 dark:text-slate-500';
|
|
}
|
|
if (hw.is_under_warranty) {
|
|
if (hw.warranty_remaining_days <= 90) {
|
|
return 'text-amber-600 dark:text-amber-400 font-semibold';
|
|
}
|
|
return 'text-emerald-600 dark:text-emerald-400';
|
|
}
|
|
return 'text-rose-600 dark:text-rose-450 font-bold';
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Inventaire Matériel Infrastructure" />
|
|
|
|
<AuthenticatedLayout>
|
|
<template #header>
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<h2 class="text-xl font-bold leading-tight text-slate-800 dark:text-slate-200">
|
|
Inventaire Matériel Infrastructure
|
|
</h2>
|
|
|
|
<div class="flex gap-2">
|
|
<button
|
|
@click="exportCsv"
|
|
class="inline-flex items-center px-4 py-2 text-sm font-semibold text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 dark:bg-slate-900 dark:text-slate-300 dark:border-slate-850 dark:hover:bg-slate-800 transition-colors shadow-sm"
|
|
>
|
|
<svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
|
</svg>
|
|
Exporter
|
|
</button>
|
|
|
|
<Link
|
|
:href="route('materiels.create')"
|
|
class="inline-flex items-center px-4 py-2 text-sm font-semibold text-white bg-sky-600 rounded-lg hover:bg-sky-500 dark:bg-sky-500 dark:hover:bg-sky-400 transition-colors shadow-sm"
|
|
>
|
|
<svg class="w-4 h-4 mr-1.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
Ajouter un matériel
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="py-6">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
|
|
<!-- Notifications flash -->
|
|
<div v-if="$page.props.flash?.success" class="p-4 bg-emerald-50 border border-emerald-200 text-emerald-800 rounded-lg dark:bg-emerald-950/40 dark:border-emerald-900 dark:text-emerald-300 flex items-center shadow-sm">
|
|
<svg class="w-5 h-5 mr-3 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
</svg>
|
|
<span>{{ $page.props.flash?.success }}</span>
|
|
</div>
|
|
|
|
<!-- KPIs de l'inventaire -->
|
|
<div class="grid grid-cols-2 lg:grid-cols-5 gap-4">
|
|
<MetricCard title="Total Équipements" :value="metrics.total" color="text-slate-800 dark:text-white" />
|
|
<MetricCard title="En service" :value="metrics.en_service" color="text-emerald-600 dark:text-emerald-400" />
|
|
<MetricCard title="En stock (Rechange)" :value="metrics.en_stock" color="text-blue-600 dark:text-blue-400" />
|
|
<MetricCard title="En panne" :value="metrics.en_panne" color="text-rose-600 dark:text-rose-450" />
|
|
<MetricCard title="Sous garantie active" :value="metrics.under_warranty" color="text-sky-600 dark:text-sky-400" />
|
|
</div>
|
|
|
|
<!-- Alertes Garantie -->
|
|
<div v-if="expiringOrExpiredHardwares.length > 0" class="p-4 bg-amber-50 border border-amber-200 text-amber-900 rounded-lg dark:bg-amber-950/25 dark:border-amber-900/60 dark:text-amber-300 shadow-sm space-y-2">
|
|
<div class="flex items-center">
|
|
<svg class="w-5 h-5 mr-2 shrink-0 text-amber-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
|
|
</svg>
|
|
<span class="font-bold">Alerte cycle de vie : Matériel(s) hors garantie ou expirant bientôt (sous 30j)</span>
|
|
</div>
|
|
<ul class="list-disc pl-5 text-xs space-y-1">
|
|
<li v-for="hw in expiringOrExpiredHardwares.slice(0, 5)" :key="hw.id">
|
|
<Link :href="route('materiels.show', hw.id)" class="underline hover:text-amber-800 dark:hover:text-amber-100 font-semibold">
|
|
{{ hw.name }} ({{ hw.brand }} {{ hw.model }})
|
|
</Link>
|
|
- {{ hw.warranty_status_label }}
|
|
</li>
|
|
<li v-if="expiringOrExpiredHardwares.length > 5">
|
|
Et {{ expiringOrExpiredHardwares.length - 5 }} autre(s) équipement(s)...
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Filtres et recherche -->
|
|
<div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-4 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<!-- Recherche textuelle -->
|
|
<div class="flex-1 relative">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400">
|
|
<svg class="h-4.5 w-4.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.602 10.602Z" />
|
|
</svg>
|
|
</div>
|
|
<input
|
|
v-model="search"
|
|
@input="handleSearch"
|
|
type="text"
|
|
placeholder="Rechercher par nom, marque, modèle, n° série, IP, emplacement..."
|
|
class="block w-full pl-10 pr-3 py-2 text-sm bg-slate-50 border border-slate-300 rounded-lg text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-sky-500 focus:border-sky-500 dark:bg-slate-950 dark:border-slate-850 dark:text-slate-200"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Sélections filtres -->
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<!-- Filtrer par type -->
|
|
<select
|
|
v-model="type"
|
|
@change="runFilters"
|
|
class="bg-slate-50 border border-slate-300 rounded-lg text-sm px-3 py-2 text-slate-700 dark:bg-slate-950 dark:border-slate-850 dark:text-slate-300"
|
|
>
|
|
<option value="">Tous les types</option>
|
|
<option value="serveur">Serveur</option>
|
|
<option value="switch">Switch</option>
|
|
<option value="routeur">Routeur</option>
|
|
<option value="onduleur">Onduleur</option>
|
|
<option value="stockage">Stockage</option>
|
|
<option value="pare-feu">Pare-feu</option>
|
|
<option value="poste_travail">Poste de travail</option>
|
|
<option value="autre">Autre</option>
|
|
</select>
|
|
|
|
<!-- Filtrer par statut -->
|
|
<select
|
|
v-model="status"
|
|
@change="runFilters"
|
|
class="bg-slate-50 border border-slate-300 rounded-lg text-sm px-3 py-2 text-slate-700 dark:bg-slate-950 dark:border-slate-850 dark:text-slate-300"
|
|
>
|
|
<option value="">Tous les statuts</option>
|
|
<option value="en_stock">En stock</option>
|
|
<option value="en_service">En service</option>
|
|
<option value="en_panne">En panne</option>
|
|
<option value="au_rebut">Au rebut</option>
|
|
</select>
|
|
|
|
<!-- Réinitialiser -->
|
|
<button
|
|
v-if="search || status || type"
|
|
@click="resetFilters"
|
|
class="text-xs font-semibold text-rose-600 hover:text-rose-500 dark:text-rose-450 dark:hover:text-rose-400 px-2.5 py-2"
|
|
>
|
|
Réinitialiser
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Liste du matériel -->
|
|
<div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl shadow-sm overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-slate-50 border-b border-slate-100 dark:bg-slate-950/40 dark:border-slate-850 text-xxs font-semibold uppercase tracking-wider text-slate-400">
|
|
<th class="px-6 py-4">Nom de l'équipement</th>
|
|
<th class="px-6 py-4">Marque / Modèle</th>
|
|
<th class="px-6 py-4">Numéro de série</th>
|
|
<th class="px-6 py-4">Emplacement / IP</th>
|
|
<th class="px-6 py-4">Garantie</th>
|
|
<th class="px-6 py-4">Statut</th>
|
|
<th class="px-6 py-4 text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100 dark:divide-slate-850 text-sm">
|
|
<tr
|
|
v-for="hw in hardwares.data"
|
|
:key="hw.id"
|
|
class="hover:bg-slate-50/50 dark:hover:bg-slate-950/20 transition-colors"
|
|
>
|
|
<td class="px-6 py-4">
|
|
<div class="font-bold text-slate-800 dark:text-slate-200">
|
|
<Link :href="route('materiels.show', hw.id)" class="hover:text-sky-600 dark:hover:text-sky-400">
|
|
{{ hw.name }}
|
|
</Link>
|
|
</div>
|
|
<span class="inline-block mt-0.5 text-xxs font-semibold text-slate-400 uppercase">
|
|
{{ getTypeLabel(hw.type) }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="text-slate-800 dark:text-slate-200 font-medium">{{ hw.brand }}</div>
|
|
<div class="text-xs text-slate-450">{{ hw.model }}</div>
|
|
</td>
|
|
<td class="px-6 py-4 font-mono text-xs text-slate-600 dark:text-slate-350 font-semibold">
|
|
{{ hw.serial_number }}
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="text-slate-800 dark:text-slate-200 font-medium">{{ hw.location }}</div>
|
|
<div v-if="hw.ip_address" class="text-xs font-mono text-sky-600 dark:text-sky-400 mt-0.5">{{ hw.ip_address }}</div>
|
|
<div v-else class="text-xxs text-slate-400 italic">Pas d'IP de gestion</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-xs">
|
|
<span :class="getWarrantyClasses(hw)">
|
|
{{ hw.warranty_status_label }}
|
|
</span>
|
|
<span class="block text-xxs text-slate-405 mt-0.5" v-if="hw.warranty_expiration_date">
|
|
Fin : {{ hw.warranty_expiration_date_formatted }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span
|
|
:class="`inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold border ${getStatusClasses(hw.status)}`"
|
|
>
|
|
{{ getStatusLabel(hw.status) }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex items-center justify-end gap-3">
|
|
<Link
|
|
:href="route('materiels.show', hw.id)"
|
|
class="text-slate-500 hover:text-sky-600 dark:text-slate-400 dark:hover:text-sky-400"
|
|
title="Voir les détails"
|
|
>
|
|
<svg class="w-4.5 h-4.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
|
|
</svg>
|
|
</Link>
|
|
<Link
|
|
:href="route('materiels.edit', hw.id)"
|
|
class="text-slate-500 hover:text-amber-500 dark:text-slate-400 dark:hover:text-amber-400"
|
|
title="Modifier la fiche"
|
|
>
|
|
<svg class="w-4.5 h-4.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.83 18.75a4.48 4.48 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
|
|
</svg>
|
|
</Link>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr v-if="hardwares.data.length === 0">
|
|
<td colspan="7" class="px-6 py-8 text-center text-slate-500 dark:text-slate-400">
|
|
Aucun équipement de matériel trouvé dans l'inventaire.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Liens de pagination -->
|
|
<div v-if="hardwares.meta && hardwares.meta.last_page > 1" class="flex justify-center mt-6">
|
|
<nav class="flex items-center space-x-1">
|
|
<Link
|
|
v-for="(link, index) in hardwares.meta.links"
|
|
:key="index"
|
|
:href="link.url || '#'"
|
|
class="px-3.5 py-2 rounded-lg text-sm font-semibold transition-colors"
|
|
:class="[
|
|
link.active
|
|
? 'bg-sky-600 text-white dark:bg-sky-500'
|
|
: 'bg-white text-slate-700 hover:bg-slate-50 border border-slate-350 dark:bg-slate-900 dark:text-slate-300 dark:border-slate-850 dark:hover:bg-slate-800',
|
|
!link.url && 'opacity-50 cursor-not-allowed pointer-events-none'
|
|
]"
|
|
v-html="link.label"
|
|
/>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
</template>
|