Xây dựng một hệ thống đầy đủ, hoàn chỉnh việc quản lý KPI của đơn vị, người dùng đăng nhập và cập nhật KPI thực hiện hành ngày, tổ trưỡng có thể cập nhật KPI của nhân viên, quản lý KPI trong tổ, Admin quản lý tất cả, cập nhật danh sách KPI, thống kê, xuất dữ liệu ra excel

README.md

@@ -1,10 +1,13 @@
 ---
-title: Kpi Tracker Pro Performance Pulse
-emoji: 📚
-colorFrom: blue
-colorTo: green
+title: KPI Tracker Pro - Performance Pulse 💼
+colorFrom: gray
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/auth-form.js

@@ -0,0 +1,165 @@
+class AuthForm extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .auth-container {
+                    background: white;
+                    border-radius: 0.75rem;
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+                    width: 100%;
+                    max-width: 28rem;
+                    padding: 2rem;
+                }
+                .auth-title {
+                    font-size: 1.5rem;
+                    font-weight: 600;
+                    margin-bottom: 1.5rem;
+                    color: #1a365d;
+                    text-align: center;
+                }
+                .input-group {
+                    margin-bottom: 1.25rem;
+                }
+                .input-label {
+                    display: block;
+                    margin-bottom: 0.5rem;
+                    font-size: 0.875rem;
+                    font-weight: 500;
+                    color: #4a5568;
+                }
+                .input-field {
+                    width: 100%;
+                    padding: 0.75rem;
+                    border: 1px solid #e2e8f0;
+                    border-radius: 0.375rem;
+                    font-size: 0.875rem;
+                    transition: border-color 0.2s;
+                }
+                .input-field:focus {
+                    outline: none;
+                    border-color: #4299e1;
+                    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
+                }
+                .submit-btn {
+                    width: 100%;
+                    padding: 0.75rem;
+                    background-color: #4299e1;
+                    color: white;
+                    font-weight: 500;
+                    border: none;
+                    border-radius: 0.375rem;
+                    cursor: pointer;
+                    transition: background-color 0.2s;
+                }
+                .submit-btn:hover {
+                    background-color: #3182ce;
+                }
+                .toggle-auth {
+                    text-align: center;
+                    margin-top: 1rem;
+                    font-size: 0.875rem;
+                    color: #4a5568;
+                }
+                .toggle-link {
+                    color: #4299e1;
+                    font-weight: 500;
+                    cursor: pointer;
+                }
+                .error-message {
+                    color: #e53e3e;
+                    font-size: 0.875rem;
+                    margin-top: 0.25rem;
+                }
+            </style>
+            <div class="auth-container">
+                <h1 class="auth-title">KPI Tracker Pro</h1>
+                <form id="loginForm">
+                    <div class="input-group">
+                        <label class="input-label" for="email">Email</label>
+                        <input type="email" id="email" class="input-field" placeholder="your@email.com" required>
+                    </div>
+                    <div class="input-group">
+                        <label class="input-label" for="password">Password</label>
+                        <input type="password" id="password" class="input-field" placeholder="••••••••" required>
+                    </div>
+                    <button type="submit" class="submit-btn">Sign In</button>
+                </form>
+                <div class="toggle-auth">
+                    <span>Don't have an account? </span>
+                    <span class="toggle-link" id="toggleRegister">Register</span>
+                </div>
+                <div id="errorMessage" class="error-message" style="display: none;"></div>
+            </div>
+        `;
+
+        this.shadowRoot.getElementById('loginForm').addEventListener('submit', this.handleLogin.bind(this));
+        this.shadowRoot.getElementById('toggleRegister').addEventListener('click', () => {
+            this.toggleAuthMode('register');
+        });
+    }
+
+    handleLogin(e) {
+        e.preventDefault();
+        const email = this.shadowRoot.getElementById('email').value;
+        const password = this.shadowRoot.getElementById('password').value;
+
+        // Mock authentication - in a real app, this would be an API call
+        if (email === 'admin@kpi.com' && password === 'admin123') {
+            setCurrentUser({ email, role: 'admin', name: 'Admin User' });
+            window.location.href = '/dashboard.html';
+        } else if (email === 'manager@kpi.com' && password === 'manager123') {
+            setCurrentUser({ email, role: 'manager', name: 'Team Manager', team: 'Sales Team' });
+            window.location.href = '/dashboard.html';
+        } else if (email === 'employee@kpi.com' && password === 'employee123') {
+            setCurrentUser({ email, role: 'employee', name: 'John Doe', manager: 'manager@kpi.com' });
+            window.location.href = '/dashboard.html';
+        } else {
+            const errorElement = this.shadowRoot.getElementById('errorMessage');
+            errorElement.textContent = 'Invalid email or password';
+            errorElement.style.display = 'block';
+        }
+    }
+
+    toggleAuthMode(mode) {
+        const form = this.shadowRoot.getElementById('loginForm');
+        const toggleText = this.shadowRoot.querySelector('.toggle-auth span:first-child');
+        const toggleLink = this.shadowRoot.getElementById('toggleRegister');
+        const title = this.shadowRoot.querySelector('.auth-title');
+
+        if (mode === 'register') {
+            title.textContent = 'Create Account';
+            form.innerHTML = `
+                <div class="input-group">
+                    <label class="input-label" for="regName">Full Name</label>
+                    <input type="text" id="regName" class="input-field" placeholder="John Doe" required>
+                </div>
+                <div class="input-group">
+                    <label class="input-label" for="regEmail">Email</label>
+                    <input type="email" id="regEmail" class="input-field" placeholder="your@email.com" required>
+                </div>
+                <div class="input-group">
+                    <label class="input-label" for="regPassword">Password</label>
+                    <input type="password" id="regPassword" class="input-field" placeholder="••••••••" required>
+                </div>
+                <div class="input-group">
+                    <label class="input-label" for="regConfirmPassword">Confirm Password</label>
+                    <input type="password" id="regConfirmPassword" class="input-field" placeholder="••••••••" required>
+                </div>
+                <div class="input-group">
+                    <label class="input-label" for="regRole">Role</label>
+                    <select id="regRole" class="input-field" required>
+                        <option value="">Select your role</option>
+                        <option value="employee">Employee</option>
+                        <option value="manager">Manager</option>
+                    </select>
+                </div>
+                <button type="submit" class="submit-btn">Register</button>
+            `;
+            toggleText.textContent = 'Already have an account? ';
+            toggleLink.textContent = 'Sign In';
+            toggleLink.id = 'toggleLogin';
+            toggleLink.addEventListener('click', () => {
+                this.toggleAuthMode('login');
+            });
+            form.addEventListener('submit', this.handleRegister.bind

index.html

@@ -1,19 +1,18 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KPI Tracker Pro - Login</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/auth-form.js"></script>
+</head>
+<body class="bg-gray-50 min-h-screen flex items-center justify-center">
+    <auth-form></auth-form>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,54 @@
+// Shared utility functions
+const formatDate = (dateString) => {
+    const options = { year: 'numeric', month: 'short', day: 'numeric' };
+    return new Date(dateString).toLocaleDateString(undefined, options);
+};
+
+const calculateProgress = (current, target) => {
+    return Math.min(Math.round((current / target) * 100), 100);
+};
+
+// Auth state management
+let currentUser = null;
+
+const setCurrentUser = (user) => {
+    currentUser = user;
+    localStorage.setItem('currentUser', JSON.stringify(user));
+    updateUIForUserRole();
+};
+
+const getCurrentUser = () => {
+    if (!currentUser && localStorage.getItem('currentUser')) {
+        currentUser = JSON.parse(localStorage.getItem('currentUser'));
+    }
+    return currentUser;
+};
+
+const logout = () => {
+    currentUser = null;
+    localStorage.removeItem('currentUser');
+    window.location.href = '/';
+};
+
+const updateUIForUserRole = () => {
+    const user = getCurrentUser();
+    if (!user) return;
+
+    // Show/hide elements based on role
+    document.querySelectorAll('[data-role="admin"]').forEach(el => {
+        el.style.display = user.role === 'admin' ? 'block' : 'none';
+    });
+    
+    document.querySelectorAll('[data-role="manager"]').forEach(el => {
+        el.style.display = user.role === 'manager' ? 'block' : 'none';
+    });
+    
+    document.querySelectorAll('[data-role="employee"]').forEach(el => {
+        el.style.display = user.role === 'employee' ? 'block' : 'none';
+    });
+};
+
+// Initialize app when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    updateUIForUserRole();
+});

style.css

@@ -1,28 +1,30 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.kpi-card {
+    transition: all 0.3s ease;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.kpi-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.progress-bar {
+    transition: width 1s ease-in-out;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.dashboard-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 1.5rem;
 }
+
+@media (max-width: 768px) {
+    .dashboard-grid {
+        grid-template-columns: 1fr;
+    }
+}