Xây dựng một hệ thống đầy đủ và hoàn chỉnh quản lý KPI, nhân viên có thể cập nhật KPI thực hiện hàng ngày, tổ trưởng cũng có thể cập nhật cho nhân viên trong tổ thống kê và xem trong tổ, admin quản lý tất cả bao gồm thống kê, xuất excel.

components/kpi-form.js

@@ -0,0 +1,70 @@
+class KpiForm extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .kpi-form {
+          @apply bg-white rounded-lg shadow-md p-6 mb-6;
+        }
+        .form-title {
+          @apply text-xl font-semibold text-gray-800 mb-4;
+        }
+        .form-group {
+          @apply mb-4;
+        }
+        label {
+          @apply block text-sm font-medium text-gray-700 mb-1;
+        }
+        input, select, textarea {
+          @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500;
+        }
+        .submit-btn {
+          @apply w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
+        }
+      </style>
+      <div class="kpi-form">
+        <h3 class="form-title">Update Daily KPI</h3>
+        <form id="kpiForm">
+          <div class="form-group">
+            <label for="kpiDate">Date</label>
+            <input type="date" id="kpiDate" required>
+          </div>
+          <div class="form-group">
+            <label for="kpiMetric">KPI Metric</label>
+            <select id="kpiMetric" required>
+              <option value="">Select Metric</option>
+              <option value="productivity">Productivity</option>
+              <option value="quality">Quality</option>
+              <option value="efficiency">Efficiency</option>
+              <option value="attendance">Attendance</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="kpiValue">Value</label>
+            <input type="number" id="kpiValue" min="0" max="100" required>
+          </div>
+          <div class="form-group">
+            <label for="kpiNotes">Notes</label>
+            <textarea id="kpiNotes" rows="3"></textarea>
+          </div>
+          <button type="submit" class="submit-btn">Submit KPI</button>
+        </form>
+      </div>
+    `;
+
+    this.shadowRoot.getElementById('kpiForm').addEventListener('submit', (e) => {
+      e.preventDefault();
+      const newKpi = {
+        date: this.shadowRoot.getElementById('kpiDate').value,
+        metric: this.shadowRoot.getElementById('kpiMetric').value,
+        value: parseFloat(this.shadowRoot.getElementById('kpiValue').value),
+        notes: this.shadowRoot.getElementById('kpiNotes').value,
+        timestamp: new Date().toISOString()
+      };
+      this.dispatchEvent(new CustomEvent('kpi-submitted', { detail: newKpi }));
+      this.shadowRoot.getElementById('kpiForm').reset();
+    });
+  }
+}
+
+customElements.define('kpi-form', KpiForm);

components/kpi-team-view.js

@@ -0,0 +1,63 @@
+```javascript
+class KpiTeamView extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .team-view {
+          @apply bg-white rounded-lg shadow-md p-6;
+        }
+        .view-header {
+          @apply flex justify-between items-center mb-6;
+        }
+        .view-title {
+          @apply text-xl font-semibold text-gray-800;
+        }
+        .export-btn {
+          @apply bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium;
+        }
+        .team-table {
+          @apply w-full border-collapse;
+        }
+        .team-table th {
+          @apply text-left py-3 px-4 bg-gray-50 text-gray-600 text-sm font-medium;
+        }
+        .team-table td {
+          @apply py-3 px-4 border-b border-gray-200;
+        }
+        .progress-bar {
+          @apply h-2 bg-gray-200 rounded-full overflow-hidden;
+        }
+        .progress-value {
+          @apply h-full;
+        }
+        .good {
+          @apply bg-green-500;
+        }
+        .average {
+          @apply bg-yellow-500;
+        }
+        .poor {
+          @apply bg-red-500;
+        }
+      </style>
+      <div class="team-view">
+        <div class="view-header">
+          <h3 class="view-title">Team KPI Overview</h3>
+          <button class="export-btn" id="exportExcel">
+            <i data-feather="download"></i> Export to Excel
+          </button>
+        </div>
+        <table class="team-table">
+          <thead>
+            <tr>
+              <th>Employee</th>
+              <th>Productivity</th>
+              <th>Quality</th>
+              <th>Efficiency</th>
+              <th>Attendance</th>
+              <th>Overall</th>
+            </tr>
+          </thead>
+          <tbody id="teamData">
+            <!-- Team data will be populated here -->

components/navbar.js

@@ -50,8 +50,10 @@ class CustomNavbar extends HTMLElement {
                         <i data-feather="calendar"></i>
                         <span>Calendar</span>
                     </a>
-                    <user-profile></user-profile>
-</div>
+                    <div class="user-profile">
+                        <div class="avatar">JD</div>
+                    </div>
+                </div>
             </nav>
         `;
     }

index.html

@@ -22,8 +22,7 @@
         <main class="flex-1 p-8">
             <div class="mb-8">
                 <h1 class="text-3xl font-bold text-gray-800 mb-4">Dashboard</h1>
-                <task-filter></task-filter>
-<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                     <div class="bg-white rounded-xl shadow-md p-6">
                         <h2 class="text-xl font-semibold text-gray-700 mb-4 flex items-center">
                             <i data-feather="check-circle" class="mr-2 text-green-500"></i>
@@ -72,9 +71,7 @@
             </div>
         </main>
     </div>
-    <script src="components/auth-form.js"></script>
-    <script src="components/task-filter.js"></script>
-    <script src="components/user-profile.js"></script>
+
     <script src="script.js"></script>
     <script>
         feather.replace();

script.js

@@ -1,19 +1,7 @@
 
 document.addEventListener('DOMContentLoaded', function() {
-    // Check authentication
-    const currentUser = JSON.parse(localStorage.getItem('currentUser'));
-    if (!currentUser) {
-        document.body.innerHTML = '<auth-form></auth-form>';
-        document.querySelector('auth-form').addEventListener('auth-success', () => {
-            window.location.reload();
-        });
-        return;
-    }
-
-    // Initialize tasks for current user
-    const userTasksKey = `tasks_${currentUser.email}`;
-    let tasks = JSON.parse(localStorage.getItem(userTasksKey)) || [
-{ id: 1, title: 'Complete project proposal', dueDate: new Date().toISOString().split('T')[0], priority: 'high', completed: false },
+    let tasks = JSON.parse(localStorage.getItem('tasks')) || [
+        { id: 1, title: 'Complete project proposal', dueDate: new Date().toISOString().split('T')[0], priority: 'high', completed: false },
         { id: 2, title: 'Review team documents', dueDate: new Date(Date.now() + 86400000).toISOString().split('T')[0], priority: 'medium', completed: false },
         { id: 3, title: 'Schedule meeting with client', dueDate: new Date(Date.now() - 86400000).toISOString().split('T')[0], priority: 'low', completed: true }
     ];
@@ -30,23 +18,19 @@ document.addEventListener('DOMContentLoaded', function() {
             ...e.detail
         };
         tasks.push(newTask);
-        localStorage.setItem(userTasksKey, JSON.stringify(tasks));
-renderTasks();
+        localStorage.setItem('tasks', JSON.stringify(tasks));
+        renderTasks();
         updateKpiReport();
     });
-    // Handle task filtering
-    document.addEventListener('filter-changed', (e) => {
-        renderTasks(e.detail);
-    });
 
     // Complete task
-document.addEventListener('task-completed', (e) => {
+    document.addEventListener('task-completed', (e) => {
         const taskId = parseInt(e.detail.taskId);
         tasks = tasks.map(task => 
             task.id === taskId ? {...task, completed: !task.completed} : task
         );
-        localStorage.setItem(userTasksKey, JSON.stringify(tasks));
-renderTasks();
+        localStorage.setItem('tasks', JSON.stringify(tasks));
+        renderTasks();
         updateKpiReport();
     });
 const documents = [
@@ -54,37 +38,11 @@ const documents = [
         { id: 2, title: 'Meeting Notes', type: 'doc', lastModified: '2023-06-03', size: '1.1 MB' },
         { id: 3, title: 'Budget Plan', type: 'xls', lastModified: '2023-05-28', size: '3.7 MB' }
     ];
-    // Filter and render tasks
-    function filterTasks(tasks, filters = {}) {
-        return tasks.filter(task => {
-            let matches = true;
-            
-            if (filters.status === 'completed') {
-                matches = matches && task.completed;
-            } else if (filters.status === 'pending') {
-                matches = matches && !task.completed && new Date(task.dueDate) >= new Date();
-            } else if (filters.status === 'overdue') {
-                matches = matches && !task.completed && new Date(task.dueDate) < new Date();
-            }
-            
-            if (filters.priority && filters.priority !== 'all') {
-                matches = matches && task.priority === filters.priority;
-            }
-            
-            if (filters.date) {
-                matches = matches && task.dueDate === filters.date;
-            }
-            
-            return matches;
-        });
-    }
 
-    function renderTasks(filters = {}) {
-        const filteredTasks = filterTasks(tasks, filters);
-        const tasksContainer = document.getElementById('tasks-container');
-        tasksContainer.innerHTML = '';
-        filteredTasks.forEach(task => {
-const taskCard = document.createElement('custom-task-card');
+    // Render tasks
+    const tasksContainer = document.getElementById('tasks-container');
+    tasks.forEach(task => {
+        const taskCard = document.createElement('custom-task-card');
         taskCard.setAttribute('task-id', task.id);
         taskCard.setAttribute('task-title', task.title);
         taskCard.setAttribute('due-date', task.dueDate);