111 lines
3.5 KiB
Vue
111 lines
3.5 KiB
Vue
<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>
|