Añade la seccion administracion que tendra un maestro de tablas (con su CRUD) para modificar varias tablas de BBDD, como por ejemplo empleadso, que tiene el ID de woffu, el email,. el display name, el nombre etc, crea otro maestro de proyectos, donde iene el nombre de proyecot de jira, el nombre de proyecto (nuestro), el departamento, la empresa, al que se imputa el gasto, descripcion etc
55831e0
verified
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>JiraMaster Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s; | |
| } | |
| .dashboard-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .progress-bar { | |
| transition: width 1s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-indigo-700 text-white w-64 flex-shrink-0"> | |
| <div class="p-4 flex items-center space-x-3 border-b border-indigo-600"> | |
| <i data-feather="trello" class="w-8 h-8"></i> | |
| <h1 class="text-xl font-bold">JiraMaster</h1> | |
| </div> | |
| <nav class="p-4"> | |
| <div class="space-y-2"> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-indigo-800"> | |
| <i data-feather="home"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-800"> | |
| <i data-feather="clock"></i> | |
| <span>Time Tracking</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-800"> | |
| <i data-feather="dollar-sign"></i> | |
| <span>Cost Analysis</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-800"> | |
| <i data-feather="users"></i> | |
| <span>Employees</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-800"> | |
| <i data-feather="briefcase"></i> | |
| <span>Departments</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-indigo-800"> | |
| <i data-feather="settings"></i> | |
| <span>Administration</span> | |
| </a> | |
| </div> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 overflow-auto"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm p-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-4"> | |
| <button id="sidebarToggle" class="text-gray-500"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <h2 class="text-xl font-semibold">Dashboard Overview</h2> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i data-feather="bell" class="text-gray-500"></i> | |
| <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-500 flex items-center justify-center text-white"> | |
| <i data-feather="user"></i> | |
| </div> | |
| <span class="font-medium">Admin</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="p-6"> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="dashboard-card bg-white rounded-xl shadow p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Total Tasks</p> | |
| <h3 class="text-2xl font-bold mt-1">1,248</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> | |
| +12% from last week | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-indigo-100 text-indigo-600"> | |
| <i data-feather="check-circle"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-xl shadow p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Hours Logged</p> | |
| <h3 class="text-2xl font-bold mt-1">1,845</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> | |
| +8% from last week | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-blue-100 text-blue-600"> | |
| <i data-feather="clock"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-xl shadow p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Total Cost</p> | |
| <h3 class="text-2xl font-bold mt-1">$42,580</h3> | |
| <p class="text-sm text-red-500 mt-2 flex items-center"> | |
| <i data-feather="trending-down" class="w-4 h-4 mr-1"></i> | |
| -3% from last week | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-green-100 text-green-600"> | |
| <i data-feather="dollar-sign"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card bg-white rounded-xl shadow p-6"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500">Active Employees</p> | |
| <h3 class="text-2xl font-bold mt-1">87</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> | |
| +2 new hires | |
| </p> | |
| </div> | |
| <div class="p-3 rounded-lg bg-purple-100 text-purple-600"> | |
| <i data-feather="users"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Row --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> | |
| <!-- Hours by Department --> | |
| <div class="bg-white rounded-xl shadow p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-semibold">Hours by Department</h3> | |
| <select class="bg-gray-100 rounded-md px-3 py-1 text-sm"> | |
| <option>This Week</option> | |
| <option>This Month</option> | |
| <option>This Quarter</option> | |
| </select> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="departmentHoursChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Cost Distribution --> | |
| <div class="bg-white rounded-xl shadow p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-semibold">Cost Distribution</h3> | |
| <select class="bg-gray-100 rounded-md px-3 py-1 text-sm"> | |
| <option>This Week</option> | |
| <option>This Month</option> | |
| <option>This Quarter</option> | |
| </select> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="costDistributionChart"></canvas> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tasks Progress --> | |
| <div class="bg-white rounded-xl shadow p-6 mb-8"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="font-semibold">Tasks Progress by Employee</h3> | |
| <button class="text-indigo-600 text-sm font-medium">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">John Smith</span> | |
| <span class="text-sm text-gray-500">12/15 tasks</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="progress-bar bg-green-500 h-2.5 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">Sarah Johnson</span> | |
| <span class="text-sm text-gray-500">8/10 tasks</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="progress-bar bg-blue-500 h-2.5 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">Michael Brown</span> | |
| <span class="text-sm text-gray-500">5/8 tasks</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="progress-bar bg-yellow-500 h-2.5 rounded-full" style="width: 62.5%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">Emily Davis</span> | |
| <span class="text-sm text-gray-500">3/5 tasks</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="progress-bar bg-purple-500 h-2.5 rounded-full" style="width: 60%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activities --> | |
| <div class="bg-white rounded-xl shadow p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="font-semibold">Recent Activities</h3> | |
| <button class="text-indigo-600 text-sm font-medium">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="p-2 rounded-full bg-indigo-100 text-indigo-600"> | |
| <i data-feather="check-circle" class="w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Task completed</p> | |
| <p class="text-sm text-gray-500">"Update dashboard design" marked as done by Sarah Johnson</p> | |
| <p class="text-xs text-gray-400 mt-1">2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="p-2 rounded-full bg-blue-100 text-blue-600"> | |
| <i data-feather="clock" class="w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Time logged</p> | |
| <p class="text-sm text-gray-500">Michael Brown logged 4 hours on "API integration"</p> | |
| <p class="text-xs text-gray-400 mt-1">5 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="p-2 rounded-full bg-green-100 text-green-600"> | |
| <i data-feather="dollar-sign" class="w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">Cost updated</p> | |
| <p class="text-sm text-gray-500">Project "Mobile App" cost increased to $12,500</p> | |
| <p class="text-xs text-gray-400 mt-1">Yesterday</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="p-2 rounded-full bg-purple-100 text-purple-600"> | |
| <i data-feather="user-plus" class="w-5 h-5"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium">New employee</p> | |
| <p class="text-sm text-gray-500">Robert Wilson joined the Design team</p> | |
| <p class="text-xs text-gray-400 mt-1">Yesterday</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Administration Modal --> | |
| <div id="adminModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden"> | |
| <div class="bg-white rounded-xl w-full max-w-4xl max-h-[90vh] overflow-auto"> | |
| <div class="p-6 border-b flex justify-between items-center"> | |
| <h3 class="text-xl font-semibold">Administration Panel</h3> | |
| <button id="closeAdminModal" class="text-gray-500 hover:text-gray-700"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <!-- Tabs --> | |
| <div class="border-b border-gray-200"> | |
| <nav class="-mb-px flex space-x-8"> | |
| <button class="tab-button border-b-2 border-indigo-500 text-indigo-600 px-4 py-3 font-medium">Employees</button> | |
| <button class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-4 py-3 font-medium">Departments</button> | |
| <button class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-4 py-3 font-medium">Companies</button> | |
| <button class="tab-button border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 px-4 py-3 font-medium">Cost Centers</button> | |
| </nav> | |
| </div> | |
| <!-- Tab Content --> | |
| <div class="py-6"> | |
| <!-- Employees Table --> | |
| <div class="tab-content active"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h4 class="font-medium">Employees Management</h4> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm flex items-center"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| Add Employee | |
| </button> | |
| </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">Name</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Department</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Hourly Rate</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <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" src="https://randomuser.me/api/portraits/men/1.jpg" 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">Developer</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">john.smith@example.com</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Engineering</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$45.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Delete</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <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" src="https://randomuser.me/api/portraits/women/2.jpg" 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">Designer</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">sarah.j@example.com</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Design</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$50.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Delete</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <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" src="https://randomuser.me/api/portraits/men/3.jpg" 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">QA Engineer</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">michael.b@example.com</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Quality Assurance</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$40.00</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Delete</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Departments Table --> | |
| <div class="tab-content hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h4 class="font-medium">Departments Management</h4> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm flex items-center"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| Add Department | |
| </button> | |
| </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">Name</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Head</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Budget</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Engineering</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">David Wilson</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$250,000</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Delete</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Design</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Johnson</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$150,000</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Delete</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Quality Assurance</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Michael Brown</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$120,000</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Delete</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Companies Table --> | |
| <div class="tab-content hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h4 class="font-medium">Companies Management</h4> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm flex items-center"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| Add Company | |
| </button> | |
| </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">Name</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tax ID</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Tech Solutions Inc.</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">123-456-789</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">contact@techsolutions.com</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Delete</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Design Studio LLC</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">987-654-321</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">info@designstudio.com</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Delete</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Cost Centers Table --> | |
| <div class="tab-content hidden"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h4 class="font-medium">Cost Centers Management</h4> | |
| <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm flex items-center"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| Add Cost Center | |
| </button> | |
| </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">Code</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">Budget</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">DEV-001</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Development Projects</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$500,000</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Delete</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">MKT-001</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Marketing Campaigns</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$200,000</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Delete</a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">HR-001</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Human Resources</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$150,000</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Delete</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Toggle Sidebar | |
| document.getElementById('sidebarToggle').addEventListener('click', function() { | |
| document.querySelector('.sidebar').classList.toggle('-ml-64'); | |
| }); | |
| // Toggle Admin Modal | |
| document.querySelector('a[href="#"]').addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.getElementById('adminModal').classList.remove('hidden'); | |
| }); | |
| document.getElementById('closeAdminModal').addEventListener('click', function() { | |
| document.getElementById('adminModal').classList.add('hidden'); | |
| }); | |
| // Tab Switching | |
| const tabButtons = document.querySelectorAll('.tab-button'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| tabButtons.forEach((button, index) => { | |
| button.addEventListener('click', () => { | |
| // Remove active class from all buttons and contents | |
| tabButtons.forEach(btn => btn.classList.remove('border-indigo-500', 'text-indigo-600')); | |
| tabContents.forEach(content => content.classList.add('hidden')); | |
| // Add active class to clicked button and corresponding content | |
| button.classList.add('border-indigo-500', 'text-indigo-600'); | |
| tabContents[index].classList.remove('hidden'); | |
| }); | |
| }); | |
| // Initialize Charts | |
| const departmentHoursCtx = document.getElementById('departmentHoursChart').getContext('2d'); | |
| const departmentHoursChart = new Chart(departmentHoursCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Engineering', 'Design', 'QA', 'Marketing', 'HR'], | |
| datasets: [{ | |
| label: 'Hours Logged', | |
| data: [1200, 800, 600, 400, 200], | |
| backgroundColor: [ | |
| 'rgba(79, 70, 229, 0.7)', | |
| 'rgba(99, 102, 241, 0.7)', | |
| 'rgba(129, 140, 248, 0.7)', | |
| 'rgba(165, 180, 252, 0.7)', | |
| 'rgba(199, 210, 254, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(79, 70, 229, 1)', | |
| 'rgba(99, 102, 241, 1)', | |
| 'rgba(129, 140, 248, 1)', | |
| 'rgba(165, 180, 252, 1)', | |
| 'rgba(199, 210, 254, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| scales: { | |
| y: { | |
| beginAtZero: true | |
| } | |
| } | |
| } | |
| }); | |
| const costDistributionCtx = document.getElementById('costDistributionChart').getContext('2d'); | |
| const costDistributionChart = new Chart(costDistributionCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Salaries', 'Software', 'Hardware', 'Office', 'Travel'], | |
| datasets: [{ | |
| data: [30000, 5000, 4000, 2000, 1000], | |
| backgroundColor: [ | |
| 'rgba(79, 70, 229, 0.7)', | |
| 'rgba(99, 102, 241, 0.7)', | |
| 'rgba(129, 140, 248, 0.7)', | |
| 'rgba(165, 180, 252, 0.7)', | |
| 'rgba(199, 210, 254, 0.7)' | |
| ], | |
| borderColor: [ | |
| 'rgba(79, 70, 229, 1)', | |
| 'rgba(99, 102, 241, 1)', | |
| 'rgba(129, 140, 248, 1)', | |
| 'rgba(165, 180, 252, 1)', | |
| 'rgba(199, 210, 254, 1)' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| } | |
| } | |
| } | |
| }); | |
| // Animate progress bars on page load | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const progressBars = document.querySelectorAll('.progress-bar'); | |
| progressBars.forEach(bar => { | |
| const width = bar.style.width; | |
| bar.style.width = '0'; | |
| setTimeout(() => { | |
| bar.style.width = width; | |
| }, 100); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |