Tạo hệ thống quản lý công việc, người dùng đăng nhập, tạo công việc mới, điều chỉnh trạng thái, thống kê báo cáo công việc

components/auth-form.js

@@ -0,0 +1,115 @@
+class AuthForm extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .auth-container {
+          @apply max-w-md mx-auto p-8 bg-white rounded-lg shadow-md;
+        }
+        .auth-tabs {
+          @apply flex border-b mb-6;
+        }
+        .auth-tab {
+          @apply px-4 py-2 cursor-pointer;
+        }
+        .auth-tab.active {
+          @apply border-b-2 border-blue-500 font-medium;
+        }
+        .form-group {
+          @apply mb-4;
+        }
+        label {
+          @apply block text-sm font-medium text-gray-700 mb-1;
+        }
+        input {
+          @apply w-full px-3 py-2 border border-gray-300 rounded-md;
+        }
+        button {
+          @apply w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700;
+        }
+        .error {
+          @apply text-red-500 text-sm mt-2;
+        }
+      </style>
+      <div class="auth-container">
+        <div class="auth-tabs">
+          <div class="auth-tab active" data-tab="login">Login</div>
+          <div class="auth-tab" data-tab="register">Register</div>
+        </div>
+        <form id="loginForm">
+          <div class="form-group">
+            <label>Email</label>
+            <input type="email" id="loginEmail" required>
+          </div>
+          <div class="form-group">
+            <label>Password</label>
+            <input type="password" id="loginPassword" required>
+          </div>
+          <div id="loginError" class="error"></div>
+          <button type="submit">Login</button>
+        </form>
+        <form id="registerForm" class="hidden">
+          <div class="form-group">
+            <label>Name</label>
+            <input type="text" id="registerName" required>
+          </div>
+          <div class="form-group">
+            <label>Email</label>
+            <input type="email" id="registerEmail" required>
+          </div>
+          <div class="form-group">
+            <label>Password</label>
+            <input type="password" id="registerPassword" required>
+          </div>
+          <div id="registerError" class="error"></div>
+          <button type="submit">Register</button>
+        </form>
+      </div>
+    `;
+
+    // Tab switching
+    this.shadowRoot.querySelectorAll('.auth-tab').forEach(tab => {
+      tab.addEventListener('click', () => {
+        this.shadowRoot.querySelectorAll('.auth-tab').forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        document.getElementById('loginForm').classList.toggle('hidden');
+        document.getElementById('registerForm').classList.toggle('hidden');
+      });
+    });
+
+    // Form submissions
+    this.shadowRoot.getElementById('loginForm').addEventListener('submit', this.handleLogin.bind(this));
+    this.shadowRoot.getElementById('registerForm').addEventListener('submit', this.handleRegister.bind(this));
+  }
+
+  handleLogin(e) {
+    e.preventDefault();
+    const email = this.shadowRoot.getElementById('loginEmail').value;
+    const password = this.shadowRoot.getElementById('loginPassword').value;
+    
+    // In a real app, you would call your authentication API here
+    if (email && password) {
+      localStorage.setItem('currentUser', JSON.stringify({ email }));
+      this.dispatchEvent(new CustomEvent('auth-success'));
+    } else {
+      this.shadowRoot.getElementById('loginError').textContent = 'Invalid credentials';
+    }
+  }
+
+  handleRegister(e) {
+    e.preventDefault();
+    const name = this.shadowRoot.getElementById('registerName').value;
+    const email = this.shadowRoot.getElementById('registerEmail').value;
+    const password = this.shadowRoot.getElementById('registerPassword').value;
+    
+    // In a real app, you would call your registration API here
+    if (name && email && password) {
+      localStorage.setItem('currentUser', JSON.stringify({ email, name }));
+      this.dispatchEvent(new CustomEvent('auth-success'));
+    } else {
+      this.shadowRoot.getElementById('registerError').textContent = 'Please fill all fields';
+    }
+  }
+}
+
+customElements.define('auth-form', AuthForm);

components/navbar.js

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

components/task-filter.js

@@ -0,0 +1,58 @@
+class TaskFilter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .filter-container {
+          @apply mb-6 p-4 bg-white rounded-lg shadow-md;
+        }
+        .filter-row {
+          @apply flex flex-wrap items-center gap-4;
+        }
+        select, input {
+          @apply px-3 py-2 border border-gray-300 rounded-md;
+        }
+        button {
+          @apply px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700;
+        }
+      </style>
+      <div class="filter-container">
+        <div class="filter-row">
+          <select id="statusFilter">
+            <option value="all">All Statuses</option>
+            <option value="completed">Completed</option>
+            <option value="pending">Pending</option>
+            <option value="overdue">Overdue</option>
+          </select>
+          <select id="priorityFilter">
+            <option value="all">All Priorities</option>
+            <option value="high">High</option>
+            <option value="medium">Medium</option>
+            <option value="low">Low</option>
+          </select>
+          <input type="date" id="dateFilter">
+          <button id="applyFilter">Apply</button>
+          <button id="resetFilter">Reset</button>
+        </div>
+      </div>
+    `;
+
+    this.shadowRoot.getElementById('applyFilter').addEventListener('click', () => {
+      const filters = {
+        status: this.shadowRoot.getElementById('statusFilter').value,
+        priority: this.shadowRoot.getElementById('priorityFilter').value,
+        date: this.shadowRoot.getElementById('dateFilter').value
+      };
+      this.dispatchEvent(new CustomEvent('filter-changed', { detail: filters }));
+    });
+
+    this.shadowRoot.getElementById('resetFilter').addEventListener('click', () => {
+      this.shadowRoot.getElementById('statusFilter').value = 'all';
+      this.shadowRoot.getElementById('priorityFilter').value = 'all';
+      this.shadowRoot.getElementById('dateFilter').value = '';
+      this.dispatchEvent(new CustomEvent('filter-changed', { detail: {} }));
+    });
+  }
+}
+
+customElements.define('task-filter', TaskFilter);

components/user-profile.js

@@ -0,0 +1,50 @@
+class UserProfile extends HTMLElement {
+  connectedCallback() {
+    const user = JSON.parse(localStorage.getItem('currentUser'));
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .profile-dropdown {
+          @apply relative;
+        }
+        .profile-btn {
+          @apply flex items-center space-x-2 cursor-pointer;
+        }
+        .avatar {
+          @apply w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-medium;
+        }
+        .dropdown-menu {
+          @apply absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 hidden;
+        }
+        .dropdown-item {
+          @apply block px-4 py-2 text-gray-700 hover:bg-gray-100;
+        }
+      </style>
+      <div class="profile-dropdown">
+        <div class="profile-btn">
+          <div class="avatar">${user.name ? user.name.charAt(0).toUpperCase() : 'U'}</div>
+        </div>
+        <div class="dropdown-menu">
+          <a href="#" class="dropdown-item">Profile</a>
+          <a href="#" class="dropdown-item">Settings</a>
+          <a href="#" id="logoutBtn" class="dropdown-item">Logout</a>
+        </div>
+      </div>
+    `;
+
+    const profileBtn = this.shadowRoot.querySelector('.profile-btn');
+    const dropdownMenu = this.shadowRoot.querySelector('.dropdown-menu');
+
+    profileBtn.addEventListener('click', () => {
+      dropdownMenu.classList.toggle('hidden');
+    });
+
+    this.shadowRoot.getElementById('logoutBtn').addEventListener('click', (e) => {
+      e.preventDefault();
+      localStorage.removeItem('currentUser');
+      window.location.reload();
+    });
+  }
+}
+
+customElements.define('user-profile', UserProfile);

index.html

@@ -22,7 +22,8 @@
         <main class="flex-1 p-8">
             <div class="mb-8">
                 <h1 class="text-3xl font-bold text-gray-800 mb-4">Dashboard</h1>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <task-filter></task-filter>
+<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>
@@ -71,7 +72,9 @@
             </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,7 +1,19 @@
 
 document.addEventListener('DOMContentLoaded', function() {
-    let tasks = JSON.parse(localStorage.getItem('tasks')) || [
-        { id: 1, title: 'Complete project proposal', dueDate: new Date().toISOString().split('T')[0], priority: 'high', completed: false },
+    // 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 },
         { 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 }
     ];
@@ -18,19 +30,23 @@ document.addEventListener('DOMContentLoaded', function() {
             ...e.detail
         };
         tasks.push(newTask);
-        localStorage.setItem('tasks', JSON.stringify(tasks));
-        renderTasks();
+        localStorage.setItem(userTasksKey, 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('tasks', JSON.stringify(tasks));
-        renderTasks();
+        localStorage.setItem(userTasksKey, JSON.stringify(tasks));
+renderTasks();
         updateKpiReport();
     });
 const documents = [
@@ -38,11 +54,37 @@ 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;
+        });
+    }
 
-    // Render tasks
-    const tasksContainer = document.getElementById('tasks-container');
-    tasks.forEach(task => {
-        const taskCard = document.createElement('custom-task-card');
+    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');
         taskCard.setAttribute('task-id', task.id);
         taskCard.setAttribute('task-title', task.title);
         taskCard.setAttribute('due-date', task.dueDate);