feat: infrastructure assets management with warranty tracking and EAN lookup integration
This commit is contained in:
110
resources/js/Pages/Calendar/Index.vue
Normal file
110
resources/js/Pages/Calendar/Index.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<script setup>
|
||||
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
|
||||
import { Head } from '@inertiajs/vue3'
|
||||
import FullCalendar from '@fullcalendar/vue3'
|
||||
import dayGridPlugin from '@fullcalendar/daygrid'
|
||||
import interactionPlugin from '@fullcalendar/interaction'
|
||||
import frLocale from '@fullcalendar/core/locales/fr'
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const calendarOptions = ref({
|
||||
plugins: [dayGridPlugin, interactionPlugin],
|
||||
initialView: 'dayGridMonth',
|
||||
locale: frLocale,
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,dayGridWeek'
|
||||
},
|
||||
events: route('calendar.events'),
|
||||
eventClick: (info) => {
|
||||
if (info.event.url) {
|
||||
info.jsEvent.preventDefault()
|
||||
window.location.href = info.event.url
|
||||
}
|
||||
},
|
||||
eventDidMount: (info) => {
|
||||
// Simple tooltip-like title on hover
|
||||
info.el.title = info.event.title + (info.event.extendedProps.service ? ' - ' + info.event.extendedProps.service : '')
|
||||
},
|
||||
height: 'auto',
|
||||
firstDay: 1, // Start on Monday
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Calendrier des écheances" />
|
||||
<AuthenticatedLayout>
|
||||
<template #header>
|
||||
<h1 class="text-xl font-semibold text-gray-900">Calendrier des échéances</h1>
|
||||
</template>
|
||||
|
||||
<div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
|
||||
<div class="calendar-container">
|
||||
<FullCalendar :options="calendarOptions" />
|
||||
</div>
|
||||
|
||||
<div class="mt-8 grid gap-4 sm:grid-cols-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 rounded-full bg-[#27ae60]"></span>
|
||||
<span class="text-xs text-gray-600">Contrats Actifs</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 rounded-full bg-[#f39c12]"></span>
|
||||
<span class="text-xs text-gray-600">Contrats à Renouveler / Proche écheance</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 rounded-full bg-[#3498db]"></span>
|
||||
<span class="text-xs text-gray-600">Licences / SaaS</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 rounded-full bg-[#9b59b6]"></span>
|
||||
<span class="text-xs text-gray-600">Noms de Domaine</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-3 h-3 rounded-full bg-[#e74c3c]"></span>
|
||||
<span class="text-xs text-gray-600">Contrats Expirés</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AuthenticatedLayout>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.fc {
|
||||
font-family: inherit;
|
||||
--fc-border-color: #f1f5f9;
|
||||
--fc-button-bg-color: #4f46e5;
|
||||
--fc-button-border-color: #4f46e5;
|
||||
--fc-button-hover-bg-color: #4338ca;
|
||||
--fc-button-active-bg-color: #4338ca;
|
||||
--fc-today-bg-color: #f8fafc;
|
||||
}
|
||||
|
||||
.fc .fc-toolbar-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.fc .fc-col-header-cell {
|
||||
padding: 12px 0;
|
||||
background: #f8fafc;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
cursor: pointer;
|
||||
border: none !important;
|
||||
padding: 2px 4px !important;
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
.fc-daygrid-event {
|
||||
white-space: normal !important;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user