build me employee management system which store their bio data ,peroneal information address , department , payroll and background history, evolution and any you think is important using pure PHP,CSS,HTML for code MYsql for database
dbaf28b
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Emplify - Employee Management System</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --primary: #4361ee; | |
| --secondary: #3f37c9; | |
| --accent: #4895ef; | |
| --dark: #1e1e24; | |
| --light: #f8f9fa; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| transition: all 0.3s ease; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| } | |
| .sidebar-link:hover { | |
| background-color: rgba(255,255,255,0.1); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 gradient-bg text-white"> | |
| <div class="flex items-center justify-center h-16 px-4 border-b border-blue-400"> | |
| <div class="flex items-center"> | |
| <i data-feather="users" class="w-6 h-6 mr-2"></i> | |
| <span class="text-xl font-bold">Emplify</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> | |
| <div class="space-y-1"> | |
| <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-link text-white bg-blue-700"> | |
| <i data-feather="home" class="w-5 h-5 mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-link text-blue-100 hover:text-white"> | |
| <i data-feather="user" class="w-5 h-5 mr-3"></i> | |
| Employees | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-link text-blue-100 hover:text-white"> | |
| <i data-feather="briefcase" class="w-5 h-5 mr-3"></i> | |
| Departments | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-link text-blue-100 hover:text-white"> | |
| <i data-feather="dollar-sign" class="w-5 h-5 mr-3"></i> | |
| Payroll | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-link text-blue-100 hover:text-white"> | |
| <i data-feather="bar-chart-2" class="w-5 h-5 mr-3"></i> | |
| Performance | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-link text-blue-100 hover:text-white"> | |
| <i data-feather="file-text" class="w-5 h-5 mr-3"></i> | |
| Reports | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-3 rounded-lg sidebar-link text-blue-100 hover:text-white"> | |
| <i data-feather="settings" class="w-5 h-5 mr-3"></i> | |
| Settings | |
| </a> | |
| </div> | |
| <div class="mt-auto mb-4"> | |
| <div class="p-4 bg-blue-700 rounded-lg"> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/office/200x200/42" class="w-10 h-10 rounded-full mr-3" alt="Admin"> | |
| <div> | |
| <p class="text-sm font-medium">Admin User</p> | |
| <p class="text-xs text-blue-200">[email protected]</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <div class="flex items-center justify-between h-16 px-6 bg-white border-b border-gray-200"> | |
| <div class="flex items-center md:hidden"> | |
| <button class="text-gray-500 focus:outline-none"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| <button class="p-2 text-gray-500 rounded-full hover:bg-gray-100"> | |
| <i data-feather="bell"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 rounded-full hover:bg-gray-100"> | |
| <i data-feather="mail"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Dashboard Content --> | |
| <div class="flex-1 overflow-auto p-6 bg-gray-50"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">Dashboard Overview</h1> | |
| <p class="text-gray-600">Welcome back! Here's what's happening with your team today.</p> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Employees</p> | |
| <h3 class="text-2xl font-bold mt-1">247</h3> | |
| <p class="text-sm text-green-500 mt-2 flex items-center"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| <span>5.2% from last month</span> | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i data-feather="users" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Active Departments</p> | |
| <h3 class="text-2xl font-bold mt-1">12</h3> | |
| <p class="text-sm text-gray-500 mt-2">Across 4 locations</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600"> | |
| <i data-feather="briefcase" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Payroll Processed</p> | |
| <h3 class="text-2xl font-bold mt-1">$148K</h3> | |
| <p class="text-sm text-green-500 mt-2 flex items-center"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| <span>3.7% from last month</span> | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i data-feather="dollar-sign" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-sm p-6 card-hover transition-all duration-300"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Open Positions</p> | |
| <h3 class="text-2xl font-bold mt-1">8</h3> | |
| <p class="text-sm text-red-500 mt-2 flex items-center"> | |
| <i data-feather="alert-circle" class="w-4 h-4 mr-1"></i> | |
| <span>3 urgent hires</span> | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i data-feather="alert-triangle" class="w-6 h-6"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity and Charts --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> | |
| <!-- Department Distribution --> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Department Distribution</h2> | |
| <select class="text-sm border border-gray-300 rounded px-3 py-1 focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| <option>Last 30 Days</option> | |
| <option>Last Quarter</option> | |
| <option>Last Year</option> | |
| </select> | |
| </div> | |
| <div class="h-64"> | |
| <!-- Chart Placeholder --> | |
| <div class="flex items-center justify-center h-full bg-gray-100 rounded-lg"> | |
| <p class="text-gray-500">Department distribution chart will appear here</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activities --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Recent Activities</h2> | |
| <button class="text-sm text-blue-600 hover:text-blue-800">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="p-2 bg-green-100 rounded-full mr-3"> | |
| <i data-feather="user-plus" class="w-4 h-4 text-green-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">New employee hired</p> | |
| <p class="text-xs text-gray-500">Sarah Johnson joined Marketing team</p> | |
| <p class="text-xs text-gray-400 mt-1">2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 bg-blue-100 rounded-full mr-3"> | |
| <i data-feather="dollar-sign" class="w-4 h-4 text-blue-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Payroll processed</p> | |
| <p class="text-xs text-gray-500">March payroll completed for 247 employees</p> | |
| <p class="text-xs text-gray-400 mt-1">1 day ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 bg-purple-100 rounded-full mr-3"> | |
| <i data-feather="award" class="w-4 h-4 text-purple-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Promotion</p> | |
| <p class="text-xs text-gray-500">Michael Brown promoted to Senior Developer</p> | |
| <p class="text-xs text-gray-400 mt-1">2 days ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 bg-yellow-100 rounded-full mr-3"> | |
| <i data-feather="calendar" class="w-4 h-4 text-yellow-600"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Work anniversary</p> | |
| <p class="text-xs text-gray-500">Jennifer Lee celebrating 5 years at company</p> | |
| <p class="text-xs text-gray-400 mt-1">3 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upcoming Events and Recent Employees --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Upcoming Events --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Upcoming Events</h2> | |
| <button class="text-sm text-blue-600 hover:text-blue-800">View Calendar</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="p-2 bg-red-100 rounded-lg mr-3 text-center min-w-12"> | |
| <p class="text-xs font-medium text-red-600">MAR</p> | |
| <p class="text-lg font-bold">15</p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Company Town Hall</p> | |
| <p class="text-xs text-gray-500">10:00 AM - 12:00 PM • Conference Room A</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 bg-blue-100 rounded-lg mr-3 text-center min-w-12"> | |
| <p class="text-xs font-medium text-blue-600">MAR</p> | |
| <p class="text-lg font-bold">18</p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">HR Training Session</p> | |
| <p class="text-xs text-gray-500">2:00 PM - 4:00 PM • Training Room 3</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="p-2 bg-green-100 rounded-lg mr-3 text-center min-w-12"> | |
| <p class="text-xs font-medium text-green-600">MAR</p> | |
| <p class="text-lg font-bold">22</p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Quarterly Review Meeting</p> | |
| <p class="text-xs text-gray-500">9:00 AM - 11:00 AM • Executive Boardroom</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Employees --> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold">Recently Added Employees</h2> | |
| <button class="text-sm text-blue-600 hover:text-blue-800">View All</button> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead> | |
| <tr> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Employee</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Department</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Position</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Join Date</th> | |
| <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-4 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" src="http://static.photos/people/200x200/1" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">John Smith</div> | |
| <div class="text-sm text-gray-500">[email protected]</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Engineering</td> | |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Senior Developer</td> | |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Mar 12, 2023</td> | |
| <td class="px-4 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 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" src="http://static.photos/people/200x200/2" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Sarah Johnson</div> | |
| <div class="text-sm text-gray-500">[email protected]</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Marketing</td> | |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Marketing Manager</td> | |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Mar 10, 2023</td> | |
| <td class="px-4 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Active</span> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-4 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" src="http://static.photos/people/200x200/3" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Michael Brown</div> | |
| <div class="text-sm text-gray-500">[email protected]</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Sales</td> | |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Sales Executive</td> | |
| <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">Mar 8, 2023</td> | |
| <td class="px-4 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Training</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Simple animation for cards | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const cards = document.querySelectorAll('.card-hover'); | |
| cards.forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| card.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease'; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| card.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease'; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |