|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>JMK Consulting - Gestion du Personnel & Comptabilité</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
50: '#f0f9ff', |
|
|
100: '#e0f2fe', |
|
|
200: '#bae6fd', |
|
|
300: '#7dd3fc', |
|
|
400: '#38bdf8', |
|
|
500: '#0ea5e9', |
|
|
600: '#0284c7', |
|
|
700: '#0369a1', |
|
|
800: '#075985', |
|
|
900: '#0c4a6e', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.08); |
|
|
} |
|
|
|
|
|
.sidebar.collapsed { |
|
|
width: 80px; |
|
|
} |
|
|
|
|
|
.sidebar.collapsed .nav-text { |
|
|
opacity: 0; |
|
|
width: 0; |
|
|
height: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.sidebar.collapsed .logo-text { |
|
|
opacity: 0; |
|
|
width: 0; |
|
|
height: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
} |
|
|
|
|
|
.sidebar.collapsed + .main-content { |
|
|
margin-left: 80px; |
|
|
} |
|
|
|
|
|
.chart-container { |
|
|
position: relative; |
|
|
height: 300px; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.notification-badge { |
|
|
position: absolute; |
|
|
top: -5px; |
|
|
right: -5px; |
|
|
font-size: 10px; |
|
|
background-color: #ef4444; |
|
|
color: white; |
|
|
border-radius: 50%; |
|
|
width: 18px; |
|
|
height: 18px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.dropdown:hover .dropdown-menu { |
|
|
display: block; |
|
|
animation: fadeIn 0.2s ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(-10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.nav-item { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.nav-item::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background-color: #0ea5e9; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-item:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.active-nav::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.animate-pulse { |
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0%, 100% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background-clip: text; |
|
|
-webkit-background-clip: text; |
|
|
color: transparent; |
|
|
background-image: linear-gradient(to right, #0ea5e9, #3b82f6); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-white text-gray-800 w-64 flex flex-col border-r border-gray-200"> |
|
|
|
|
|
<div class="p-5 flex items-center justify-between border-b border-gray-100"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-9 h-9 rounded-lg bg-primary-500 flex items-center justify-center"> |
|
|
<i class="fas fa-chart-line text-white text-lg"></i> |
|
|
</div> |
|
|
<span class="logo-text text-xl font-bold ml-3 gradient-text">JMK</span> |
|
|
</div> |
|
|
<button id="toggleSidebar" class="text-gray-500 hover:text-gray-700 focus:outline-none transition-colors"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="p-5 flex items-center border-b border-gray-100"> |
|
|
<div class="relative"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-10 h-10 rounded-full object-cover border-2 border-primary-100"> |
|
|
<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></span> |
|
|
</div> |
|
|
<div class="ml-3 nav-text overflow-hidden"> |
|
|
<div class="font-medium truncate">Kra Pacome</div> |
|
|
<div class="text-xs text-gray-500">Administrateur</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="flex-1 overflow-y-auto py-3 px-2"> |
|
|
<div> |
|
|
<div class="mb-1"> |
|
|
<div class="text-xs uppercase text-gray-400 font-semibold px-4 py-2 nav-text tracking-wider">Principal</div> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-primary-600 bg-primary-50 rounded-lg active-nav"> |
|
|
<i class="fas fa-home text-primary-500 mr-3"></i> |
|
|
<span class="nav-text font-medium">Tableau de bord</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="mb-1"> |
|
|
<div class="text-xs uppercase text-gray-400 font-semibold px-4 py-2 nav-text tracking-wider">Personnel</div> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-700 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors duration-200"> |
|
|
<i class="fas fa-users text-gray-500 group-hover:text-primary-500 mr-3"></i> |
|
|
<span class="nav-text">Gestion du personnel</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-700 hover:text-primary-600 hover:bg-primary-50 rounded-lg"> |
|
|
<i class="fas fa-calendar-alt text-gray-500 mr-3"></i> |
|
|
<span class="nav-text">Congés & Absences</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-700 hover:text-primary-600 hover:bg-primary-50 rounded-lg"> |
|
|
<i class="fas fa-file-invoice-dollar text-gray-500 mr-3"></i> |
|
|
<span class="nav-text">Paies</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-700 hover:text-primary-600 hover:bg-primary-50 rounded-lg"> |
|
|
<i class="fas fa-receipt text-gray-500 mr-3"></i> |
|
|
<span class="nav-text">Dépenses terrain</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="mb-1"> |
|
|
<div class="text-xs uppercase text-gray-400 font-semibold px-4 py-2 nav-text tracking-wider">Comptabilité</div> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-700 hover:text-primary-600 hover:bg-primary-50 rounded-lg"> |
|
|
<i class="fas fa-calculator text-gray-500 mr-3"></i> |
|
|
<span class="nav-text">Transactions</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-700 hover:text-primary-600 hover:bg-primary-50 rounded-lg"> |
|
|
<i class="fas fa-chart-pie text-gray-500 mr-3"></i> |
|
|
<span class="nav-text">Rapports</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-700 hover:text-primary-600 hover:bg-primary-50 rounded-lg"> |
|
|
<i class="fas fa-file-invoice text-gray-500 mr-3"></i> |
|
|
<span class="nav-text">Facturation</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="mb-1"> |
|
|
<div class="text-xs uppercase text-gray-400 font-semibold px-4 py-2 nav-text tracking-wider">Paramètres</div> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-700 hover:text-primary-600 hover:bg-primary-50 rounded-lg"> |
|
|
<i class="fas fa-cog text-gray-500 mr-3"></i> |
|
|
<span class="nav-text">Paramètres</span> |
|
|
</a> |
|
|
<a href="#" class="nav-item flex items-center px-4 py-3 text-gray-700 hover:text-primary-600 hover:bg-primary-50 rounded-lg"> |
|
|
<i class="fas fa-question-circle text-gray-500 mr-3"></i> |
|
|
<span class="nav-text">Aide</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="p-4 border-t border-gray-100"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-moon text-gray-500 mr-2 nav-text"></i> |
|
|
<span class="nav-text text-gray-700">Mode sombre</span> |
|
|
</div> |
|
|
<label class="relative inline-flex items-center cursor-pointer"> |
|
|
<input type="checkbox" class="sr-only peer"> |
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary-600 transform transition-colors duration-200"></div> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="main-content flex-1 overflow-auto ml-64"> |
|
|
|
|
|
<header class="bg-white shadow-sm sticky top-0 z-10"> |
|
|
<div class="px-6 py-4 flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<h1 class="text-xl font-semibold text-gray-800 flex items-center"> |
|
|
<span class="hidden md:inline">Tableau de bord</span> |
|
|
<span class="md:hidden gradient-text font-bold">JMK</span> |
|
|
</h1> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative hidden md:block"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Rechercher..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent w-64"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="relative"> |
|
|
<button class="p-2 rounded-full text-gray-600 hover:bg-gray-100 focus:outline-none relative"> |
|
|
<i class="fas fa-bell"></i> |
|
|
<span class="notification-badge animate-pulse">3</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="relative dropdown"> |
|
|
<button class="flex items-center space-x-2 focus:outline-none"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full object-cover border-2 border-primary-100"> |
|
|
<span class="hidden md:inline-block text-gray-700 font-medium">Kra Pacome</span> |
|
|
<i class="fas fa-chevron-down text-gray-500 text-xs"></i> |
|
|
</button> |
|
|
<div class="dropdown-menu absolute hidden right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 border border-gray-100"> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Profil</a> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Paramètres</a> |
|
|
<div class="border-t border-gray-200"></div> |
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Déconnexion</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="p-6"> |
|
|
|
|
|
<div class="bg-gradient-to-r from-primary-500 to-primary-600 rounded-xl shadow-md p-6 mb-6 text-white relative overflow-hidden"> |
|
|
<div class="absolute right-0 top-0 opacity-20"> |
|
|
<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path d="M100 0C44.7715 0 0 44.7715 0 100C0 155.229 44.7715 200 100 200C155.229 200 200 155.229 200 100C200 44.7715 155.229 0 100 0ZM100 180C55.817 180 20 144.183 20 100C20 55.817 55.817 20 100 20C144.183 20 180 55.817 180 100C180 144.183 144.183 180 100 180Z" fill="white"/> |
|
|
<path d="M100 40C67.1915 40 40 67.1915 40 100C40 132.809 67.1915 160 100 160C132.809 160 160 132.809 160 100C160 67.1915 132.809 40 100 40ZM100 140C78.9543 140 60 121.046 60 100C60 78.9543 78.9543 60 100 60C121.046 60 140 78.9543 140 100C140 121.046 121.046 140 100 140Z" fill="white"/> |
|
|
<path d="M100 80C89.9543 80 80 89.9543 80 100C80 110.046 89.9543 120 100 120C110.046 120 120 110.046 120 100C120 89.9543 110.046 80 100 80Z" fill="white"/> |
|
|
</svg> |
|
|
</div> |
|
|
<div class="relative z-10"> |
|
|
<h2 class="text-2xl font-bold mb-2">Bonjour, Kra Pacome 👋</h2> |
|
|
<p class="mb-4 opacity-90">Bienvenue sur votre tableau de bord JMK Consulting. Vous avez 3 nouvelles notifications.</p> |
|
|
<button class="bg-white text-primary-600 px-4 py-2 rounded-lg font-medium hover:bg-opacity-90 transition-colors">Voir les notifications</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="card-hover bg-white rounded-xl shadow-md p-6 flex items-start border-l-4 border-primary-500 hover:border-primary-600"> |
|
|
<div class="p-3 rounded-lg bg-primary-100 text-primary-600 mr-4"> |
|
|
<i class="fas fa-users text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm font-medium">Employés</p> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mt-1">52</h3> |
|
|
<div class="mt-2 flex items-center"> |
|
|
<span class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-800 flex items-center"> |
|
|
<i class="fas fa-arrow-up mr-1 text-xs"></i> 12% |
|
|
</span> |
|
|
<span class="text-xs text-gray-500 ml-2">depuis le mois dernier</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card-hover bg-white rounded-xl shadow-md p-6 flex items-start border-l-4 border-green-500 hover:border-green-600"> |
|
|
<div class="p-3 rounded-lg bg-green-100 text-green-600 mr-4"> |
|
|
<i class="fas fa-file-invoice-dollar text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm font-medium">Paie totale</p> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mt-1">FCFA 125,450</h3> |
|
|
<div class="mt-2 flex items-center"> |
|
|
<span class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-800 flex items-center"> |
|
|
<i class="fas fa-arrow-up mr-1 text-xs"></i> 8% |
|
|
</span> |
|
|
<span class="text-xs text-gray-500 ml-2">depuis le mois dernier</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card-hover bg-white rounded-xl shadow-md p-6 flex items-start border-l-4 border-blue-500 hover:border-blue-600"> |
|
|
<div class="p-3 rounded-lg bg-blue-100 text-blue-600 mr-4"> |
|
|
<i class="fas fa-calendar-alt text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm font-medium">Congés en cours</p> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mt-1">7</h3> |
|
|
<div class="mt-2 flex items-center"> |
|
|
<span class="text-xs px-2 py-1 rounded-full bg-red-100 text-red-800 flex items-center"> |
|
|
<i class="fas fa-arrow-down mr-1 text-xs"></i> 3% |
|
|
</span> |
|
|
<span class="text-xs text-gray-500 ml-2">depuis le mois dernier</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="card-hover bg-white rounded-xl shadow-md p-6 flex items-start border-l-4 border-purple-500 hover:border-purple-600"> |
|
|
<div class="p-3 rounded-lg bg-purple-100 text-purple-600 mr-4"> |
|
|
<i class="fas fa-chart-line text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm font-medium">Revenus mensuels</p> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mt-1">FCFA 89,500</h3> |
|
|
<div class="mt-2 flex items-center"> |
|
|
<span class="text-xs px-2 py-1 rounded-full bg-green-100 text-green-800 flex items-center"> |
|
|
<i class="fas fa-arrow-up mr-1 text-xs"></i> 15% |
|
|
</span> |
|
|
<span class="text-xs text-gray-500 ml-2">depuis le mois dernier</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 lg:col-span-2 card-hover"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Répartition du personnel</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 text-xs bg-primary-100 text-primary-700 rounded-lg font-medium">Mensuel</button> |
|
|
<button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-lg font-medium">Annuel</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chart-container"> |
|
|
<canvas id="personnelChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md p-6 card-hover"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Activités récentes</h2> |
|
|
<a href="#" class="text-sm text-primary-600 hover:underline font-medium">Voir tout</a> |
|
|
</div> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="p-2 rounded-lg bg-primary-100 text-primary-600 mr-3 mt-1"> |
|
|
<i class="fas fa-user-plus"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-800">Nouvel employé ajouté</p> |
|
|
<p class="text-xs text-gray-500 mt-1">Jean Dupont a rejoint l'équipe Marketing</p> |
|
|
<p class="text-xs text-gray-400 mt-2 flex items-center"> |
|
|
<i class="far fa-clock mr-1"></i> Il y a 2 heures |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="p-2 rounded-lg bg-green-100 text-green-600 mr-3 mt-1"> |
|
|
<i class="fas fa-file-invoice"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-800">Facture payée</p> |
|
|
<p class="text-xs text-gray-500 mt-1">Facture #JMK-2023-045 pour Client XYZ</p> |
|
|
<p class="text-xs text-gray-400 mt-2 flex items-center"> |
|
|
<i class="far fa-clock mr-1"></i> Il y a 5 heures |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="p-2 rounded-lg bg-blue-100 text-blue-600 mr-3 mt-1"> |
|
|
<i class="fas fa-calendar-check"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-800">Congé approuvé</p> |
|
|
<p class="text-xs text-gray-500 mt-1">Marie Lambert - Congé du 15 au 20 Novembre</p> |
|
|
<p class="text-xs text-gray-400 mt-2 flex items-center"> |
|
|
<i class="far fa-clock mr-1"></i> Hier à 14:30 |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="p-2 rounded-lg bg-purple-100 text-purple-600 mr-3 mt-1"> |
|
|
<i class="fas fa-money-bill-wave"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm font-medium text-gray-800">Paiement de salaire</p> |
|
|
<p class="text-xs text-gray-500 mt-1">Paie de Novembre traitée pour 48 employés</p> |
|
|
<p class="text-xs text-gray-400 mt-2 flex items-center"> |
|
|
<i class="far fa-clock mr-1"></i> Hier à 09:15 |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Derniers employés</h2> |
|
|
<a href="#" class="text-sm text-primary-600 hover:underline font-medium">Voir tout</a> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nom</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Département</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date embauche</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"></th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr class="hover:bg-gray-50 transition-colors"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10"> |
|
|
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Pierre Martin</div> |
|
|
<div class="text-xs text-gray-500">p.martin@jmk.com</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Finance</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
15/03/2021 |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Actif</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<a href="#" class="text-primary-600 hover:text-primary-900">Voir →</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 transition-colors"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10"> |
|
|
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/65.jpg" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Fatou Diop</div> |
|
|
<div class="text-xs text-gray-500">f.diop@jmk.com</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">IT</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
10/12/2023 |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Actif</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<a href="#" class="text-primary-600 hover:text-primary-900">Voir →</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 transition-colors"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10"> |
|
|
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/28.jpg" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Sophie Leroy</div> |
|
|
<div class="text-xs text-gray-500">s.leroy@jmk.com</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Marketing</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
22/06/2022 |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Actif</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<a href="#" class="text-primary-600 hover:text-primary-900">Voir →</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 transition-colors"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10"> |
|
|
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/75.jpg" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Thomas Bernard</div> |
|
|
<div class="text-xs text-gray-500">t.bernard@jmk.com</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">IT</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
05/09/2020 |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Actif</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<a href="#" class="text-primary-600 hover:text-primary-900">Voir →</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 transition-colors"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10"> |
|
|
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/42.jpg" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Amélie Dubois</div> |
|
|
<div class="text-xs text-gray-500">a.dubois@jmk.com</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">RH</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
10/01/2023 |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Période d'essai</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<a href="#" class="text-primary-600 hover:text-primary-900">Voir →</a> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 transition-colors"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10"> |
|
|
<img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/45.jpg" alt=""> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Mohamed Diallo</div> |
|
|
<div class="text-xs text-gray-500">m.diallo@jmk.com</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="text-sm text-gray-900">Marketing</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> |
|
|
05/12/2023 |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Période d'essai</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> |
|
|
<a href="#" class="text-primary-600 hover:text-primary-900">Voir →</a> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-md overflow-hidden card-hover"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-lg font-semibold text-gray-800">Transactions récentes</h2> |
|
|
<a href="#" class="text-sm text-primary-600 hover:underline font-medium">Voir tout</a> |
|
|
</div> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Montant</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Statut</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr class="hover:bg-gray-50 transition-colors"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">05/11/2023</td> |
|
|
<td class="px-6 py-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Facture #JMK-2023-045</div> |
|
|
<div class="text-xs text-gray-500">Client XYZ</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">FCFA 4,500.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 transition-colors"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">03/11/2023</td> |
|
|
<td class="px-6 py-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Achat fournitures</div> |
|
|
<div class="text-xs text-gray-500">Bureau</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">FCFA 320.50</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Comptabilisé</span> |
|
|
</td> |
|
|
</tr> |
|
|
<tr class="hover:bg-gray-50 transition-colors"> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">01/11/2023</td> |
|
|
<td class="px-6 py-4"> |
|
|
<div class="text-sm font-medium text-gray-900">Salaire Octobre</div> |
|
|
<div class="text-xs text-gray-500">48 employés</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">FCFA 118,750.00</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Payé</span> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4"> |
|
|
<button class="bg-white rounded-xl shadow-md p-4 flex flex-col items-center justify-center hover:bg-primary-50 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 border border-gray-100"> |
|
|
<div class="p-3 rounded-lg bg-primary-100 text-primary-600 mb-2"> |
|
|
<i class="fas fa-user-plus text-xl"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-800 text-center">Ajouter employé</span> |
|
|
</button> |
|
|
<button class="bg-white rounded-xl shadow-md p-4 flex flex-col items-center justify-center hover:bg-green-50 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 border border-gray-100"> |
|
|
<div class="p-3 rounded-lg bg-green-100 text-green-600 mb-2"> |
|
|
<i class="fas fa-file-invoice text-xl"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-800 text-center">Créer facture</span> |
|
|
</button> |
|
|
<button class="bg-white rounded-xl shadow-md p-4 flex flex-col items-center justify-center hover:bg-blue-50 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 border border-gray-100"> |
|
|
<div class="p-3 rounded-lg bg-blue-100 text-blue-600 mb-2"> |
|
|
<i class="fas fa-calendar-alt text-xl"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-800 text-center">Gérer congés</span> |
|
|
</button> |
|
|
<button class="bg-white rounded-xl shadow-md p-4 flex flex-col items-center justify-center hover:bg-purple-50 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 border border-gray-100"> |
|
|
<div class="p-3 rounded-lg bg-purple-100 text-purple-600 mb-2"> |
|
|
<i class="fas fa-chart-pie text-xl"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-800 text-center">Générer rapport</span> |
|
|
</button> |
|
|
<button class="bg-white rounded-xl shadow-md p-4 flex flex-col items-center justify-center hover:bg-yellow-50 transition-all duration-300 hover:shadow-lg hover:-translate-y-1 border border-gray-100"> |
|
|
<div class="p-3 rounded-lg bg-yellow-100 text-yellow-600 mb-2"> |
|
|
<i class="fas fa-receipt text-xl"></i> |
|
|
</div> |
|
|
<span class="text-sm font-medium text-gray-800 text-center">Nouvelle dépense</span> |
|
|
</button> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-white border-t border-gray-200 py-4 px-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="text-sm text-gray-500 mb-2 md:mb-0"> |
|
|
© 2023 JMK Consulting. Tous droits réservés. |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-sm text-gray-500 hover:text-primary-600">Conditions</a> |
|
|
<a href="#" class="text-sm text-gray-500 hover:text-primary-600">Confidentialité</a> |
|
|
<a href="#" class="text-sm text-gray-500 hover:text-primary-600">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script> |
|
|
|
|
|
document.getElementById('toggleSidebar').addEventListener('click', function() { |
|
|
document.querySelector('.sidebar').classList.toggle('collapsed'); |
|
|
}); |
|
|
|
|
|
|
|
|
const personnelCtx = document.getElementById('personnelChart').getContext('2d'); |
|
|
const personnelChart = new Chart(personnelCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sep', 'Oct', 'Nov'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Employés', |
|
|
data: [32, 34, 36, 38, 40, 42, 42, 43, 44, 46, 48], |
|
|
backgroundColor: 'rgba(14, 165, 233, 0.1)', |
|
|
borderColor: 'rgba(14, 165, 233, 1)', |
|
|
borderWidth: 2, |
|
|
tension: 0.3, |
|
|
fill: true, |
|
|
pointBackgroundColor: 'white', |
|
|
pointBorderColor: 'rgba(14, 165, 233, 1)', |
|
|
pointBorderWidth: 2, |
|
|
pointRadius: 4, |
|
|
pointHoverRadius: 6 |
|
|
}, |
|
|
{ |
|
|
label: 'Départs', |
|
|
data: [1, 0, 2, 1, 0, 1, 0, 1, 0, 0, 0], |
|
|
backgroundColor: 'rgba(239, 68, 68, 0.1)', |
|
|
borderColor: 'rgba(239, 68, 68, 1)', |
|
|
borderWidth: 2, |
|
|
tension: 0.3, |
|
|
fill: true, |
|
|
pointBackgroundColor: 'white', |
|
|
pointBorderColor: 'rgba(239, 68, 68, 1)', |
|
|
pointBorderWidth: 2, |
|
|
pointRadius: 4, |
|
|
pointHoverRadius: 6 |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
grid: { |
|
|
color: 'rgba(0, 0, 0, 0.05)' |
|
|
} |
|
|
}, |
|
|
x: { |
|
|
grid: { |
|
|
display: false |
|
|
} |
|
|
} |
|
|
}, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
labels: { |
|
|
usePointStyle: true, |
|
|
padding: 20 |
|
|
} |
|
|
}, |
|
|
tooltip: { |
|
|
mode: 'index', |
|
|
intersect: false, |
|
|
backgroundColor: 'white', |
|
|
titleColor: '#111827', |
|
|
bodyColor: '#6B7280', |
|
|
borderColor: '#E5E7EB', |
|
|
borderWidth: 1, |
|
|
padding: 12, |
|
|
usePointStyle: true, |
|
|
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)' |
|
|
} |
|
|
}, |
|
|
interaction: { |
|
|
intersect: false, |
|
|
mode: 'index' |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const darkModeToggle = document.querySelector('input[type="checkbox"]'); |
|
|
darkModeToggle.addEventListener('change', function() { |
|
|
if(this.checked) { |
|
|
document.documentElement.classList.add('dark'); |
|
|
document.body.classList.remove('bg-gray-50'); |
|
|
document.body.classList.add('bg-gray-900'); |
|
|
document.querySelector('.sidebar').classList.remove('bg-white'); |
|
|
document.querySelector('.sidebar').classList.add('bg-gray-800'); |
|
|
} else { |
|
|
document.documentElement.classList.remove('dark'); |
|
|
document.body.classList.remove('bg-gray-900'); |
|
|
document.body.classList.add('bg-gray-50'); |
|
|
document.querySelector('.sidebar').classList.remove('bg-gray-800'); |
|
|
document.querySelector('.sidebar').classList.add('bg-white'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const notificationBell = document.querySelector('.fa-bell'); |
|
|
notificationBell.addEventListener('click', function() { |
|
|
this.parentElement.classList.add('animate-pulse'); |
|
|
setTimeout(() => { |
|
|
this.parentElement.classList.remove('animate-pulse'); |
|
|
}, 2000); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Guy57/kodji" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
