jeremy/OrderCheck
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: Import existing Laravel project

Browse Source
This commit is contained in:
jeremy bayse
2026-06-15 08:12:33 +02:00
parent 7420d1b466
commit 030d76af53
143 changed files with 21885 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
resources/js/Pages/Materiels/Index.vue Normal file
View File

@@ -0,0 +1,368 @@
<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>