feat: Initialize core application structure including authentication, role-based dashboards, service task management, and integration workflows.
This commit is contained in:
86
resources/js/Pages/Integration/Show.vue
Normal file
86
resources/js/Pages/Integration/Show.vue
Normal file
@@ -0,0 +1,86 @@
|
||||
<script setup>
|
||||
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
import StatusBadge from '@/Components/App/StatusBadge.vue';
|
||||
import ServiceTaskCard from '@/Components/App/ServiceTaskCard.vue';
|
||||
import ActivityTimeline from '@/Components/App/ActivityTimeline.vue';
|
||||
import { router } from '@inertiajs/vue3';
|
||||
|
||||
const props = defineProps({
|
||||
integration: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
activities: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const validateRH = () => {
|
||||
if (confirm('Souhaitez-vous valider ce dossier et notifier les services ?')) {
|
||||
router.post(route('integrations.validate-rh', props.integration.id));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head title="Détails Intégration" />
|
||||
|
||||
<AuthenticatedLayout>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
|
||||
Integration: {{ integration.agent.first_name }} {{ integration.agent.last_name }}
|
||||
</h2>
|
||||
<div class="flex items-center space-x-4">
|
||||
<button
|
||||
v-if="integration.status === 'pending_rh_validation' || integration.status === 'draft'"
|
||||
@click="validateRH"
|
||||
class="px-4 py-2 bg-green-600 text-white rounded-md text-sm font-bold hover:bg-green-700"
|
||||
>
|
||||
Valider Dossier RH
|
||||
</button>
|
||||
<StatusBadge :status="integration.status" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="py-12">
|
||||
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-3 items-start">
|
||||
<!-- Right/Side Column: Agent Info & Activity -->
|
||||
<div class="md:col-span-1 space-y-6">
|
||||
<!-- Agent Info -->
|
||||
<div class="overflow-hidden bg-white shadow-sm sm:rounded-lg dark:bg-gray-800 p-6 border border-gray-200 dark:border-gray-700">
|
||||
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Informations Agent</h3>
|
||||
<dl class="space-y-4">
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Poste</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ integration.agent.position }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Service</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ integration.agent.department }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Date d'arrivée</dt>
|
||||
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ new Date(integration.agent.arrival_date).toLocaleDateString() }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<ActivityTimeline :activities="activities" />
|
||||
</div>
|
||||
|
||||
<!-- Main Column: Tasks -->
|
||||
<div class="md:col-span-2 space-y-6">
|
||||
<div v-for="task in integration.service_tasks" :key="task.id">
|
||||
<ServiceTaskCard :task="task" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AuthenticatedLayout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user