diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php
index e8fab6c..20abd9b 100644
--- a/app/Http/Controllers/DashboardController.php
+++ b/app/Http/Controllers/DashboardController.php
@@ -24,7 +24,7 @@ class DashboardController extends Controller
         }
 
         // If user has a service role
-        $serviceRoles = ['DSI', 'Batiment', 'ParcAuto'];
+        $serviceRoles = ['DSI', 'Batiment', 'Parc Auto'];
         foreach ($serviceRoles as $role) {
             if ($user->hasRole($role)) {
                 return $this->serviceDashboard($role);
@@ -103,6 +103,15 @@ class DashboardController extends Controller
                 })
                 ->with(['integrationRequest.agent', 'taskItems'])
                 ->get(),
+            'processed_integrations' => IntegrationRequest::whereHas('serviceTasks', function ($query) use ($role) {
+                    $query->whereHas('service', function ($q) use ($role) {
+                        $q->where('name', $role);
+                    })->where('status', ServiceTaskStatus::Completed);
+                })
+                ->with(['agent', 'template'])
+                ->latest('updated_at')
+                ->take(10)
+                ->get(),
             'completed_tasks' => ServiceTask::where('status', ServiceTaskStatus::Completed)
                 ->whereHas('service', function ($query) use ($role) {
                     $query->where('name', $role);
diff --git a/app/Http/Controllers/IntegrationController.php b/app/Http/Controllers/IntegrationController.php
index 77520c7..cd89059 100644
--- a/app/Http/Controllers/IntegrationController.php
+++ b/app/Http/Controllers/IntegrationController.php
@@ -43,10 +43,23 @@ class IntegrationController extends Controller
 
     public function show(IntegrationRequest $integration)
     {
+        $user = auth()->user();
+
+        $serviceTaskConstraint = function ($query) use ($user) {
+            // Admin, RH, and Prescripteur can see all tasks (global progress)
+            if (!$user->hasRole(['Admin', 'RH', 'Prescripteur'])) {
+                $query->whereHas('service', function ($q) use ($user) {
+                    $q->whereIn('name', $user->getRoleNames());
+                });
+            }
+        };
+
         $integration->load([
             'agent', 
             'template', 
-            'serviceTasks.service', 
+            'serviceTasks' => $serviceTaskConstraint,
+            'serviceTasks.service',
+            'serviceTasks.integrationRequest', 
             'serviceTasks.taskItems',
             'serviceTasks.comments.user',
             'serviceTasks.attachments',
@@ -77,6 +90,10 @@ class IntegrationController extends Controller
 
     public function downloadPdf(IntegrationRequest $integration)
     {
+        if ($integration->status !== \App\Enums\IntegrationStatus::Completed) {
+            abort(403, 'Le téléchargement de la fiche agent n\'est possible que lorsque le processus est terminé.');
+        }
+
         // Load relationships needed for the PDF
         $integration->load([
             'agent', 
diff --git a/app/Http/Controllers/RoleController.php b/app/Http/Controllers/RoleController.php
new file mode 100644
index 0000000..9c63482
--- /dev/null
+++ b/app/Http/Controllers/RoleController.php
@@ -0,0 +1,100 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Spatie\Permission\Models\Role;
+use Spatie\Permission\Models\Permission;
+
+class RoleController extends Controller
+{
+    public function index()
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        return Inertia::render('Role/Index', [
+            'roles' => Role::with('permissions')->get(),
+        ]);
+    }
+
+    public function create()
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        return Inertia::render('Role/Create', [
+            'permissions' => Permission::all(),
+        ]);
+    }
+
+    public function store(Request $request)
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        $validated = $request->validate([
+            'name' => 'required|string|unique:roles,name',
+            'permissions' => 'array',
+        ]);
+
+        $role = Role::create(['name' => $validated['name']]);
+
+        if (!empty($validated['permissions'])) {
+            $role->syncPermissions($validated['permissions']);
+        }
+
+        return redirect()->route('roles.index')->with('success', 'Rôle créé avec succès.');
+    }
+
+    public function edit(Role $role)
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        return Inertia::render('Role/Edit', [
+            'role' => $role->load('permissions'),
+            'permissions' => Permission::all(),
+        ]);
+    }
+
+    public function update(Request $request, Role $role)
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        $validated = $request->validate([
+            'name' => 'required|string|unique:roles,name,' . $role->id,
+            'permissions' => 'array',
+        ]);
+
+        $role->update(['name' => $validated['name']]);
+
+        if (isset($validated['permissions'])) {
+            $role->syncPermissions($validated['permissions']);
+        }
+
+        return redirect()->route('roles.index')->with('success', 'Rôle mis à jour avec succès.');
+    }
+
+    public function destroy(Role $role)
+    {
+        if (!auth()->user()->hasRole('Admin')) {
+            abort(403);
+        }
+
+        if ($role->name === 'Admin') {
+            return back()->with('error', 'Le rôle Admin ne peut pas être supprimé.');
+        }
+
+        $role->delete();
+
+        return redirect()->route('roles.index')->with('success', 'Rôle supprimé avec succès.');
+    }
+}
diff --git a/app/Policies/IntegrationRequestPolicy.php b/app/Policies/IntegrationRequestPolicy.php
index 2abd57d..cb4fdd0 100644
--- a/app/Policies/IntegrationRequestPolicy.php
+++ b/app/Policies/IntegrationRequestPolicy.php
@@ -13,7 +13,7 @@ class IntegrationRequestPolicy
      */
     public function viewAny(User $user): bool
     {
-        return $user->hasAnyRole(['Admin', 'RH', 'DSI', 'Batiment', 'ParcAuto']);
+        return $user->hasAnyRole(['Admin', 'RH', 'DSI', 'Batiment', 'Parc Auto']);
     }
 
     /**
@@ -36,7 +36,7 @@ class IntegrationRequestPolicy
      */
     public function create(User $user): bool
     {
-        return $user->hasAnyRole(['Admin', 'RH', 'Prescripteur', 'DSI', 'Batiment', 'ParcAuto']);
+        return $user->hasAnyRole(['Admin', 'RH', 'Prescripteur', 'DSI', 'Batiment', 'Parc Auto']);
     }
 
     /**
diff --git a/database/seeders/IntegrationTemplateSeeder.php b/database/seeders/IntegrationTemplateSeeder.php
index 9a57904..83caf94 100644
--- a/database/seeders/IntegrationTemplateSeeder.php
+++ b/database/seeders/IntegrationTemplateSeeder.php
@@ -56,7 +56,7 @@ class IntegrationTemplateSeeder extends Seeder
                     'label' => 'Attribution Badge',
                     'is_mandatory' => true,
                 ]);
-            } elseif ($service->name === 'ParcAuto') {
+            } elseif ($service->name === 'Parc Auto') {
                 $template->serviceItems()->create([
                     'service_id' => $service->id,
                     'label' => 'Création compte vehicule',
@@ -64,5 +64,42 @@ class IntegrationTemplateSeeder extends Seeder
                 ]);
             }
         }
+        /* Offboarding Template */
+        $offboardingTemplate = IntegrationTemplate::firstOrCreate([
+            'name' => 'Sortie Standard',
+            'is_active' => true,
+        ]);
+
+        foreach ($services as $service) {
+            if ($service->name === 'DSI') {
+                $offboardingTemplate->serviceItems()->create([
+                    'service_id' => $service->id,
+                    'label' => 'Désactivation compte AD',
+                    'is_mandatory' => true,
+                ]);
+                $offboardingTemplate->serviceItems()->create([
+                    'service_id' => $service->id,
+                    'label' => 'Restitution Ordinateur',
+                    'is_mandatory' => true,
+                ]);
+                $offboardingTemplate->serviceItems()->create([
+                    'service_id' => $service->id,
+                    'label' => 'Désactivation email',
+                    'is_mandatory' => true,
+                ]);
+            } elseif ($service->name === 'Batiment') {
+                $offboardingTemplate->serviceItems()->create([
+                    'service_id' => $service->id,
+                    'label' => 'Restitution Badge',
+                    'is_mandatory' => true,
+                ]);
+            } elseif ($service->name === 'Parc Auto') {
+                $offboardingTemplate->serviceItems()->create([
+                    'service_id' => $service->id,
+                    'label' => 'Désactivation compte vehicule',
+                    'is_mandatory' => false,
+                ]);
+            }
+        }
     }
 }
diff --git a/database/seeders/RolesAndPermissionsSeeder.php b/database/seeders/RolesAndPermissionsSeeder.php
index 18e29fb..d366c2d 100644
--- a/database/seeders/RolesAndPermissionsSeeder.php
+++ b/database/seeders/RolesAndPermissionsSeeder.php
@@ -38,10 +38,10 @@ class RolesAndPermissionsSeeder extends Seeder
             'export reports',
         ]);
 
-        $services = ['DSI', 'Batiment', 'ParcAuto'];
+        $services = ['DSI', 'Batiment', 'Parc Auto'];
         foreach ($services as $service) {
             Role::firstOrCreate(['name' => $service])->givePermissionTo([
-                'manage ' . strtolower($service === 'ParcAuto' ? 'parc auto' : $service) . ' tasks',
+                'manage ' . strtolower($service) . ' tasks',
                 'view dashboard',
             ]);
         }
diff --git a/database/seeders/ServiceSeeder.php b/database/seeders/ServiceSeeder.php
index 689c9cf..f7831d7 100644
--- a/database/seeders/ServiceSeeder.php
+++ b/database/seeders/ServiceSeeder.php
@@ -12,7 +12,7 @@ class ServiceSeeder extends Seeder
         $services = [
             ['name' => 'DSI', 'code' => 'dsi'],
             ['name' => 'Batiment', 'code' => 'batiment'],
-            ['name' => 'ParcAuto', 'code' => 'parc_auto'],
+            ['name' => 'Parc Auto', 'code' => 'parc_auto'],
             ['name' => 'RH', 'code' => 'rh'],
         ];
 
diff --git a/resources/js/Components/App/ActivityTimeline.vue b/resources/js/Components/App/ActivityTimeline.vue
index c6f0666..214c1c3 100644
--- a/resources/js/Components/App/ActivityTimeline.vue
+++ b/resources/js/Components/App/ActivityTimeline.vue
@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from 'vue';
+import { getStatusLabel, getModelLabel } from '@/Utils/statuses';
 
 const props = defineProps({
     activities: Array,
@@ -46,12 +47,12 @@ const getBadgeColor = (description) => {
                                             <span class="font-medium text-gray-900 dark:text-gray-100">{{ activity.causer?.name || 'Système' }}</span>
                                             {{ activity.description === 'created' ? ' a créé ' : ' a mis à jour ' }}
                                             <span class="font-medium text-gray-900 dark:text-gray-100">
-                                                {{ activity.subject_type.split('\\').pop() }}
+                                                {{ getModelLabel(activity.subject_type) }}
                                             </span>
                                         </p>
                                         <div v-if="activity.properties?.attributes" class="mt-2 text-xs text-gray-400 bg-gray-50 dark:bg-gray-900/50 p-2 rounded">
                                             <div v-for="(val, key) in activity.properties.attributes" :key="key">
-                                                <span v-if="key === 'status'">Nouveau statut: <span class="font-bold text-blue-500">{{ val }}</span></span>
+                                                <span v-if="key === 'status'">Nouveau statut: <span class="font-bold text-blue-500">{{ getStatusLabel(val) }}</span></span>
                                             </div>
                                         </div>
                                     </div>
diff --git a/resources/js/Components/App/StatusBadge.vue b/resources/js/Components/App/StatusBadge.vue
index 2077018..db90073 100644
--- a/resources/js/Components/App/StatusBadge.vue
+++ b/resources/js/Components/App/StatusBadge.vue
@@ -8,17 +8,7 @@ const props = defineProps({
     },
 });
 
-const statusConfig = {
-    draft: { label: 'Brouillon', class: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200' },
-    pending_rh_validation: { label: 'Attente RH', class: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' },
-    in_progress: { label: 'En cours', class: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 animate-pulse' },
-    waiting_services: { label: 'Attente Services', class: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300' },
-    completed: { label: 'Terminé', class: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' },
-    cancelled: { label: 'Annulé', class: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300' },
-    rejected: { label: 'Refusé', class: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300' },
-    pending: { label: 'En attente', class: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200' },
-    waiting_validation: { label: 'Attente Validation', class: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 animate-pulse' },
-};
+import { statusConfig } from '@/Utils/statuses';
 
 const config = computed(() => statusConfig[props.status] || { label: props.status, class: 'bg-gray-100 text-gray-800' });
 </script>
diff --git a/resources/js/Layouts/AuthenticatedLayout.vue b/resources/js/Layouts/AuthenticatedLayout.vue
index 8332447..de9c84d 100644
--- a/resources/js/Layouts/AuthenticatedLayout.vue
+++ b/resources/js/Layouts/AuthenticatedLayout.vue
@@ -39,6 +39,20 @@ const showingNavigationDropdown = ref(false);
                                 >
                                     Tableau de Bord
                                 </NavLink>
+                                <NavLink
+                                    v-if="$page.props.auth.user.roles.some(r => r.name === 'Admin')"
+                                    :href="route('users.index')"
+                                    :active="route().current('users.*')"
+                                >
+                                    Utilisateurs
+                                </NavLink>
+                                <NavLink
+                                    v-if="$page.props.auth.user.roles.some(r => r.name === 'Admin')"
+                                    :href="route('roles.index')"
+                                    :active="route().current('roles.*')"
+                                >
+                                    Rôles
+                                </NavLink>
                             </div>
                         </div>
 
@@ -146,6 +160,20 @@ const showingNavigationDropdown = ref(false);
                         >
                             Tableau de Bord
                         </ResponsiveNavLink>
+                        <ResponsiveNavLink
+                            v-if="$page.props.auth.user.roles.some(r => r.name === 'Admin')"
+                            :href="route('users.index')"
+                            :active="route().current('users.*')"
+                        >
+                            Utilisateurs
+                        </ResponsiveNavLink>
+                        <ResponsiveNavLink
+                            v-if="$page.props.auth.user.roles.some(r => r.name === 'Admin')"
+                            :href="route('roles.index')"
+                            :active="route().current('roles.*')"
+                        >
+                            Rôles
+                        </ResponsiveNavLink>
                     </div>
 
                     <!-- Responsive Settings Options -->
diff --git a/resources/js/Pages/Dashboard/Prescriber.vue b/resources/js/Pages/Dashboard/Prescriber.vue
index 08790c4..2d4b2a6 100644
--- a/resources/js/Pages/Dashboard/Prescriber.vue
+++ b/resources/js/Pages/Dashboard/Prescriber.vue
@@ -55,7 +55,7 @@ const props = defineProps({
                                                 Détails 
                                             </Link>
                                             <span class="text-gray-300 dark:text-gray-600">|</span>
-                                            <a :href="route('integrations.pdf', req.id)" target="_blank" class="flex items-center gap-1 text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 font-medium transition-colors" title="Télécharger la fiche PDF">
+                                            <a v-if="req.status === 'completed'" :href="route('integrations.pdf', req.id)" target="_blank" class="flex items-center gap-1 text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 font-medium transition-colors" title="Télécharger la fiche PDF">
                                                 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                                 </svg>
diff --git a/resources/js/Pages/Dashboard/RH.vue b/resources/js/Pages/Dashboard/RH.vue
index d94231b..861d921 100644
--- a/resources/js/Pages/Dashboard/RH.vue
+++ b/resources/js/Pages/Dashboard/RH.vue
@@ -132,8 +132,18 @@ const props = defineProps({
                                     </td>
                                     <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">{{ req.agent.department }}</td>
                                     <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">{{ req.completed_at ? new Date(req.completed_at).toLocaleDateString() : '-' }}</td>
-                                    <td class="px-6 py-4 text-sm">
+                                    <td class="px-6 py-4 text-sm flex items-center space-x-3">
                                         <Link :href="route('integrations.show', req.id)" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">Consulter</Link>
+                                        <a 
+                                            :href="route('integrations.pdf', req.id)" 
+                                            target="_blank" 
+                                            class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 font-medium flex items-center"
+                                            title="Télécharger PDF"
+                                        >
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                                            </svg>
+                                        </a>
                                     </td>
                                 </tr>
                                 <tr v-if="completed_integrations.length === 0">
diff --git a/resources/js/Pages/Dashboard/Service.vue b/resources/js/Pages/Dashboard/Service.vue
index ecadc11..268ed42 100644
--- a/resources/js/Pages/Dashboard/Service.vue
+++ b/resources/js/Pages/Dashboard/Service.vue
@@ -8,6 +8,10 @@ const props = defineProps({
     role: String,
     my_tasks: Array,
     completed_tasks: Array,
+    processed_integrations: {
+        type: Array,
+        default: () => []
+    },
 });
 
 const getOverdueCount = () => {
@@ -83,6 +87,54 @@ const getOverdueCount = () => {
                         </table>
                     </div>
                 </div>
+
+                <!-- Processed Integrations (Recent) -->
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg dark:bg-gray-800">
+                    <div class="p-6 border-b border-gray-200 dark:border-gray-700">
+                        <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Fiches traitées (Récent)</h3>
+                    </div>
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-left border-collapse">
+                            <thead>
+                                <tr class="bg-gray-50 dark:bg-gray-700/50">
+                                    <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500 dark:text-gray-400">Agent</th>
+                                    <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500 dark:text-gray-400">Arrivée</th>
+                                    <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500 dark:text-gray-400">Template</th>
+                                    <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500 dark:text-gray-400">Action</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+                                <tr v-for="integration in processed_integrations" :key="integration.id" class="hover:bg-gray-50 dark:hover:bg-gray-700/30">
+                                    <td class="px-6 py-4">
+                                        <div class="text-sm font-medium text-gray-900 dark:text-white">{{ integration.agent.first_name }} {{ integration.agent.last_name }}</div>
+                                        <div class="text-xs text-gray-500 dark:text-gray-400">{{ integration.agent.position }}</div>
+                                    </td>
+                                    <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">{{ new Date(integration.agent.arrival_date).toLocaleDateString() }}</td>
+                                    <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">{{ integration.template?.name || 'Standard' }}</td>
+                                    <td class="px-6 py-4 text-sm">
+                                        <div class="flex items-center space-x-3">
+                                            <Link :href="route('integrations.show', integration.id)" class="text-blue-600 hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300">Voir</Link>
+                                            <a 
+                                                v-if="integration.status === 'completed'" 
+                                                :href="route('integrations.pdf', integration.id)" 
+                                                target="_blank" 
+                                                class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 font-medium flex items-center"
+                                                title="Télécharger PDF"
+                                            >
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                                                </svg>
+                                            </a>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <tr v-if="processed_integrations.length === 0">
+                                    <td colspan="4" class="px-6 py-8 text-center text-gray-500 dark:text-gray-400 italic text-sm">Aucune fiche traitée récemment</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
         </div>
     </AuthenticatedLayout>
diff --git a/resources/js/Pages/Integration/Show.vue b/resources/js/Pages/Integration/Show.vue
index 5c98341..c5cdbe3 100644
--- a/resources/js/Pages/Integration/Show.vue
+++ b/resources/js/Pages/Integration/Show.vue
@@ -31,7 +31,9 @@ const validateRH = () => {
         <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 }}
+                    <span v-if="integration.type === 'offboarding'" class="text-red-600 mr-2">[DÉPART]</span>
+                    <span v-else class="text-green-600 mr-2">[ARRIVÉE]</span>
+                    Fiche Agent : {{ integration.agent.first_name }} {{ integration.agent.last_name }}
                 </h2>
                 <div class="flex items-center space-x-4">
                     <button 
@@ -41,6 +43,17 @@ const validateRH = () => {
                     >
                         Valider Dossier RH
                     </button>
+                    <a 
+                        v-if="integration.status === 'completed'"
+                        :href="route('integrations.pdf', integration.id)"
+                        target="_blank"
+                        class="inline-flex items-center px-4 py-2 bg-red-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-red-700 focus:bg-red-700 active:bg-red-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition ease-in-out duration-150"
+                    >
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                        Télécharger PDF
+                    </a>
                     <StatusBadge :status="integration.status" />
                 </div>
             </div>
diff --git a/resources/js/Pages/Role/Create.vue b/resources/js/Pages/Role/Create.vue
new file mode 100644
index 0000000..182a473
--- /dev/null
+++ b/resources/js/Pages/Role/Create.vue
@@ -0,0 +1,75 @@
+<script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import { Head, useForm, Link } from '@inertiajs/vue3';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import TextInput from '@/Components/TextInput.vue';
+
+const props = defineProps({
+    permissions: Array,
+});
+
+const form = useForm({
+    name: '',
+    permissions: [],
+});
+
+const submit = () => {
+    form.post(route('roles.store'));
+};
+</script>
+
+<template>
+    <Head title="Nouveau Rôle" />
+
+    <AuthenticatedLayout>
+        <template #header>
+            <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
+                Nouveau Rôle
+            </h2>
+        </template>
+
+        <div class="py-12">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg dark:bg-gray-800 p-6">
+                    <form @submit.prevent="submit" class="space-y-6 max-w-xl">
+                        <div>
+                            <InputLabel for="name" value="Nom du Rôle" />
+                            <TextInput 
+                                id="name" 
+                                type="text" 
+                                class="mt-1 block w-full" 
+                                v-model="form.name" 
+                                required 
+                                autofocus 
+                            />
+                            <InputError class="mt-2" :message="form.errors.name" />
+                        </div>
+
+                        <div>
+                            <span class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Permissions</span>
+                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                                <label v-for="permission in permissions" :key="permission.id" class="flex items-center space-x-2">
+                                    <input 
+                                        type="checkbox" 
+                                        :value="permission.name" 
+                                        v-model="form.permissions"
+                                        class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800"
+                                    >
+                                    <span class="text-sm text-gray-700 dark:text-gray-300">{{ permission.name }}</span>
+                                </label>
+                            </div>
+                            <InputError class="mt-2" :message="form.errors.permissions" />
+                        </div>
+
+                        <div class="flex items-center gap-4">
+                            <PrimaryButton :disabled="form.processing">Enregistrer</PrimaryButton>
+                            <Link :href="route('roles.index')" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 underline">Annuler</Link>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </AuthenticatedLayout>
+</template>
diff --git a/resources/js/Pages/Role/Edit.vue b/resources/js/Pages/Role/Edit.vue
new file mode 100644
index 0000000..3ae04b4
--- /dev/null
+++ b/resources/js/Pages/Role/Edit.vue
@@ -0,0 +1,78 @@
+<script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import { Head, useForm, Link } from '@inertiajs/vue3';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+import InputError from '@/Components/InputError.vue';
+import InputLabel from '@/Components/InputLabel.vue';
+import TextInput from '@/Components/TextInput.vue';
+
+const props = defineProps({
+    role: Object,
+    permissions: Array,
+});
+
+const form = useForm({
+    name: props.role.name,
+    permissions: props.role.permissions.map(p => p.name),
+});
+
+const submit = () => {
+    form.put(route('roles.update', props.role.id));
+};
+</script>
+
+<template>
+    <Head title="Modifier Rôle" />
+
+    <AuthenticatedLayout>
+        <template #header>
+            <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
+                Modifier Rôle : {{ role.name }}
+            </h2>
+        </template>
+
+        <div class="py-12">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg dark:bg-gray-800 p-6">
+                    <form @submit.prevent="submit" class="space-y-6 max-w-xl">
+                        <div>
+                            <InputLabel for="name" value="Nom du Rôle" />
+                            <TextInput 
+                                id="name" 
+                                type="text" 
+                                class="mt-1 block w-full" 
+                                v-model="form.name" 
+                                required 
+                                autofocus 
+                                :disabled="role.name === 'Admin'"
+                            />
+                            <p v-if="role.name === 'Admin'" class="text-xs text-gray-500 mt-1">Le nom du rôle Admin ne peut pas être modifié.</p>
+                            <InputError class="mt-2" :message="form.errors.name" />
+                        </div>
+
+                        <div>
+                            <span class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Permissions</span>
+                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                                <label v-for="permission in permissions" :key="permission.id" class="flex items-center space-x-2">
+                                    <input 
+                                        type="checkbox" 
+                                        :value="permission.name" 
+                                        v-model="form.permissions"
+                                        class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800"
+                                    >
+                                    <span class="text-sm text-gray-700 dark:text-gray-300">{{ permission.name }}</span>
+                                </label>
+                            </div>
+                            <InputError class="mt-2" :message="form.errors.permissions" />
+                        </div>
+
+                        <div class="flex items-center gap-4">
+                            <PrimaryButton :disabled="form.processing">Enregistrer</PrimaryButton>
+                            <Link :href="route('roles.index')" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 underline">Annuler</Link>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </AuthenticatedLayout>
+</template>
diff --git a/resources/js/Pages/Role/Index.vue b/resources/js/Pages/Role/Index.vue
new file mode 100644
index 0000000..0fb6f1e
--- /dev/null
+++ b/resources/js/Pages/Role/Index.vue
@@ -0,0 +1,68 @@
+<script setup>
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
+import { Head, Link, router } from '@inertiajs/vue3';
+import PrimaryButton from '@/Components/PrimaryButton.vue';
+
+const props = defineProps({
+    roles: Array,
+});
+
+const deleteRole = (role) => {
+    if (confirm('Êtes-vous sûr de vouloir supprimer ce rôle ?')) {
+        router.delete(route('roles.destroy', role.id));
+    }
+};
+</script>
+
+<template>
+    <Head title="Gestion des Rôles" />
+
+    <AuthenticatedLayout>
+        <template #header>
+            <div class="flex justify-between items-center">
+                <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
+                    Gestion des Rôles
+                </h2>
+                <Link :href="route('roles.create')">
+                    <PrimaryButton>Nouveau Rôle</PrimaryButton>
+                </Link>
+            </div>
+        </template>
+
+        <div class="py-12">
+            <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
+                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg dark:bg-gray-800">
+                    <div class="overflow-x-auto">
+                        <table class="w-full text-left border-collapse">
+                            <thead>
+                                <tr class="border-b dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50">
+                                    <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500 dark:text-gray-400">Nom</th>
+                                    <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500 dark:text-gray-400">Permissions</th>
+                                    <th class="px-6 py-3 text-xs font-bold uppercase text-gray-500 dark:text-gray-400 text-right">Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+                                <tr v-for="role in roles" :key="role.id" class="hover:bg-gray-50 dark:hover:bg-gray-700/30">
+                                    <td class="px-6 py-4 text-sm font-medium text-gray-900 dark:text-white">
+                                        {{ role.name }}
+                                    </td>
+                                    <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">
+                                        <div class="flex flex-wrap gap-1">
+                                            <span v-for="permission in role.permissions" :key="permission.id" class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
+                                                {{ permission.name }}
+                                            </span>
+                                        </div>
+                                    </td>
+                                    <td class="px-6 py-4 text-sm text-right space-x-2">
+                                        <Link :href="route('roles.edit', role.id)" class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300">Modifier</Link>
+                                        <button v-if="role.name !== 'Admin'" @click="deleteRole(role)" class="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300">Supprimer</button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </AuthenticatedLayout>
+</template>
diff --git a/resources/js/Utils/statuses.js b/resources/js/Utils/statuses.js
new file mode 100644
index 0000000..2ae3fce
--- /dev/null
+++ b/resources/js/Utils/statuses.js
@@ -0,0 +1,30 @@
+export const statusConfig = {
+    draft: { label: 'Brouillon', class: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200' },
+    pending_rh_validation: { label: 'Attente validation RH', class: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' },
+    in_progress: { label: 'En cours', class: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 animate-pulse' },
+    waiting_services: { label: 'Attente Services', class: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300' },
+    completed: { label: 'Terminé', class: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' },
+    cancelled: { label: 'Annulé', class: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300' },
+    rejected: { label: 'Refusé', class: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300' },
+    pending: { label: 'En attente', class: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200' },
+    waiting_validation: { label: 'Attente Validation', class: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 animate-pulse' },
+};
+
+export const getStatusLabel = (status) => {
+    return statusConfig[status]?.label || status;
+};
+
+export const modelLabels = {
+    'IntegrationRequest': 'Fiche Agent',
+    'ServiceTask': 'Tâche Service',
+    'Comment': 'Commentaire',
+    'Upload': 'Fichier',
+    'User': 'Utilisateur',
+    'Agent': 'Agent',
+};
+
+export const getModelLabel = (modelName) => {
+    // Handle both full namespace and short name
+    const shortName = modelName.split('\\').pop();
+    return modelLabels[shortName] || shortName;
+};
diff --git a/routes/web.php b/routes/web.php
index 6522f37..5724f98 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -40,6 +40,7 @@ Route::middleware('auth')->group(function () {
     Route::delete('attachments/{attachment}', [\App\Http\Controllers\AttachmentController::class, 'destroy'])->name('attachments.destroy');
 
     Route::resource('users', \App\Http\Controllers\UserController::class);
+    Route::resource('roles', \App\Http\Controllers\RoleController::class);
 });
 
 require __DIR__.'/auth.php';