Staff Manager Pro - Free Edition<\/title>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Albert+Sans:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Albert Sans', system-ui, -apple-system, sans-serif;\r\n background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);\r\n color: #e2e8f0;\r\n min-height: 100vh;\r\n }\r\n\r\n .bg-circle-1, .bg-circle-2 {\r\n position: fixed;\r\n border-radius: 50%;\r\n filter: blur(60px);\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .bg-circle-1 {\r\n top: -50%;\r\n right: -20%;\r\n width: 600px;\r\n height: 600px;\r\n background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);\r\n animation: float 20s ease-in-out infinite;\r\n }\r\n\r\n .bg-circle-2 {\r\n bottom: -30%;\r\n left: -10%;\r\n width: 500px;\r\n height: 500px;\r\n background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%);\r\n animation: float 25s ease-in-out infinite reverse;\r\n }\r\n\r\n @keyframes float {\r\n 0%, 100% { transform: translate(0, 0) rotate(0deg); }\r\n 33% { transform: translate(30px, -30px) rotate(5deg); }\r\n 66% { transform: translate(-20px, 20px) rotate(-5deg); }\r\n }\r\n\r\n @keyframes slideIn {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0.5; }\r\n }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n\r\n @keyframes slideUp {\r\n from { opacity: 0; transform: translateY(50px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 2rem;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n header {\r\n background: rgba(15, 23, 42, 0.8);\r\n backdrop-filter: blur(20px);\r\n border-bottom: 1px solid rgba(99, 102, 241, 0.2);\r\n padding: 1.5rem 2rem;\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .header-content {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 1rem;\r\n }\r\n\r\n .logo-section {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n }\r\n\r\n .logo {\r\n width: 50px;\r\n height: 50px;\r\n background: linear-gradient(135deg, #6366f1, #ec4899);\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);\r\n font-size: 1.5rem;\r\n font-weight: 800;\r\n color: white;\r\n }\r\n\r\n .logo-text h1 {\r\n font-size: 1.8rem;\r\n font-weight: 800;\r\n background: linear-gradient(135deg, #6366f1, #ec4899);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n margin: 0;\r\n }\r\n\r\n .logo-text p {\r\n font-size: 0.85rem;\r\n color: #94a3b8;\r\n margin: 0;\r\n }\r\n\r\n .header-actions {\r\n display: flex;\r\n gap: 0.8rem;\r\n }\r\n\r\n nav {\r\n display: flex;\r\n gap: 0.5rem;\r\n flex-wrap: wrap;\r\n margin-top: 1rem;\r\n }\r\n\r\n .nav-btn {\r\n padding: 0.7rem 1.5rem;\r\n background: transparent;\r\n border: 1px solid transparent;\r\n border-radius: 10px;\r\n color: #94a3b8;\r\n font-size: 0.95rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .nav-btn.active {\r\n background: rgba(99, 102, 241, 0.2);\r\n border-color: #6366f1;\r\n color: #6366f1;\r\n }\r\n\r\n .nav-btn:hover {\r\n color: #6366f1;\r\n }\r\n\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 1.5rem;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .stat-card {\r\n background: rgba(30, 41, 59, 0.6);\r\n backdrop-filter: blur(10px);\r\n padding: 1.5rem;\r\n border-radius: 16px;\r\n border: 1px solid rgba(99, 102, 241, 0.2);\r\n transition: all 0.3s ease;\r\n animation: slideIn 0.5s ease forwards;\r\n }\r\n\r\n .stat-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .card {\r\n background: rgba(30, 41, 59, 0.6);\r\n backdrop-filter: blur(10px);\r\n padding: 2rem;\r\n border-radius: 16px;\r\n border: 1px solid rgba(99, 102, 241, 0.2);\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .btn {\r\n padding: 0.8rem 1.5rem;\r\n border: none;\r\n border-radius: 10px;\r\n font-size: 0.95rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .btn:hover {\r\n transform: scale(1.05);\r\n }\r\n\r\n .btn-primary {\r\n background: linear-gradient(135deg, #6366f1, #8b5cf6);\r\n color: white;\r\n box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n .btn-success {\r\n background: linear-gradient(135deg, #10b981, #14b8a6);\r\n color: white;\r\n }\r\n\r\n .btn-danger {\r\n background: linear-gradient(135deg, #ef4444, #f97316);\r\n color: white;\r\n }\r\n\r\n .btn-secondary {\r\n background: rgba(99, 102, 241, 0.2);\r\n border: 1px solid #6366f1;\r\n color: #6366f1;\r\n }\r\n\r\n .btn-sm {\r\n padding: 0.5rem 1rem;\r\n font-size: 0.85rem;\r\n }\r\n\r\n .form-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 1.5rem;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .form-group {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .form-group.full-width {\r\n grid-column: 1 \/ -1;\r\n }\r\n\r\n .form-group label {\r\n margin-bottom: 0.5rem;\r\n color: #94a3b8;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n }\r\n\r\n .form-group input,\r\n .form-group select {\r\n width: 100%;\r\n padding: 0.8rem;\r\n background: rgba(30, 41, 59, 0.6);\r\n border: 1px solid rgba(99, 102, 241, 0.2);\r\n border-radius: 8px;\r\n color: #e2e8f0;\r\n font-size: 0.95rem;\r\n transition: all 0.2s ease;\r\n font-family: inherit;\r\n }\r\n\r\n .form-group input:focus,\r\n .form-group select:focus {\r\n outline: none;\r\n border-color: #6366f1;\r\n box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\r\n }\r\n\r\n .photo-upload-area {\r\n width: 150px;\r\n height: 150px;\r\n border: 2px dashed #6366f1;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n background: rgba(99, 102, 241, 0.05);\r\n transition: all 0.3s ease;\r\n margin: 0 auto;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .photo-upload-area:hover {\r\n background: rgba(99, 102, 241, 0.1);\r\n }\r\n\r\n .photo-preview {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n .staff-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n }\r\n\r\n .staff-item {\r\n background: rgba(30, 41, 59, 0.6);\r\n padding: 1.5rem;\r\n border-radius: 16px;\r\n border: 1px solid rgba(99, 102, 241, 0.2);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n transition: all 0.3s ease;\r\n animation: slideIn 0.5s ease forwards;\r\n }\r\n\r\n .staff-item:hover {\r\n transform: translateX(5px);\r\n background: rgba(51, 65, 85, 0.8);\r\n }\r\n\r\n .staff-info {\r\n display: flex;\r\n align-items: center;\r\n gap: 1.5rem;\r\n flex: 1;\r\n }\r\n\r\n .staff-photo {\r\n width: 70px;\r\n height: 70px;\r\n border-radius: 16px;\r\n object-fit: cover;\r\n border: 2px solid #6366f1;\r\n }\r\n\r\n .staff-avatar {\r\n width: 70px;\r\n height: 70px;\r\n background: linear-gradient(135deg, #6366f1, #ec4899);\r\n border-radius: 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n color: white;\r\n box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n .modal {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.7);\r\n backdrop-filter: blur(5px);\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n padding: 2rem;\r\n overflow-y: auto;\r\n }\r\n\r\n .modal.active {\r\n display: flex;\r\n }\r\n\r\n .modal-content {\r\n background: linear-gradient(135deg, #1e293b 0%, #334155 100%);\r\n border-radius: 20px;\r\n border: 1px solid rgba(99, 102, 241, 0.3);\r\n max-width: 800px;\r\n width: 100%;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\r\n animation: slideUp 0.3s ease;\r\n margin: auto;\r\n }\r\n\r\n .modal-header {\r\n padding: 2rem;\r\n border-bottom: 1px solid rgba(99, 102, 241, 0.2);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n position: sticky;\r\n top: 0;\r\n background: #1e293b;\r\n z-index: 1;\r\n }\r\n\r\n .modal-body {\r\n padding: 2rem;\r\n }\r\n\r\n .close-btn {\r\n background: rgba(239, 68, 68, 0.2);\r\n border: 1px solid #ef4444;\r\n border-radius: 8px;\r\n padding: 0.5rem;\r\n color: #ef4444;\r\n cursor: pointer;\r\n font-size: 1.2rem;\r\n border: none;\r\n }\r\n\r\n .pin-input-container {\r\n display: flex;\r\n gap: 1rem;\r\n justify-content: center;\r\n margin: 2rem 0;\r\n }\r\n\r\n .pin-digit {\r\n width: 60px;\r\n height: 60px;\r\n text-align: center;\r\n font-size: 2rem;\r\n font-weight: bold;\r\n background: rgba(30, 41, 59, 0.6);\r\n border: 2px solid rgba(99, 102, 241, 0.3);\r\n border-radius: 12px;\r\n color: #e2e8f0;\r\n }\r\n\r\n .pin-digit:focus {\r\n outline: none;\r\n border-color: #6366f1;\r\n box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);\r\n }\r\n\r\n .document-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 1rem;\r\n background: rgba(30, 41, 59, 0.6);\r\n border-radius: 10px;\r\n border: 1px solid rgba(99, 102, 241, 0.2);\r\n margin-bottom: 0.8rem;\r\n }\r\n\r\n .alert {\r\n position: fixed;\r\n top: 6rem;\r\n right: 2rem;\r\n padding: 1rem 1.5rem;\r\n background: rgba(30, 41, 59, 0.95);\r\n backdrop-filter: blur(10px);\r\n border-radius: 10px;\r\n border: 1px solid rgba(99, 102, 241, 0.3);\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\r\n display: flex;\r\n align-items: center;\r\n gap: 0.8rem;\r\n z-index: 1001;\r\n animation: slideIn 0.3s ease;\r\n max-width: 400px;\r\n }\r\n\r\n .alert.success { border-color: #10b981; }\r\n .alert.error { border-color: #ef4444; }\r\n\r\n .hidden { display: none !important; }\r\n\r\n table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 1rem;\r\n }\r\n\r\n table th,\r\n table td {\r\n padding: 1rem;\r\n text-align: left;\r\n border-bottom: 1px solid rgba(99, 102, 241, 0.2);\r\n }\r\n\r\n table th {\r\n background: rgba(99, 102, 241, 0.1);\r\n color: #6366f1;\r\n font-weight: 700;\r\n position: sticky;\r\n top: 0;\r\n }\r\n\r\n table tr:hover {\r\n background: rgba(99, 102, 241, 0.05);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .form-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .container {\r\n padding: 1rem;\r\n }\r\n .staff-item {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 1rem;\r\n }\r\n .staff-info {\r\n width: 100%;\r\n }\r\n .pin-input-container {\r\n gap: 0.5rem;\r\n }\r\n .pin-digit {\r\n width: 50px;\r\n height: 50px;\r\n font-size: 1.5rem;\r\n }\r\n }\r\n\r\n \/* Dark Mode Styles *\/\r\n body.dark-mode {\r\n background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #1a1a1a 100%);\r\n color: #e2e8f0;\r\n }\r\n\r\n body.dark-mode .bg-circle-1 {\r\n background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);\r\n }\r\n\r\n body.dark-mode .bg-circle-2 {\r\n background: radial-gradient(circle, rgba(236, 72, 153, 0.15) 0%, transparent 70%);\r\n }\r\n\r\n body.dark-mode header {\r\n background: rgba(0, 0, 0, 0.9);\r\n border-bottom: 1px solid rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n body.dark-mode .stat-card,\r\n body.dark-mode .card {\r\n background: rgba(10, 10, 10, 0.8);\r\n border: 1px solid rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n body.dark-mode .staff-item {\r\n background: rgba(10, 10, 10, 0.8);\r\n }\r\n\r\n body.dark-mode .staff-item:hover {\r\n background: rgba(30, 30, 30, 0.9);\r\n }\r\n\r\n body.dark-mode .modal-content {\r\n background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);\r\n border: 1px solid rgba(99, 102, 241, 0.4);\r\n }\r\n\r\n body.dark-mode .modal-header {\r\n background: #0a0a0a;\r\n border-bottom: 1px solid rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n body.dark-mode .form-group input,\r\n body.dark-mode .form-group select,\r\n body.dark-mode .form-group textarea {\r\n background: rgba(10, 10, 10, 0.8);\r\n border: 1px solid rgba(99, 102, 241, 0.3);\r\n color: #e2e8f0;\r\n }\r\n\r\n body.dark-mode .nav-btn.active {\r\n background: rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n body.dark-mode .document-item {\r\n background: rgba(10, 10, 10, 0.8);\r\n border: 1px solid rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n body.dark-mode table th,\r\n body.dark-mode table td {\r\n border-bottom: 1px solid rgba(99, 102, 241, 0.2);\r\n }\r\n\r\n body.dark-mode table th {\r\n background: rgba(99, 102, 241, 0.2);\r\n }\r\n\r\n body.dark-mode table tr:hover {\r\n background: rgba(99, 102, 241, 0.1);\r\n }\r\n\r\n \/* Task Styles *\/\r\n .task-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 0.8rem;\r\n padding: 0.8rem;\r\n background: rgba(30, 41, 59, 0.6);\r\n border-radius: 8px;\r\n border: 1px solid rgba(99, 102, 241, 0.2);\r\n margin-bottom: 0.8rem;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n body.dark-mode .task-item {\r\n background: rgba(10, 10, 10, 0.8);\r\n border: 1px solid rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n .task-item:hover {\r\n background: rgba(51, 65, 85, 0.8);\r\n }\r\n\r\n .task-checkbox {\r\n width: 20px;\r\n height: 20px;\r\n cursor: pointer;\r\n flex-shrink: 0;\r\n margin-top: 0.2rem;\r\n }\r\n\r\n .task-content {\r\n flex: 1;\r\n }\r\n\r\n .task-title {\r\n font-weight: 600;\r\n color: #e2e8f0;\r\n margin-bottom: 0.3rem;\r\n }\r\n\r\n .task-item.completed .task-title {\r\n text-decoration: line-through;\r\n opacity: 0.6;\r\n }\r\n\r\n .progress-bar-container {\r\n width: 100%;\r\n height: 8px;\r\n background: rgba(100, 116, 139, 0.3);\r\n border-radius: 4px;\r\n overflow: hidden;\r\n margin-top: 0.5rem;\r\n }\r\n\r\n .progress-bar-fill {\r\n height: 100%;\r\n background: linear-gradient(90deg, #6366f1, #8b5cf6);\r\n border-radius: 4px;\r\n transition: width 0.3s ease;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"bg-circle-1\"><\/div>\r\n <div class=\"bg-circle-2\"><\/div>\r\n\r\n <header>\r\n <div class=\"header-content\">\r\n <div class=\"logo-section\">\r\n <div class=\"logo\">\ud83d\udc65<\/div>\r\n <div class=\"logo-text\">\r\n <h1>Staff Manager Pro<\/h1>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"header-actions\" id=\"adminActions\" style=\"display: none;\">\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"exportData()\">\ud83d\udce5 Export<\/button>\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"importData()\">\ud83d\udce4 Import<\/button>\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"clearAllData()\">\ud83d\uddd1\ufe0f Clear All<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <nav class=\"container\">\r\n <button class=\"nav-btn active\" data-view=\"attendance\" onclick=\"switchView('attendance')\">\u23f0 Attendance<\/button>\r\n <button class=\"nav-btn\" data-view=\"admin\" onclick=\"openAdminLogin()\" style=\"background: linear-gradient(135deg, #ef4444, #f97316); color: white; border: none;\">\ud83d\udd10 Admin Panel<\/button>\r\n <\/nav>\r\n <\/header>\r\n\r\n <main class=\"container\" id=\"mainContent\"><\/main>\r\n\r\n <div id=\"modal\" class=\"modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h2 id=\"modalTitle\">Modal<\/h2>\r\n <button class=\"close-btn\" onclick=\"closeModal()\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"modal-body\" id=\"modalBody\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <input type=\"file\" id=\"importFileInput\" accept=\".json\" style=\"display: none;\" onchange=\"handleImportFile(event)\">\r\n\r\n <script>\r\n \/\/ ============================================\r\n \/\/ DATA MANAGEMENT\r\n \/\/ ============================================\r\n \r\n const STORAGE_KEY = 'staffManagerData';\r\n const SETTINGS_KEY = 'staffManagerSettings';\r\n const ADMIN_PASSWORD_KEY = 'adminPassword';\r\n \r\n let staffData = loadFromStorage() || [];\r\n let settings = loadSettings() || {\r\n ownerNumber: '',\r\n ownerEmail: '',\r\n autoBackup: true,\r\n whatsappDaily: true,\r\n darkMode: false,\r\n theme: {\r\n primary: '#6366f1',\r\n secondary: '#ec4899',\r\n success: '#10b981',\r\n danger: '#ef4444',\r\n warning: '#f59e0b'\r\n }\r\n };\r\n let adminPassword = localStorage.getItem(ADMIN_PASSWORD_KEY) || 'Ruz#1917';\r\n let currentView = 'attendance';\r\n let isAdminLoggedIn = false;\r\n let notifications = [];\r\n\r\n function saveToStorage() {\r\n try {\r\n localStorage.setItem(STORAGE_KEY, JSON.stringify(staffData));\r\n return true;\r\n } catch (error) {\r\n console.error('Save error:', error);\r\n showAlert('Failed to save data', 'error');\r\n return false;\r\n }\r\n }\r\n\r\n function loadFromStorage() {\r\n try {\r\n const data = localStorage.getItem(STORAGE_KEY);\r\n return data ? JSON.parse(data) : null;\r\n } catch (error) {\r\n console.error('Load error:', error);\r\n return null;\r\n }\r\n }\r\n\r\n function loadSettings() {\r\n try {\r\n const data = localStorage.getItem(SETTINGS_KEY);\r\n return data ? JSON.parse(data) : null;\r\n } catch (error) {\r\n console.error('Settings load error:', error);\r\n return null;\r\n }\r\n }\r\n\r\n function saveSettings() {\r\n try {\r\n localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));\r\n return true;\r\n } catch (error) {\r\n console.error('Settings save error:', error);\r\n return false;\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ NOTIFICATION SYSTEM\r\n \/\/ ============================================\r\n\r\n function addNotification(message, type = 'info', staffName = null) {\r\n const notification = {\r\n id: Date.now(),\r\n message: message,\r\n type: type,\r\n staffName: staffName,\r\n timestamp: new Date().toISOString(),\r\n read: false\r\n };\r\n notifications.unshift(notification);\r\n \r\n \/\/ Keep only last 50 notifications\r\n if (notifications.length > 50) {\r\n notifications = notifications.slice(0, 50);\r\n }\r\n \r\n showNotificationAlert(notification);\r\n updateNotificationBadge();\r\n }\r\n\r\n function showNotificationAlert(notification) {\r\n const alert = document.createElement('div');\r\n alert.className = `alert ${notification.type}`;\r\n alert.style.animation = 'slideIn 0.3s ease';\r\n \r\n const icon = notification.type === 'success' ? '\u2713' : \r\n notification.type === 'warning' ? '\u26a0' : \r\n notification.type === 'error' ? '\u2715' : '\u2139';\r\n \r\n alert.innerHTML = `\r\n <span style=\"font-size: 1.5rem;\">${icon}<\/span>\r\n <div>\r\n ${notification.staffName ? `<strong>${notification.staffName}<\/strong><br>` : ''}\r\n <span>${notification.message}<\/span>\r\n <\/div>\r\n `;\r\n document.body.appendChild(alert);\r\n \r\n setTimeout(() => {\r\n alert.style.animation = 'slideIn 0.3s ease reverse';\r\n setTimeout(() => alert.remove(), 300);\r\n }, 4000);\r\n }\r\n\r\n function updateNotificationBadge() {\r\n const unreadCount = notifications.filter(n => !n.read).length;\r\n const badge = document.getElementById('notificationBadge');\r\n if (badge) {\r\n badge.textContent = unreadCount;\r\n badge.style.display = unreadCount > 0 ? 'flex' : 'none';\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ PERFORMANCE METRICS\r\n \/\/ ============================================\r\n\r\n function calculateStaffPerformance(staff, days = 30) {\r\n const startDate = new Date();\r\n startDate.setDate(startDate.getDate() - days);\r\n \r\n const relevantRecords = (staff.punchRecords || []).filter(r => \r\n new Date(r.punchIn) >= startDate\r\n );\r\n \r\n if (relevantRecords.length === 0) {\r\n return {\r\n attendanceRate: 0,\r\n onTimeRate: 0,\r\n totalHours: 0,\r\n lateDays: 0,\r\n totalDays: 0,\r\n avgHoursPerDay: 0,\r\n rating: 0\r\n };\r\n }\r\n \r\n const [shiftStartHour, shiftStartMin] = staff.shiftStart.split(':').map(Number);\r\n const shiftStartMinutes = shiftStartHour * 60 + shiftStartMin;\r\n \r\n let onTimeDays = 0;\r\n let lateDays = 0;\r\n let totalMinutes = 0;\r\n \r\n relevantRecords.forEach(record => {\r\n const punchInTime = new Date(record.punchIn);\r\n const punchInMinutes = punchInTime.getHours() * 60 + punchInTime.getMinutes();\r\n \r\n if (punchInMinutes <= shiftStartMinutes) {\r\n onTimeDays++;\r\n } else {\r\n lateDays++;\r\n }\r\n \r\n if (record.punchOut) {\r\n const duration = (new Date(record.punchOut) - new Date(record.punchIn)) \/ (1000 * 60);\r\n totalMinutes += duration;\r\n }\r\n });\r\n \r\n const totalDays = relevantRecords.length;\r\n const attendanceRate = (totalDays \/ days) * 100;\r\n const onTimeRate = totalDays > 0 ? (onTimeDays \/ totalDays) * 100 : 0;\r\n const avgHoursPerDay = totalDays > 0 ? (totalMinutes \/ 60) \/ totalDays : 0;\r\n \r\n \/\/ Calculate rating (1-5 stars)\r\n let rating = 0;\r\n if (attendanceRate >= 95 && onTimeRate >= 90) rating = 5;\r\n else if (attendanceRate >= 85 && onTimeRate >= 80) rating = 4;\r\n else if (attendanceRate >= 75 && onTimeRate >= 70) rating = 3;\r\n else if (attendanceRate >= 60 && onTimeRate >= 60) rating = 2;\r\n else rating = 1;\r\n \r\n return {\r\n attendanceRate: attendanceRate.toFixed(1),\r\n onTimeRate: onTimeRate.toFixed(1),\r\n totalHours: (totalMinutes \/ 60).toFixed(1),\r\n lateDays: lateDays,\r\n totalDays: totalDays,\r\n avgHoursPerDay: avgHoursPerDay.toFixed(1),\r\n rating: rating\r\n };\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ WHATSAPP INTEGRATION\r\n \/\/ ============================================\r\n\r\n function generateDailyReport() {\r\n const today = new Date().toDateString();\r\n const presentStaff = staffData.filter(staff => {\r\n return (staff.punchRecords || []).some(r => \r\n new Date(r.punchIn).toDateString() === today\r\n );\r\n });\r\n \r\n const totalEarnings = presentStaff.reduce((sum, staff) => {\r\n const todayRecords = (staff.punchRecords || []).filter(r => \r\n new Date(r.punchIn).toDateString() === today\r\n );\r\n todayRecords.forEach(record => {\r\n const earnings = calculateRealTimeEarnings(staff, record);\r\n sum += parseFloat(earnings.earnings);\r\n });\r\n return sum;\r\n }, 0);\r\n \r\n return {\r\n date: new Date().toLocaleDateString('en-IN'),\r\n totalStaff: staffData.length,\r\n presentStaff: presentStaff.length,\r\n absentStaff: staffData.length - presentStaff.length,\r\n totalEarnings: totalEarnings.toFixed(2),\r\n staff: presentStaff.map(s => {\r\n const todayRecords = (s.punchRecords || []).filter(r => \r\n new Date(r.punchIn).toDateString() === today\r\n );\r\n let hours = 0;\r\n todayRecords.forEach(r => {\r\n const earnings = calculateRealTimeEarnings(s, r);\r\n hours += parseFloat(earnings.hours);\r\n });\r\n return {\r\n name: s.name,\r\n hours: hours.toFixed(1)\r\n };\r\n })\r\n };\r\n }\r\n\r\n function sendWhatsAppReport() {\r\n if (!settings.ownerNumber || !settings.whatsappDaily) return;\r\n \r\n const report = generateDailyReport();\r\n \r\n let message = `\ud83d\udcca *Daily Attendance Report*\\n`;\r\n message += `\ud83d\udcc5 Date: ${report.date}\\n\\n`;\r\n message += `\ud83d\udc65 Total Staff: ${report.totalStaff}\\n`;\r\n message += `\u2705 Present: ${report.presentStaff}\\n`;\r\n message += `\u274c Absent: ${report.absentStaff}\\n`;\r\n message += `\ud83d\udcb0 Total Earnings: \u20b9${report.totalEarnings}\\n\\n`;\r\n \r\n if (report.staff.length > 0) {\r\n message += `*Staff Details:*\\n`;\r\n report.staff.forEach(s => {\r\n message += `\u2022 ${s.name}: ${s.hours}h\\n`;\r\n });\r\n }\r\n \r\n message += `\\n_Staff Manager Pro_`;\r\n \r\n \/\/ Open WhatsApp with pre-filled message\r\n const whatsappUrl = `https:\/\/wa.me\/${settings.ownerNumber}?text=${encodeURIComponent(message)}`;\r\n \r\n \/\/ Create hidden link and click\r\n const link = document.createElement('a');\r\n link.href = whatsappUrl;\r\n link.target = '_blank';\r\n link.click();\r\n \r\n addNotification('WhatsApp report opened', 'success');\r\n }\r\n\r\n function checkDailyReport() {\r\n const lastSent = localStorage.getItem('lastWhatsAppReport');\r\n const today = new Date().toDateString();\r\n \r\n if (lastSent !== today && settings.whatsappDaily && settings.ownerNumber) {\r\n \/\/ Check if it's end of day (after 6 PM)\r\n const hour = new Date().getHours();\r\n if (hour >= 18) {\r\n localStorage.setItem('lastWhatsAppReport', today);\r\n if (confirm('Send today\\'s WhatsApp report to owner?')) {\r\n sendWhatsAppReport();\r\n }\r\n }\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ BACKUP & RESTORE\r\n \/\/ ============================================\r\n\r\n function createBackup() {\r\n const backup = {\r\n version: '1.0',\r\n timestamp: new Date().toISOString(),\r\n data: staffData,\r\n settings: settings\r\n };\r\n \r\n const backupStr = JSON.stringify(backup, null, 2);\r\n const blob = new Blob([backupStr], { type: 'application\/json' });\r\n const url = URL.createObjectURL(blob);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = `staff-backup-${new Date().toISOString().split('T')[0]}.json`;\r\n link.click();\r\n URL.revokeObjectURL(url);\r\n \r\n addNotification('Backup created successfully', 'success');\r\n \r\n \/\/ Save to localStorage backup history\r\n saveBackupHistory(backup);\r\n }\r\n\r\n function saveBackupHistory(backup) {\r\n let history = JSON.parse(localStorage.getItem('backupHistory') || '[]');\r\n history.unshift({\r\n timestamp: backup.timestamp,\r\n staffCount: staffData.length,\r\n size: JSON.stringify(backup).length\r\n });\r\n \r\n \/\/ Keep only last 30 backups\r\n history = history.slice(0, 30);\r\n localStorage.setItem('backupHistory', JSON.stringify(history));\r\n }\r\n\r\n function restoreBackup(file) {\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n try {\r\n const backup = JSON.parse(e.target.result);\r\n \r\n if (!backup.version || !backup.data) {\r\n showAlert('Invalid backup file', 'error');\r\n return;\r\n }\r\n \r\n if (confirm(`Restore backup from ${new Date(backup.timestamp).toLocaleString()}?\\nThis will replace all current data!`)) {\r\n staffData = backup.data;\r\n if (backup.settings) {\r\n settings = backup.settings;\r\n saveSettings();\r\n }\r\n saveToStorage();\r\n addNotification('Backup restored successfully', 'success');\r\n switchView(currentView);\r\n }\r\n } catch (error) {\r\n showAlert('Error restoring backup', 'error');\r\n console.error(error);\r\n }\r\n };\r\n reader.readAsText(file);\r\n }\r\n\r\n function autoBackup() {\r\n if (!settings.autoBackup) return;\r\n \r\n const lastBackup = localStorage.getItem('lastAutoBackup');\r\n const today = new Date().toDateString();\r\n \r\n if (lastBackup !== today) {\r\n const backup = {\r\n version: '1.0',\r\n timestamp: new Date().toISOString(),\r\n data: staffData,\r\n settings: settings\r\n };\r\n \r\n localStorage.setItem('autoBackup', JSON.stringify(backup));\r\n localStorage.setItem('lastAutoBackup', today);\r\n saveBackupHistory(backup);\r\n \r\n console.log('Auto backup completed');\r\n }\r\n }\r\n\r\n function emailBackup() {\r\n if (!settings.ownerEmail) {\r\n showAlert('Owner email not configured', 'error');\r\n return;\r\n }\r\n \r\n const report = generateDailyReport();\r\n const subject = `Staff Report - ${report.date}`;\r\n \r\n let body = `Daily Attendance Report\\n`;\r\n body += `Date: ${report.date}\\n\\n`;\r\n body += `Total Staff: ${report.totalStaff}\\n`;\r\n body += `Present: ${report.presentStaff}\\n`;\r\n body += `Absent: ${report.absentStaff}\\n`;\r\n body += `Total Earnings: \u20b9${report.totalEarnings}\\n\\n`;\r\n \r\n if (report.staff.length > 0) {\r\n body += `Staff Details:\\n`;\r\n report.staff.forEach(s => {\r\n body += `${s.name}: ${s.hours} hours\\n`;\r\n });\r\n }\r\n \r\n const mailtoLink = `mailto:${settings.ownerEmail}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;\r\n window.location.href = mailtoLink;\r\n \r\n addNotification('Email report opened', 'success');\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ ADMIN AUTHENTICATION\r\n \/\/ ============================================\r\n \r\n function openAdminLogin() {\r\n if (isAdminLoggedIn) {\r\n switchView('admin');\r\n return;\r\n }\r\n \r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = '\ud83d\udd10 Admin Login';\r\n document.getElementById('modalBody').innerHTML = `\r\n <div style=\"text-align: center; padding: 2rem;\">\r\n <div style=\"font-size: 4rem; margin-bottom: 1rem;\">\ud83d\udd10<\/div>\r\n <h3 style=\"margin-bottom: 0.5rem; color: #6366f1;\">Administrator Access<\/h3>\r\n <p style=\"color: #94a3b8; margin-bottom: 2rem;\">Enter admin password to continue<\/p>\r\n \r\n <form onsubmit=\"verifyAdminPassword(event)\" style=\"max-width: 400px; margin: 0 auto;\">\r\n <div class=\"form-group\">\r\n <input \r\n type=\"password\" \r\n id=\"adminPassword\" \r\n placeholder=\"Enter password\" \r\n style=\"text-align: center; font-size: 1.2rem; padding: 1rem;\"\r\n autofocus\r\n required\r\n >\r\n <\/div>\r\n <div style=\"display: flex; gap: 1rem; margin-top: 2rem;\">\r\n <button type=\"button\" class=\"btn btn-secondary\" style=\"flex: 1;\" onclick=\"closeModal()\">Cancel<\/button>\r\n <button type=\"submit\" class=\"btn btn-primary\" style=\"flex: 1;\">Login<\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n `;\r\n modal.classList.add('active');\r\n setTimeout(() => document.getElementById('adminPassword').focus(), 100);\r\n }\r\n\r\n function verifyAdminPassword(event) {\r\n event.preventDefault();\r\n const password = document.getElementById('adminPassword')?.value;\r\n \r\n if (password === adminPassword) {\r\n isAdminLoggedIn = true;\r\n document.getElementById('adminActions').style.display = 'flex';\r\n \r\n \/\/ FIX: Force close modal\r\n const modal = document.getElementById('modal');\r\n modal.classList.remove('active');\r\n modal.style.display = 'none';\r\n \r\n showAlert('Admin login successful!', 'success');\r\n setTimeout(() => switchView('admin'), 300);\r\n } else {\r\n showAlert('Incorrect password!', 'error');\r\n document.getElementById('adminPassword').value = '';\r\n document.getElementById('adminPassword').focus();\r\n }\r\n}\r\n\r\n function adminLogout() {\r\n if (confirm('Logout from admin panel?')) {\r\n isAdminLoggedIn = false;\r\n document.getElementById('adminActions').style.display = 'none';\r\n showAlert('Logged out successfully!', 'success');\r\n switchView('attendance');\r\n }\r\n }\r\n\r\n function renderAdminPanel(container) {\r\n if (!isAdminLoggedIn) {\r\n openAdminLogin();\r\n return;\r\n }\r\n \r\n container.innerHTML = `\r\n <div>\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h2 style=\"font-size: 2rem; font-weight: 700;\">\ud83d\udd10 Admin Panel<\/h2>\r\n <p style=\"color: #94a3b8;\">Manage all system operations<\/p>\r\n <\/div>\r\n <button class=\"btn btn-danger\" onclick=\"adminLogout()\">\ud83d\udeaa Logout<\/button>\r\n <\/div>\r\n \r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;\">\r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2)); border: 1px solid #6366f1; cursor: pointer;\" onclick=\"switchView('dashboard')\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);\">\ud83d\udcca<\/div>\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.2rem; font-weight: 700;\">Dashboard<\/h3>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">View statistics & overview<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(20, 184, 166, 0.2)); border: 1px solid #10b981; cursor: pointer;\" onclick=\"switchView('staff')\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #10b981, #14b8a6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);\">\ud83d\udc65<\/div>\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.2rem; font-weight: 700;\">Staff Management<\/h3>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">Add, edit & delete staff<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(244, 63, 94, 0.2)); border: 1px solid #ec4899; cursor: pointer;\" onclick=\"switchView('salary')\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #ec4899, #f43f5e); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4);\">\ud83d\udcb0<\/div>\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.2rem; font-weight: 700;\">Payments<\/h3>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">View payments & manage advance\/fine<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 146, 60, 0.2)); border: 1px solid #f59e0b; cursor: pointer;\" onclick=\"switchView('history')\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #f59e0b, #fb923c); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);\">\ud83d\udccb<\/div>\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.2rem; font-weight: 700;\">Punch History<\/h3>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">View all punch records<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.2)); border: 1px solid #8b5cf6; cursor: pointer;\" onclick=\"switchView('performance')\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #8b5cf6, #a855f7); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);\">\ud83d\udcc8<\/div>\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.2rem; font-weight: 700;\">Performance<\/h3>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">Staff performance metrics<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(6, 182, 212, 0.2)); border: 1px solid #14b8a6; cursor: pointer;\" onclick=\"switchView('notifications')\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #14b8a6, #06b6d4); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 8px 20px rgba(20, 184, 166, 0.4); position: relative;\">\r\n \ud83d\udd14\r\n <span id=\"notificationBadge\" style=\"position: absolute; top: -5px; right: -5px; background: #ef4444; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; display: none;\">0<\/span>\r\n <\/div>\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.2rem; font-weight: 700;\">Notifications<\/h3>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">View all system alerts<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(100, 116, 139, 0.2), rgba(71, 85, 105, 0.2)); border: 1px solid #64748b; cursor: pointer;\" onclick=\"switchView('settings')\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #64748b, #475569); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 8px 20px rgba(100, 116, 139, 0.4);\">\u2699\ufe0f<\/div>\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.2rem; font-weight: 700;\">Settings<\/h3>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">Configure system settings<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1)); border: 1px solid rgba(99, 102, 241, 0.3);\">\r\n <h3 style=\"margin-bottom: 1.5rem; color: #6366f1;\">\ud83d\udee0\ufe0f Data Management<\/h3>\r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;\">\r\n <button class=\"btn btn-primary\" style=\"padding: 1rem;\" onclick=\"exportData()\">\r\n <span style=\"font-size: 1.2rem;\">\ud83d\udce5<\/span>\r\n <span>Export Data<\/span>\r\n <\/button>\r\n <button class=\"btn btn-secondary\" style=\"padding: 1rem;\" onclick=\"importData()\">\r\n <span style=\"font-size: 1.2rem;\">\ud83d\udce4<\/span>\r\n <span>Import Data<\/span>\r\n <\/button>\r\n <button class=\"btn btn-danger\" style=\"padding: 1rem;\" onclick=\"clearAllData()\">\r\n <span style=\"font-size: 1.2rem;\">\ud83d\uddd1\ufe0f<\/span>\r\n <span>Clear All Data<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3);\">\r\n <h3 style=\"margin-bottom: 1rem; color: #ef4444;\">\ud83d\udd10 Security Information<\/h3>\r\n <ul style=\"margin-left: 1.5rem; color: #e2e8f0; line-height: 1.8;\">\r\n <li><strong>Admin Password:<\/strong> ${adminPassword === 'Ruz#1917' ? 'Ruz#1917 (Default)' : '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022 (Custom - Changed from default)'}<\/li>\r\n <li><strong>Access Level:<\/strong> Full system control<\/li>\r\n <li><strong>Staff Access:<\/strong> Attendance only (no password required)<\/li>\r\n <li><strong>Auto Logout:<\/strong> Session expires on page refresh<\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n ${renderQuickStats()}\r\n <\/div>\r\n `;\r\n }\r\n\r\n function renderQuickStats() {\r\n const today = new Date().toDateString();\r\n const presentToday = staffData.filter(staff => {\r\n return (staff.punchRecords || []).some(r => \r\n new Date(r.punchIn).toDateString() === today && !r.punchOut\r\n );\r\n }).length;\r\n \r\n const totalEarningsToday = staffData.reduce((sum, staff) => {\r\n const todayRecords = (staff.punchRecords || []).filter(r => \r\n new Date(r.punchIn).toDateString() === today\r\n );\r\n todayRecords.forEach(record => {\r\n const earnings = calculateRealTimeEarnings(staff, record);\r\n sum += parseFloat(earnings.earnings);\r\n });\r\n return sum;\r\n }, 0);\r\n \r\n return `\r\n <div class=\"stats-grid\" style=\"margin-top: 2rem;\">\r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Total Staff<\/p>\r\n <h3 style=\"font-size: 2.2rem; font-weight: 800; color: #6366f1;\">${staffData.length}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);\">\ud83d\udc65<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Present Today<\/p>\r\n <h3 style=\"font-size: 2.2rem; font-weight: 800; color: #10b981;\">${presentToday}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #10b981, #14b8a6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);\">\u2713<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Today's Earnings<\/p>\r\n <h3 style=\"font-size: 2.2rem; font-weight: 800; color: #ec4899;\">\u20b9${totalEarningsToday.toFixed(2)}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #ec4899, #f43f5e); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4);\">\ud83d\udcb0<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ VIEW MANAGEMENT\r\n \/\/ ============================================\r\n \r\n function switchView(view) {\r\n \/\/ Restrict non-admin views\r\n if (!isAdminLoggedIn && view !== 'attendance' && view !== 'admin') {\r\n showAlert('Admin access required!', 'error');\r\n return;\r\n }\r\n \r\n currentView = view;\r\n document.querySelectorAll('.nav-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n if (btn.dataset.view === view) btn.classList.add('active');\r\n });\r\n \r\n const mainContent = document.getElementById('mainContent');\r\n switch(view) {\r\n case 'dashboard': renderDashboard(mainContent); break;\r\n case 'staff': renderStaffView(mainContent); break;\r\n case 'attendance': renderAttendanceView(mainContent); break;\r\n case 'salary': renderSalaryView(mainContent); break;\r\n case 'history': renderHistoryView(mainContent); break;\r\n case 'admin': renderAdminPanel(mainContent); break;\r\n case 'settings': renderSettingsView(mainContent); break;\r\n case 'performance': renderPerformanceView(mainContent); break;\r\n case 'notifications': renderNotificationsView(mainContent); break;\r\n }\r\n }\r\n\r\n function renderDashboard(container) {\r\n const today = new Date().toDateString();\r\n const presentToday = staffData.filter(staff => {\r\n return (staff.punchRecords || []).some(r => \r\n new Date(r.punchIn).toDateString() === today && !r.punchOut\r\n );\r\n }).length;\r\n \r\n container.innerHTML = `\r\n <div>\r\n <h2 style=\"font-size: 2rem; font-weight: 700; margin-bottom: 2rem;\">Dashboard Overview<\/h2>\r\n \r\n <div class=\"stats-grid\">\r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Total Staff<\/p>\r\n <h3 style=\"font-size: 2.2rem; font-weight: 800; color: #6366f1;\">${staffData.length}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);\">\ud83d\udc65<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Present Today<\/p>\r\n <h3 style=\"font-size: 2.2rem; font-weight: 800; color: #10b981;\">${presentToday}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #10b981, #14b8a6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);\">\u2713<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Absent Today<\/p>\r\n <h3 style=\"font-size: 2.2rem; font-weight: 800; color: #ef4444;\">${staffData.length - presentToday}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #ef4444, #f97316); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);\">\u26a0<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <h3 style=\"margin-bottom: 1.5rem;\">Quick Actions<\/h3>\r\n <div style=\"display: flex; gap: 1rem; flex-wrap: wrap;\">\r\n <button class=\"btn btn-primary\" onclick=\"openAddStaffModal()\">\u2795 Add Staff<\/button>\r\n <button class=\"btn btn-success\" onclick=\"openPunchModal()\">\ud83d\udd12 Punch In\/Out<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"switchView('salary')\">\ud83d\udcb0 Calculate Salary<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"exportData()\">\ud83d\udce5 Export Data<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n ${staffData.length === 0 ? `\r\n <div class=\"card\" style=\"text-align: center; padding: 3rem;\">\r\n <div style=\"font-size: 4rem; margin-bottom: 1rem;\">\ud83d\udc65<\/div>\r\n <h3 style=\"margin-bottom: 0.5rem;\">No Staff Members Yet<\/h3>\r\n <p style=\"color: #94a3b8; margin-bottom: 1.5rem;\">Get started by adding your first staff member<\/p>\r\n <button class=\"btn btn-primary\" onclick=\"openAddStaffModal()\">\u2795 Add First Staff<\/button>\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n `;\r\n }\r\n\r\n function renderStaffView(container) {\r\n container.innerHTML = `\r\n <div>\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;\">\r\n <h2 style=\"font-size: 2rem; font-weight: 700;\">Staff Management<\/h2>\r\n <button class=\"btn btn-primary\" onclick=\"openAddStaffModal()\">\u2795 Add Staff<\/button>\r\n <\/div>\r\n \r\n <div class=\"staff-list\">\r\n ${staffData.length === 0 ? `\r\n <div class=\"card\" style=\"text-align: center; padding: 3rem;\">\r\n <div style=\"font-size: 4rem; margin-bottom: 1rem;\">\ud83d\udc65<\/div>\r\n <p style=\"color: #94a3b8; margin-bottom: 1rem;\">No staff members yet<\/p>\r\n <button class=\"btn btn-primary\" onclick=\"openAddStaffModal()\">Add First Staff<\/button>\r\n <\/div>\r\n ` : staffData.map((staff, i) => `\r\n <div class=\"staff-item\" style=\"animation-delay: ${i * 0.05}s;\">\r\n <div class=\"staff-info\">\r\n ${staff.photo ? \r\n `<img decoding=\"async\" src=\"${staff.photo}\" class=\"staff-photo\" alt=\"${staff.name}\">` :\r\n `<div class=\"staff-avatar\">${staff.name.charAt(0).toUpperCase()}<\/div>`\r\n }\r\n <div style=\"flex: 1;\">\r\n <h4 style=\"font-size: 1.3rem; font-weight: 700; margin-bottom: 0.3rem;\">${staff.name}<\/h4>\r\n <p style=\"color: #94a3b8; margin-bottom: 0.5rem;\">\r\n \ud83d\udcf1 ${staff.whatsapp}\r\n <\/p>\r\n <p style=\"color: #6366f1; font-size: 0.9rem; margin-bottom: 0.3rem;\">\r\n \ud83d\udcb0 ${staff.wageType}: \u20b9${staff.rate} \u2022 \u23f0 ${formatTimeAMPM(staff.shiftStart)} - ${formatTimeAMPM(staff.shiftEnd)}\r\n ${isNightShift(staff.shiftStart, staff.shiftEnd) ? '<span style=\"background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.7rem; margin-left: 0.3rem;\">\ud83c\udf19 Night<\/span>' : ''}\r\n <\/p>\r\n <p style=\"color: #ec4899; font-size: 0.85rem;\">\r\n \ud83d\udd12 PIN: ${staff.pin} \u2022 \ud83d\udcc4 Docs: ${(staff.documents || []).length}\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div style=\"display: flex; gap: 0.5rem; flex-wrap: wrap;\">\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"viewStaffDetails(${staff.id})\">\ud83d\udc41\ufe0f View<\/button>\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"editStaff(${staff.id})\">\u270f\ufe0f Edit<\/button>\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"deleteStaff(${staff.id})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n function renderAttendanceView(container) {\r\n const today = new Date().toDateString();\r\n \r\n \/\/ Check for auto punch out\r\n checkAutoPunchOut();\r\n \r\n container.innerHTML = `\r\n <div>\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h2 style=\"font-size: 2rem; font-weight: 700;\">Attendance Tracking<\/h2>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem;\">Auto punch-out at shift end time \u2022 Real-time earnings<\/p>\r\n <\/div>\r\n <button class=\"btn btn-success\" onclick=\"openPunchModal()\">\ud83d\udd12 Punch In\/Out<\/button>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <h3 style=\"margin-bottom: 1.5rem;\">Today's Status - ${new Date().toLocaleDateString('en-IN', {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'})}<\/h3>\r\n <div class=\"staff-list\">\r\n ${staffData.length === 0 ? `\r\n <div style=\"text-align: center; padding: 2rem; color: #94a3b8;\">\r\n <p>No staff members to track<\/p>\r\n <\/div>\r\n ` : staffData.map((staff, i) => {\r\n const todayRecords = (staff.punchRecords || []).filter(r => \r\n new Date(r.punchIn).toDateString() === today\r\n );\r\n const activeRecord = todayRecords.find(r => !r.punchOut);\r\n \r\n \/\/ Calculate total worked time for today\r\n const totalMinutes = todayRecords.reduce((sum, r) => {\r\n if (r.punchOut) {\r\n return sum + (new Date(r.punchOut) - new Date(r.punchIn)) \/ (1000 * 60);\r\n }\r\n return sum;\r\n }, 0);\r\n \r\n const totalHours = (totalMinutes \/ 60).toFixed(2);\r\n \r\n \/\/ Calculate current session earnings if active\r\n const currentEarnings = activeRecord ? calculateRealTimeEarnings(staff, activeRecord) : null;\r\n \r\n \/\/ Calculate total earnings for today\r\n let totalEarnings = 0;\r\n todayRecords.forEach(r => {\r\n const earnings = calculateRealTimeEarnings(staff, r);\r\n totalEarnings += parseFloat(earnings.earnings);\r\n });\r\n \r\n return `\r\n <div class=\"staff-item\" style=\"animation-delay: ${i * 0.05}s;\">\r\n <div class=\"staff-info\">\r\n ${staff.photo ? \r\n `<img decoding=\"async\" src=\"${staff.photo}\" class=\"staff-photo\" alt=\"${staff.name}\">` :\r\n `<div class=\"staff-avatar\">${staff.name.charAt(0).toUpperCase()}<\/div>`\r\n }\r\n <div style=\"flex: 1;\">\r\n <h4 style=\"font-size: 1.2rem; font-weight: 700; margin-bottom: 0.3rem;\">${staff.name}<\/h4>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">\r\n Shift: ${formatTimeAMPM(staff.shiftStart)} - ${formatTimeAMPM(staff.shiftEnd)}\r\n ${isNightShift(staff.shiftStart, staff.shiftEnd) ? '<span style=\"background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.75rem; margin-left: 0.5rem; font-weight: 700;\">\ud83c\udf19 Night Shift<\/span>' : ''}\r\n <\/p>\r\n ${activeRecord ? `\r\n <div style=\"margin-top: 0.5rem;\">\r\n <p style=\"color: #10b981; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem;\">\r\n <span style=\"width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: pulse 2s ease-in-out infinite;\"><\/span>\r\n \ud83d\udfe2 ACTIVE - Punched In: ${formatDateTimeAMPM(activeRecord.punchIn)}\r\n <\/p>\r\n <p style=\"color: #6366f1; font-size: 0.85rem; font-weight: 600;\">\r\n \u23f1\ufe0f Current Session: ${currentEarnings.minutes} min (${currentEarnings.hours}h) = \u20b9${currentEarnings.earnings}\r\n <\/p>\r\n <\/div>\r\n ` : todayRecords.length > 0 ? `\r\n <p style=\"color: #10b981; font-weight: 600; margin-top: 0.5rem;\">\u2713 Punched Out - Completed for today<\/p>\r\n ` : `\r\n <p style=\"color: #64748b; font-weight: 600; margin-top: 0.5rem;\">\u26a0 Not Punched In Yet<\/p>\r\n `}\r\n ${todayRecords.length > 0 ? `\r\n <p style=\"color: #ec4899; font-size: 0.9rem; margin-top: 0.5rem; font-weight: 600;\">\r\n \ud83d\udcb0 Today's Total Earnings: \u20b9${totalEarnings.toFixed(2)}\r\n <\/p>\r\n ` : ''}\r\n \r\n ${(staff.tasks && staff.tasks.length > 0) ? `\r\n <div style=\"margin-top: 1rem; padding: 1rem; background: rgba(99, 102, 241, 0.05); border-radius: 8px; border: 1px solid rgba(99, 102, 241, 0.2);\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem;\">\r\n <h5 style=\"margin: 0; font-size: 0.95rem; font-weight: 700; color: #6366f1;\">\ud83d\udccb Daily Tasks<\/h5>\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"toggleTasks(${staff.id})\" style=\"padding: 0.3rem 0.8rem; font-size: 0.8rem;\">\r\n <span id=\"toggle-${staff.id}\">\u25bc Show<\/span>\r\n <\/button>\r\n <\/div>\r\n <div id=\"tasks-${staff.id}\" style=\"display: none;\">\r\n ${staff.tasks.map((task, idx) => `\r\n <div class=\"task-item ${task.completed ? 'completed' : ''}\" style=\"display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem; margin-bottom: 0.5rem;\">\r\n <input type=\"checkbox\" \r\n class=\"task-checkbox\" \r\n ${task.completed ? 'checked' : ''} \r\n onchange=\"toggleTask(${staff.id}, ${idx})\"\r\n style=\"width: 18px; height: 18px;\">\r\n <div class=\"task-content\" style=\"flex: 1;\">\r\n <p class=\"task-title\" style=\"margin: 0; font-size: 0.9rem;\">${task.text}<\/p>\r\n <\/div>\r\n <\/div>\r\n `).join('')}\r\n <div style=\"margin-top: 0.8rem;\">\r\n <div style=\"display: flex; justify-content: space-between; margin-bottom: 0.3rem;\">\r\n <span style=\"font-size: 0.85rem; color: #94a3b8;\">Progress<\/span>\r\n <span style=\"font-size: 0.85rem; font-weight: 700; color: #6366f1;\">${Math.round((staff.tasks.filter(t => t.completed).length \/ staff.tasks.length) * 100)}%<\/span>\r\n <\/div>\r\n <div class=\"progress-bar-container\">\r\n <div class=\"progress-bar-fill\" style=\"width: ${(staff.tasks.filter(t => t.completed).length \/ staff.tasks.length) * 100}%;\"><\/div>\r\n <\/div>\r\n <p style=\"margin-top: 0.3rem; font-size: 0.8rem; color: #94a3b8; text-align: center;\">\r\n ${staff.tasks.filter(t => t.completed).length} of ${staff.tasks.length} tasks completed\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n ${todayRecords.length > 0 ? `\r\n <div style=\"text-align: center; padding: 1rem; background: rgba(99, 102, 241, 0.1); border-radius: 12px; border: 1px solid rgba(99, 102, 241, 0.2);\">\r\n <p style=\"font-size: 0.8rem; color: #94a3b8; margin-bottom: 0.3rem;\">Hours Today<\/p>\r\n <p style=\"font-size: 1.5rem; font-weight: 800; color: #6366f1; margin: 0;\">${totalHours}h<\/p>\r\n <p style=\"font-size: 0.75rem; color: #94a3b8; margin-top: 0.3rem;\">${Math.floor(totalMinutes)} minutes<\/p>\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('')}\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1)); border: 1px solid rgba(99, 102, 241, 0.3);\">\r\n <h3 style=\"margin-bottom: 1rem; color: #6366f1;\">\ud83d\udca1 How It Works<\/h3>\r\n <ul style=\"margin-left: 1.5rem; color: #e2e8f0; line-height: 1.8;\">\r\n <li><strong>Auto Punch Out:<\/strong> Staff ko shift end time pe automatic punch out ho jayega<\/li>\r\n <li><strong>Real-Time Tracking:<\/strong> Har minute ka paisa calculate hota hai live<\/li>\r\n <li><strong>Active Status:<\/strong> \ud83d\udfe2 Green dot = Currently working<\/li>\r\n <li><strong>Punch Time:<\/strong> Sirf shift start time ke baad hi punch in ho sakta hai<\/li>\r\n <li><strong>\ud83c\udf19 Night Shift:<\/strong> Agar shift midnight cross karti hai (e.g., 5 PM - 5 AM), automatic detect hota hai aur salary correct calculate hoti hai<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n \/\/ Auto refresh every minute for real-time earnings\r\n setTimeout(() => {\r\n if (currentView === 'attendance') {\r\n renderAttendanceView(container);\r\n }\r\n }, 60000); \/\/ Refresh every 60 seconds\r\n }\r\n\r\n function renderSalaryView(container) {\r\n container.innerHTML = `\r\n <div>\r\n <h2 style=\"font-size: 2rem; font-weight: 700; margin-bottom: 2rem;\">\ud83d\udcb0 Staff Payments<\/h2>\r\n \r\n <div class=\"card\" style=\"margin-bottom: 1.5rem;\">\r\n <h3 style=\"margin-bottom: 1rem;\">\ud83d\udd0d Filter Payments<\/h3>\r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;\">\r\n <div class=\"form-group\">\r\n <label>Time Period<\/label>\r\n <select id=\"paymentPeriod\" onchange=\"calculatePayments()\">\r\n <option value=\"today\">Today<\/option>\r\n <option value=\"week\" selected>Last 7 Days<\/option>\r\n <option value=\"month\">This Month<\/option>\r\n <option value=\"all\">All Time<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Staff Filter<\/label>\r\n <select id=\"paymentStaff\" onchange=\"calculatePayments()\">\r\n <option value=\"all\">All Staff<\/option>\r\n ${staffData.map(s => `<option value=\"${s.id}\">${s.name}<\/option>`).join('')}\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"paymentResults\"><\/div>\r\n <\/div>\r\n `;\r\n calculatePayments();\r\n }\r\n\r\n function calculatePayments() {\r\n const period = document.getElementById('paymentPeriod')?.value || 'week';\r\n const staffFilter = document.getElementById('paymentStaff')?.value || 'all';\r\n \r\n const now = new Date();\r\n let startDate = new Date();\r\n \r\n switch(period) {\r\n case 'today':\r\n startDate.setHours(0, 0, 0, 0);\r\n break;\r\n case 'week':\r\n startDate.setDate(startDate.getDate() - 7);\r\n break;\r\n case 'month':\r\n startDate.setDate(1);\r\n startDate.setHours(0, 0, 0, 0);\r\n break;\r\n case 'all':\r\n startDate = new Date(0);\r\n break;\r\n }\r\n \r\n const filteredStaff = staffFilter === 'all' ? staffData : staffData.filter(s => s.id == staffFilter);\r\n \r\n const paymentData = filteredStaff.map(staff => {\r\n const relevantRecords = (staff.punchRecords || []).filter(r => {\r\n const punchDate = new Date(r.punchIn);\r\n return punchDate >= startDate;\r\n });\r\n \r\n let totalEarnings = 0;\r\n let totalMinutes = 0;\r\n \r\n relevantRecords.forEach(record => {\r\n const earnings = calculateRealTimeEarnings(staff, record);\r\n totalEarnings += parseFloat(earnings.earnings);\r\n totalMinutes += earnings.minutes;\r\n });\r\n \r\n return {\r\n staff: staff,\r\n earnings: totalEarnings,\r\n hours: (totalMinutes \/ 60).toFixed(2),\r\n minutes: totalMinutes,\r\n records: relevantRecords.length,\r\n advance: staff.advance || 0,\r\n fine: staff.fine || 0,\r\n cashPaid: staff.cashPaid || 0,\r\n previousBalance: staff.previousBalance || 0\r\n };\r\n }).filter(p => p.records > 0 || staffFilter !== 'all');\r\n \r\n const totalEarnings = paymentData.reduce((sum, p) => sum + p.earnings, 0);\r\n const totalAdvance = paymentData.reduce((sum, p) => sum + p.advance, 0);\r\n const totalFine = paymentData.reduce((sum, p) => sum + p.fine, 0);\r\n const netPayable = totalEarnings - totalAdvance - totalFine;\r\n \r\n const resultsDiv = document.getElementById('paymentResults');\r\n if (!resultsDiv) return;\r\n \r\n resultsDiv.innerHTML = `\r\n <div class=\"stats-grid\" style=\"margin-bottom: 2rem;\">\r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Total Earnings<\/p>\r\n <h3 style=\"font-size: 2rem; font-weight: 800; color: #6366f1;\">\u20b9${totalEarnings.toFixed(2)}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;\">\ud83d\udcb0<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Total Advance<\/p>\r\n <h3 style=\"font-size: 2rem; font-weight: 800; color: #f59e0b;\">\u20b9${totalAdvance.toFixed(2)}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #f59e0b, #fb923c); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;\">\ud83d\udcb3<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Total Fine<\/p>\r\n <h3 style=\"font-size: 2rem; font-weight: 800; color: #ef4444;\">\u20b9${totalFine.toFixed(2)}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #ef4444, #f97316); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;\">\u26a0\ufe0f<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"stat-card\" style=\"grid-column: 1 \/ -1; background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(20, 184, 166, 0.2)); border: 2px solid #10b981;\">\r\n <div style=\"display: flex; justify-content: space-between;\">\r\n <div>\r\n <p style=\"color: #10b981; font-size: 1rem; margin-bottom: 0.5rem; font-weight: 600;\">NET PAYABLE<\/p>\r\n <h3 style=\"font-size: 2.5rem; font-weight: 800; color: #10b981;\">\u20b9${netPayable.toFixed(2)}<\/h3>\r\n <\/div>\r\n <div style=\"width: 70px; height: 70px; background: linear-gradient(135deg, #10b981, #14b8a6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);\">\u2713<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n ${paymentData.length === 0 ? `\r\n <div class=\"card\" style=\"text-align: center; padding: 3rem;\">\r\n <div style=\"font-size: 4rem; margin-bottom: 1rem;\">\ud83d\udcca<\/div>\r\n <p style=\"color: #94a3b8;\">No payment data for selected period<\/p>\r\n <\/div>\r\n ` : `\r\n <div style=\"display: grid; gap: 1.5rem;\">\r\n ${paymentData.map((data, i) => `\r\n <div class=\"card\" style=\"animation: slideIn 0.5s ease forwards; animation-delay: ${i * 0.05}s;\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n ${data.staff.photo ? \r\n `<img decoding=\"async\" src=\"${data.staff.photo}\" style=\"width: 60px; height: 60px; border-radius: 12px; object-fit: cover; border: 2px solid #6366f1;\">` :\r\n `<div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #6366f1, #ec4899); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: white; font-weight: 700;\">${data.staff.name.charAt(0).toUpperCase()}<\/div>`\r\n }\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.3rem; font-weight: 700;\">${data.staff.name}<\/h3>\r\n <p style=\"margin: 0.2rem 0 0 0; color: #94a3b8;\">${data.staff.wageType}: \u20b9${data.staff.rate} | ${data.records} punch records<\/p>\r\n <\/div>\r\n <\/div>\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"manageStaffPayment(${data.staff.id})\">\r\n \u2699\ufe0f Manage Advance\/Fine\r\n <\/button>\r\n <\/div>\r\n \r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; padding: 1.5rem; background: rgba(99, 102, 241, 0.05); border-radius: 12px; border: 1px solid rgba(99, 102, 241, 0.2);\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Hours Worked<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #6366f1; margin: 0;\">${data.hours}h<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Base Earnings<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #10b981; margin: 0;\">\u20b9${data.earnings.toFixed(2)}<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Advance<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #f59e0b; margin: 0;\">-\u20b9${data.advance.toFixed(2)}<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Fine<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #ef4444; margin: 0;\">-\u20b9${data.fine.toFixed(2)}<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Previous Balance<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: ${data.previousBalance >= 0 ? '#10b981' : '#ef4444'}; margin: 0;\">${data.previousBalance >= 0 ? '+' : ''}\u20b9${data.previousBalance.toFixed(2)}<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Cash Paid<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #8b5cf6; margin: 0;\">\u20b9${data.cashPaid.toFixed(2)}<\/p>\r\n <\/div>\r\n <div style=\"grid-column: 1 \/ -1; padding-top: 1rem; border-top: 2px solid rgba(99, 102, 241, 0.3); margin-bottom: 1rem;\">\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.3rem;\">Net Payable<\/p>\r\n <p style=\"font-size: 1.8rem; font-weight: 800; color: #10b981; margin: 0;\">\u20b9${(data.earnings - data.advance - data.fine + data.previousBalance).toFixed(2)}<\/p>\r\n <\/div>\r\n <div style=\"grid-column: 1 \/ -1;\">\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.3rem;\">\r\n Current Balance ${data.earnings - data.advance - data.fine + data.previousBalance - data.cashPaid >= 0 ? '(Pending)' : '(Extra Paid - Next Month Advance)'}\r\n <\/p>\r\n <p style=\"font-size: 2rem; font-weight: 800; color: ${data.earnings - data.advance - data.fine + data.previousBalance - data.cashPaid >= 0 ? '#f59e0b' : '#6366f1'}; margin: 0;\">\r\n \u20b9${Math.abs(data.earnings - data.advance - data.fine + data.previousBalance - data.cashPaid).toFixed(2)}\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <button class=\"btn btn-success\" onclick=\"paySalary(${data.staff.id})\" style=\"width: 100%; margin-top: 1rem; padding: 1rem; font-size: 1.1rem;\">\r\n \ud83d\udcb0 Pay Salary\r\n <\/button>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n `}\r\n `;\r\n }\r\n\r\n function manageStaffPayment(staffId) {\r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = `Manage Payments - ${staff.name}`;\r\n document.getElementById('modalBody').innerHTML = `\r\n <form onsubmit=\"saveStaffPayment(event, ${staffId})\">\r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label>Advance Amount (\u20b9)<\/label>\r\n <input type=\"number\" id=\"advanceAmount\" step=\"0.01\" value=\"${staff.advance || 0}\" min=\"0\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Fine Amount (\u20b9)<\/label>\r\n <input type=\"number\" id=\"fineAmount\" step=\"0.01\" value=\"${staff.fine || 0}\" min=\"0\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"background: rgba(99, 102, 241, 0.1); padding: 1rem; border-radius: 8px; margin-top: 1rem;\">\r\n <p style=\"color: #6366f1; font-size: 0.9rem; margin: 0;\">\r\n \ud83d\udca1 <strong>Tip:<\/strong> Advance aur fine amounts permanent save honge. Ye amounts har payment calculation mein deduct honge.\r\n <\/p>\r\n <\/div>\r\n \r\n <div style=\"display: flex; gap: 1rem; margin-top: 2rem;\">\r\n <button type=\"button\" class=\"btn btn-secondary\" style=\"flex: 1;\" onclick=\"closeModal()\">Cancel<\/button>\r\n <button type=\"submit\" class=\"btn btn-primary\" style=\"flex: 1;\">Save Changes<\/button>\r\n <\/div>\r\n <\/form>\r\n `;\r\n modal.classList.add('active');\r\n }\r\n\r\n function saveStaffPayment(event, staffId) {\r\n event.preventDefault();\r\n \r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n const advance = parseFloat(document.getElementById('advanceAmount').value) || 0;\r\n const fine = parseFloat(document.getElementById('fineAmount').value) || 0;\r\n \r\n staff.advance = advance;\r\n staff.fine = fine;\r\n \r\n saveToStorage();\r\n closeModal();\r\n showAlert('Payment details updated successfully!', 'success');\r\n calculatePayments();\r\n }\r\n\r\n function paySalary(staffId) {\r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n \/\/ Calculate current month salary\r\n const period = document.getElementById('paymentPeriod')?.value || 'week';\r\n const now = new Date();\r\n let startDate = new Date();\r\n \r\n switch(period) {\r\n case 'today':\r\n startDate.setHours(0, 0, 0, 0);\r\n break;\r\n case 'week':\r\n startDate.setDate(startDate.getDate() - 7);\r\n break;\r\n case 'month':\r\n startDate.setDate(1);\r\n startDate.setHours(0, 0, 0, 0);\r\n break;\r\n case 'all':\r\n startDate = new Date(0);\r\n break;\r\n }\r\n \r\n const relevantRecords = (staff.punchRecords || []).filter(r => {\r\n const punchDate = new Date(r.punchIn);\r\n return punchDate >= startDate;\r\n });\r\n \r\n let totalEarnings = 0;\r\n relevantRecords.forEach(record => {\r\n const earnings = calculateRealTimeEarnings(staff, record);\r\n totalEarnings += parseFloat(earnings.earnings);\r\n });\r\n \r\n const advance = staff.advance || 0;\r\n const fine = staff.fine || 0;\r\n const previousBalance = staff.previousBalance || 0;\r\n const netPayable = totalEarnings - advance - fine + previousBalance;\r\n \r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = `Pay Salary - ${staff.name}`;\r\n document.getElementById('modalBody').innerHTML = `\r\n <form onsubmit=\"processSalaryPayment(event, ${staffId})\">\r\n <div style=\"background: rgba(99, 102, 241, 0.1); padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem;\">\r\n <h4 style=\"margin-bottom: 1rem; color: #6366f1;\">Salary Breakdown<\/h4>\r\n <div style=\"display: flex; flex-direction: column; gap: 0.8rem;\">\r\n <div style=\"display: flex; justify-content: space-between;\">\r\n <span style=\"color: #94a3b8;\">Base Earnings:<\/span>\r\n <span style=\"font-weight: 700; color: #10b981;\">\u20b9${totalEarnings.toFixed(2)}<\/span>\r\n <\/div>\r\n <div style=\"display: flex; justify-content: space-between;\">\r\n <span style=\"color: #94a3b8;\">Advance:<\/span>\r\n <span style=\"font-weight: 700; color: #f59e0b;\">-\u20b9${advance.toFixed(2)}<\/span>\r\n <\/div>\r\n <div style=\"display: flex; justify-content: space-between;\">\r\n <span style=\"color: #94a3b8;\">Fine:<\/span>\r\n <span style=\"font-weight: 700; color: #ef4444;\">-\u20b9${fine.toFixed(2)}<\/span>\r\n <\/div>\r\n <div style=\"display: flex; justify-content: space-between;\">\r\n <span style=\"color: #94a3b8;\">Previous Balance:<\/span>\r\n <span style=\"font-weight: 700; color: ${previousBalance >= 0 ? '#10b981' : '#ef4444'};\">${previousBalance >= 0 ? '+' : ''}\u20b9${previousBalance.toFixed(2)}<\/span>\r\n <\/div>\r\n <div style=\"display: flex; justify-content: space-between; padding-top: 0.8rem; border-top: 2px solid rgba(99, 102, 241, 0.3);\">\r\n <span style=\"font-size: 1.1rem; font-weight: 700;\">Net Payable:<\/span>\r\n <span style=\"font-size: 1.3rem; font-weight: 800; color: #10b981;\">\u20b9${netPayable.toFixed(2)}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label>Cash Amount Paying (\u20b9) *<\/label>\r\n <input type=\"number\" id=\"cashAmount\" step=\"0.01\" min=\"0\" placeholder=\"Enter amount\" required style=\"font-size: 1.2rem; font-weight: 700;\">\r\n <\/div>\r\n \r\n <div style=\"background: rgba(16, 185, 129, 0.1); padding: 1rem; border-radius: 8px; margin-top: 1rem;\">\r\n <p style=\"color: #10b981; font-size: 0.9rem; margin: 0;\">\r\n \ud83d\udca1 <strong>Auto Calculation:<\/strong><br>\r\n \u2022 Agar kam diye to balance next month add hoga<br>\r\n \u2022 Agar zyada diye to advance me add hoga\r\n <\/p>\r\n <\/div>\r\n \r\n <div style=\"display: flex; gap: 1rem; margin-top: 2rem;\">\r\n <button type=\"button\" class=\"btn btn-secondary\" style=\"flex: 1;\" onclick=\"closeModal()\">Cancel<\/button>\r\n <button type=\"submit\" class=\"btn btn-success\" style=\"flex: 1;\">\ud83d\udcb0 Pay Now<\/button>\r\n <\/div>\r\n <\/form>\r\n `;\r\n modal.classList.add('active');\r\n }\r\n\r\n function processSalaryPayment(event, staffId) {\r\n event.preventDefault();\r\n \r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n const cashAmount = parseFloat(document.getElementById('cashAmount').value) || 0;\r\n \r\n if (cashAmount <= 0) {\r\n showAlert('Please enter a valid amount!', 'error');\r\n return;\r\n }\r\n \r\n \/\/ Calculate current salary\r\n const period = document.getElementById('paymentPeriod')?.value || 'week';\r\n const now = new Date();\r\n let startDate = new Date();\r\n \r\n switch(period) {\r\n case 'today':\r\n startDate.setHours(0, 0, 0, 0);\r\n break;\r\n case 'week':\r\n startDate.setDate(startDate.getDate() - 7);\r\n break;\r\n case 'month':\r\n startDate.setDate(1);\r\n startDate.setHours(0, 0, 0, 0);\r\n break;\r\n case 'all':\r\n startDate = new Date(0);\r\n break;\r\n }\r\n \r\n const relevantRecords = (staff.punchRecords || []).filter(r => {\r\n const punchDate = new Date(r.punchIn);\r\n return punchDate >= startDate;\r\n });\r\n \r\n let totalEarnings = 0;\r\n relevantRecords.forEach(record => {\r\n const earnings = calculateRealTimeEarnings(staff, record);\r\n totalEarnings += parseFloat(earnings.earnings);\r\n });\r\n \r\n const advance = staff.advance || 0;\r\n const fine = staff.fine || 0;\r\n const previousBalance = staff.previousBalance || 0;\r\n const netPayable = totalEarnings - advance - fine + previousBalance;\r\n \r\n \/\/ Calculate new balance\r\n const difference = cashAmount - netPayable;\r\n \r\n \/\/ Update staff payment info\r\n staff.cashPaid = (staff.cashPaid || 0) + cashAmount;\r\n \r\n if (difference < 0) {\r\n \/\/ Paid less - balance carried forward\r\n staff.previousBalance = difference; \/\/ Will be negative\r\n staff.advance = 0; \/\/ Reset advance\r\n showAlert(`Payment recorded! Balance of \u20b9${Math.abs(difference).toFixed(2)} will be added to next month.`, 'success');\r\n } else if (difference > 0) {\r\n \/\/ Paid more - goes to advance\r\n staff.advance = difference;\r\n staff.previousBalance = 0;\r\n showAlert(`Payment recorded! Extra \u20b9${difference.toFixed(2)} added to advance.`, 'success');\r\n } else {\r\n \/\/ Exact payment\r\n staff.previousBalance = 0;\r\n staff.advance = 0;\r\n showAlert('Payment recorded! Salary paid in full.', 'success');\r\n }\r\n \r\n staff.fine = 0; \/\/ Reset fine after payment\r\n \r\n \/\/ Add payment history\r\n if (!staff.paymentHistory) staff.paymentHistory = [];\r\n staff.paymentHistory.push({\r\n date: new Date().toISOString(),\r\n amount: cashAmount,\r\n salary: netPayable,\r\n balance: difference,\r\n period: period\r\n });\r\n \r\n saveToStorage();\r\n closeModal();\r\n addNotification(`Salary paid: \u20b9${cashAmount}`, 'success', staff.name);\r\n calculatePayments();\r\n }\r\n\r\n function renderHistoryView(container) {\r\n const allPunches = staffData.flatMap(staff => \r\n (staff.punchRecords || []).map((r, index) => ({\r\n ...r,\r\n staffName: staff.name,\r\n staffPhoto: staff.photo,\r\n staffId: staff.id,\r\n staff: staff,\r\n recordIndex: index\r\n }))\r\n ).sort((a, b) => new Date(b.punchIn) - new Date(a.punchIn));\r\n\r\n container.innerHTML = `\r\n <div>\r\n <h2 style=\"font-size: 2rem; font-weight: 700; margin-bottom: 2rem;\">Punch In\/Out History<\/h2>\r\n \r\n ${isAdminLoggedIn ? `\r\n <div class=\"card\" style=\"margin-bottom: 1.5rem;\">\r\n <h3 style=\"margin-bottom: 1rem;\">\ud83d\udd0d Filters<\/h3>\r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;\">\r\n <div class=\"form-group\">\r\n <label>Staff Member<\/label>\r\n <select id=\"filterStaff\" onchange=\"filterHistory()\">\r\n <option value=\"all\">All Staff<\/option>\r\n ${staffData.map(s => `<option value=\"${s.id}\">${s.name}<\/option>`).join('')}\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Date Range<\/label>\r\n <select id=\"filterDate\" onchange=\"filterHistory()\">\r\n <option value=\"all\">All Time<\/option>\r\n <option value=\"today\">Today<\/option>\r\n <option value=\"yesterday\">Yesterday<\/option>\r\n <option value=\"week\">Last 7 Days<\/option>\r\n <option value=\"month\">This Month<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Status<\/label>\r\n <select id=\"filterStatus\" onchange=\"filterHistory()\">\r\n <option value=\"all\">All Status<\/option>\r\n <option value=\"active\">Active<\/option>\r\n <option value=\"completed\">Completed<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n ` : ''}\r\n \r\n <div class=\"card\">\r\n <div id=\"historyContent\">\r\n ${allPunches.length === 0 ? `\r\n <div style=\"text-align: center; padding: 3rem;\">\r\n <div style=\"font-size: 4rem; margin-bottom: 1rem;\">\ud83d\udccb<\/div>\r\n <p style=\"color: #94a3b8;\">No punch records yet<\/p>\r\n <\/div>\r\n ` : `\r\n <div style=\"overflow-x: auto;\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>Staff<\/th>\r\n <th>Date<\/th>\r\n <th>Punch In<\/th>\r\n <th>Punch Out<\/th>\r\n <th>Duration<\/th>\r\n <th>Earnings (\u20b9)<\/th>\r\n <th>Status<\/th>\r\n ${isAdminLoggedIn ? '<th>Actions<\/th>' : ''}\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"historyTableBody\">\r\n ${renderHistoryRows(allPunches)}\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n \r\n <div style=\"margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(16, 185, 129, 0.1)); border-radius: 12px; border: 1px solid rgba(99, 102, 241, 0.2);\">\r\n <h4 style=\"margin-bottom: 1rem; color: #6366f1;\">\ud83d\udcca Total Summary<\/h4>\r\n ${(() => {\r\n const totalEarnings = allPunches.reduce((sum, punch) => {\r\n const earnings = calculateRealTimeEarnings(punch.staff, punch);\r\n return sum + parseFloat(earnings.earnings);\r\n }, 0);\r\n \r\n const totalMinutes = allPunches.reduce((sum, punch) => {\r\n const earnings = calculateRealTimeEarnings(punch.staff, punch);\r\n return sum + earnings.minutes;\r\n }, 0);\r\n \r\n const totalHours = (totalMinutes \/ 60).toFixed(2);\r\n \r\n return `\r\n <div style=\"display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.3rem;\">Total Records<\/p>\r\n <p style=\"font-size: 1.5rem; font-weight: 800; color: #6366f1; margin: 0;\">${allPunches.length}<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.3rem;\">Total Hours<\/p>\r\n <p style=\"font-size: 1.5rem; font-weight: 800; color: #ec4899; margin: 0;\">${totalHours}h<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.3rem;\">Total Earnings<\/p>\r\n <p style=\"font-size: 1.5rem; font-weight: 800; color: #10b981; margin: 0;\">\u20b9${totalEarnings.toFixed(2)}<\/p>\r\n <\/div>\r\n <\/div>\r\n `;\r\n })()}\r\n <\/div>\r\n `}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n function renderHistoryRows(punches) {\r\n return punches.map(punch => {\r\n const punchInTime = new Date(punch.punchIn);\r\n const punchOutTime = punch.punchOut ? new Date(punch.punchOut) : null;\r\n \r\n const earnings = calculateRealTimeEarnings(punch.staff, punch);\r\n const duration = punchOutTime ? \r\n `${earnings.hours}h (${earnings.minutes} min)` : \r\n '-';\r\n \r\n return `\r\n <tr data-staff-id=\"${punch.staffId}\" data-date=\"${punchInTime.toDateString()}\" data-status=\"${punchOutTime ? 'completed' : 'active'}\">\r\n <td>\r\n <div style=\"display: flex; align-items: center; gap: 0.8rem;\">\r\n ${punch.staffPhoto ? \r\n `<img decoding=\"async\" src=\"${punch.staffPhoto}\" style=\"width: 35px; height: 35px; border-radius: 8px; object-fit: cover;\">` :\r\n `<div style=\"width: 35px; height: 35px; background: linear-gradient(135deg, #6366f1, #ec4899); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 0.9rem;\">${punch.staffName.charAt(0).toUpperCase()}<\/div>`\r\n }\r\n <div>\r\n <span style=\"font-weight: 600; display: block;\">${punch.staffName}<\/span>\r\n <span style=\"font-size: 0.75rem; color: #94a3b8;\">${punch.staff.wageType}: \u20b9${punch.staff.rate}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/td>\r\n <td>${punchInTime.toLocaleDateString('en-IN')}<\/td>\r\n <td>${formatDateTimeAMPM(punch.punchIn)}<\/td>\r\n <td>${punchOutTime ? formatDateTimeAMPM(punch.punchOut) : '-'}<\/td>\r\n <td>${duration}<\/td>\r\n <td>\r\n <span style=\"font-weight: 700; color: #10b981; font-size: 1.05rem;\">\r\n ${punchOutTime ? `\u20b9${earnings.earnings}` : `\u20b9${earnings.earnings} (Live)`}\r\n <\/span>\r\n <\/td>\r\n <td>\r\n ${punchOutTime ? \r\n `<span style=\"color: #10b981; font-weight: 600;\">\u2713 Completed<\/span>${punch.note ? `<br><span style=\"font-size: 0.75rem; color: #94a3b8;\">\ud83d\udcdd ${punch.note}<\/span>` : ''}` :\r\n '<span style=\"color: #f59e0b; font-weight: 600;\">\ud83d\udfe2 Active<\/span>'\r\n }\r\n <\/td>\r\n ${isAdminLoggedIn ? `\r\n <td>\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"editPunchRecord(${punch.staffId}, ${punch.recordIndex})\" title=\"Edit\">\r\n \u270f\ufe0f\r\n <\/button>\r\n <\/td>\r\n ` : ''}\r\n <\/tr>\r\n `;\r\n }).join('');\r\n }\r\n\r\n function filterHistory() {\r\n const staffFilter = document.getElementById('filterStaff')?.value || 'all';\r\n const dateFilter = document.getElementById('filterDate')?.value || 'all';\r\n const statusFilter = document.getElementById('filterStatus')?.value || 'all';\r\n \r\n const rows = document.querySelectorAll('#historyTableBody tr');\r\n \r\n rows.forEach(row => {\r\n let showRow = true;\r\n \r\n \/\/ Staff filter\r\n if (staffFilter !== 'all' && row.dataset.staffId !== staffFilter) {\r\n showRow = false;\r\n }\r\n \r\n \/\/ Status filter\r\n if (statusFilter !== 'all' && row.dataset.status !== statusFilter) {\r\n showRow = false;\r\n }\r\n \r\n \/\/ Date filter\r\n if (dateFilter !== 'all') {\r\n const rowDate = new Date(row.dataset.date);\r\n const today = new Date();\r\n today.setHours(0, 0, 0, 0);\r\n \r\n switch(dateFilter) {\r\n case 'today':\r\n if (rowDate.toDateString() !== today.toDateString()) showRow = false;\r\n break;\r\n case 'yesterday':\r\n const yesterday = new Date(today);\r\n yesterday.setDate(yesterday.getDate() - 1);\r\n if (rowDate.toDateString() !== yesterday.toDateString()) showRow = false;\r\n break;\r\n case 'week':\r\n const weekAgo = new Date(today);\r\n weekAgo.setDate(weekAgo.getDate() - 7);\r\n if (rowDate < weekAgo) showRow = false;\r\n break;\r\n case 'month':\r\n if (rowDate.getMonth() !== today.getMonth() || rowDate.getFullYear() !== today.getFullYear()) {\r\n showRow = false;\r\n }\r\n break;\r\n }\r\n }\r\n \r\n row.style.display = showRow ? '' : 'none';\r\n });\r\n }\r\n\r\n function editPunchRecord(staffId, recordIndex) {\r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff || !staff.punchRecords || !staff.punchRecords[recordIndex]) return;\r\n \r\n const record = staff.punchRecords[recordIndex];\r\n const punchIn = new Date(record.punchIn);\r\n const punchOut = record.punchOut ? new Date(record.punchOut) : null;\r\n \r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = `Edit Punch Record - ${staff.name}`;\r\n document.getElementById('modalBody').innerHTML = `\r\n <form onsubmit=\"savePunchEdit(event, ${staffId}, ${recordIndex})\">\r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label>Punch In Date *<\/label>\r\n <input type=\"date\" id=\"editPunchInDate\" value=\"${punchIn.toISOString().split('T')[0]}\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Punch In Time *<\/label>\r\n <input type=\"time\" id=\"editPunchInTime\" value=\"${punchIn.toTimeString().slice(0, 5)}\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Punch Out Date<\/label>\r\n <input type=\"date\" id=\"editPunchOutDate\" value=\"${punchOut ? punchOut.toISOString().split('T')[0] : ''}\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Punch Out Time<\/label>\r\n <input type=\"time\" id=\"editPunchOutTime\" value=\"${punchOut ? punchOut.toTimeString().slice(0, 5) : ''}\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"background: rgba(245, 158, 11, 0.1); padding: 1rem; border-radius: 8px; margin-top: 1rem; border: 1px solid rgba(245, 158, 11, 0.3);\">\r\n <p style=\"color: #f59e0b; font-size: 0.9rem; margin: 0;\">\r\n \u26a0\ufe0f <strong>Note:<\/strong> Editing punch records will affect salary calculations. Make sure to enter correct times.\r\n <\/p>\r\n <\/div>\r\n \r\n <div style=\"display: flex; gap: 1rem; margin-top: 2rem;\">\r\n <button type=\"button\" class=\"btn btn-danger\" style=\"flex: 1;\" onclick=\"deletePunchRecord(${staffId}, ${recordIndex})\">\r\n \ud83d\uddd1\ufe0f Delete Record\r\n <\/button>\r\n <button type=\"button\" class=\"btn btn-secondary\" onclick=\"closeModal()\">\r\n Cancel\r\n <\/button>\r\n <button type=\"submit\" class=\"btn btn-primary\" style=\"flex: 1;\">\r\n Save Changes\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n `;\r\n modal.classList.add('active');\r\n }\r\n\r\n function savePunchEdit(event, staffId, recordIndex) {\r\n event.preventDefault();\r\n \r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n const punchInDate = document.getElementById('editPunchInDate').value;\r\n const punchInTime = document.getElementById('editPunchInTime').value;\r\n const punchOutDate = document.getElementById('editPunchOutDate').value;\r\n const punchOutTime = document.getElementById('editPunchOutTime').value;\r\n \r\n const punchIn = new Date(`${punchInDate}T${punchInTime}`);\r\n const punchOut = (punchOutDate && punchOutTime) ? new Date(`${punchOutDate}T${punchOutTime}`) : null;\r\n \r\n \/\/ Validate\r\n if (punchOut && punchOut <= punchIn) {\r\n showAlert('Punch out time must be after punch in time!', 'error');\r\n return;\r\n }\r\n \r\n staff.punchRecords[recordIndex] = {\r\n punchIn: punchIn.toISOString(),\r\n punchOut: punchOut ? punchOut.toISOString() : null\r\n };\r\n \r\n saveToStorage();\r\n closeModal();\r\n showAlert('Punch record updated successfully!', 'success');\r\n switchView('history');\r\n }\r\n\r\n function deletePunchRecord(staffId, recordIndex) {\r\n if (confirm('Are you sure you want to delete this punch record? This cannot be undone.')) {\r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n staff.punchRecords.splice(recordIndex, 1);\r\n saveToStorage();\r\n closeModal();\r\n showAlert('Punch record deleted successfully!', 'success');\r\n switchView('history');\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ SETTINGS VIEW\r\n \/\/ ============================================\r\n \r\n function renderSettingsView(container) {\r\n container.innerHTML = `\r\n <div>\r\n <h2 style=\"font-size: 2rem; font-weight: 700; margin-bottom: 2rem;\">\u2699\ufe0f System Settings<\/h2>\r\n \r\n <div class=\"card\">\r\n <h3 style=\"margin-bottom: 1.5rem;\">\ud83d\udd10 Admin Settings<\/h3>\r\n <form onsubmit=\"changeAdminPassword(event)\">\r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label>Current Password *<\/label>\r\n <input type=\"password\" id=\"currentPassword\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>New Password *<\/label>\r\n <input type=\"password\" id=\"newPassword\" minlength=\"4\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Confirm New Password *<\/label>\r\n <input type=\"password\" id=\"confirmPassword\" minlength=\"4\" required>\r\n <\/div>\r\n <\/div>\r\n <button type=\"submit\" class=\"btn btn-danger\">\ud83d\udd11 Change Password<\/button>\r\n <\/form>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <h3 style=\"margin-bottom: 1.5rem;\">\ud83c\udfa8 Appearance<\/h3>\r\n <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\r\n <label style=\"display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(99, 102, 241, 0.1); border-radius: 8px; cursor: pointer;\">\r\n <input type=\"checkbox\" id=\"darkMode\" ${settings.darkMode ? 'checked' : ''} onchange=\"toggleDarkMode()\" style=\"width: 20px; height: 20px; cursor: pointer;\">\r\n <div>\r\n <strong>\ud83c\udf19 Dark Mode<\/strong>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">Enable dark theme for better viewing in low light<\/p>\r\n <\/div>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <h3 style=\"margin-bottom: 1.5rem;\">\ud83d\udc64 Owner Information<\/h3>\r\n <form onsubmit=\"saveOwnerSettings(event)\">\r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label>WhatsApp Number (with country code)<\/label>\r\n <input type=\"tel\" id=\"ownerNumber\" value=\"${settings.ownerNumber}\" placeholder=\"+919876543210\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Email Address<\/label>\r\n <input type=\"email\" id=\"ownerEmail\" value=\"${settings.ownerEmail}\" placeholder=\"owner@example.com\">\r\n <\/div>\r\n <\/div>\r\n <button type=\"submit\" class=\"btn btn-primary\">\ud83d\udcbe Save Owner Info<\/button>\r\n <\/form>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <h3 style=\"margin-bottom: 1.5rem;\">\ud83d\udcf1 WhatsApp & Email Settings<\/h3>\r\n <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\r\n <label style=\"display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(99, 102, 241, 0.1); border-radius: 8px; cursor: pointer;\">\r\n <input type=\"checkbox\" id=\"whatsappDaily\" ${settings.whatsappDaily ? 'checked' : ''} onchange=\"toggleWhatsAppDaily()\" style=\"width: 20px; height: 20px; cursor: pointer;\">\r\n <div>\r\n <strong>Daily WhatsApp Report<\/strong>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">Send daily attendance report to owner's WhatsApp (6 PM)<\/p>\r\n <\/div>\r\n <\/label>\r\n \r\n <div style=\"display: flex; gap: 1rem; margin-top: 1rem;\">\r\n <button class=\"btn btn-success\" onclick=\"sendWhatsAppReport()\">\ud83d\udcf1 Send WhatsApp Report Now<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"emailBackup()\">\ud83d\udce7 Email Report Now<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <h3 style=\"margin-bottom: 1.5rem;\">\ud83d\udcbe Backup Settings<\/h3>\r\n <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\r\n <label style=\"display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(16, 185, 129, 0.1); border-radius: 8px; cursor: pointer;\">\r\n <input type=\"checkbox\" id=\"autoBackup\" ${settings.autoBackup ? 'checked' : ''} onchange=\"toggleAutoBackup()\" style=\"width: 20px; height: 20px; cursor: pointer;\">\r\n <div>\r\n <strong>Automatic Daily Backup<\/strong>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">Automatically backup data every day to browser storage<\/p>\r\n <\/div>\r\n <\/label>\r\n \r\n <div style=\"display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap;\">\r\n <button class=\"btn btn-primary\" onclick=\"createBackup()\">\ud83d\udce5 Download Backup Now<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"document.getElementById('restoreInput').click()\">\ud83d\udce4 Restore from Backup<\/button>\r\n <input type=\"file\" id=\"restoreInput\" accept=\".json\" style=\"display: none;\" onchange=\"handleRestoreFile(event)\">\r\n <\/div>\r\n \r\n <div style=\"margin-top: 1rem; padding: 1rem; background: rgba(99, 102, 241, 0.1); border-radius: 8px;\">\r\n <p style=\"color: #6366f1; font-weight: 600; margin-bottom: 0.5rem;\">\ud83d\udcca Backup History<\/p>\r\n <div id=\"backupHistory\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <h3 style=\"margin-bottom: 1.5rem;\">\ud83c\udfa8 Theme Colors<\/h3>\r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label>Primary Color<\/label>\r\n <div style=\"display: flex; gap: 0.5rem;\">\r\n <input type=\"color\" id=\"primaryColor\" value=\"${settings.theme.primary}\" style=\"width: 60px; height: 40px; cursor: pointer;\">\r\n <input type=\"text\" value=\"${settings.theme.primary}\" readonly style=\"flex: 1;\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Secondary Color<\/label>\r\n <div style=\"display: flex; gap: 0.5rem;\">\r\n <input type=\"color\" id=\"secondaryColor\" value=\"${settings.theme.secondary}\" style=\"width: 60px; height: 40px; cursor: pointer;\">\r\n <input type=\"text\" value=\"${settings.theme.secondary}\" readonly style=\"flex: 1;\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Success Color<\/label>\r\n <div style=\"display: flex; gap: 0.5rem;\">\r\n <input type=\"color\" id=\"successColor\" value=\"${settings.theme.success}\" style=\"width: 60px; height: 40px; cursor: pointer;\">\r\n <input type=\"text\" value=\"${settings.theme.success}\" readonly style=\"flex: 1;\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Danger Color<\/label>\r\n <div style=\"display: flex; gap: 0.5rem;\">\r\n <input type=\"color\" id=\"dangerColor\" value=\"${settings.theme.danger}\" style=\"width: 60px; height: 40px; cursor: pointer;\">\r\n <input type=\"text\" value=\"${settings.theme.danger}\" readonly style=\"flex: 1;\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div style=\"display: flex; gap: 1rem; margin-top: 1rem;\">\r\n <button class=\"btn btn-primary\" onclick=\"saveThemeColors()\">\ud83c\udfa8 Save Theme<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"resetThemeColors()\">\u21ba Reset to Default<\/button>\r\n <\/div>\r\n <p style=\"margin-top: 1rem; color: #94a3b8; font-size: 0.9rem;\">\ud83d\udca1 Note: Theme colors will be applied after page refresh<\/p>\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n loadBackupHistory();\r\n }\r\n\r\n function changeAdminPassword(event) {\r\n event.preventDefault();\r\n \r\n const currentPassword = document.getElementById('currentPassword').value;\r\n const newPassword = document.getElementById('newPassword').value;\r\n const confirmPassword = document.getElementById('confirmPassword').value;\r\n \r\n if (currentPassword !== adminPassword) {\r\n showAlert('Current password is incorrect!', 'error');\r\n return;\r\n }\r\n \r\n if (newPassword !== confirmPassword) {\r\n showAlert('New passwords do not match!', 'error');\r\n return;\r\n }\r\n \r\n if (newPassword.length < 4) {\r\n showAlert('Password must be at least 4 characters!', 'error');\r\n return;\r\n }\r\n \r\n adminPassword = newPassword;\r\n localStorage.setItem(ADMIN_PASSWORD_KEY, newPassword);\r\n \r\n document.getElementById('currentPassword').value = '';\r\n document.getElementById('newPassword').value = '';\r\n document.getElementById('confirmPassword').value = '';\r\n \r\n addNotification('Admin password changed successfully!', 'success');\r\n showAlert('Password changed successfully! Please remember your new password.', 'success');\r\n }\r\n\r\n function toggleDarkMode() {\r\n settings.darkMode = document.getElementById('darkMode').checked;\r\n saveSettings();\r\n applyDarkMode();\r\n addNotification(`Dark mode ${settings.darkMode ? 'enabled' : 'disabled'}`, 'success');\r\n }\r\n\r\n function applyDarkMode() {\r\n if (settings.darkMode) {\r\n document.body.classList.add('dark-mode');\r\n } else {\r\n document.body.classList.remove('dark-mode');\r\n }\r\n }\r\n\r\n function saveOwnerSettings(event) {\r\n event.preventDefault();\r\n settings.ownerNumber = document.getElementById('ownerNumber').value;\r\n settings.ownerEmail = document.getElementById('ownerEmail').value;\r\n saveSettings();\r\n addNotification('Owner information saved successfully', 'success');\r\n }\r\n\r\n function toggleWhatsAppDaily() {\r\n settings.whatsappDaily = document.getElementById('whatsappDaily').checked;\r\n saveSettings();\r\n addNotification(`WhatsApp daily report ${settings.whatsappDaily ? 'enabled' : 'disabled'}`, 'success');\r\n }\r\n\r\n function toggleAutoBackup() {\r\n settings.autoBackup = document.getElementById('autoBackup').checked;\r\n saveSettings();\r\n addNotification(`Auto backup ${settings.autoBackup ? 'enabled' : 'disabled'}`, 'success');\r\n }\r\n\r\n function saveThemeColors() {\r\n settings.theme.primary = document.getElementById('primaryColor').value;\r\n settings.theme.secondary = document.getElementById('secondaryColor').value;\r\n settings.theme.success = document.getElementById('successColor').value;\r\n settings.theme.danger = document.getElementById('dangerColor').value;\r\n saveSettings();\r\n addNotification('Theme colors saved! Refresh page to apply changes.', 'success');\r\n }\r\n\r\n function resetThemeColors() {\r\n settings.theme = {\r\n primary: '#6366f1',\r\n secondary: '#ec4899',\r\n success: '#10b981',\r\n danger: '#ef4444',\r\n warning: '#f59e0b'\r\n };\r\n saveSettings();\r\n addNotification('Theme reset to default', 'success');\r\n renderSettingsView(document.getElementById('mainContent'));\r\n }\r\n\r\n function loadBackupHistory() {\r\n const history = JSON.parse(localStorage.getItem('backupHistory') || '[]');\r\n const container = document.getElementById('backupHistory');\r\n if (!container) return;\r\n \r\n if (history.length === 0) {\r\n container.innerHTML = '<p style=\"color: #94a3b8; font-size: 0.9rem;\">No backup history available<\/p>';\r\n return;\r\n }\r\n \r\n container.innerHTML = history.slice(0, 5).map(b => `\r\n <div style=\"padding: 0.5rem 0; border-bottom: 1px solid rgba(99, 102, 241, 0.1);\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div>\r\n <p style=\"margin: 0; font-size: 0.9rem; color: #e2e8f0;\">${new Date(b.timestamp).toLocaleString('en-IN')}<\/p>\r\n <p style=\"margin: 0.2rem 0 0 0; font-size: 0.8rem; color: #94a3b8;\">${b.staffCount} staff \u2022 ${(b.size \/ 1024).toFixed(1)} KB<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n }\r\n\r\n function handleRestoreFile(event) {\r\n const file = event.target.files[0];\r\n if (file) {\r\n restoreBackup(file);\r\n }\r\n event.target.value = '';\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ PERFORMANCE VIEW\r\n \/\/ ============================================\r\n \r\n function renderPerformanceView(container) {\r\n container.innerHTML = `\r\n <div>\r\n <h2 style=\"font-size: 2rem; font-weight: 700; margin-bottom: 2rem;\">\ud83d\udcc8 Performance Metrics<\/h2>\r\n \r\n <div class=\"card\" style=\"margin-bottom: 1.5rem;\">\r\n <h3 style=\"margin-bottom: 1rem;\">\ud83d\udd0d Filter<\/h3>\r\n <div class=\"form-group\" style=\"max-width: 300px;\">\r\n <label>Time Period<\/label>\r\n <select id=\"performancePeriod\" onchange=\"updatePerformanceMetrics()\">\r\n <option value=\"7\">Last 7 Days<\/option>\r\n <option value=\"15\">Last 15 Days<\/option>\r\n <option value=\"30\" selected>Last 30 Days<\/option>\r\n <option value=\"60\">Last 60 Days<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"performanceResults\"><\/div>\r\n <\/div>\r\n `;\r\n \r\n updatePerformanceMetrics();\r\n }\r\n\r\n function updatePerformanceMetrics() {\r\n const days = parseInt(document.getElementById('performancePeriod')?.value || 30);\r\n const resultsDiv = document.getElementById('performanceResults');\r\n if (!resultsDiv) return;\r\n \r\n const performanceData = staffData.map(staff => ({\r\n staff: staff,\r\n metrics: calculateStaffPerformance(staff, days)\r\n })).sort((a, b) => b.metrics.rating - a.metrics.rating);\r\n \r\n resultsDiv.innerHTML = `\r\n <div style=\"display: grid; gap: 1.5rem;\">\r\n ${performanceData.map((data, i) => {\r\n const stars = '\u2b50'.repeat(data.metrics.rating);\r\n const ratingColor = data.metrics.rating >= 4 ? '#10b981' : \r\n data.metrics.rating >= 3 ? '#f59e0b' : '#ef4444';\r\n \r\n return `\r\n <div class=\"card\" style=\"animation: slideIn 0.5s ease forwards; animation-delay: ${i * 0.05}s;\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n ${data.staff.photo ? \r\n `<img decoding=\"async\" src=\"${data.staff.photo}\" style=\"width: 60px; height: 60px; border-radius: 12px; object-fit: cover; border: 2px solid ${ratingColor};\">` :\r\n `<div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #6366f1, #ec4899); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: white; font-weight: 700;\">${data.staff.name.charAt(0).toUpperCase()}<\/div>`\r\n }\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.3rem; font-weight: 700;\">${data.staff.name}<\/h3>\r\n <p style=\"margin: 0.2rem 0; color: #94a3b8;\">${data.staff.designation || data.staff.department}<\/p>\r\n <p style=\"margin: 0.3rem 0 0 0; font-size: 1.2rem;\">${stars}<\/p>\r\n <\/div>\r\n <\/div>\r\n <div style=\"text-align: right;\">\r\n <p style=\"margin: 0; font-size: 0.9rem; color: #94a3b8;\">Overall Rating<\/p>\r\n <p style=\"margin: 0.3rem 0 0 0; font-size: 2rem; font-weight: 800; color: ${ratingColor};\">${data.metrics.rating}\/5<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; padding: 1.5rem; background: rgba(99, 102, 241, 0.05); border-radius: 12px;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Attendance<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #6366f1; margin: 0;\">${data.metrics.attendanceRate}%<\/p>\r\n <p style=\"font-size: 0.75rem; color: #94a3b8; margin-top: 0.2rem;\">${data.metrics.totalDays}\/${days} days<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">On-Time Rate<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #10b981; margin: 0;\">${data.metrics.onTimeRate}%<\/p>\r\n <p style=\"font-size: 0.75rem; color: #94a3b8; margin-top: 0.2rem;\">${data.metrics.totalDays - data.metrics.lateDays} on-time<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Late Days<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #ef4444; margin: 0;\">${data.metrics.lateDays}<\/p>\r\n <p style=\"font-size: 0.75rem; color: #94a3b8; margin-top: 0.2rem;\">days late<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Total Hours<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #ec4899; margin: 0;\">${data.metrics.totalHours}h<\/p>\r\n <p style=\"font-size: 0.75rem; color: #94a3b8; margin-top: 0.2rem;\">${data.metrics.avgHoursPerDay}h avg\/day<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('')}\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ NOTIFICATIONS VIEW\r\n \/\/ ============================================\r\n \r\n function renderNotificationsView(container) {\r\n \/\/ Mark all as read\r\n notifications.forEach(n => n.read = true);\r\n updateNotificationBadge();\r\n \r\n container.innerHTML = `\r\n <div>\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;\">\r\n <h2 style=\"font-size: 2rem; font-weight: 700;\">\ud83d\udd14 Notifications<\/h2>\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"clearAllNotifications()\">\ud83d\uddd1\ufe0f Clear All<\/button>\r\n <\/div>\r\n \r\n ${notifications.length === 0 ? `\r\n <div class=\"card\" style=\"text-align: center; padding: 3rem;\">\r\n <div style=\"font-size: 4rem; margin-bottom: 1rem;\">\ud83d\udd14<\/div>\r\n <p style=\"color: #94a3b8;\">No notifications yet<\/p>\r\n <\/div>\r\n ` : `\r\n <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\r\n ${notifications.map((notif, i) => {\r\n const icon = notif.type === 'success' ? '\u2705' : \r\n notif.type === 'warning' ? '\u26a0\ufe0f' : \r\n notif.type === 'error' ? '\u274c' : '\u2139\ufe0f';\r\n const bgColor = notif.type === 'success' ? 'rgba(16, 185, 129, 0.1)' : \r\n notif.type === 'warning' ? 'rgba(245, 158, 11, 0.1)' : \r\n notif.type === 'error' ? 'rgba(239, 68, 68, 0.1)' : 'rgba(99, 102, 241, 0.1)';\r\n const borderColor = notif.type === 'success' ? '#10b981' : \r\n notif.type === 'warning' ? '#f59e0b' : \r\n notif.type === 'error' ? '#ef4444' : '#6366f1';\r\n \r\n return `\r\n <div class=\"card\" style=\"background: ${bgColor}; border: 1px solid ${borderColor}; animation: slideIn 0.5s ease forwards; animation-delay: ${i * 0.05}s;\">\r\n <div style=\"display: flex; align-items: flex-start; gap: 1rem;\">\r\n <div style=\"font-size: 1.5rem;\">${icon}<\/div>\r\n <div style=\"flex: 1;\">\r\n ${notif.staffName ? `<p style=\"margin: 0; font-weight: 700; color: ${borderColor};\">${notif.staffName}<\/p>` : ''}\r\n <p style=\"margin: ${notif.staffName ? '0.3rem' : '0'} 0 0 0; color: #e2e8f0;\">${notif.message}<\/p>\r\n <p style=\"margin: 0.5rem 0 0 0; font-size: 0.85rem; color: #94a3b8;\">${new Date(notif.timestamp).toLocaleString('en-IN')}<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('')}\r\n <\/div>\r\n `}\r\n <\/div>\r\n `;\r\n }\r\n\r\n function clearAllNotifications() {\r\n if (confirm('Clear all notifications?')) {\r\n notifications = [];\r\n updateNotificationBadge();\r\n renderNotificationsView(document.getElementById('mainContent'));\r\n addNotification('All notifications cleared', 'success');\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ STAFF MANAGEMENT\r\n \/\/ ============================================\r\n \r\n let currentPhoto = '';\r\n let currentDocs = [];\r\n\r\n function openAddStaffModal() {\r\n currentPhoto = '';\r\n currentDocs = [];\r\n \r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = 'Add New Staff Member';\r\n document.getElementById('modalBody').innerHTML = `\r\n <form id=\"staffForm\" onsubmit=\"saveStaff(event)\">\r\n <div class=\"form-group full-width\" style=\"text-align: center; margin-bottom: 2rem;\">\r\n <label>Photo<\/label>\r\n <div class=\"photo-upload-area\" onclick=\"document.getElementById('photoInput').click()\">\r\n <div id=\"photoPreview\" style=\"width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #6366f1;\">\r\n <div style=\"font-size: 2.5rem;\">\ud83d\udcf7<\/div>\r\n <p style=\"margin-top: 0.5rem; font-size: 0.9rem;\">Click to upload photo<\/p>\r\n <\/div>\r\n <input type=\"file\" id=\"photoInput\" accept=\"image\/*\" style=\"display: none;\" onchange=\"handlePhotoUpload(event)\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label>Full Name *<\/label>\r\n <input type=\"text\" name=\"name\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>WhatsApp Number *<\/label>\r\n <input type=\"tel\" name=\"whatsapp\" placeholder=\"+91 98765 43210\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Wage Type *<\/label>\r\n <select name=\"wageType\" required>\r\n <option value=\"Per Day\">Per Day<\/option>\r\n <option value=\"Per Hour\">Per Hour<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Rate (\u20b9) *<\/label>\r\n <input type=\"number\" name=\"rate\" step=\"0.01\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Shift Start Time *<\/label>\r\n <input type=\"time\" name=\"shiftStart\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Shift End Time *<\/label>\r\n <input type=\"time\" name=\"shiftEnd\" required>\r\n <\/div>\r\n <div class=\"form-group full-width\">\r\n <label>4-Digit Security PIN *<\/label>\r\n <input type=\"text\" name=\"pin\" pattern=\"[0-9]{4}\" maxlength=\"4\" placeholder=\"1234\" required>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group full-width\" style=\"margin-top: 1.5rem;\">\r\n <label>\ud83d\udccb Daily Tasks (Optional)<\/label>\r\n <div id=\"tasksList\" style=\"margin-top: 1rem;\"><\/div>\r\n <button type=\"button\" class=\"btn btn-secondary btn-sm\" onclick=\"addTask()\" style=\"margin-top: 0.5rem;\">\u2795 Add Task<\/button>\r\n <\/div>\r\n \r\n <div class=\"form-group full-width\" style=\"margin-top: 1.5rem;\">\r\n <label>Documents (Max 2 files, 5MB each)<\/label>\r\n <input type=\"file\" id=\"docInput\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" multiple onchange=\"handleDocUpload(event)\" style=\"width: 100%; padding: 0.8rem; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 8px; color: #e2e8f0;\">\r\n <div id=\"docList\" style=\"margin-top: 1rem;\"><\/div>\r\n <\/div>\r\n \r\n <div style=\"display: flex; gap: 1rem; margin-top: 2rem;\">\r\n <button type=\"button\" class=\"btn btn-secondary\" style=\"flex: 1;\" onclick=\"closeModal()\">Cancel<\/button>\r\n <button type=\"submit\" class=\"btn btn-primary\" style=\"flex: 1;\">Add Staff<\/button>\r\n <\/div>\r\n <\/form>\r\n `;\r\n modal.classList.add('active');\r\n }\r\n\r\n function handlePhotoUpload(event) {\r\n const file = event.target.files[0];\r\n if (file) {\r\n if (file.size > 5 * 1024 * 1024) {\r\n showAlert('Photo must be under 5MB', 'error');\r\n return;\r\n }\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n currentPhoto = e.target.result;\r\n document.getElementById('photoPreview').innerHTML = `<img decoding=\"async\" src=\"${e.target.result}\" class=\"photo-preview\">`;\r\n };\r\n reader.readAsDataURL(file);\r\n }\r\n }\r\n\r\n function handleDocUpload(event) {\r\n const files = Array.from(event.target.files);\r\n if (files.length > 2) {\r\n showAlert('Maximum 2 documents allowed', 'error');\r\n event.target.value = '';\r\n return;\r\n }\r\n \r\n currentDocs = [];\r\n const docList = document.getElementById('docList');\r\n docList.innerHTML = '';\r\n \r\n files.forEach(file => {\r\n if (file.size > 5 * 1024 * 1024) {\r\n showAlert(`${file.name} is too large (max 5MB)`, 'error');\r\n return;\r\n }\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n currentDocs.push({\r\n name: file.name,\r\n size: file.size,\r\n type: file.type,\r\n data: e.target.result,\r\n uploadDate: new Date().toISOString()\r\n });\r\n docList.innerHTML += `\r\n <div class=\"document-item\">\r\n <span>\ud83d\udcc4 ${file.name}<\/span>\r\n <span style=\"color: #94a3b8;\">${(file.size\/1024).toFixed(1)} KB<\/span>\r\n <\/div>\r\n `;\r\n };\r\n reader.readAsDataURL(file);\r\n });\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ TASK MANAGEMENT\r\n \/\/ ============================================\r\n \r\n let currentTasks = [];\r\n\r\n function addTask() {\r\n const tasksList = document.getElementById('tasksList');\r\n const taskId = Date.now();\r\n \r\n const taskHTML = `\r\n <div class=\"task-item\" id=\"task-${taskId}\" style=\"margin-bottom: 0.8rem;\">\r\n <input type=\"text\" class=\"task-input\" placeholder=\"Enter task description\" style=\"flex: 1; padding: 0.8rem; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 8px; color: #e2e8f0;\">\r\n <button type=\"button\" class=\"btn btn-danger btn-sm\" onclick=\"removeTask(${taskId})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n `;\r\n \r\n tasksList.insertAdjacentHTML('beforeend', taskHTML);\r\n }\r\n\r\n function removeTask(taskId) {\r\n const taskElement = document.getElementById(`task-${taskId}`);\r\n if (taskElement) {\r\n taskElement.remove();\r\n }\r\n }\r\n\r\n function addEditTask() {\r\n const tasksList = document.getElementById('tasksList');\r\n const taskId = Date.now();\r\n \r\n const taskHTML = `\r\n <div class=\"task-item\" id=\"task-edit-${taskId}\" style=\"margin-bottom: 0.8rem;\">\r\n <input type=\"text\" class=\"task-input\" placeholder=\"Enter task description\" style=\"flex: 1; padding: 0.8rem; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 8px; color: #e2e8f0;\">\r\n <button type=\"button\" class=\"btn btn-danger btn-sm\" onclick=\"removeEditTask('${taskId}')\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n `;\r\n \r\n tasksList.insertAdjacentHTML('beforeend', taskHTML);\r\n }\r\n\r\n function removeEditTask(taskId) {\r\n const taskElement = document.getElementById(`task-edit-${taskId}`);\r\n if (taskElement) {\r\n taskElement.remove();\r\n }\r\n }\r\n\r\n function getTasksFromEditForm() {\r\n const taskInputs = document.querySelectorAll('#tasksList .task-input');\r\n const tasks = [];\r\n \r\n taskInputs.forEach((input, index) => {\r\n const taskText = input.value.trim();\r\n if (taskText) {\r\n \/\/ Preserve completed status if task already exists\r\n const existingTask = currentTasks[index];\r\n tasks.push({\r\n id: existingTask?.id || (Date.now() + Math.random()),\r\n text: taskText,\r\n completed: existingTask?.completed || false,\r\n createdDate: existingTask?.createdDate || new Date().toISOString()\r\n });\r\n }\r\n });\r\n \r\n return tasks;\r\n }\r\n\r\n function toggleTasks(staffId) {\r\n const tasksDiv = document.getElementById(`tasks-${staffId}`);\r\n const toggleBtn = document.getElementById(`toggle-${staffId}`);\r\n \r\n if (tasksDiv.style.display === 'none') {\r\n tasksDiv.style.display = 'block';\r\n toggleBtn.textContent = '\u25b2 Hide';\r\n } else {\r\n tasksDiv.style.display = 'none';\r\n toggleBtn.textContent = '\u25bc Show';\r\n }\r\n }\r\n\r\n function toggleTask(staffId, taskIndex) {\r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff || !staff.tasks || !staff.tasks[taskIndex]) return;\r\n \r\n staff.tasks[taskIndex].completed = !staff.tasks[taskIndex].completed;\r\n saveToStorage();\r\n \r\n \/\/ Refresh attendance view to update progress bar\r\n if (currentView === 'attendance') {\r\n renderAttendanceView(document.getElementById('mainContent'));\r\n }\r\n \r\n const status = staff.tasks[taskIndex].completed ? 'completed' : 'pending';\r\n addNotification(`Task marked as ${status}`, 'success', staff.name);\r\n }\r\n\r\n function getTasksFromForm() {\r\n const taskInputs = document.querySelectorAll('.task-input');\r\n const tasks = [];\r\n \r\n taskInputs.forEach(input => {\r\n const taskText = input.value.trim();\r\n if (taskText) {\r\n tasks.push({\r\n id: Date.now() + Math.random(),\r\n text: taskText,\r\n completed: false,\r\n createdDate: new Date().toISOString()\r\n });\r\n }\r\n });\r\n \r\n return tasks;\r\n }\r\n\r\n function saveStaff(event) {\r\n event.preventDefault();\r\n const formData = new FormData(event.target);\r\n \r\n const newStaff = {\r\n id: Date.now(),\r\n name: formData.get('name'),\r\n whatsapp: formData.get('whatsapp'),\r\n wageType: formData.get('wageType'),\r\n rate: parseFloat(formData.get('rate')),\r\n shiftStart: formData.get('shiftStart'),\r\n shiftEnd: formData.get('shiftEnd'),\r\n pin: formData.get('pin'),\r\n photo: currentPhoto,\r\n documents: currentDocs,\r\n punchRecords: [],\r\n tasks: getTasksFromForm()\r\n };\r\n \r\n staffData.push(newStaff);\r\n saveToStorage();\r\n addNotification('Staff added successfully!', 'success', newStaff.name);\r\n showAlert('Staff added successfully!', 'success');\r\n closeModal();\r\n switchView('staff');\r\n }\r\n\r\n function editStaff(staffId) {\r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n currentPhoto = staff.photo || '';\r\n currentDocs = staff.documents || [];\r\n currentTasks = staff.tasks || [];\r\n \r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = 'Edit Staff Member';\r\n document.getElementById('modalBody').innerHTML = `\r\n <form id=\"staffForm\" onsubmit=\"updateStaff(event, ${staffId})\">\r\n <div class=\"form-group full-width\" style=\"text-align: center; margin-bottom: 2rem;\">\r\n <label>Photo<\/label>\r\n <div class=\"photo-upload-area\" onclick=\"document.getElementById('photoInput').click()\">\r\n <div id=\"photoPreview\" style=\"width: 100%; height: 100%;\">\r\n ${staff.photo ? \r\n `<img decoding=\"async\" src=\"${staff.photo}\" class=\"photo-preview\">` :\r\n `<div style=\"display: flex; align-items: center; justify-content: center; flex-direction: column; color: #6366f1; height: 100%;\"><div style=\"font-size: 2.5rem;\">\ud83d\udcf7<\/div><p style=\"margin-top: 0.5rem; font-size: 0.9rem;\">Click to upload<\/p><\/div>`\r\n }\r\n <\/div>\r\n <input type=\"file\" id=\"photoInput\" accept=\"image\/*\" style=\"display: none;\" onchange=\"handlePhotoUpload(event)\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label>Full Name *<\/label>\r\n <input type=\"text\" name=\"name\" value=\"${staff.name}\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>WhatsApp Number *<\/label>\r\n <input type=\"tel\" name=\"whatsapp\" value=\"${staff.whatsapp}\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Wage Type *<\/label>\r\n <select name=\"wageType\" required>\r\n <option value=\"Per Day\" ${staff.wageType === 'Per Day' ? 'selected' : ''}>Per Day<\/option>\r\n <option value=\"Per Hour\" ${staff.wageType === 'Per Hour' ? 'selected' : ''}>Per Hour<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Rate (\u20b9) *<\/label>\r\n <input type=\"number\" name=\"rate\" value=\"${staff.rate}\" step=\"0.01\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Shift Start Time *<\/label>\r\n <input type=\"time\" name=\"shiftStart\" value=\"${staff.shiftStart}\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Shift End Time *<\/label>\r\n <input type=\"time\" name=\"shiftEnd\" value=\"${staff.shiftEnd}\" required>\r\n <\/div>\r\n <div class=\"form-group full-width\">\r\n <label>4-Digit Security PIN *<\/label>\r\n <input type=\"text\" name=\"pin\" value=\"${staff.pin}\" pattern=\"[0-9]{4}\" maxlength=\"4\" required>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group full-width\" style=\"margin-top: 1.5rem;\">\r\n <label>\ud83d\udccb Daily Tasks<\/label>\r\n <div id=\"tasksList\" style=\"margin-top: 1rem;\">\r\n ${currentTasks.map((task, idx) => `\r\n <div class=\"task-item\" id=\"task-edit-${idx}\" style=\"margin-bottom: 0.8rem;\">\r\n <input type=\"text\" class=\"task-input\" value=\"${task.text}\" placeholder=\"Enter task description\" style=\"flex: 1; padding: 0.8rem; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 8px; color: #e2e8f0;\">\r\n <button type=\"button\" class=\"btn btn-danger btn-sm\" onclick=\"removeEditTask(${idx})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <button type=\"button\" class=\"btn btn-secondary btn-sm\" onclick=\"addEditTask()\" style=\"margin-top: 0.5rem;\">\u2795 Add Task<\/button>\r\n <\/div>\r\n \r\n <div class=\"form-group full-width\" style=\"margin-top: 1.5rem;\">\r\n <label>Documents (Max 2 files, 5MB each)<\/label>\r\n <div id=\"docList\" style=\"margin-bottom: 1rem;\">\r\n ${currentDocs.map((doc, i) => `\r\n <div class=\"document-item\">\r\n <span>\ud83d\udcc4 ${doc.name}<\/span>\r\n <button type=\"button\" class=\"btn btn-danger btn-sm\" onclick=\"removeDoc(${i})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n ${currentDocs.length < 2 ? `\r\n <input type=\"file\" id=\"docInput\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" ${currentDocs.length === 1 ? '' : 'multiple'} onchange=\"handleDocUpload(event)\" style=\"width: 100%; padding: 0.8rem; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 8px; color: #e2e8f0;\">\r\n ` : ''}\r\n <\/div>\r\n \r\n <div style=\"display: flex; gap: 1rem; margin-top: 2rem;\">\r\n <button type=\"button\" class=\"btn btn-secondary\" style=\"flex: 1;\" onclick=\"closeModal()\">Cancel<\/button>\r\n <button type=\"submit\" class=\"btn btn-primary\" style=\"flex: 1;\">Save Changes<\/button>\r\n <\/div>\r\n <\/form>\r\n `;\r\n modal.classList.add('active');\r\n }\r\n\r\n function removeDoc(index) {\r\n currentDocs.splice(index, 1);\r\n \/\/ Re-render the edit form\r\n const staffId = parseInt(document.getElementById('staffForm').getAttribute('onsubmit').match(\/\\d+\/)[0]);\r\n editStaff(staffId);\r\n }\r\n\r\n function updateStaff(event, staffId) {\r\n event.preventDefault();\r\n const formData = new FormData(event.target);\r\n \r\n const index = staffData.findIndex(s => s.id === staffId);\r\n if (index !== -1) {\r\n staffData[index] = {\r\n ...staffData[index],\r\n name: formData.get('name'),\r\n whatsapp: formData.get('whatsapp'),\r\n wageType: formData.get('wageType'),\r\n rate: parseFloat(formData.get('rate')),\r\n shiftStart: formData.get('shiftStart'),\r\n shiftEnd: formData.get('shiftEnd'),\r\n pin: formData.get('pin'),\r\n photo: currentPhoto,\r\n documents: currentDocs,\r\n tasks: getTasksFromEditForm()\r\n };\r\n \r\n saveToStorage();\r\n addNotification('Staff updated successfully!', 'success', staffData[index].name);\r\n showAlert('Staff updated successfully!', 'success');\r\n closeModal();\r\n switchView('staff');\r\n }\r\n }\r\n\r\n function deleteStaff(staffId) {\r\n if (confirm('Are you sure you want to delete this staff member? This will also delete all their punch records.')) {\r\n staffData = staffData.filter(s => s.id !== staffId);\r\n saveToStorage();\r\n showAlert('Staff deleted successfully!', 'success');\r\n switchView('staff');\r\n }\r\n }\r\n\r\n function viewStaffDetails(staffId) {\r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = `Staff Details - ${staff.name}`;\r\n document.getElementById('modalBody').innerHTML = `\r\n <div>\r\n <div style=\"text-align: center; margin-bottom: 2rem;\">\r\n ${staff.photo ? \r\n `<img decoding=\"async\" src=\"${staff.photo}\" style=\"width: 150px; height: 150px; border-radius: 16px; object-fit: cover; border: 3px solid #6366f1;\">` :\r\n `<div style=\"width: 150px; height: 150px; margin: 0 auto; background: linear-gradient(135deg, #6366f1, #ec4899); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: white; font-weight: 700;\">${staff.name.charAt(0).toUpperCase()}<\/div>`\r\n }\r\n <h3 style=\"margin-top: 1rem; font-size: 1.5rem;\">${staff.name}<\/h3>\r\n <\/div>\r\n \r\n <div style=\"background: rgba(99, 102, 241, 0.1); padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem;\">\r\n <h4 style=\"margin-bottom: 1rem; color: #6366f1;\">Contact Information<\/h4>\r\n <p style=\"margin: 0.5rem 0; color: #e2e8f0;\">\ud83d\udcf1 WhatsApp: <strong>${staff.whatsapp}<\/strong><\/p>\r\n <\/div>\r\n \r\n <div style=\"background: rgba(236, 72, 153, 0.1); padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem;\">\r\n <h4 style=\"margin-bottom: 1rem; color: #ec4899;\">Wage Information<\/h4>\r\n <p style=\"margin: 0.5rem 0; color: #e2e8f0;\">\ud83d\udcb0 Wage Type: <strong>${staff.wageType}<\/strong><\/p>\r\n <p style=\"margin: 0.5rem 0; color: #e2e8f0;\">\ud83d\udcb5 Rate: <strong>\u20b9${staff.rate}<\/strong><\/p>\r\n <\/div>\r\n \r\n <div style=\"background: rgba(16, 185, 129, 0.1); padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem;\">\r\n <h4 style=\"margin-bottom: 1rem; color: #10b981;\">Shift Timing<\/h4>\r\n <p style=\"margin: 0.5rem 0; color: #e2e8f0;\">\u23f0 Start: <strong>${formatTimeAMPM(staff.shiftStart)}<\/strong><\/p>\r\n <p style=\"margin: 0.5rem 0; color: #e2e8f0;\">\u23f0 End: <strong>${formatTimeAMPM(staff.shiftEnd)}<\/strong><\/p>\r\n <\/div>\r\n \r\n <div style=\"background: rgba(245, 158, 11, 0.1); padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem;\">\r\n <h4 style=\"margin-bottom: 1rem; color: #f59e0b;\">Security<\/h4>\r\n <p style=\"margin: 0.5rem 0; color: #e2e8f0;\">\ud83d\udd12 PIN: <strong>${staff.pin}<\/strong><\/p>\r\n <\/div>\r\n \r\n <div style=\"background: rgba(99, 102, 241, 0.1); padding: 1.5rem; border-radius: 12px;\">\r\n <h4 style=\"margin-bottom: 1rem; color: #6366f1;\">Documents (${(staff.documents || []).length})<\/h4>\r\n ${(staff.documents || []).length === 0 ? \r\n '<p style=\"color: #94a3b8;\">No documents uploaded<\/p>' :\r\n (staff.documents || []).map(doc => `\r\n <div class=\"document-item\">\r\n <div>\r\n <p style=\"margin: 0; font-weight: 600;\">\ud83d\udcc4 ${doc.name}<\/p>\r\n <p style=\"margin: 0; font-size: 0.85rem; color: #94a3b8;\">\r\n ${(doc.size\/1024).toFixed(1)} KB \u2022 Uploaded ${new Date(doc.uploadDate).toLocaleDateString()}\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n `).join('')\r\n }\r\n <\/div>\r\n \r\n <button class=\"btn btn-primary\" style=\"width: 100%; margin-top: 2rem;\" onclick=\"closeModal()\">Close<\/button>\r\n <\/div>\r\n `;\r\n modal.classList.add('active');\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ PUNCH IN\/OUT\r\n \/\/ ============================================\r\n \r\n function openPunchModal() {\r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = 'Punch In\/Out - Enter PIN';\r\n document.getElementById('modalBody').innerHTML = `\r\n <div style=\"text-align: center; padding: 2rem;\">\r\n <p style=\"color: #94a3b8; margin-bottom: 2rem; font-size: 1.1rem;\">Enter your 4-digit security PIN<\/p>\r\n <div class=\"pin-input-container\">\r\n <input type=\"text\" class=\"pin-digit\" id=\"pin1\" maxlength=\"1\" pattern=\"[0-9]\" oninput=\"moveFocus(event, 'pin2')\">\r\n <input type=\"text\" class=\"pin-digit\" id=\"pin2\" maxlength=\"1\" pattern=\"[0-9]\" oninput=\"moveFocus(event, 'pin3')\">\r\n <input type=\"text\" class=\"pin-digit\" id=\"pin3\" maxlength=\"1\" pattern=\"[0-9]\" oninput=\"moveFocus(event, 'pin4')\">\r\n <input type=\"text\" class=\"pin-digit\" id=\"pin4\" maxlength=\"1\" pattern=\"[0-9]\" oninput=\"verifyPin()\">\r\n <\/div>\r\n <button class=\"btn btn-primary\" style=\"margin-top: 2rem; padding: 1rem 2rem;\" onclick=\"verifyPin()\">Verify & Punch<\/button>\r\n <\/div>\r\n `;\r\n modal.classList.add('active');\r\n setTimeout(() => document.getElementById('pin1').focus(), 100);\r\n }\r\n\r\n function moveFocus(event, nextId) {\r\n const value = event.target.value;\r\n if (value && \/[0-9]\/.test(value)) {\r\n const next = document.getElementById(nextId);\r\n if (next) next.focus();\r\n }\r\n }\r\n\r\n function verifyPin() {\r\n const pin = ['pin1', 'pin2', 'pin3', 'pin4']\r\n .map(id => document.getElementById(id)?.value || '')\r\n .join('');\r\n \r\n if (pin.length !== 4) {\r\n showAlert('Please enter complete 4-digit PIN', 'error');\r\n return;\r\n }\r\n \r\n const staff = staffData.find(s => s.pin === pin);\r\n if (!staff) {\r\n showAlert('Invalid PIN! Please try again.', 'error');\r\n \/\/ Clear PIN inputs\r\n ['pin1', 'pin2', 'pin3', 'pin4'].forEach(id => {\r\n const input = document.getElementById(id);\r\n if (input) input.value = '';\r\n });\r\n document.getElementById('pin1')?.focus();\r\n return;\r\n }\r\n \r\n const today = new Date().toDateString();\r\n const todayRecords = (staff.punchRecords || []).filter(r => \r\n new Date(r.punchIn).toDateString() === today\r\n );\r\n const activeRecord = todayRecords.find(r => !r.punchOut);\r\n \r\n if (activeRecord) {\r\n \/\/ Punch Out - Show note dialog first\r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = `Punch Out - ${staff.name}`;\r\n document.getElementById('modalBody').innerHTML = `\r\n <form onsubmit=\"completePunchOut(event, ${staff.id})\">\r\n <div style=\"background: rgba(16, 185, 129, 0.1); padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem; text-align: center;\">\r\n <div style=\"font-size: 3rem; margin-bottom: 0.5rem;\">\u2705<\/div>\r\n <h3 style=\"color: #10b981; margin: 0;\">Ready to Punch Out?<\/h3>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label>Punch Out Note (Optional)<\/label>\r\n <textarea id=\"punchOutNote\" rows=\"3\" placeholder=\"Reason for leaving, tasks completed, etc...\" style=\"width: 100%; padding: 0.8rem; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 8px; color: #e2e8f0; resize: vertical;\"><\/textarea>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-top: 0.5rem;\">\ud83d\udca1 Optional: Leave a note about your shift<\/p>\r\n <\/div>\r\n \r\n <div style=\"display: flex; gap: 1rem; margin-top: 2rem;\">\r\n <button type=\"button\" class=\"btn btn-secondary\" style=\"flex: 1;\" onclick=\"closeModal()\">Cancel<\/button>\r\n <button type=\"submit\" class=\"btn btn-success\" style=\"flex: 1;\">\ud83d\udc4b Punch Out<\/button>\r\n <\/div>\r\n <\/form>\r\n `;\r\n modal.classList.add('active');\r\n return;\r\n } else {\r\n \/\/ Punch In Logic with Night Shift Support\r\n const now = new Date();\r\n const currentTime = now.getHours() * 60 + now.getMinutes();\r\n const [shiftStartHour, shiftStartMin] = staff.shiftStart.split(':').map(Number);\r\n const [shiftEndHour, shiftEndMin] = staff.shiftEnd.split(':').map(Number);\r\n const shiftStartTime = shiftStartHour * 60 + shiftStartMin;\r\n const shiftEndTime = shiftEndHour * 60 + shiftEndMin;\r\n \r\n const nightShift = isNightShift(staff.shiftStart, staff.shiftEnd);\r\n \r\n let canPunchIn = false;\r\n let lateMinutes = 0;\r\n \r\n if (nightShift) {\r\n \/\/ Night shift logic: allow punch in if current time is >= shift start OR <= shift end\r\n if (currentTime >= shiftStartTime) {\r\n \/\/ After shift start time (same day)\r\n canPunchIn = true;\r\n lateMinutes = currentTime - shiftStartTime;\r\n } else if (currentTime <= shiftEndTime) {\r\n \/\/ Before shift end time (next day morning)\r\n canPunchIn = true;\r\n \/\/ Calculate late minutes: time from shift start (previous day) to now\r\n lateMinutes = (1440 - shiftStartTime) + currentTime; \/\/ 1440 = minutes in a day\r\n } else {\r\n \/\/ Between shift end and shift start (not allowed)\r\n canPunchIn = false;\r\n }\r\n } else {\r\n \/\/ Regular shift logic: current time must be >= shift start\r\n if (currentTime >= shiftStartTime) {\r\n canPunchIn = true;\r\n lateMinutes = currentTime - shiftStartTime;\r\n } else {\r\n canPunchIn = false;\r\n }\r\n }\r\n \r\n if (!canPunchIn) {\r\n const minutesToWait = nightShift ? \r\n (shiftStartTime - currentTime) : \r\n (shiftStartTime - currentTime);\r\n \r\n addNotification(`Too early to punch in. Wait ${minutesToWait} minutes.`, 'warning', staff.name);\r\n showAlert(\r\n `Too early! Your shift starts at ${formatTimeAMPM(staff.shiftStart)}. Please wait ${minutesToWait} minutes.`, \r\n 'error'\r\n );\r\n closeModal();\r\n return;\r\n }\r\n \r\n \/\/ Punch In\r\n if (!staff.punchRecords) staff.punchRecords = [];\r\n staff.punchRecords.push({\r\n punchIn: new Date().toISOString(),\r\n punchOut: null\r\n });\r\n saveToStorage();\r\n \r\n if (lateMinutes > 0) {\r\n addNotification(`Punched in (Late by ${lateMinutes} minutes)`, 'warning', staff.name);\r\n showAlert(`${staff.name} punched in successfully! (Late by ${lateMinutes} minutes)`, 'success');\r\n } else {\r\n addNotification('Punched in on time!', 'success', staff.name);\r\n showAlert(`${staff.name} punched in on time!`, 'success');\r\n }\r\n }\r\n \r\n closeModal();\r\n if (currentView === 'attendance' || currentView === 'history') {\r\n switchView(currentView);\r\n }\r\n }\r\n\r\n function completePunchOut(event, staffId) {\r\n event.preventDefault();\r\n \r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n const note = document.getElementById('punchOutNote')?.value.trim() || '';\r\n \r\n const today = new Date().toDateString();\r\n const todayRecords = (staff.punchRecords || []).filter(r => \r\n new Date(r.punchIn).toDateString() === today\r\n );\r\n const activeRecord = todayRecords.find(r => !r.punchOut);\r\n \r\n if (!activeRecord) {\r\n showAlert('No active punch record found!', 'error');\r\n closeModal();\r\n return;\r\n }\r\n \r\n \/\/ Punch Out\r\n activeRecord.punchOut = new Date().toISOString();\r\n activeRecord.note = note;\r\n saveToStorage();\r\n \r\n \/\/ Calculate worked time\r\n const workedMinutes = (new Date(activeRecord.punchOut) - new Date(activeRecord.punchIn)) \/ (1000 * 60);\r\n const workedHours = (workedMinutes \/ 60).toFixed(2);\r\n \r\n closeModal();\r\n addNotification(`Punched out successfully! Worked: ${workedHours} hours`, 'success', staff.name);\r\n showAlert(`${staff.name} punched out successfully! Worked: ${workedHours} hours`, 'success');\r\n \r\n if (currentView === 'attendance' || currentView === 'history') {\r\n switchView(currentView);\r\n }\r\n }\r\n\r\n \/\/ Auto Punch Out Function\r\n function checkAutoPunchOut() {\r\n const now = new Date();\r\n const today = now.toDateString();\r\n const currentTime = now.getHours() * 60 + now.getMinutes();\r\n \r\n staffData.forEach(staff => {\r\n const [shiftEndHour, shiftEndMin] = staff.shiftEnd.split(':').map(Number);\r\n const shiftEndTime = shiftEndHour * 60 + shiftEndMin;\r\n const nightShift = isNightShift(staff.shiftStart, staff.shiftEnd);\r\n \r\n \/\/ Find active punch records\r\n const activeRecords = (staff.punchRecords || []).filter(r => !r.punchOut);\r\n \r\n activeRecords.forEach(activeRecord => {\r\n const punchInDate = new Date(activeRecord.punchIn);\r\n const expectedEndTime = getShiftEndDateTime(punchInDate, staff.shiftEnd, nightShift);\r\n \r\n \/\/ Check if current time has passed the expected shift end time\r\n if (now >= expectedEndTime) {\r\n \/\/ Auto punch out at shift end time\r\n activeRecord.punchOut = expectedEndTime.toISOString();\r\n saveToStorage();\r\n console.log(`Auto punched out ${staff.name} at shift end time`);\r\n }\r\n });\r\n });\r\n }\r\n\r\n \/\/ Calculate real-time earnings\r\n function calculateRealTimeEarnings(staff, punchRecord) {\r\n if (!punchRecord || !punchRecord.punchIn) return { minutes: 0, hours: 0, earnings: 0 };\r\n \r\n const startTime = new Date(punchRecord.punchIn);\r\n const endTime = punchRecord.punchOut ? new Date(punchRecord.punchOut) : new Date();\r\n \r\n let workedMinutes = (endTime - startTime) \/ (1000 * 60);\r\n \r\n \/\/ Handle negative minutes (shouldn't happen with proper punch logic, but safety check)\r\n if (workedMinutes < 0) {\r\n workedMinutes = 0;\r\n }\r\n \r\n const workedHours = workedMinutes \/ 60;\r\n \r\n \/\/ Calculate rate per minute\r\n let ratePerMinute = 0;\r\n if (staff.wageType === 'Per Hour') {\r\n ratePerMinute = staff.rate \/ 60;\r\n } else if (staff.wageType === 'Per Day') {\r\n \/\/ Assume 8 hours per day\r\n ratePerMinute = staff.rate \/ (8 * 60);\r\n }\r\n \r\n const earnings = workedMinutes * ratePerMinute;\r\n \r\n return {\r\n minutes: Math.floor(workedMinutes),\r\n hours: workedHours.toFixed(2),\r\n earnings: earnings.toFixed(2)\r\n };\r\n }\r\n\r\n \/\/ Check if shift is a night shift (crosses midnight)\r\n function isNightShift(shiftStart, shiftEnd) {\r\n const [startHour, startMin] = shiftStart.split(':').map(Number);\r\n const [endHour, endMin] = shiftEnd.split(':').map(Number);\r\n \r\n const startMinutes = startHour * 60 + startMin;\r\n const endMinutes = endHour * 60 + endMin;\r\n \r\n \/\/ If end time is less than start time, it's a night shift\r\n return endMinutes < startMinutes;\r\n }\r\n\r\n \/\/ Get shift end time considering night shifts\r\n function getShiftEndDateTime(punchInDate, shiftEnd, isNight) {\r\n const [endHour, endMin] = shiftEnd.split(':').map(Number);\r\n const endDateTime = new Date(punchInDate);\r\n \r\n if (isNight) {\r\n \/\/ Night shift - add one day\r\n endDateTime.setDate(endDateTime.getDate() + 1);\r\n }\r\n \r\n endDateTime.setHours(endHour, endMin, 0, 0);\r\n return endDateTime;\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ DATA IMPORT\/EXPORT\r\n \/\/ ============================================\r\n \r\n function exportData() {\r\n const dataStr = JSON.stringify(staffData, null, 2);\r\n const dataBlob = new Blob([dataStr], { type: 'application\/json' });\r\n const url = URL.createObjectURL(dataBlob);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = `staff-data-${new Date().toISOString().split('T')[0]}.json`;\r\n link.click();\r\n URL.revokeObjectURL(url);\r\n showAlert('Data exported successfully!', 'success');\r\n }\r\n\r\n function importData() {\r\n document.getElementById('importFileInput').click();\r\n }\r\n\r\n function handleImportFile(event) {\r\n const file = event.target.files[0];\r\n if (!file) return;\r\n \r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n try {\r\n const importedData = JSON.parse(e.target.result);\r\n if (Array.isArray(importedData)) {\r\n if (confirm('This will replace all existing data. Are you sure?')) {\r\n staffData = importedData;\r\n saveToStorage();\r\n showAlert('Data imported successfully!', 'success');\r\n switchView(currentView);\r\n }\r\n } else {\r\n showAlert('Invalid data format', 'error');\r\n }\r\n } catch (error) {\r\n showAlert('Error importing data', 'error');\r\n }\r\n };\r\n reader.readAsText(file);\r\n event.target.value = '';\r\n }\r\n\r\n function clearAllData() {\r\n if (confirm('Are you sure you want to delete ALL staff data? This cannot be undone!')) {\r\n if (confirm('Final confirmation: This will permanently delete everything including all punch records!')) {\r\n staffData = [];\r\n saveToStorage();\r\n showAlert('All data cleared successfully!', 'success');\r\n switchView('dashboard');\r\n }\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ UTILITY FUNCTIONS\r\n \/\/ ============================================\r\n \r\n function formatTimeAMPM(time24) {\r\n \/\/ Convert 24-hour time (HH:MM) to 12-hour AM\/PM format\r\n if (!time24) return '';\r\n \r\n const [hours, minutes] = time24.split(':').map(Number);\r\n const period = hours >= 12 ? 'PM' : 'AM';\r\n const hours12 = hours % 12 || 12;\r\n \r\n return `${hours12}:${minutes.toString().padStart(2, '0')} ${period}`;\r\n }\r\n\r\n function formatDateTimeAMPM(dateTimeString) {\r\n \/\/ Convert ISO datetime to 12-hour AM\/PM format\r\n const date = new Date(dateTimeString);\r\n const hours = date.getHours();\r\n const minutes = date.getMinutes();\r\n const period = hours >= 12 ? 'PM' : 'AM';\r\n const hours12 = hours % 12 || 12;\r\n \r\n return `${hours12}:${minutes.toString().padStart(2, '0')} ${period}`;\r\n }\r\n\r\n function closeModal() {\r\n document.getElementById('modal').classList.remove('active');\r\n }\r\n\r\n function showAlert(message, type = 'success') {\r\n const alert = document.createElement('div');\r\n alert.className = `alert ${type}`;\r\n alert.innerHTML = `\r\n <span style=\"font-size: 1.5rem;\">${type === 'success' ? '\u2713' : '\u26a0'}<\/span>\r\n <span>${message}<\/span>\r\n `;\r\n document.body.appendChild(alert);\r\n \r\n setTimeout(() => {\r\n alert.style.animation = 'slideIn 0.3s ease reverse';\r\n setTimeout(() => alert.remove(), 300);\r\n }, 3000);\r\n }\r\n\r\n document.getElementById('modal').addEventListener('click', (e) => {\r\n if (e.target.id === 'modal') closeModal();\r\n });\r\n\r\n \/\/ ============================================\r\n \/\/ INITIALIZE\r\n \/\/ ============================================\r\n \r\n window.addEventListener('load', () => {\r\n \/\/ Apply dark mode on load\r\n applyDarkMode();\r\n \r\n switchView('attendance');\r\n updateNotificationBadge();\r\n \r\n \/\/ Check for auto punch out every minute\r\n setInterval(() => {\r\n checkAutoPunchOut();\r\n }, 60000);\r\n \r\n \/\/ Initial check\r\n checkAutoPunchOut();\r\n \r\n \/\/ Auto backup check (once per day)\r\n autoBackup();\r\n \r\n \/\/ Check for daily WhatsApp report (at 6 PM)\r\n checkDailyReport();\r\n setInterval(checkDailyReport, 60 * 60 * 1000); \/\/ Check every hour\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Staff Manager Pro – Free Edition \ud83d\udc65 Staff Manager Pro \ud83d\udce5 Export \ud83d\udce4 Import \ud83d\uddd1\ufe0f Clear All \u23f0 Attendance \ud83d\udd10 Admin Panel Modal \u2715<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2774","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/comments?post=2774"}],"version-history":[{"count":64,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2774\/revisions"}],"predecessor-version":[{"id":3285,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2774\/revisions\/3285"}],"wp:attachment":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/media?parent=2774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n \r\n \r\n \r\n Staff Manager Pro - Free Edition<\/title>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Albert+Sans:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Albert Sans', system-ui, -apple-system, sans-serif;\r\n background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);\r\n color: #e2e8f0;\r\n min-height: 100vh;\r\n }\r\n\r\n .bg-circle-1, .bg-circle-2 {\r\n position: fixed;\r\n border-radius: 50%;\r\n filter: blur(60px);\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n\r\n .bg-circle-1 {\r\n top: -50%;\r\n right: -20%;\r\n width: 600px;\r\n height: 600px;\r\n background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);\r\n animation: float 20s ease-in-out infinite;\r\n }\r\n\r\n .bg-circle-2 {\r\n bottom: -30%;\r\n left: -10%;\r\n width: 500px;\r\n height: 500px;\r\n background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%);\r\n animation: float 25s ease-in-out infinite reverse;\r\n }\r\n\r\n @keyframes float {\r\n 0%, 100% { transform: translate(0, 0) rotate(0deg); }\r\n 33% { transform: translate(30px, -30px) rotate(5deg); }\r\n 66% { transform: translate(-20px, 20px) rotate(-5deg); }\r\n }\r\n\r\n @keyframes slideIn {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0.5; }\r\n }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n\r\n @keyframes slideUp {\r\n from { opacity: 0; transform: translateY(50px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 2rem;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n header {\r\n background: rgba(15, 23, 42, 0.8);\r\n backdrop-filter: blur(20px);\r\n border-bottom: 1px solid rgba(99, 102, 241, 0.2);\r\n padding: 1.5rem 2rem;\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .header-content {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 1rem;\r\n }\r\n\r\n .logo-section {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n }\r\n\r\n .logo {\r\n width: 50px;\r\n height: 50px;\r\n background: linear-gradient(135deg, #6366f1, #ec4899);\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);\r\n font-size: 1.5rem;\r\n font-weight: 800;\r\n color: white;\r\n }\r\n\r\n .logo-text h1 {\r\n font-size: 1.8rem;\r\n font-weight: 800;\r\n background: linear-gradient(135deg, #6366f1, #ec4899);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n margin: 0;\r\n }\r\n\r\n .logo-text p {\r\n font-size: 0.85rem;\r\n color: #94a3b8;\r\n margin: 0;\r\n }\r\n\r\n .header-actions {\r\n display: flex;\r\n gap: 0.8rem;\r\n }\r\n\r\n nav {\r\n display: flex;\r\n gap: 0.5rem;\r\n flex-wrap: wrap;\r\n margin-top: 1rem;\r\n }\r\n\r\n .nav-btn {\r\n padding: 0.7rem 1.5rem;\r\n background: transparent;\r\n border: 1px solid transparent;\r\n border-radius: 10px;\r\n color: #94a3b8;\r\n font-size: 0.95rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .nav-btn.active {\r\n background: rgba(99, 102, 241, 0.2);\r\n border-color: #6366f1;\r\n color: #6366f1;\r\n }\r\n\r\n .nav-btn:hover {\r\n color: #6366f1;\r\n }\r\n\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 1.5rem;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .stat-card {\r\n background: rgba(30, 41, 59, 0.6);\r\n backdrop-filter: blur(10px);\r\n padding: 1.5rem;\r\n border-radius: 16px;\r\n border: 1px solid rgba(99, 102, 241, 0.2);\r\n transition: all 0.3s ease;\r\n animation: slideIn 0.5s ease forwards;\r\n }\r\n\r\n .stat-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\r\n }\r\n\r\n .card {\r\n background: rgba(30, 41, 59, 0.6);\r\n backdrop-filter: blur(10px);\r\n padding: 2rem;\r\n border-radius: 16px;\r\n border: 1px solid rgba(99, 102, 241, 0.2);\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .btn {\r\n padding: 0.8rem 1.5rem;\r\n border: none;\r\n border-radius: 10px;\r\n font-size: 0.95rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n }\r\n\r\n .btn:hover {\r\n transform: scale(1.05);\r\n }\r\n\r\n .btn-primary {\r\n background: linear-gradient(135deg, #6366f1, #8b5cf6);\r\n color: white;\r\n box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n .btn-success {\r\n background: linear-gradient(135deg, #10b981, #14b8a6);\r\n color: white;\r\n }\r\n\r\n .btn-danger {\r\n background: linear-gradient(135deg, #ef4444, #f97316);\r\n color: white;\r\n }\r\n\r\n .btn-secondary {\r\n background: rgba(99, 102, 241, 0.2);\r\n border: 1px solid #6366f1;\r\n color: #6366f1;\r\n }\r\n\r\n .btn-sm {\r\n padding: 0.5rem 1rem;\r\n font-size: 0.85rem;\r\n }\r\n\r\n .form-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 1.5rem;\r\n margin-bottom: 1.5rem;\r\n }\r\n\r\n .form-group {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .form-group.full-width {\r\n grid-column: 1 \/ -1;\r\n }\r\n\r\n .form-group label {\r\n margin-bottom: 0.5rem;\r\n color: #94a3b8;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n }\r\n\r\n .form-group input,\r\n .form-group select {\r\n width: 100%;\r\n padding: 0.8rem;\r\n background: rgba(30, 41, 59, 0.6);\r\n border: 1px solid rgba(99, 102, 241, 0.2);\r\n border-radius: 8px;\r\n color: #e2e8f0;\r\n font-size: 0.95rem;\r\n transition: all 0.2s ease;\r\n font-family: inherit;\r\n }\r\n\r\n .form-group input:focus,\r\n .form-group select:focus {\r\n outline: none;\r\n border-color: #6366f1;\r\n box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\r\n }\r\n\r\n .photo-upload-area {\r\n width: 150px;\r\n height: 150px;\r\n border: 2px dashed #6366f1;\r\n border-radius: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n background: rgba(99, 102, 241, 0.05);\r\n transition: all 0.3s ease;\r\n margin: 0 auto;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .photo-upload-area:hover {\r\n background: rgba(99, 102, 241, 0.1);\r\n }\r\n\r\n .photo-preview {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n .staff-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n }\r\n\r\n .staff-item {\r\n background: rgba(30, 41, 59, 0.6);\r\n padding: 1.5rem;\r\n border-radius: 16px;\r\n border: 1px solid rgba(99, 102, 241, 0.2);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n transition: all 0.3s ease;\r\n animation: slideIn 0.5s ease forwards;\r\n }\r\n\r\n .staff-item:hover {\r\n transform: translateX(5px);\r\n background: rgba(51, 65, 85, 0.8);\r\n }\r\n\r\n .staff-info {\r\n display: flex;\r\n align-items: center;\r\n gap: 1.5rem;\r\n flex: 1;\r\n }\r\n\r\n .staff-photo {\r\n width: 70px;\r\n height: 70px;\r\n border-radius: 16px;\r\n object-fit: cover;\r\n border: 2px solid #6366f1;\r\n }\r\n\r\n .staff-avatar {\r\n width: 70px;\r\n height: 70px;\r\n background: linear-gradient(135deg, #6366f1, #ec4899);\r\n border-radius: 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n color: white;\r\n box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n .modal {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.7);\r\n backdrop-filter: blur(5px);\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000;\r\n padding: 2rem;\r\n overflow-y: auto;\r\n }\r\n\r\n .modal.active {\r\n display: flex;\r\n }\r\n\r\n .modal-content {\r\n background: linear-gradient(135deg, #1e293b 0%, #334155 100%);\r\n border-radius: 20px;\r\n border: 1px solid rgba(99, 102, 241, 0.3);\r\n max-width: 800px;\r\n width: 100%;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\r\n animation: slideUp 0.3s ease;\r\n margin: auto;\r\n }\r\n\r\n .modal-header {\r\n padding: 2rem;\r\n border-bottom: 1px solid rgba(99, 102, 241, 0.2);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n position: sticky;\r\n top: 0;\r\n background: #1e293b;\r\n z-index: 1;\r\n }\r\n\r\n .modal-body {\r\n padding: 2rem;\r\n }\r\n\r\n .close-btn {\r\n background: rgba(239, 68, 68, 0.2);\r\n border: 1px solid #ef4444;\r\n border-radius: 8px;\r\n padding: 0.5rem;\r\n color: #ef4444;\r\n cursor: pointer;\r\n font-size: 1.2rem;\r\n border: none;\r\n }\r\n\r\n .pin-input-container {\r\n display: flex;\r\n gap: 1rem;\r\n justify-content: center;\r\n margin: 2rem 0;\r\n }\r\n\r\n .pin-digit {\r\n width: 60px;\r\n height: 60px;\r\n text-align: center;\r\n font-size: 2rem;\r\n font-weight: bold;\r\n background: rgba(30, 41, 59, 0.6);\r\n border: 2px solid rgba(99, 102, 241, 0.3);\r\n border-radius: 12px;\r\n color: #e2e8f0;\r\n }\r\n\r\n .pin-digit:focus {\r\n outline: none;\r\n border-color: #6366f1;\r\n box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);\r\n }\r\n\r\n .document-item {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 1rem;\r\n background: rgba(30, 41, 59, 0.6);\r\n border-radius: 10px;\r\n border: 1px solid rgba(99, 102, 241, 0.2);\r\n margin-bottom: 0.8rem;\r\n }\r\n\r\n .alert {\r\n position: fixed;\r\n top: 6rem;\r\n right: 2rem;\r\n padding: 1rem 1.5rem;\r\n background: rgba(30, 41, 59, 0.95);\r\n backdrop-filter: blur(10px);\r\n border-radius: 10px;\r\n border: 1px solid rgba(99, 102, 241, 0.3);\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\r\n display: flex;\r\n align-items: center;\r\n gap: 0.8rem;\r\n z-index: 1001;\r\n animation: slideIn 0.3s ease;\r\n max-width: 400px;\r\n }\r\n\r\n .alert.success { border-color: #10b981; }\r\n .alert.error { border-color: #ef4444; }\r\n\r\n .hidden { display: none !important; }\r\n\r\n table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-top: 1rem;\r\n }\r\n\r\n table th,\r\n table td {\r\n padding: 1rem;\r\n text-align: left;\r\n border-bottom: 1px solid rgba(99, 102, 241, 0.2);\r\n }\r\n\r\n table th {\r\n background: rgba(99, 102, 241, 0.1);\r\n color: #6366f1;\r\n font-weight: 700;\r\n position: sticky;\r\n top: 0;\r\n }\r\n\r\n table tr:hover {\r\n background: rgba(99, 102, 241, 0.05);\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .form-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .container {\r\n padding: 1rem;\r\n }\r\n .staff-item {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 1rem;\r\n }\r\n .staff-info {\r\n width: 100%;\r\n }\r\n .pin-input-container {\r\n gap: 0.5rem;\r\n }\r\n .pin-digit {\r\n width: 50px;\r\n height: 50px;\r\n font-size: 1.5rem;\r\n }\r\n }\r\n\r\n \/* Dark Mode Styles *\/\r\n body.dark-mode {\r\n background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #1a1a1a 100%);\r\n color: #e2e8f0;\r\n }\r\n\r\n body.dark-mode .bg-circle-1 {\r\n background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);\r\n }\r\n\r\n body.dark-mode .bg-circle-2 {\r\n background: radial-gradient(circle, rgba(236, 72, 153, 0.15) 0%, transparent 70%);\r\n }\r\n\r\n body.dark-mode header {\r\n background: rgba(0, 0, 0, 0.9);\r\n border-bottom: 1px solid rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n body.dark-mode .stat-card,\r\n body.dark-mode .card {\r\n background: rgba(10, 10, 10, 0.8);\r\n border: 1px solid rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n body.dark-mode .staff-item {\r\n background: rgba(10, 10, 10, 0.8);\r\n }\r\n\r\n body.dark-mode .staff-item:hover {\r\n background: rgba(30, 30, 30, 0.9);\r\n }\r\n\r\n body.dark-mode .modal-content {\r\n background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);\r\n border: 1px solid rgba(99, 102, 241, 0.4);\r\n }\r\n\r\n body.dark-mode .modal-header {\r\n background: #0a0a0a;\r\n border-bottom: 1px solid rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n body.dark-mode .form-group input,\r\n body.dark-mode .form-group select,\r\n body.dark-mode .form-group textarea {\r\n background: rgba(10, 10, 10, 0.8);\r\n border: 1px solid rgba(99, 102, 241, 0.3);\r\n color: #e2e8f0;\r\n }\r\n\r\n body.dark-mode .nav-btn.active {\r\n background: rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n body.dark-mode .document-item {\r\n background: rgba(10, 10, 10, 0.8);\r\n border: 1px solid rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n body.dark-mode table th,\r\n body.dark-mode table td {\r\n border-bottom: 1px solid rgba(99, 102, 241, 0.2);\r\n }\r\n\r\n body.dark-mode table th {\r\n background: rgba(99, 102, 241, 0.2);\r\n }\r\n\r\n body.dark-mode table tr:hover {\r\n background: rgba(99, 102, 241, 0.1);\r\n }\r\n\r\n \/* Task Styles *\/\r\n .task-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 0.8rem;\r\n padding: 0.8rem;\r\n background: rgba(30, 41, 59, 0.6);\r\n border-radius: 8px;\r\n border: 1px solid rgba(99, 102, 241, 0.2);\r\n margin-bottom: 0.8rem;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n body.dark-mode .task-item {\r\n background: rgba(10, 10, 10, 0.8);\r\n border: 1px solid rgba(99, 102, 241, 0.3);\r\n }\r\n\r\n .task-item:hover {\r\n background: rgba(51, 65, 85, 0.8);\r\n }\r\n\r\n .task-checkbox {\r\n width: 20px;\r\n height: 20px;\r\n cursor: pointer;\r\n flex-shrink: 0;\r\n margin-top: 0.2rem;\r\n }\r\n\r\n .task-content {\r\n flex: 1;\r\n }\r\n\r\n .task-title {\r\n font-weight: 600;\r\n color: #e2e8f0;\r\n margin-bottom: 0.3rem;\r\n }\r\n\r\n .task-item.completed .task-title {\r\n text-decoration: line-through;\r\n opacity: 0.6;\r\n }\r\n\r\n .progress-bar-container {\r\n width: 100%;\r\n height: 8px;\r\n background: rgba(100, 116, 139, 0.3);\r\n border-radius: 4px;\r\n overflow: hidden;\r\n margin-top: 0.5rem;\r\n }\r\n\r\n .progress-bar-fill {\r\n height: 100%;\r\n background: linear-gradient(90deg, #6366f1, #8b5cf6);\r\n border-radius: 4px;\r\n transition: width 0.3s ease;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"bg-circle-1\"><\/div>\r\n <div class=\"bg-circle-2\"><\/div>\r\n\r\n <header>\r\n <div class=\"header-content\">\r\n <div class=\"logo-section\">\r\n <div class=\"logo\">\ud83d\udc65<\/div>\r\n <div class=\"logo-text\">\r\n <h1>Staff Manager Pro<\/h1>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"header-actions\" id=\"adminActions\" style=\"display: none;\">\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"exportData()\">\ud83d\udce5 Export<\/button>\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"importData()\">\ud83d\udce4 Import<\/button>\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"clearAllData()\">\ud83d\uddd1\ufe0f Clear All<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <nav class=\"container\">\r\n <button class=\"nav-btn active\" data-view=\"attendance\" onclick=\"switchView('attendance')\">\u23f0 Attendance<\/button>\r\n <button class=\"nav-btn\" data-view=\"admin\" onclick=\"openAdminLogin()\" style=\"background: linear-gradient(135deg, #ef4444, #f97316); color: white; border: none;\">\ud83d\udd10 Admin Panel<\/button>\r\n <\/nav>\r\n <\/header>\r\n\r\n <main class=\"container\" id=\"mainContent\"><\/main>\r\n\r\n <div id=\"modal\" class=\"modal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h2 id=\"modalTitle\">Modal<\/h2>\r\n <button class=\"close-btn\" onclick=\"closeModal()\">\u2715<\/button>\r\n <\/div>\r\n <div class=\"modal-body\" id=\"modalBody\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <input type=\"file\" id=\"importFileInput\" accept=\".json\" style=\"display: none;\" onchange=\"handleImportFile(event)\">\r\n\r\n <script>\r\n \/\/ ============================================\r\n \/\/ DATA MANAGEMENT\r\n \/\/ ============================================\r\n \r\n const STORAGE_KEY = 'staffManagerData';\r\n const SETTINGS_KEY = 'staffManagerSettings';\r\n const ADMIN_PASSWORD_KEY = 'adminPassword';\r\n \r\n let staffData = loadFromStorage() || [];\r\n let settings = loadSettings() || {\r\n ownerNumber: '',\r\n ownerEmail: '',\r\n autoBackup: true,\r\n whatsappDaily: true,\r\n darkMode: false,\r\n theme: {\r\n primary: '#6366f1',\r\n secondary: '#ec4899',\r\n success: '#10b981',\r\n danger: '#ef4444',\r\n warning: '#f59e0b'\r\n }\r\n };\r\n let adminPassword = localStorage.getItem(ADMIN_PASSWORD_KEY) || 'Ruz#1917';\r\n let currentView = 'attendance';\r\n let isAdminLoggedIn = false;\r\n let notifications = [];\r\n\r\n function saveToStorage() {\r\n try {\r\n localStorage.setItem(STORAGE_KEY, JSON.stringify(staffData));\r\n return true;\r\n } catch (error) {\r\n console.error('Save error:', error);\r\n showAlert('Failed to save data', 'error');\r\n return false;\r\n }\r\n }\r\n\r\n function loadFromStorage() {\r\n try {\r\n const data = localStorage.getItem(STORAGE_KEY);\r\n return data ? JSON.parse(data) : null;\r\n } catch (error) {\r\n console.error('Load error:', error);\r\n return null;\r\n }\r\n }\r\n\r\n function loadSettings() {\r\n try {\r\n const data = localStorage.getItem(SETTINGS_KEY);\r\n return data ? JSON.parse(data) : null;\r\n } catch (error) {\r\n console.error('Settings load error:', error);\r\n return null;\r\n }\r\n }\r\n\r\n function saveSettings() {\r\n try {\r\n localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));\r\n return true;\r\n } catch (error) {\r\n console.error('Settings save error:', error);\r\n return false;\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ NOTIFICATION SYSTEM\r\n \/\/ ============================================\r\n\r\n function addNotification(message, type = 'info', staffName = null) {\r\n const notification = {\r\n id: Date.now(),\r\n message: message,\r\n type: type,\r\n staffName: staffName,\r\n timestamp: new Date().toISOString(),\r\n read: false\r\n };\r\n notifications.unshift(notification);\r\n \r\n \/\/ Keep only last 50 notifications\r\n if (notifications.length > 50) {\r\n notifications = notifications.slice(0, 50);\r\n }\r\n \r\n showNotificationAlert(notification);\r\n updateNotificationBadge();\r\n }\r\n\r\n function showNotificationAlert(notification) {\r\n const alert = document.createElement('div');\r\n alert.className = `alert ${notification.type}`;\r\n alert.style.animation = 'slideIn 0.3s ease';\r\n \r\n const icon = notification.type === 'success' ? '\u2713' : \r\n notification.type === 'warning' ? '\u26a0' : \r\n notification.type === 'error' ? '\u2715' : '\u2139';\r\n \r\n alert.innerHTML = `\r\n <span style=\"font-size: 1.5rem;\">${icon}<\/span>\r\n <div>\r\n ${notification.staffName ? `<strong>${notification.staffName}<\/strong><br>` : ''}\r\n <span>${notification.message}<\/span>\r\n <\/div>\r\n `;\r\n document.body.appendChild(alert);\r\n \r\n setTimeout(() => {\r\n alert.style.animation = 'slideIn 0.3s ease reverse';\r\n setTimeout(() => alert.remove(), 300);\r\n }, 4000);\r\n }\r\n\r\n function updateNotificationBadge() {\r\n const unreadCount = notifications.filter(n => !n.read).length;\r\n const badge = document.getElementById('notificationBadge');\r\n if (badge) {\r\n badge.textContent = unreadCount;\r\n badge.style.display = unreadCount > 0 ? 'flex' : 'none';\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ PERFORMANCE METRICS\r\n \/\/ ============================================\r\n\r\n function calculateStaffPerformance(staff, days = 30) {\r\n const startDate = new Date();\r\n startDate.setDate(startDate.getDate() - days);\r\n \r\n const relevantRecords = (staff.punchRecords || []).filter(r => \r\n new Date(r.punchIn) >= startDate\r\n );\r\n \r\n if (relevantRecords.length === 0) {\r\n return {\r\n attendanceRate: 0,\r\n onTimeRate: 0,\r\n totalHours: 0,\r\n lateDays: 0,\r\n totalDays: 0,\r\n avgHoursPerDay: 0,\r\n rating: 0\r\n };\r\n }\r\n \r\n const [shiftStartHour, shiftStartMin] = staff.shiftStart.split(':').map(Number);\r\n const shiftStartMinutes = shiftStartHour * 60 + shiftStartMin;\r\n \r\n let onTimeDays = 0;\r\n let lateDays = 0;\r\n let totalMinutes = 0;\r\n \r\n relevantRecords.forEach(record => {\r\n const punchInTime = new Date(record.punchIn);\r\n const punchInMinutes = punchInTime.getHours() * 60 + punchInTime.getMinutes();\r\n \r\n if (punchInMinutes <= shiftStartMinutes) {\r\n onTimeDays++;\r\n } else {\r\n lateDays++;\r\n }\r\n \r\n if (record.punchOut) {\r\n const duration = (new Date(record.punchOut) - new Date(record.punchIn)) \/ (1000 * 60);\r\n totalMinutes += duration;\r\n }\r\n });\r\n \r\n const totalDays = relevantRecords.length;\r\n const attendanceRate = (totalDays \/ days) * 100;\r\n const onTimeRate = totalDays > 0 ? (onTimeDays \/ totalDays) * 100 : 0;\r\n const avgHoursPerDay = totalDays > 0 ? (totalMinutes \/ 60) \/ totalDays : 0;\r\n \r\n \/\/ Calculate rating (1-5 stars)\r\n let rating = 0;\r\n if (attendanceRate >= 95 && onTimeRate >= 90) rating = 5;\r\n else if (attendanceRate >= 85 && onTimeRate >= 80) rating = 4;\r\n else if (attendanceRate >= 75 && onTimeRate >= 70) rating = 3;\r\n else if (attendanceRate >= 60 && onTimeRate >= 60) rating = 2;\r\n else rating = 1;\r\n \r\n return {\r\n attendanceRate: attendanceRate.toFixed(1),\r\n onTimeRate: onTimeRate.toFixed(1),\r\n totalHours: (totalMinutes \/ 60).toFixed(1),\r\n lateDays: lateDays,\r\n totalDays: totalDays,\r\n avgHoursPerDay: avgHoursPerDay.toFixed(1),\r\n rating: rating\r\n };\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ WHATSAPP INTEGRATION\r\n \/\/ ============================================\r\n\r\n function generateDailyReport() {\r\n const today = new Date().toDateString();\r\n const presentStaff = staffData.filter(staff => {\r\n return (staff.punchRecords || []).some(r => \r\n new Date(r.punchIn).toDateString() === today\r\n );\r\n });\r\n \r\n const totalEarnings = presentStaff.reduce((sum, staff) => {\r\n const todayRecords = (staff.punchRecords || []).filter(r => \r\n new Date(r.punchIn).toDateString() === today\r\n );\r\n todayRecords.forEach(record => {\r\n const earnings = calculateRealTimeEarnings(staff, record);\r\n sum += parseFloat(earnings.earnings);\r\n });\r\n return sum;\r\n }, 0);\r\n \r\n return {\r\n date: new Date().toLocaleDateString('en-IN'),\r\n totalStaff: staffData.length,\r\n presentStaff: presentStaff.length,\r\n absentStaff: staffData.length - presentStaff.length,\r\n totalEarnings: totalEarnings.toFixed(2),\r\n staff: presentStaff.map(s => {\r\n const todayRecords = (s.punchRecords || []).filter(r => \r\n new Date(r.punchIn).toDateString() === today\r\n );\r\n let hours = 0;\r\n todayRecords.forEach(r => {\r\n const earnings = calculateRealTimeEarnings(s, r);\r\n hours += parseFloat(earnings.hours);\r\n });\r\n return {\r\n name: s.name,\r\n hours: hours.toFixed(1)\r\n };\r\n })\r\n };\r\n }\r\n\r\n function sendWhatsAppReport() {\r\n if (!settings.ownerNumber || !settings.whatsappDaily) return;\r\n \r\n const report = generateDailyReport();\r\n \r\n let message = `\ud83d\udcca *Daily Attendance Report*\\n`;\r\n message += `\ud83d\udcc5 Date: ${report.date}\\n\\n`;\r\n message += `\ud83d\udc65 Total Staff: ${report.totalStaff}\\n`;\r\n message += `\u2705 Present: ${report.presentStaff}\\n`;\r\n message += `\u274c Absent: ${report.absentStaff}\\n`;\r\n message += `\ud83d\udcb0 Total Earnings: \u20b9${report.totalEarnings}\\n\\n`;\r\n \r\n if (report.staff.length > 0) {\r\n message += `*Staff Details:*\\n`;\r\n report.staff.forEach(s => {\r\n message += `\u2022 ${s.name}: ${s.hours}h\\n`;\r\n });\r\n }\r\n \r\n message += `\\n_Staff Manager Pro_`;\r\n \r\n \/\/ Open WhatsApp with pre-filled message\r\n const whatsappUrl = `https:\/\/wa.me\/${settings.ownerNumber}?text=${encodeURIComponent(message)}`;\r\n \r\n \/\/ Create hidden link and click\r\n const link = document.createElement('a');\r\n link.href = whatsappUrl;\r\n link.target = '_blank';\r\n link.click();\r\n \r\n addNotification('WhatsApp report opened', 'success');\r\n }\r\n\r\n function checkDailyReport() {\r\n const lastSent = localStorage.getItem('lastWhatsAppReport');\r\n const today = new Date().toDateString();\r\n \r\n if (lastSent !== today && settings.whatsappDaily && settings.ownerNumber) {\r\n \/\/ Check if it's end of day (after 6 PM)\r\n const hour = new Date().getHours();\r\n if (hour >= 18) {\r\n localStorage.setItem('lastWhatsAppReport', today);\r\n if (confirm('Send today\\'s WhatsApp report to owner?')) {\r\n sendWhatsAppReport();\r\n }\r\n }\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ BACKUP & RESTORE\r\n \/\/ ============================================\r\n\r\n function createBackup() {\r\n const backup = {\r\n version: '1.0',\r\n timestamp: new Date().toISOString(),\r\n data: staffData,\r\n settings: settings\r\n };\r\n \r\n const backupStr = JSON.stringify(backup, null, 2);\r\n const blob = new Blob([backupStr], { type: 'application\/json' });\r\n const url = URL.createObjectURL(blob);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = `staff-backup-${new Date().toISOString().split('T')[0]}.json`;\r\n link.click();\r\n URL.revokeObjectURL(url);\r\n \r\n addNotification('Backup created successfully', 'success');\r\n \r\n \/\/ Save to localStorage backup history\r\n saveBackupHistory(backup);\r\n }\r\n\r\n function saveBackupHistory(backup) {\r\n let history = JSON.parse(localStorage.getItem('backupHistory') || '[]');\r\n history.unshift({\r\n timestamp: backup.timestamp,\r\n staffCount: staffData.length,\r\n size: JSON.stringify(backup).length\r\n });\r\n \r\n \/\/ Keep only last 30 backups\r\n history = history.slice(0, 30);\r\n localStorage.setItem('backupHistory', JSON.stringify(history));\r\n }\r\n\r\n function restoreBackup(file) {\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n try {\r\n const backup = JSON.parse(e.target.result);\r\n \r\n if (!backup.version || !backup.data) {\r\n showAlert('Invalid backup file', 'error');\r\n return;\r\n }\r\n \r\n if (confirm(`Restore backup from ${new Date(backup.timestamp).toLocaleString()}?\\nThis will replace all current data!`)) {\r\n staffData = backup.data;\r\n if (backup.settings) {\r\n settings = backup.settings;\r\n saveSettings();\r\n }\r\n saveToStorage();\r\n addNotification('Backup restored successfully', 'success');\r\n switchView(currentView);\r\n }\r\n } catch (error) {\r\n showAlert('Error restoring backup', 'error');\r\n console.error(error);\r\n }\r\n };\r\n reader.readAsText(file);\r\n }\r\n\r\n function autoBackup() {\r\n if (!settings.autoBackup) return;\r\n \r\n const lastBackup = localStorage.getItem('lastAutoBackup');\r\n const today = new Date().toDateString();\r\n \r\n if (lastBackup !== today) {\r\n const backup = {\r\n version: '1.0',\r\n timestamp: new Date().toISOString(),\r\n data: staffData,\r\n settings: settings\r\n };\r\n \r\n localStorage.setItem('autoBackup', JSON.stringify(backup));\r\n localStorage.setItem('lastAutoBackup', today);\r\n saveBackupHistory(backup);\r\n \r\n console.log('Auto backup completed');\r\n }\r\n }\r\n\r\n function emailBackup() {\r\n if (!settings.ownerEmail) {\r\n showAlert('Owner email not configured', 'error');\r\n return;\r\n }\r\n \r\n const report = generateDailyReport();\r\n const subject = `Staff Report - ${report.date}`;\r\n \r\n let body = `Daily Attendance Report\\n`;\r\n body += `Date: ${report.date}\\n\\n`;\r\n body += `Total Staff: ${report.totalStaff}\\n`;\r\n body += `Present: ${report.presentStaff}\\n`;\r\n body += `Absent: ${report.absentStaff}\\n`;\r\n body += `Total Earnings: \u20b9${report.totalEarnings}\\n\\n`;\r\n \r\n if (report.staff.length > 0) {\r\n body += `Staff Details:\\n`;\r\n report.staff.forEach(s => {\r\n body += `${s.name}: ${s.hours} hours\\n`;\r\n });\r\n }\r\n \r\n const mailtoLink = `mailto:${settings.ownerEmail}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;\r\n window.location.href = mailtoLink;\r\n \r\n addNotification('Email report opened', 'success');\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ ADMIN AUTHENTICATION\r\n \/\/ ============================================\r\n \r\n function openAdminLogin() {\r\n if (isAdminLoggedIn) {\r\n switchView('admin');\r\n return;\r\n }\r\n \r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = '\ud83d\udd10 Admin Login';\r\n document.getElementById('modalBody').innerHTML = `\r\n <div style=\"text-align: center; padding: 2rem;\">\r\n <div style=\"font-size: 4rem; margin-bottom: 1rem;\">\ud83d\udd10<\/div>\r\n <h3 style=\"margin-bottom: 0.5rem; color: #6366f1;\">Administrator Access<\/h3>\r\n <p style=\"color: #94a3b8; margin-bottom: 2rem;\">Enter admin password to continue<\/p>\r\n \r\n <form onsubmit=\"verifyAdminPassword(event)\" style=\"max-width: 400px; margin: 0 auto;\">\r\n <div class=\"form-group\">\r\n <input \r\n type=\"password\" \r\n id=\"adminPassword\" \r\n placeholder=\"Enter password\" \r\n style=\"text-align: center; font-size: 1.2rem; padding: 1rem;\"\r\n autofocus\r\n required\r\n >\r\n <\/div>\r\n <div style=\"display: flex; gap: 1rem; margin-top: 2rem;\">\r\n <button type=\"button\" class=\"btn btn-secondary\" style=\"flex: 1;\" onclick=\"closeModal()\">Cancel<\/button>\r\n <button type=\"submit\" class=\"btn btn-primary\" style=\"flex: 1;\">Login<\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n `;\r\n modal.classList.add('active');\r\n setTimeout(() => document.getElementById('adminPassword').focus(), 100);\r\n }\r\n\r\n function verifyAdminPassword(event) {\r\n event.preventDefault();\r\n const password = document.getElementById('adminPassword')?.value;\r\n \r\n if (password === adminPassword) {\r\n isAdminLoggedIn = true;\r\n document.getElementById('adminActions').style.display = 'flex';\r\n \r\n \/\/ FIX: Force close modal\r\n const modal = document.getElementById('modal');\r\n modal.classList.remove('active');\r\n modal.style.display = 'none';\r\n \r\n showAlert('Admin login successful!', 'success');\r\n setTimeout(() => switchView('admin'), 300);\r\n } else {\r\n showAlert('Incorrect password!', 'error');\r\n document.getElementById('adminPassword').value = '';\r\n document.getElementById('adminPassword').focus();\r\n }\r\n}\r\n\r\n function adminLogout() {\r\n if (confirm('Logout from admin panel?')) {\r\n isAdminLoggedIn = false;\r\n document.getElementById('adminActions').style.display = 'none';\r\n showAlert('Logged out successfully!', 'success');\r\n switchView('attendance');\r\n }\r\n }\r\n\r\n function renderAdminPanel(container) {\r\n if (!isAdminLoggedIn) {\r\n openAdminLogin();\r\n return;\r\n }\r\n \r\n container.innerHTML = `\r\n <div>\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h2 style=\"font-size: 2rem; font-weight: 700;\">\ud83d\udd10 Admin Panel<\/h2>\r\n <p style=\"color: #94a3b8;\">Manage all system operations<\/p>\r\n <\/div>\r\n <button class=\"btn btn-danger\" onclick=\"adminLogout()\">\ud83d\udeaa Logout<\/button>\r\n <\/div>\r\n \r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;\">\r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2)); border: 1px solid #6366f1; cursor: pointer;\" onclick=\"switchView('dashboard')\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);\">\ud83d\udcca<\/div>\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.2rem; font-weight: 700;\">Dashboard<\/h3>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">View statistics & overview<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(20, 184, 166, 0.2)); border: 1px solid #10b981; cursor: pointer;\" onclick=\"switchView('staff')\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #10b981, #14b8a6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);\">\ud83d\udc65<\/div>\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.2rem; font-weight: 700;\">Staff Management<\/h3>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">Add, edit & delete staff<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(244, 63, 94, 0.2)); border: 1px solid #ec4899; cursor: pointer;\" onclick=\"switchView('salary')\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #ec4899, #f43f5e); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4);\">\ud83d\udcb0<\/div>\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.2rem; font-weight: 700;\">Payments<\/h3>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">View payments & manage advance\/fine<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(251, 146, 60, 0.2)); border: 1px solid #f59e0b; cursor: pointer;\" onclick=\"switchView('history')\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #f59e0b, #fb923c); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);\">\ud83d\udccb<\/div>\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.2rem; font-weight: 700;\">Punch History<\/h3>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">View all punch records<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.2)); border: 1px solid #8b5cf6; cursor: pointer;\" onclick=\"switchView('performance')\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #8b5cf6, #a855f7); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);\">\ud83d\udcc8<\/div>\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.2rem; font-weight: 700;\">Performance<\/h3>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">Staff performance metrics<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(6, 182, 212, 0.2)); border: 1px solid #14b8a6; cursor: pointer;\" onclick=\"switchView('notifications')\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #14b8a6, #06b6d4); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 8px 20px rgba(20, 184, 166, 0.4); position: relative;\">\r\n \ud83d\udd14\r\n <span id=\"notificationBadge\" style=\"position: absolute; top: -5px; right: -5px; background: #ef4444; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; display: none;\">0<\/span>\r\n <\/div>\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.2rem; font-weight: 700;\">Notifications<\/h3>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">View all system alerts<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(100, 116, 139, 0.2), rgba(71, 85, 105, 0.2)); border: 1px solid #64748b; cursor: pointer;\" onclick=\"switchView('settings')\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #64748b, #475569); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; box-shadow: 0 8px 20px rgba(100, 116, 139, 0.4);\">\u2699\ufe0f<\/div>\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.2rem; font-weight: 700;\">Settings<\/h3>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">Configure system settings<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1)); border: 1px solid rgba(99, 102, 241, 0.3);\">\r\n <h3 style=\"margin-bottom: 1.5rem; color: #6366f1;\">\ud83d\udee0\ufe0f Data Management<\/h3>\r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;\">\r\n <button class=\"btn btn-primary\" style=\"padding: 1rem;\" onclick=\"exportData()\">\r\n <span style=\"font-size: 1.2rem;\">\ud83d\udce5<\/span>\r\n <span>Export Data<\/span>\r\n <\/button>\r\n <button class=\"btn btn-secondary\" style=\"padding: 1rem;\" onclick=\"importData()\">\r\n <span style=\"font-size: 1.2rem;\">\ud83d\udce4<\/span>\r\n <span>Import Data<\/span>\r\n <\/button>\r\n <button class=\"btn btn-danger\" style=\"padding: 1rem;\" onclick=\"clearAllData()\">\r\n <span style=\"font-size: 1.2rem;\">\ud83d\uddd1\ufe0f<\/span>\r\n <span>Clear All Data<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3);\">\r\n <h3 style=\"margin-bottom: 1rem; color: #ef4444;\">\ud83d\udd10 Security Information<\/h3>\r\n <ul style=\"margin-left: 1.5rem; color: #e2e8f0; line-height: 1.8;\">\r\n <li><strong>Admin Password:<\/strong> ${adminPassword === 'Ruz#1917' ? 'Ruz#1917 (Default)' : '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022 (Custom - Changed from default)'}<\/li>\r\n <li><strong>Access Level:<\/strong> Full system control<\/li>\r\n <li><strong>Staff Access:<\/strong> Attendance only (no password required)<\/li>\r\n <li><strong>Auto Logout:<\/strong> Session expires on page refresh<\/li>\r\n <\/ul>\r\n <\/div>\r\n \r\n ${renderQuickStats()}\r\n <\/div>\r\n `;\r\n }\r\n\r\n function renderQuickStats() {\r\n const today = new Date().toDateString();\r\n const presentToday = staffData.filter(staff => {\r\n return (staff.punchRecords || []).some(r => \r\n new Date(r.punchIn).toDateString() === today && !r.punchOut\r\n );\r\n }).length;\r\n \r\n const totalEarningsToday = staffData.reduce((sum, staff) => {\r\n const todayRecords = (staff.punchRecords || []).filter(r => \r\n new Date(r.punchIn).toDateString() === today\r\n );\r\n todayRecords.forEach(record => {\r\n const earnings = calculateRealTimeEarnings(staff, record);\r\n sum += parseFloat(earnings.earnings);\r\n });\r\n return sum;\r\n }, 0);\r\n \r\n return `\r\n <div class=\"stats-grid\" style=\"margin-top: 2rem;\">\r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Total Staff<\/p>\r\n <h3 style=\"font-size: 2.2rem; font-weight: 800; color: #6366f1;\">${staffData.length}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);\">\ud83d\udc65<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Present Today<\/p>\r\n <h3 style=\"font-size: 2.2rem; font-weight: 800; color: #10b981;\">${presentToday}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #10b981, #14b8a6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);\">\u2713<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Today's Earnings<\/p>\r\n <h3 style=\"font-size: 2.2rem; font-weight: 800; color: #ec4899;\">\u20b9${totalEarningsToday.toFixed(2)}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #ec4899, #f43f5e); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4);\">\ud83d\udcb0<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ VIEW MANAGEMENT\r\n \/\/ ============================================\r\n \r\n function switchView(view) {\r\n \/\/ Restrict non-admin views\r\n if (!isAdminLoggedIn && view !== 'attendance' && view !== 'admin') {\r\n showAlert('Admin access required!', 'error');\r\n return;\r\n }\r\n \r\n currentView = view;\r\n document.querySelectorAll('.nav-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n if (btn.dataset.view === view) btn.classList.add('active');\r\n });\r\n \r\n const mainContent = document.getElementById('mainContent');\r\n switch(view) {\r\n case 'dashboard': renderDashboard(mainContent); break;\r\n case 'staff': renderStaffView(mainContent); break;\r\n case 'attendance': renderAttendanceView(mainContent); break;\r\n case 'salary': renderSalaryView(mainContent); break;\r\n case 'history': renderHistoryView(mainContent); break;\r\n case 'admin': renderAdminPanel(mainContent); break;\r\n case 'settings': renderSettingsView(mainContent); break;\r\n case 'performance': renderPerformanceView(mainContent); break;\r\n case 'notifications': renderNotificationsView(mainContent); break;\r\n }\r\n }\r\n\r\n function renderDashboard(container) {\r\n const today = new Date().toDateString();\r\n const presentToday = staffData.filter(staff => {\r\n return (staff.punchRecords || []).some(r => \r\n new Date(r.punchIn).toDateString() === today && !r.punchOut\r\n );\r\n }).length;\r\n \r\n container.innerHTML = `\r\n <div>\r\n <h2 style=\"font-size: 2rem; font-weight: 700; margin-bottom: 2rem;\">Dashboard Overview<\/h2>\r\n \r\n <div class=\"stats-grid\">\r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Total Staff<\/p>\r\n <h3 style=\"font-size: 2.2rem; font-weight: 800; color: #6366f1;\">${staffData.length}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);\">\ud83d\udc65<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Present Today<\/p>\r\n <h3 style=\"font-size: 2.2rem; font-weight: 800; color: #10b981;\">${presentToday}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #10b981, #14b8a6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);\">\u2713<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Absent Today<\/p>\r\n <h3 style=\"font-size: 2.2rem; font-weight: 800; color: #ef4444;\">${staffData.length - presentToday}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #ef4444, #f97316); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);\">\u26a0<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <h3 style=\"margin-bottom: 1.5rem;\">Quick Actions<\/h3>\r\n <div style=\"display: flex; gap: 1rem; flex-wrap: wrap;\">\r\n <button class=\"btn btn-primary\" onclick=\"openAddStaffModal()\">\u2795 Add Staff<\/button>\r\n <button class=\"btn btn-success\" onclick=\"openPunchModal()\">\ud83d\udd12 Punch In\/Out<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"switchView('salary')\">\ud83d\udcb0 Calculate Salary<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"exportData()\">\ud83d\udce5 Export Data<\/button>\r\n <\/div>\r\n <\/div>\r\n \r\n ${staffData.length === 0 ? `\r\n <div class=\"card\" style=\"text-align: center; padding: 3rem;\">\r\n <div style=\"font-size: 4rem; margin-bottom: 1rem;\">\ud83d\udc65<\/div>\r\n <h3 style=\"margin-bottom: 0.5rem;\">No Staff Members Yet<\/h3>\r\n <p style=\"color: #94a3b8; margin-bottom: 1.5rem;\">Get started by adding your first staff member<\/p>\r\n <button class=\"btn btn-primary\" onclick=\"openAddStaffModal()\">\u2795 Add First Staff<\/button>\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n `;\r\n }\r\n\r\n function renderStaffView(container) {\r\n container.innerHTML = `\r\n <div>\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;\">\r\n <h2 style=\"font-size: 2rem; font-weight: 700;\">Staff Management<\/h2>\r\n <button class=\"btn btn-primary\" onclick=\"openAddStaffModal()\">\u2795 Add Staff<\/button>\r\n <\/div>\r\n \r\n <div class=\"staff-list\">\r\n ${staffData.length === 0 ? `\r\n <div class=\"card\" style=\"text-align: center; padding: 3rem;\">\r\n <div style=\"font-size: 4rem; margin-bottom: 1rem;\">\ud83d\udc65<\/div>\r\n <p style=\"color: #94a3b8; margin-bottom: 1rem;\">No staff members yet<\/p>\r\n <button class=\"btn btn-primary\" onclick=\"openAddStaffModal()\">Add First Staff<\/button>\r\n <\/div>\r\n ` : staffData.map((staff, i) => `\r\n <div class=\"staff-item\" style=\"animation-delay: ${i * 0.05}s;\">\r\n <div class=\"staff-info\">\r\n ${staff.photo ? \r\n `<img decoding=\"async\" src=\"${staff.photo}\" class=\"staff-photo\" alt=\"${staff.name}\">` :\r\n `<div class=\"staff-avatar\">${staff.name.charAt(0).toUpperCase()}<\/div>`\r\n }\r\n <div style=\"flex: 1;\">\r\n <h4 style=\"font-size: 1.3rem; font-weight: 700; margin-bottom: 0.3rem;\">${staff.name}<\/h4>\r\n <p style=\"color: #94a3b8; margin-bottom: 0.5rem;\">\r\n \ud83d\udcf1 ${staff.whatsapp}\r\n <\/p>\r\n <p style=\"color: #6366f1; font-size: 0.9rem; margin-bottom: 0.3rem;\">\r\n \ud83d\udcb0 ${staff.wageType}: \u20b9${staff.rate} \u2022 \u23f0 ${formatTimeAMPM(staff.shiftStart)} - ${formatTimeAMPM(staff.shiftEnd)}\r\n ${isNightShift(staff.shiftStart, staff.shiftEnd) ? '<span style=\"background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.7rem; margin-left: 0.3rem;\">\ud83c\udf19 Night<\/span>' : ''}\r\n <\/p>\r\n <p style=\"color: #ec4899; font-size: 0.85rem;\">\r\n \ud83d\udd12 PIN: ${staff.pin} \u2022 \ud83d\udcc4 Docs: ${(staff.documents || []).length}\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <div style=\"display: flex; gap: 0.5rem; flex-wrap: wrap;\">\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"viewStaffDetails(${staff.id})\">\ud83d\udc41\ufe0f View<\/button>\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"editStaff(${staff.id})\">\u270f\ufe0f Edit<\/button>\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"deleteStaff(${staff.id})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n function renderAttendanceView(container) {\r\n const today = new Date().toDateString();\r\n \r\n \/\/ Check for auto punch out\r\n checkAutoPunchOut();\r\n \r\n container.innerHTML = `\r\n <div>\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;\">\r\n <div>\r\n <h2 style=\"font-size: 2rem; font-weight: 700;\">Attendance Tracking<\/h2>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem;\">Auto punch-out at shift end time \u2022 Real-time earnings<\/p>\r\n <\/div>\r\n <button class=\"btn btn-success\" onclick=\"openPunchModal()\">\ud83d\udd12 Punch In\/Out<\/button>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <h3 style=\"margin-bottom: 1.5rem;\">Today's Status - ${new Date().toLocaleDateString('en-IN', {weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'})}<\/h3>\r\n <div class=\"staff-list\">\r\n ${staffData.length === 0 ? `\r\n <div style=\"text-align: center; padding: 2rem; color: #94a3b8;\">\r\n <p>No staff members to track<\/p>\r\n <\/div>\r\n ` : staffData.map((staff, i) => {\r\n const todayRecords = (staff.punchRecords || []).filter(r => \r\n new Date(r.punchIn).toDateString() === today\r\n );\r\n const activeRecord = todayRecords.find(r => !r.punchOut);\r\n \r\n \/\/ Calculate total worked time for today\r\n const totalMinutes = todayRecords.reduce((sum, r) => {\r\n if (r.punchOut) {\r\n return sum + (new Date(r.punchOut) - new Date(r.punchIn)) \/ (1000 * 60);\r\n }\r\n return sum;\r\n }, 0);\r\n \r\n const totalHours = (totalMinutes \/ 60).toFixed(2);\r\n \r\n \/\/ Calculate current session earnings if active\r\n const currentEarnings = activeRecord ? calculateRealTimeEarnings(staff, activeRecord) : null;\r\n \r\n \/\/ Calculate total earnings for today\r\n let totalEarnings = 0;\r\n todayRecords.forEach(r => {\r\n const earnings = calculateRealTimeEarnings(staff, r);\r\n totalEarnings += parseFloat(earnings.earnings);\r\n });\r\n \r\n return `\r\n <div class=\"staff-item\" style=\"animation-delay: ${i * 0.05}s;\">\r\n <div class=\"staff-info\">\r\n ${staff.photo ? \r\n `<img decoding=\"async\" src=\"${staff.photo}\" class=\"staff-photo\" alt=\"${staff.name}\">` :\r\n `<div class=\"staff-avatar\">${staff.name.charAt(0).toUpperCase()}<\/div>`\r\n }\r\n <div style=\"flex: 1;\">\r\n <h4 style=\"font-size: 1.2rem; font-weight: 700; margin-bottom: 0.3rem;\">${staff.name}<\/h4>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">\r\n Shift: ${formatTimeAMPM(staff.shiftStart)} - ${formatTimeAMPM(staff.shiftEnd)}\r\n ${isNightShift(staff.shiftStart, staff.shiftEnd) ? '<span style=\"background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.75rem; margin-left: 0.5rem; font-weight: 700;\">\ud83c\udf19 Night Shift<\/span>' : ''}\r\n <\/p>\r\n ${activeRecord ? `\r\n <div style=\"margin-top: 0.5rem;\">\r\n <p style=\"color: #10b981; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem;\">\r\n <span style=\"width: 8px; height: 8px; background: #10b981; border-radius: 50%; animation: pulse 2s ease-in-out infinite;\"><\/span>\r\n \ud83d\udfe2 ACTIVE - Punched In: ${formatDateTimeAMPM(activeRecord.punchIn)}\r\n <\/p>\r\n <p style=\"color: #6366f1; font-size: 0.85rem; font-weight: 600;\">\r\n \u23f1\ufe0f Current Session: ${currentEarnings.minutes} min (${currentEarnings.hours}h) = \u20b9${currentEarnings.earnings}\r\n <\/p>\r\n <\/div>\r\n ` : todayRecords.length > 0 ? `\r\n <p style=\"color: #10b981; font-weight: 600; margin-top: 0.5rem;\">\u2713 Punched Out - Completed for today<\/p>\r\n ` : `\r\n <p style=\"color: #64748b; font-weight: 600; margin-top: 0.5rem;\">\u26a0 Not Punched In Yet<\/p>\r\n `}\r\n ${todayRecords.length > 0 ? `\r\n <p style=\"color: #ec4899; font-size: 0.9rem; margin-top: 0.5rem; font-weight: 600;\">\r\n \ud83d\udcb0 Today's Total Earnings: \u20b9${totalEarnings.toFixed(2)}\r\n <\/p>\r\n ` : ''}\r\n \r\n ${(staff.tasks && staff.tasks.length > 0) ? `\r\n <div style=\"margin-top: 1rem; padding: 1rem; background: rgba(99, 102, 241, 0.05); border-radius: 8px; border: 1px solid rgba(99, 102, 241, 0.2);\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem;\">\r\n <h5 style=\"margin: 0; font-size: 0.95rem; font-weight: 700; color: #6366f1;\">\ud83d\udccb Daily Tasks<\/h5>\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"toggleTasks(${staff.id})\" style=\"padding: 0.3rem 0.8rem; font-size: 0.8rem;\">\r\n <span id=\"toggle-${staff.id}\">\u25bc Show<\/span>\r\n <\/button>\r\n <\/div>\r\n <div id=\"tasks-${staff.id}\" style=\"display: none;\">\r\n ${staff.tasks.map((task, idx) => `\r\n <div class=\"task-item ${task.completed ? 'completed' : ''}\" style=\"display: flex; align-items: center; gap: 0.8rem; padding: 0.6rem; margin-bottom: 0.5rem;\">\r\n <input type=\"checkbox\" \r\n class=\"task-checkbox\" \r\n ${task.completed ? 'checked' : ''} \r\n onchange=\"toggleTask(${staff.id}, ${idx})\"\r\n style=\"width: 18px; height: 18px;\">\r\n <div class=\"task-content\" style=\"flex: 1;\">\r\n <p class=\"task-title\" style=\"margin: 0; font-size: 0.9rem;\">${task.text}<\/p>\r\n <\/div>\r\n <\/div>\r\n `).join('')}\r\n <div style=\"margin-top: 0.8rem;\">\r\n <div style=\"display: flex; justify-content: space-between; margin-bottom: 0.3rem;\">\r\n <span style=\"font-size: 0.85rem; color: #94a3b8;\">Progress<\/span>\r\n <span style=\"font-size: 0.85rem; font-weight: 700; color: #6366f1;\">${Math.round((staff.tasks.filter(t => t.completed).length \/ staff.tasks.length) * 100)}%<\/span>\r\n <\/div>\r\n <div class=\"progress-bar-container\">\r\n <div class=\"progress-bar-fill\" style=\"width: ${(staff.tasks.filter(t => t.completed).length \/ staff.tasks.length) * 100}%;\"><\/div>\r\n <\/div>\r\n <p style=\"margin-top: 0.3rem; font-size: 0.8rem; color: #94a3b8; text-align: center;\">\r\n ${staff.tasks.filter(t => t.completed).length} of ${staff.tasks.length} tasks completed\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n ${todayRecords.length > 0 ? `\r\n <div style=\"text-align: center; padding: 1rem; background: rgba(99, 102, 241, 0.1); border-radius: 12px; border: 1px solid rgba(99, 102, 241, 0.2);\">\r\n <p style=\"font-size: 0.8rem; color: #94a3b8; margin-bottom: 0.3rem;\">Hours Today<\/p>\r\n <p style=\"font-size: 1.5rem; font-weight: 800; color: #6366f1; margin: 0;\">${totalHours}h<\/p>\r\n <p style=\"font-size: 0.75rem; color: #94a3b8; margin-top: 0.3rem;\">${Math.floor(totalMinutes)} minutes<\/p>\r\n <\/div>\r\n ` : ''}\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('')}\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\" style=\"background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(236, 72, 153, 0.1)); border: 1px solid rgba(99, 102, 241, 0.3);\">\r\n <h3 style=\"margin-bottom: 1rem; color: #6366f1;\">\ud83d\udca1 How It Works<\/h3>\r\n <ul style=\"margin-left: 1.5rem; color: #e2e8f0; line-height: 1.8;\">\r\n <li><strong>Auto Punch Out:<\/strong> Staff ko shift end time pe automatic punch out ho jayega<\/li>\r\n <li><strong>Real-Time Tracking:<\/strong> Har minute ka paisa calculate hota hai live<\/li>\r\n <li><strong>Active Status:<\/strong> \ud83d\udfe2 Green dot = Currently working<\/li>\r\n <li><strong>Punch Time:<\/strong> Sirf shift start time ke baad hi punch in ho sakta hai<\/li>\r\n <li><strong>\ud83c\udf19 Night Shift:<\/strong> Agar shift midnight cross karti hai (e.g., 5 PM - 5 AM), automatic detect hota hai aur salary correct calculate hoti hai<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n \/\/ Auto refresh every minute for real-time earnings\r\n setTimeout(() => {\r\n if (currentView === 'attendance') {\r\n renderAttendanceView(container);\r\n }\r\n }, 60000); \/\/ Refresh every 60 seconds\r\n }\r\n\r\n function renderSalaryView(container) {\r\n container.innerHTML = `\r\n <div>\r\n <h2 style=\"font-size: 2rem; font-weight: 700; margin-bottom: 2rem;\">\ud83d\udcb0 Staff Payments<\/h2>\r\n \r\n <div class=\"card\" style=\"margin-bottom: 1.5rem;\">\r\n <h3 style=\"margin-bottom: 1rem;\">\ud83d\udd0d Filter Payments<\/h3>\r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;\">\r\n <div class=\"form-group\">\r\n <label>Time Period<\/label>\r\n <select id=\"paymentPeriod\" onchange=\"calculatePayments()\">\r\n <option value=\"today\">Today<\/option>\r\n <option value=\"week\" selected>Last 7 Days<\/option>\r\n <option value=\"month\">This Month<\/option>\r\n <option value=\"all\">All Time<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Staff Filter<\/label>\r\n <select id=\"paymentStaff\" onchange=\"calculatePayments()\">\r\n <option value=\"all\">All Staff<\/option>\r\n ${staffData.map(s => `<option value=\"${s.id}\">${s.name}<\/option>`).join('')}\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"paymentResults\"><\/div>\r\n <\/div>\r\n `;\r\n calculatePayments();\r\n }\r\n\r\n function calculatePayments() {\r\n const period = document.getElementById('paymentPeriod')?.value || 'week';\r\n const staffFilter = document.getElementById('paymentStaff')?.value || 'all';\r\n \r\n const now = new Date();\r\n let startDate = new Date();\r\n \r\n switch(period) {\r\n case 'today':\r\n startDate.setHours(0, 0, 0, 0);\r\n break;\r\n case 'week':\r\n startDate.setDate(startDate.getDate() - 7);\r\n break;\r\n case 'month':\r\n startDate.setDate(1);\r\n startDate.setHours(0, 0, 0, 0);\r\n break;\r\n case 'all':\r\n startDate = new Date(0);\r\n break;\r\n }\r\n \r\n const filteredStaff = staffFilter === 'all' ? staffData : staffData.filter(s => s.id == staffFilter);\r\n \r\n const paymentData = filteredStaff.map(staff => {\r\n const relevantRecords = (staff.punchRecords || []).filter(r => {\r\n const punchDate = new Date(r.punchIn);\r\n return punchDate >= startDate;\r\n });\r\n \r\n let totalEarnings = 0;\r\n let totalMinutes = 0;\r\n \r\n relevantRecords.forEach(record => {\r\n const earnings = calculateRealTimeEarnings(staff, record);\r\n totalEarnings += parseFloat(earnings.earnings);\r\n totalMinutes += earnings.minutes;\r\n });\r\n \r\n return {\r\n staff: staff,\r\n earnings: totalEarnings,\r\n hours: (totalMinutes \/ 60).toFixed(2),\r\n minutes: totalMinutes,\r\n records: relevantRecords.length,\r\n advance: staff.advance || 0,\r\n fine: staff.fine || 0,\r\n cashPaid: staff.cashPaid || 0,\r\n previousBalance: staff.previousBalance || 0\r\n };\r\n }).filter(p => p.records > 0 || staffFilter !== 'all');\r\n \r\n const totalEarnings = paymentData.reduce((sum, p) => sum + p.earnings, 0);\r\n const totalAdvance = paymentData.reduce((sum, p) => sum + p.advance, 0);\r\n const totalFine = paymentData.reduce((sum, p) => sum + p.fine, 0);\r\n const netPayable = totalEarnings - totalAdvance - totalFine;\r\n \r\n const resultsDiv = document.getElementById('paymentResults');\r\n if (!resultsDiv) return;\r\n \r\n resultsDiv.innerHTML = `\r\n <div class=\"stats-grid\" style=\"margin-bottom: 2rem;\">\r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Total Earnings<\/p>\r\n <h3 style=\"font-size: 2rem; font-weight: 800; color: #6366f1;\">\u20b9${totalEarnings.toFixed(2)}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #6366f1, #8b5cf6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;\">\ud83d\udcb0<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Total Advance<\/p>\r\n <h3 style=\"font-size: 2rem; font-weight: 800; color: #f59e0b;\">\u20b9${totalAdvance.toFixed(2)}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #f59e0b, #fb923c); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;\">\ud83d\udcb3<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"stat-card\">\r\n <div style=\"display: flex; justify-content: space-between;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.5rem;\">Total Fine<\/p>\r\n <h3 style=\"font-size: 2rem; font-weight: 800; color: #ef4444;\">\u20b9${totalFine.toFixed(2)}<\/h3>\r\n <\/div>\r\n <div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #ef4444, #f97316); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;\">\u26a0\ufe0f<\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"stat-card\" style=\"grid-column: 1 \/ -1; background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(20, 184, 166, 0.2)); border: 2px solid #10b981;\">\r\n <div style=\"display: flex; justify-content: space-between;\">\r\n <div>\r\n <p style=\"color: #10b981; font-size: 1rem; margin-bottom: 0.5rem; font-weight: 600;\">NET PAYABLE<\/p>\r\n <h3 style=\"font-size: 2.5rem; font-weight: 800; color: #10b981;\">\u20b9${netPayable.toFixed(2)}<\/h3>\r\n <\/div>\r\n <div style=\"width: 70px; height: 70px; background: linear-gradient(135deg, #10b981, #14b8a6); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);\">\u2713<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n ${paymentData.length === 0 ? `\r\n <div class=\"card\" style=\"text-align: center; padding: 3rem;\">\r\n <div style=\"font-size: 4rem; margin-bottom: 1rem;\">\ud83d\udcca<\/div>\r\n <p style=\"color: #94a3b8;\">No payment data for selected period<\/p>\r\n <\/div>\r\n ` : `\r\n <div style=\"display: grid; gap: 1.5rem;\">\r\n ${paymentData.map((data, i) => `\r\n <div class=\"card\" style=\"animation: slideIn 0.5s ease forwards; animation-delay: ${i * 0.05}s;\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n ${data.staff.photo ? \r\n `<img decoding=\"async\" src=\"${data.staff.photo}\" style=\"width: 60px; height: 60px; border-radius: 12px; object-fit: cover; border: 2px solid #6366f1;\">` :\r\n `<div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #6366f1, #ec4899); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: white; font-weight: 700;\">${data.staff.name.charAt(0).toUpperCase()}<\/div>`\r\n }\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.3rem; font-weight: 700;\">${data.staff.name}<\/h3>\r\n <p style=\"margin: 0.2rem 0 0 0; color: #94a3b8;\">${data.staff.wageType}: \u20b9${data.staff.rate} | ${data.records} punch records<\/p>\r\n <\/div>\r\n <\/div>\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"manageStaffPayment(${data.staff.id})\">\r\n \u2699\ufe0f Manage Advance\/Fine\r\n <\/button>\r\n <\/div>\r\n \r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; padding: 1.5rem; background: rgba(99, 102, 241, 0.05); border-radius: 12px; border: 1px solid rgba(99, 102, 241, 0.2);\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Hours Worked<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #6366f1; margin: 0;\">${data.hours}h<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Base Earnings<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #10b981; margin: 0;\">\u20b9${data.earnings.toFixed(2)}<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Advance<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #f59e0b; margin: 0;\">-\u20b9${data.advance.toFixed(2)}<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Fine<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #ef4444; margin: 0;\">-\u20b9${data.fine.toFixed(2)}<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Previous Balance<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: ${data.previousBalance >= 0 ? '#10b981' : '#ef4444'}; margin: 0;\">${data.previousBalance >= 0 ? '+' : ''}\u20b9${data.previousBalance.toFixed(2)}<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Cash Paid<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #8b5cf6; margin: 0;\">\u20b9${data.cashPaid.toFixed(2)}<\/p>\r\n <\/div>\r\n <div style=\"grid-column: 1 \/ -1; padding-top: 1rem; border-top: 2px solid rgba(99, 102, 241, 0.3); margin-bottom: 1rem;\">\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.3rem;\">Net Payable<\/p>\r\n <p style=\"font-size: 1.8rem; font-weight: 800; color: #10b981; margin: 0;\">\u20b9${(data.earnings - data.advance - data.fine + data.previousBalance).toFixed(2)}<\/p>\r\n <\/div>\r\n <div style=\"grid-column: 1 \/ -1;\">\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.3rem;\">\r\n Current Balance ${data.earnings - data.advance - data.fine + data.previousBalance - data.cashPaid >= 0 ? '(Pending)' : '(Extra Paid - Next Month Advance)'}\r\n <\/p>\r\n <p style=\"font-size: 2rem; font-weight: 800; color: ${data.earnings - data.advance - data.fine + data.previousBalance - data.cashPaid >= 0 ? '#f59e0b' : '#6366f1'}; margin: 0;\">\r\n \u20b9${Math.abs(data.earnings - data.advance - data.fine + data.previousBalance - data.cashPaid).toFixed(2)}\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <button class=\"btn btn-success\" onclick=\"paySalary(${data.staff.id})\" style=\"width: 100%; margin-top: 1rem; padding: 1rem; font-size: 1.1rem;\">\r\n \ud83d\udcb0 Pay Salary\r\n <\/button>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n `}\r\n `;\r\n }\r\n\r\n function manageStaffPayment(staffId) {\r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = `Manage Payments - ${staff.name}`;\r\n document.getElementById('modalBody').innerHTML = `\r\n <form onsubmit=\"saveStaffPayment(event, ${staffId})\">\r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label>Advance Amount (\u20b9)<\/label>\r\n <input type=\"number\" id=\"advanceAmount\" step=\"0.01\" value=\"${staff.advance || 0}\" min=\"0\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Fine Amount (\u20b9)<\/label>\r\n <input type=\"number\" id=\"fineAmount\" step=\"0.01\" value=\"${staff.fine || 0}\" min=\"0\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"background: rgba(99, 102, 241, 0.1); padding: 1rem; border-radius: 8px; margin-top: 1rem;\">\r\n <p style=\"color: #6366f1; font-size: 0.9rem; margin: 0;\">\r\n \ud83d\udca1 <strong>Tip:<\/strong> Advance aur fine amounts permanent save honge. Ye amounts har payment calculation mein deduct honge.\r\n <\/p>\r\n <\/div>\r\n \r\n <div style=\"display: flex; gap: 1rem; margin-top: 2rem;\">\r\n <button type=\"button\" class=\"btn btn-secondary\" style=\"flex: 1;\" onclick=\"closeModal()\">Cancel<\/button>\r\n <button type=\"submit\" class=\"btn btn-primary\" style=\"flex: 1;\">Save Changes<\/button>\r\n <\/div>\r\n <\/form>\r\n `;\r\n modal.classList.add('active');\r\n }\r\n\r\n function saveStaffPayment(event, staffId) {\r\n event.preventDefault();\r\n \r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n const advance = parseFloat(document.getElementById('advanceAmount').value) || 0;\r\n const fine = parseFloat(document.getElementById('fineAmount').value) || 0;\r\n \r\n staff.advance = advance;\r\n staff.fine = fine;\r\n \r\n saveToStorage();\r\n closeModal();\r\n showAlert('Payment details updated successfully!', 'success');\r\n calculatePayments();\r\n }\r\n\r\n function paySalary(staffId) {\r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n \/\/ Calculate current month salary\r\n const period = document.getElementById('paymentPeriod')?.value || 'week';\r\n const now = new Date();\r\n let startDate = new Date();\r\n \r\n switch(period) {\r\n case 'today':\r\n startDate.setHours(0, 0, 0, 0);\r\n break;\r\n case 'week':\r\n startDate.setDate(startDate.getDate() - 7);\r\n break;\r\n case 'month':\r\n startDate.setDate(1);\r\n startDate.setHours(0, 0, 0, 0);\r\n break;\r\n case 'all':\r\n startDate = new Date(0);\r\n break;\r\n }\r\n \r\n const relevantRecords = (staff.punchRecords || []).filter(r => {\r\n const punchDate = new Date(r.punchIn);\r\n return punchDate >= startDate;\r\n });\r\n \r\n let totalEarnings = 0;\r\n relevantRecords.forEach(record => {\r\n const earnings = calculateRealTimeEarnings(staff, record);\r\n totalEarnings += parseFloat(earnings.earnings);\r\n });\r\n \r\n const advance = staff.advance || 0;\r\n const fine = staff.fine || 0;\r\n const previousBalance = staff.previousBalance || 0;\r\n const netPayable = totalEarnings - advance - fine + previousBalance;\r\n \r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = `Pay Salary - ${staff.name}`;\r\n document.getElementById('modalBody').innerHTML = `\r\n <form onsubmit=\"processSalaryPayment(event, ${staffId})\">\r\n <div style=\"background: rgba(99, 102, 241, 0.1); padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem;\">\r\n <h4 style=\"margin-bottom: 1rem; color: #6366f1;\">Salary Breakdown<\/h4>\r\n <div style=\"display: flex; flex-direction: column; gap: 0.8rem;\">\r\n <div style=\"display: flex; justify-content: space-between;\">\r\n <span style=\"color: #94a3b8;\">Base Earnings:<\/span>\r\n <span style=\"font-weight: 700; color: #10b981;\">\u20b9${totalEarnings.toFixed(2)}<\/span>\r\n <\/div>\r\n <div style=\"display: flex; justify-content: space-between;\">\r\n <span style=\"color: #94a3b8;\">Advance:<\/span>\r\n <span style=\"font-weight: 700; color: #f59e0b;\">-\u20b9${advance.toFixed(2)}<\/span>\r\n <\/div>\r\n <div style=\"display: flex; justify-content: space-between;\">\r\n <span style=\"color: #94a3b8;\">Fine:<\/span>\r\n <span style=\"font-weight: 700; color: #ef4444;\">-\u20b9${fine.toFixed(2)}<\/span>\r\n <\/div>\r\n <div style=\"display: flex; justify-content: space-between;\">\r\n <span style=\"color: #94a3b8;\">Previous Balance:<\/span>\r\n <span style=\"font-weight: 700; color: ${previousBalance >= 0 ? '#10b981' : '#ef4444'};\">${previousBalance >= 0 ? '+' : ''}\u20b9${previousBalance.toFixed(2)}<\/span>\r\n <\/div>\r\n <div style=\"display: flex; justify-content: space-between; padding-top: 0.8rem; border-top: 2px solid rgba(99, 102, 241, 0.3);\">\r\n <span style=\"font-size: 1.1rem; font-weight: 700;\">Net Payable:<\/span>\r\n <span style=\"font-size: 1.3rem; font-weight: 800; color: #10b981;\">\u20b9${netPayable.toFixed(2)}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label>Cash Amount Paying (\u20b9) *<\/label>\r\n <input type=\"number\" id=\"cashAmount\" step=\"0.01\" min=\"0\" placeholder=\"Enter amount\" required style=\"font-size: 1.2rem; font-weight: 700;\">\r\n <\/div>\r\n \r\n <div style=\"background: rgba(16, 185, 129, 0.1); padding: 1rem; border-radius: 8px; margin-top: 1rem;\">\r\n <p style=\"color: #10b981; font-size: 0.9rem; margin: 0;\">\r\n \ud83d\udca1 <strong>Auto Calculation:<\/strong><br>\r\n \u2022 Agar kam diye to balance next month add hoga<br>\r\n \u2022 Agar zyada diye to advance me add hoga\r\n <\/p>\r\n <\/div>\r\n \r\n <div style=\"display: flex; gap: 1rem; margin-top: 2rem;\">\r\n <button type=\"button\" class=\"btn btn-secondary\" style=\"flex: 1;\" onclick=\"closeModal()\">Cancel<\/button>\r\n <button type=\"submit\" class=\"btn btn-success\" style=\"flex: 1;\">\ud83d\udcb0 Pay Now<\/button>\r\n <\/div>\r\n <\/form>\r\n `;\r\n modal.classList.add('active');\r\n }\r\n\r\n function processSalaryPayment(event, staffId) {\r\n event.preventDefault();\r\n \r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n const cashAmount = parseFloat(document.getElementById('cashAmount').value) || 0;\r\n \r\n if (cashAmount <= 0) {\r\n showAlert('Please enter a valid amount!', 'error');\r\n return;\r\n }\r\n \r\n \/\/ Calculate current salary\r\n const period = document.getElementById('paymentPeriod')?.value || 'week';\r\n const now = new Date();\r\n let startDate = new Date();\r\n \r\n switch(period) {\r\n case 'today':\r\n startDate.setHours(0, 0, 0, 0);\r\n break;\r\n case 'week':\r\n startDate.setDate(startDate.getDate() - 7);\r\n break;\r\n case 'month':\r\n startDate.setDate(1);\r\n startDate.setHours(0, 0, 0, 0);\r\n break;\r\n case 'all':\r\n startDate = new Date(0);\r\n break;\r\n }\r\n \r\n const relevantRecords = (staff.punchRecords || []).filter(r => {\r\n const punchDate = new Date(r.punchIn);\r\n return punchDate >= startDate;\r\n });\r\n \r\n let totalEarnings = 0;\r\n relevantRecords.forEach(record => {\r\n const earnings = calculateRealTimeEarnings(staff, record);\r\n totalEarnings += parseFloat(earnings.earnings);\r\n });\r\n \r\n const advance = staff.advance || 0;\r\n const fine = staff.fine || 0;\r\n const previousBalance = staff.previousBalance || 0;\r\n const netPayable = totalEarnings - advance - fine + previousBalance;\r\n \r\n \/\/ Calculate new balance\r\n const difference = cashAmount - netPayable;\r\n \r\n \/\/ Update staff payment info\r\n staff.cashPaid = (staff.cashPaid || 0) + cashAmount;\r\n \r\n if (difference < 0) {\r\n \/\/ Paid less - balance carried forward\r\n staff.previousBalance = difference; \/\/ Will be negative\r\n staff.advance = 0; \/\/ Reset advance\r\n showAlert(`Payment recorded! Balance of \u20b9${Math.abs(difference).toFixed(2)} will be added to next month.`, 'success');\r\n } else if (difference > 0) {\r\n \/\/ Paid more - goes to advance\r\n staff.advance = difference;\r\n staff.previousBalance = 0;\r\n showAlert(`Payment recorded! Extra \u20b9${difference.toFixed(2)} added to advance.`, 'success');\r\n } else {\r\n \/\/ Exact payment\r\n staff.previousBalance = 0;\r\n staff.advance = 0;\r\n showAlert('Payment recorded! Salary paid in full.', 'success');\r\n }\r\n \r\n staff.fine = 0; \/\/ Reset fine after payment\r\n \r\n \/\/ Add payment history\r\n if (!staff.paymentHistory) staff.paymentHistory = [];\r\n staff.paymentHistory.push({\r\n date: new Date().toISOString(),\r\n amount: cashAmount,\r\n salary: netPayable,\r\n balance: difference,\r\n period: period\r\n });\r\n \r\n saveToStorage();\r\n closeModal();\r\n addNotification(`Salary paid: \u20b9${cashAmount}`, 'success', staff.name);\r\n calculatePayments();\r\n }\r\n\r\n function renderHistoryView(container) {\r\n const allPunches = staffData.flatMap(staff => \r\n (staff.punchRecords || []).map((r, index) => ({\r\n ...r,\r\n staffName: staff.name,\r\n staffPhoto: staff.photo,\r\n staffId: staff.id,\r\n staff: staff,\r\n recordIndex: index\r\n }))\r\n ).sort((a, b) => new Date(b.punchIn) - new Date(a.punchIn));\r\n\r\n container.innerHTML = `\r\n <div>\r\n <h2 style=\"font-size: 2rem; font-weight: 700; margin-bottom: 2rem;\">Punch In\/Out History<\/h2>\r\n \r\n ${isAdminLoggedIn ? `\r\n <div class=\"card\" style=\"margin-bottom: 1.5rem;\">\r\n <h3 style=\"margin-bottom: 1rem;\">\ud83d\udd0d Filters<\/h3>\r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;\">\r\n <div class=\"form-group\">\r\n <label>Staff Member<\/label>\r\n <select id=\"filterStaff\" onchange=\"filterHistory()\">\r\n <option value=\"all\">All Staff<\/option>\r\n ${staffData.map(s => `<option value=\"${s.id}\">${s.name}<\/option>`).join('')}\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Date Range<\/label>\r\n <select id=\"filterDate\" onchange=\"filterHistory()\">\r\n <option value=\"all\">All Time<\/option>\r\n <option value=\"today\">Today<\/option>\r\n <option value=\"yesterday\">Yesterday<\/option>\r\n <option value=\"week\">Last 7 Days<\/option>\r\n <option value=\"month\">This Month<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Status<\/label>\r\n <select id=\"filterStatus\" onchange=\"filterHistory()\">\r\n <option value=\"all\">All Status<\/option>\r\n <option value=\"active\">Active<\/option>\r\n <option value=\"completed\">Completed<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n ` : ''}\r\n \r\n <div class=\"card\">\r\n <div id=\"historyContent\">\r\n ${allPunches.length === 0 ? `\r\n <div style=\"text-align: center; padding: 3rem;\">\r\n <div style=\"font-size: 4rem; margin-bottom: 1rem;\">\ud83d\udccb<\/div>\r\n <p style=\"color: #94a3b8;\">No punch records yet<\/p>\r\n <\/div>\r\n ` : `\r\n <div style=\"overflow-x: auto;\">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>Staff<\/th>\r\n <th>Date<\/th>\r\n <th>Punch In<\/th>\r\n <th>Punch Out<\/th>\r\n <th>Duration<\/th>\r\n <th>Earnings (\u20b9)<\/th>\r\n <th>Status<\/th>\r\n ${isAdminLoggedIn ? '<th>Actions<\/th>' : ''}\r\n <\/tr>\r\n <\/thead>\r\n <tbody id=\"historyTableBody\">\r\n ${renderHistoryRows(allPunches)}\r\n <\/tbody>\r\n <\/table>\r\n <\/div>\r\n \r\n <div style=\"margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(16, 185, 129, 0.1)); border-radius: 12px; border: 1px solid rgba(99, 102, 241, 0.2);\">\r\n <h4 style=\"margin-bottom: 1rem; color: #6366f1;\">\ud83d\udcca Total Summary<\/h4>\r\n ${(() => {\r\n const totalEarnings = allPunches.reduce((sum, punch) => {\r\n const earnings = calculateRealTimeEarnings(punch.staff, punch);\r\n return sum + parseFloat(earnings.earnings);\r\n }, 0);\r\n \r\n const totalMinutes = allPunches.reduce((sum, punch) => {\r\n const earnings = calculateRealTimeEarnings(punch.staff, punch);\r\n return sum + earnings.minutes;\r\n }, 0);\r\n \r\n const totalHours = (totalMinutes \/ 60).toFixed(2);\r\n \r\n return `\r\n <div style=\"display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.3rem;\">Total Records<\/p>\r\n <p style=\"font-size: 1.5rem; font-weight: 800; color: #6366f1; margin: 0;\">${allPunches.length}<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.3rem;\">Total Hours<\/p>\r\n <p style=\"font-size: 1.5rem; font-weight: 800; color: #ec4899; margin: 0;\">${totalHours}h<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.9rem; margin-bottom: 0.3rem;\">Total Earnings<\/p>\r\n <p style=\"font-size: 1.5rem; font-weight: 800; color: #10b981; margin: 0;\">\u20b9${totalEarnings.toFixed(2)}<\/p>\r\n <\/div>\r\n <\/div>\r\n `;\r\n })()}\r\n <\/div>\r\n `}\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }\r\n\r\n function renderHistoryRows(punches) {\r\n return punches.map(punch => {\r\n const punchInTime = new Date(punch.punchIn);\r\n const punchOutTime = punch.punchOut ? new Date(punch.punchOut) : null;\r\n \r\n const earnings = calculateRealTimeEarnings(punch.staff, punch);\r\n const duration = punchOutTime ? \r\n `${earnings.hours}h (${earnings.minutes} min)` : \r\n '-';\r\n \r\n return `\r\n <tr data-staff-id=\"${punch.staffId}\" data-date=\"${punchInTime.toDateString()}\" data-status=\"${punchOutTime ? 'completed' : 'active'}\">\r\n <td>\r\n <div style=\"display: flex; align-items: center; gap: 0.8rem;\">\r\n ${punch.staffPhoto ? \r\n `<img decoding=\"async\" src=\"${punch.staffPhoto}\" style=\"width: 35px; height: 35px; border-radius: 8px; object-fit: cover;\">` :\r\n `<div style=\"width: 35px; height: 35px; background: linear-gradient(135deg, #6366f1, #ec4899); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 0.9rem;\">${punch.staffName.charAt(0).toUpperCase()}<\/div>`\r\n }\r\n <div>\r\n <span style=\"font-weight: 600; display: block;\">${punch.staffName}<\/span>\r\n <span style=\"font-size: 0.75rem; color: #94a3b8;\">${punch.staff.wageType}: \u20b9${punch.staff.rate}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/td>\r\n <td>${punchInTime.toLocaleDateString('en-IN')}<\/td>\r\n <td>${formatDateTimeAMPM(punch.punchIn)}<\/td>\r\n <td>${punchOutTime ? formatDateTimeAMPM(punch.punchOut) : '-'}<\/td>\r\n <td>${duration}<\/td>\r\n <td>\r\n <span style=\"font-weight: 700; color: #10b981; font-size: 1.05rem;\">\r\n ${punchOutTime ? `\u20b9${earnings.earnings}` : `\u20b9${earnings.earnings} (Live)`}\r\n <\/span>\r\n <\/td>\r\n <td>\r\n ${punchOutTime ? \r\n `<span style=\"color: #10b981; font-weight: 600;\">\u2713 Completed<\/span>${punch.note ? `<br><span style=\"font-size: 0.75rem; color: #94a3b8;\">\ud83d\udcdd ${punch.note}<\/span>` : ''}` :\r\n '<span style=\"color: #f59e0b; font-weight: 600;\">\ud83d\udfe2 Active<\/span>'\r\n }\r\n <\/td>\r\n ${isAdminLoggedIn ? `\r\n <td>\r\n <button class=\"btn btn-secondary btn-sm\" onclick=\"editPunchRecord(${punch.staffId}, ${punch.recordIndex})\" title=\"Edit\">\r\n \u270f\ufe0f\r\n <\/button>\r\n <\/td>\r\n ` : ''}\r\n <\/tr>\r\n `;\r\n }).join('');\r\n }\r\n\r\n function filterHistory() {\r\n const staffFilter = document.getElementById('filterStaff')?.value || 'all';\r\n const dateFilter = document.getElementById('filterDate')?.value || 'all';\r\n const statusFilter = document.getElementById('filterStatus')?.value || 'all';\r\n \r\n const rows = document.querySelectorAll('#historyTableBody tr');\r\n \r\n rows.forEach(row => {\r\n let showRow = true;\r\n \r\n \/\/ Staff filter\r\n if (staffFilter !== 'all' && row.dataset.staffId !== staffFilter) {\r\n showRow = false;\r\n }\r\n \r\n \/\/ Status filter\r\n if (statusFilter !== 'all' && row.dataset.status !== statusFilter) {\r\n showRow = false;\r\n }\r\n \r\n \/\/ Date filter\r\n if (dateFilter !== 'all') {\r\n const rowDate = new Date(row.dataset.date);\r\n const today = new Date();\r\n today.setHours(0, 0, 0, 0);\r\n \r\n switch(dateFilter) {\r\n case 'today':\r\n if (rowDate.toDateString() !== today.toDateString()) showRow = false;\r\n break;\r\n case 'yesterday':\r\n const yesterday = new Date(today);\r\n yesterday.setDate(yesterday.getDate() - 1);\r\n if (rowDate.toDateString() !== yesterday.toDateString()) showRow = false;\r\n break;\r\n case 'week':\r\n const weekAgo = new Date(today);\r\n weekAgo.setDate(weekAgo.getDate() - 7);\r\n if (rowDate < weekAgo) showRow = false;\r\n break;\r\n case 'month':\r\n if (rowDate.getMonth() !== today.getMonth() || rowDate.getFullYear() !== today.getFullYear()) {\r\n showRow = false;\r\n }\r\n break;\r\n }\r\n }\r\n \r\n row.style.display = showRow ? '' : 'none';\r\n });\r\n }\r\n\r\n function editPunchRecord(staffId, recordIndex) {\r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff || !staff.punchRecords || !staff.punchRecords[recordIndex]) return;\r\n \r\n const record = staff.punchRecords[recordIndex];\r\n const punchIn = new Date(record.punchIn);\r\n const punchOut = record.punchOut ? new Date(record.punchOut) : null;\r\n \r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = `Edit Punch Record - ${staff.name}`;\r\n document.getElementById('modalBody').innerHTML = `\r\n <form onsubmit=\"savePunchEdit(event, ${staffId}, ${recordIndex})\">\r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label>Punch In Date *<\/label>\r\n <input type=\"date\" id=\"editPunchInDate\" value=\"${punchIn.toISOString().split('T')[0]}\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Punch In Time *<\/label>\r\n <input type=\"time\" id=\"editPunchInTime\" value=\"${punchIn.toTimeString().slice(0, 5)}\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Punch Out Date<\/label>\r\n <input type=\"date\" id=\"editPunchOutDate\" value=\"${punchOut ? punchOut.toISOString().split('T')[0] : ''}\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Punch Out Time<\/label>\r\n <input type=\"time\" id=\"editPunchOutTime\" value=\"${punchOut ? punchOut.toTimeString().slice(0, 5) : ''}\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"background: rgba(245, 158, 11, 0.1); padding: 1rem; border-radius: 8px; margin-top: 1rem; border: 1px solid rgba(245, 158, 11, 0.3);\">\r\n <p style=\"color: #f59e0b; font-size: 0.9rem; margin: 0;\">\r\n \u26a0\ufe0f <strong>Note:<\/strong> Editing punch records will affect salary calculations. Make sure to enter correct times.\r\n <\/p>\r\n <\/div>\r\n \r\n <div style=\"display: flex; gap: 1rem; margin-top: 2rem;\">\r\n <button type=\"button\" class=\"btn btn-danger\" style=\"flex: 1;\" onclick=\"deletePunchRecord(${staffId}, ${recordIndex})\">\r\n \ud83d\uddd1\ufe0f Delete Record\r\n <\/button>\r\n <button type=\"button\" class=\"btn btn-secondary\" onclick=\"closeModal()\">\r\n Cancel\r\n <\/button>\r\n <button type=\"submit\" class=\"btn btn-primary\" style=\"flex: 1;\">\r\n Save Changes\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n `;\r\n modal.classList.add('active');\r\n }\r\n\r\n function savePunchEdit(event, staffId, recordIndex) {\r\n event.preventDefault();\r\n \r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n const punchInDate = document.getElementById('editPunchInDate').value;\r\n const punchInTime = document.getElementById('editPunchInTime').value;\r\n const punchOutDate = document.getElementById('editPunchOutDate').value;\r\n const punchOutTime = document.getElementById('editPunchOutTime').value;\r\n \r\n const punchIn = new Date(`${punchInDate}T${punchInTime}`);\r\n const punchOut = (punchOutDate && punchOutTime) ? new Date(`${punchOutDate}T${punchOutTime}`) : null;\r\n \r\n \/\/ Validate\r\n if (punchOut && punchOut <= punchIn) {\r\n showAlert('Punch out time must be after punch in time!', 'error');\r\n return;\r\n }\r\n \r\n staff.punchRecords[recordIndex] = {\r\n punchIn: punchIn.toISOString(),\r\n punchOut: punchOut ? punchOut.toISOString() : null\r\n };\r\n \r\n saveToStorage();\r\n closeModal();\r\n showAlert('Punch record updated successfully!', 'success');\r\n switchView('history');\r\n }\r\n\r\n function deletePunchRecord(staffId, recordIndex) {\r\n if (confirm('Are you sure you want to delete this punch record? This cannot be undone.')) {\r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n staff.punchRecords.splice(recordIndex, 1);\r\n saveToStorage();\r\n closeModal();\r\n showAlert('Punch record deleted successfully!', 'success');\r\n switchView('history');\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ SETTINGS VIEW\r\n \/\/ ============================================\r\n \r\n function renderSettingsView(container) {\r\n container.innerHTML = `\r\n <div>\r\n <h2 style=\"font-size: 2rem; font-weight: 700; margin-bottom: 2rem;\">\u2699\ufe0f System Settings<\/h2>\r\n \r\n <div class=\"card\">\r\n <h3 style=\"margin-bottom: 1.5rem;\">\ud83d\udd10 Admin Settings<\/h3>\r\n <form onsubmit=\"changeAdminPassword(event)\">\r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label>Current Password *<\/label>\r\n <input type=\"password\" id=\"currentPassword\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>New Password *<\/label>\r\n <input type=\"password\" id=\"newPassword\" minlength=\"4\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Confirm New Password *<\/label>\r\n <input type=\"password\" id=\"confirmPassword\" minlength=\"4\" required>\r\n <\/div>\r\n <\/div>\r\n <button type=\"submit\" class=\"btn btn-danger\">\ud83d\udd11 Change Password<\/button>\r\n <\/form>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <h3 style=\"margin-bottom: 1.5rem;\">\ud83c\udfa8 Appearance<\/h3>\r\n <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\r\n <label style=\"display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(99, 102, 241, 0.1); border-radius: 8px; cursor: pointer;\">\r\n <input type=\"checkbox\" id=\"darkMode\" ${settings.darkMode ? 'checked' : ''} onchange=\"toggleDarkMode()\" style=\"width: 20px; height: 20px; cursor: pointer;\">\r\n <div>\r\n <strong>\ud83c\udf19 Dark Mode<\/strong>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">Enable dark theme for better viewing in low light<\/p>\r\n <\/div>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <h3 style=\"margin-bottom: 1.5rem;\">\ud83d\udc64 Owner Information<\/h3>\r\n <form onsubmit=\"saveOwnerSettings(event)\">\r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label>WhatsApp Number (with country code)<\/label>\r\n <input type=\"tel\" id=\"ownerNumber\" value=\"${settings.ownerNumber}\" placeholder=\"+919876543210\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Email Address<\/label>\r\n <input type=\"email\" id=\"ownerEmail\" value=\"${settings.ownerEmail}\" placeholder=\"owner@example.com\">\r\n <\/div>\r\n <\/div>\r\n <button type=\"submit\" class=\"btn btn-primary\">\ud83d\udcbe Save Owner Info<\/button>\r\n <\/form>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <h3 style=\"margin-bottom: 1.5rem;\">\ud83d\udcf1 WhatsApp & Email Settings<\/h3>\r\n <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\r\n <label style=\"display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(99, 102, 241, 0.1); border-radius: 8px; cursor: pointer;\">\r\n <input type=\"checkbox\" id=\"whatsappDaily\" ${settings.whatsappDaily ? 'checked' : ''} onchange=\"toggleWhatsAppDaily()\" style=\"width: 20px; height: 20px; cursor: pointer;\">\r\n <div>\r\n <strong>Daily WhatsApp Report<\/strong>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">Send daily attendance report to owner's WhatsApp (6 PM)<\/p>\r\n <\/div>\r\n <\/label>\r\n \r\n <div style=\"display: flex; gap: 1rem; margin-top: 1rem;\">\r\n <button class=\"btn btn-success\" onclick=\"sendWhatsAppReport()\">\ud83d\udcf1 Send WhatsApp Report Now<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"emailBackup()\">\ud83d\udce7 Email Report Now<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <h3 style=\"margin-bottom: 1.5rem;\">\ud83d\udcbe Backup Settings<\/h3>\r\n <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\r\n <label style=\"display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(16, 185, 129, 0.1); border-radius: 8px; cursor: pointer;\">\r\n <input type=\"checkbox\" id=\"autoBackup\" ${settings.autoBackup ? 'checked' : ''} onchange=\"toggleAutoBackup()\" style=\"width: 20px; height: 20px; cursor: pointer;\">\r\n <div>\r\n <strong>Automatic Daily Backup<\/strong>\r\n <p style=\"margin: 0.3rem 0 0 0; color: #94a3b8; font-size: 0.9rem;\">Automatically backup data every day to browser storage<\/p>\r\n <\/div>\r\n <\/label>\r\n \r\n <div style=\"display: flex; gap: 1rem; margin-top: 1rem; flex-wrap: wrap;\">\r\n <button class=\"btn btn-primary\" onclick=\"createBackup()\">\ud83d\udce5 Download Backup Now<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"document.getElementById('restoreInput').click()\">\ud83d\udce4 Restore from Backup<\/button>\r\n <input type=\"file\" id=\"restoreInput\" accept=\".json\" style=\"display: none;\" onchange=\"handleRestoreFile(event)\">\r\n <\/div>\r\n \r\n <div style=\"margin-top: 1rem; padding: 1rem; background: rgba(99, 102, 241, 0.1); border-radius: 8px;\">\r\n <p style=\"color: #6366f1; font-weight: 600; margin-bottom: 0.5rem;\">\ud83d\udcca Backup History<\/p>\r\n <div id=\"backupHistory\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"card\">\r\n <h3 style=\"margin-bottom: 1.5rem;\">\ud83c\udfa8 Theme Colors<\/h3>\r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label>Primary Color<\/label>\r\n <div style=\"display: flex; gap: 0.5rem;\">\r\n <input type=\"color\" id=\"primaryColor\" value=\"${settings.theme.primary}\" style=\"width: 60px; height: 40px; cursor: pointer;\">\r\n <input type=\"text\" value=\"${settings.theme.primary}\" readonly style=\"flex: 1;\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Secondary Color<\/label>\r\n <div style=\"display: flex; gap: 0.5rem;\">\r\n <input type=\"color\" id=\"secondaryColor\" value=\"${settings.theme.secondary}\" style=\"width: 60px; height: 40px; cursor: pointer;\">\r\n <input type=\"text\" value=\"${settings.theme.secondary}\" readonly style=\"flex: 1;\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Success Color<\/label>\r\n <div style=\"display: flex; gap: 0.5rem;\">\r\n <input type=\"color\" id=\"successColor\" value=\"${settings.theme.success}\" style=\"width: 60px; height: 40px; cursor: pointer;\">\r\n <input type=\"text\" value=\"${settings.theme.success}\" readonly style=\"flex: 1;\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Danger Color<\/label>\r\n <div style=\"display: flex; gap: 0.5rem;\">\r\n <input type=\"color\" id=\"dangerColor\" value=\"${settings.theme.danger}\" style=\"width: 60px; height: 40px; cursor: pointer;\">\r\n <input type=\"text\" value=\"${settings.theme.danger}\" readonly style=\"flex: 1;\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div style=\"display: flex; gap: 1rem; margin-top: 1rem;\">\r\n <button class=\"btn btn-primary\" onclick=\"saveThemeColors()\">\ud83c\udfa8 Save Theme<\/button>\r\n <button class=\"btn btn-secondary\" onclick=\"resetThemeColors()\">\u21ba Reset to Default<\/button>\r\n <\/div>\r\n <p style=\"margin-top: 1rem; color: #94a3b8; font-size: 0.9rem;\">\ud83d\udca1 Note: Theme colors will be applied after page refresh<\/p>\r\n <\/div>\r\n <\/div>\r\n `;\r\n \r\n loadBackupHistory();\r\n }\r\n\r\n function changeAdminPassword(event) {\r\n event.preventDefault();\r\n \r\n const currentPassword = document.getElementById('currentPassword').value;\r\n const newPassword = document.getElementById('newPassword').value;\r\n const confirmPassword = document.getElementById('confirmPassword').value;\r\n \r\n if (currentPassword !== adminPassword) {\r\n showAlert('Current password is incorrect!', 'error');\r\n return;\r\n }\r\n \r\n if (newPassword !== confirmPassword) {\r\n showAlert('New passwords do not match!', 'error');\r\n return;\r\n }\r\n \r\n if (newPassword.length < 4) {\r\n showAlert('Password must be at least 4 characters!', 'error');\r\n return;\r\n }\r\n \r\n adminPassword = newPassword;\r\n localStorage.setItem(ADMIN_PASSWORD_KEY, newPassword);\r\n \r\n document.getElementById('currentPassword').value = '';\r\n document.getElementById('newPassword').value = '';\r\n document.getElementById('confirmPassword').value = '';\r\n \r\n addNotification('Admin password changed successfully!', 'success');\r\n showAlert('Password changed successfully! Please remember your new password.', 'success');\r\n }\r\n\r\n function toggleDarkMode() {\r\n settings.darkMode = document.getElementById('darkMode').checked;\r\n saveSettings();\r\n applyDarkMode();\r\n addNotification(`Dark mode ${settings.darkMode ? 'enabled' : 'disabled'}`, 'success');\r\n }\r\n\r\n function applyDarkMode() {\r\n if (settings.darkMode) {\r\n document.body.classList.add('dark-mode');\r\n } else {\r\n document.body.classList.remove('dark-mode');\r\n }\r\n }\r\n\r\n function saveOwnerSettings(event) {\r\n event.preventDefault();\r\n settings.ownerNumber = document.getElementById('ownerNumber').value;\r\n settings.ownerEmail = document.getElementById('ownerEmail').value;\r\n saveSettings();\r\n addNotification('Owner information saved successfully', 'success');\r\n }\r\n\r\n function toggleWhatsAppDaily() {\r\n settings.whatsappDaily = document.getElementById('whatsappDaily').checked;\r\n saveSettings();\r\n addNotification(`WhatsApp daily report ${settings.whatsappDaily ? 'enabled' : 'disabled'}`, 'success');\r\n }\r\n\r\n function toggleAutoBackup() {\r\n settings.autoBackup = document.getElementById('autoBackup').checked;\r\n saveSettings();\r\n addNotification(`Auto backup ${settings.autoBackup ? 'enabled' : 'disabled'}`, 'success');\r\n }\r\n\r\n function saveThemeColors() {\r\n settings.theme.primary = document.getElementById('primaryColor').value;\r\n settings.theme.secondary = document.getElementById('secondaryColor').value;\r\n settings.theme.success = document.getElementById('successColor').value;\r\n settings.theme.danger = document.getElementById('dangerColor').value;\r\n saveSettings();\r\n addNotification('Theme colors saved! Refresh page to apply changes.', 'success');\r\n }\r\n\r\n function resetThemeColors() {\r\n settings.theme = {\r\n primary: '#6366f1',\r\n secondary: '#ec4899',\r\n success: '#10b981',\r\n danger: '#ef4444',\r\n warning: '#f59e0b'\r\n };\r\n saveSettings();\r\n addNotification('Theme reset to default', 'success');\r\n renderSettingsView(document.getElementById('mainContent'));\r\n }\r\n\r\n function loadBackupHistory() {\r\n const history = JSON.parse(localStorage.getItem('backupHistory') || '[]');\r\n const container = document.getElementById('backupHistory');\r\n if (!container) return;\r\n \r\n if (history.length === 0) {\r\n container.innerHTML = '<p style=\"color: #94a3b8; font-size: 0.9rem;\">No backup history available<\/p>';\r\n return;\r\n }\r\n \r\n container.innerHTML = history.slice(0, 5).map(b => `\r\n <div style=\"padding: 0.5rem 0; border-bottom: 1px solid rgba(99, 102, 241, 0.1);\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: center;\">\r\n <div>\r\n <p style=\"margin: 0; font-size: 0.9rem; color: #e2e8f0;\">${new Date(b.timestamp).toLocaleString('en-IN')}<\/p>\r\n <p style=\"margin: 0.2rem 0 0 0; font-size: 0.8rem; color: #94a3b8;\">${b.staffCount} staff \u2022 ${(b.size \/ 1024).toFixed(1)} KB<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `).join('');\r\n }\r\n\r\n function handleRestoreFile(event) {\r\n const file = event.target.files[0];\r\n if (file) {\r\n restoreBackup(file);\r\n }\r\n event.target.value = '';\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ PERFORMANCE VIEW\r\n \/\/ ============================================\r\n \r\n function renderPerformanceView(container) {\r\n container.innerHTML = `\r\n <div>\r\n <h2 style=\"font-size: 2rem; font-weight: 700; margin-bottom: 2rem;\">\ud83d\udcc8 Performance Metrics<\/h2>\r\n \r\n <div class=\"card\" style=\"margin-bottom: 1.5rem;\">\r\n <h3 style=\"margin-bottom: 1rem;\">\ud83d\udd0d Filter<\/h3>\r\n <div class=\"form-group\" style=\"max-width: 300px;\">\r\n <label>Time Period<\/label>\r\n <select id=\"performancePeriod\" onchange=\"updatePerformanceMetrics()\">\r\n <option value=\"7\">Last 7 Days<\/option>\r\n <option value=\"15\">Last 15 Days<\/option>\r\n <option value=\"30\" selected>Last 30 Days<\/option>\r\n <option value=\"60\">Last 60 Days<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n \r\n <div id=\"performanceResults\"><\/div>\r\n <\/div>\r\n `;\r\n \r\n updatePerformanceMetrics();\r\n }\r\n\r\n function updatePerformanceMetrics() {\r\n const days = parseInt(document.getElementById('performancePeriod')?.value || 30);\r\n const resultsDiv = document.getElementById('performanceResults');\r\n if (!resultsDiv) return;\r\n \r\n const performanceData = staffData.map(staff => ({\r\n staff: staff,\r\n metrics: calculateStaffPerformance(staff, days)\r\n })).sort((a, b) => b.metrics.rating - a.metrics.rating);\r\n \r\n resultsDiv.innerHTML = `\r\n <div style=\"display: grid; gap: 1.5rem;\">\r\n ${performanceData.map((data, i) => {\r\n const stars = '\u2b50'.repeat(data.metrics.rating);\r\n const ratingColor = data.metrics.rating >= 4 ? '#10b981' : \r\n data.metrics.rating >= 3 ? '#f59e0b' : '#ef4444';\r\n \r\n return `\r\n <div class=\"card\" style=\"animation: slideIn 0.5s ease forwards; animation-delay: ${i * 0.05}s;\">\r\n <div style=\"display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;\">\r\n <div style=\"display: flex; align-items: center; gap: 1rem;\">\r\n ${data.staff.photo ? \r\n `<img decoding=\"async\" src=\"${data.staff.photo}\" style=\"width: 60px; height: 60px; border-radius: 12px; object-fit: cover; border: 2px solid ${ratingColor};\">` :\r\n `<div style=\"width: 60px; height: 60px; background: linear-gradient(135deg, #6366f1, #ec4899); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: white; font-weight: 700;\">${data.staff.name.charAt(0).toUpperCase()}<\/div>`\r\n }\r\n <div>\r\n <h3 style=\"margin: 0; font-size: 1.3rem; font-weight: 700;\">${data.staff.name}<\/h3>\r\n <p style=\"margin: 0.2rem 0; color: #94a3b8;\">${data.staff.designation || data.staff.department}<\/p>\r\n <p style=\"margin: 0.3rem 0 0 0; font-size: 1.2rem;\">${stars}<\/p>\r\n <\/div>\r\n <\/div>\r\n <div style=\"text-align: right;\">\r\n <p style=\"margin: 0; font-size: 0.9rem; color: #94a3b8;\">Overall Rating<\/p>\r\n <p style=\"margin: 0.3rem 0 0 0; font-size: 2rem; font-weight: 800; color: ${ratingColor};\">${data.metrics.rating}\/5<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; padding: 1.5rem; background: rgba(99, 102, 241, 0.05); border-radius: 12px;\">\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Attendance<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #6366f1; margin: 0;\">${data.metrics.attendanceRate}%<\/p>\r\n <p style=\"font-size: 0.75rem; color: #94a3b8; margin-top: 0.2rem;\">${data.metrics.totalDays}\/${days} days<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">On-Time Rate<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #10b981; margin: 0;\">${data.metrics.onTimeRate}%<\/p>\r\n <p style=\"font-size: 0.75rem; color: #94a3b8; margin-top: 0.2rem;\">${data.metrics.totalDays - data.metrics.lateDays} on-time<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Late Days<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #ef4444; margin: 0;\">${data.metrics.lateDays}<\/p>\r\n <p style=\"font-size: 0.75rem; color: #94a3b8; margin-top: 0.2rem;\">days late<\/p>\r\n <\/div>\r\n <div>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.3rem;\">Total Hours<\/p>\r\n <p style=\"font-size: 1.3rem; font-weight: 700; color: #ec4899; margin: 0;\">${data.metrics.totalHours}h<\/p>\r\n <p style=\"font-size: 0.75rem; color: #94a3b8; margin-top: 0.2rem;\">${data.metrics.avgHoursPerDay}h avg\/day<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('')}\r\n <\/div>\r\n `;\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ NOTIFICATIONS VIEW\r\n \/\/ ============================================\r\n \r\n function renderNotificationsView(container) {\r\n \/\/ Mark all as read\r\n notifications.forEach(n => n.read = true);\r\n updateNotificationBadge();\r\n \r\n container.innerHTML = `\r\n <div>\r\n <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;\">\r\n <h2 style=\"font-size: 2rem; font-weight: 700;\">\ud83d\udd14 Notifications<\/h2>\r\n <button class=\"btn btn-danger btn-sm\" onclick=\"clearAllNotifications()\">\ud83d\uddd1\ufe0f Clear All<\/button>\r\n <\/div>\r\n \r\n ${notifications.length === 0 ? `\r\n <div class=\"card\" style=\"text-align: center; padding: 3rem;\">\r\n <div style=\"font-size: 4rem; margin-bottom: 1rem;\">\ud83d\udd14<\/div>\r\n <p style=\"color: #94a3b8;\">No notifications yet<\/p>\r\n <\/div>\r\n ` : `\r\n <div style=\"display: flex; flex-direction: column; gap: 1rem;\">\r\n ${notifications.map((notif, i) => {\r\n const icon = notif.type === 'success' ? '\u2705' : \r\n notif.type === 'warning' ? '\u26a0\ufe0f' : \r\n notif.type === 'error' ? '\u274c' : '\u2139\ufe0f';\r\n const bgColor = notif.type === 'success' ? 'rgba(16, 185, 129, 0.1)' : \r\n notif.type === 'warning' ? 'rgba(245, 158, 11, 0.1)' : \r\n notif.type === 'error' ? 'rgba(239, 68, 68, 0.1)' : 'rgba(99, 102, 241, 0.1)';\r\n const borderColor = notif.type === 'success' ? '#10b981' : \r\n notif.type === 'warning' ? '#f59e0b' : \r\n notif.type === 'error' ? '#ef4444' : '#6366f1';\r\n \r\n return `\r\n <div class=\"card\" style=\"background: ${bgColor}; border: 1px solid ${borderColor}; animation: slideIn 0.5s ease forwards; animation-delay: ${i * 0.05}s;\">\r\n <div style=\"display: flex; align-items: flex-start; gap: 1rem;\">\r\n <div style=\"font-size: 1.5rem;\">${icon}<\/div>\r\n <div style=\"flex: 1;\">\r\n ${notif.staffName ? `<p style=\"margin: 0; font-weight: 700; color: ${borderColor};\">${notif.staffName}<\/p>` : ''}\r\n <p style=\"margin: ${notif.staffName ? '0.3rem' : '0'} 0 0 0; color: #e2e8f0;\">${notif.message}<\/p>\r\n <p style=\"margin: 0.5rem 0 0 0; font-size: 0.85rem; color: #94a3b8;\">${new Date(notif.timestamp).toLocaleString('en-IN')}<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n }).join('')}\r\n <\/div>\r\n `}\r\n <\/div>\r\n `;\r\n }\r\n\r\n function clearAllNotifications() {\r\n if (confirm('Clear all notifications?')) {\r\n notifications = [];\r\n updateNotificationBadge();\r\n renderNotificationsView(document.getElementById('mainContent'));\r\n addNotification('All notifications cleared', 'success');\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ STAFF MANAGEMENT\r\n \/\/ ============================================\r\n \r\n let currentPhoto = '';\r\n let currentDocs = [];\r\n\r\n function openAddStaffModal() {\r\n currentPhoto = '';\r\n currentDocs = [];\r\n \r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = 'Add New Staff Member';\r\n document.getElementById('modalBody').innerHTML = `\r\n <form id=\"staffForm\" onsubmit=\"saveStaff(event)\">\r\n <div class=\"form-group full-width\" style=\"text-align: center; margin-bottom: 2rem;\">\r\n <label>Photo<\/label>\r\n <div class=\"photo-upload-area\" onclick=\"document.getElementById('photoInput').click()\">\r\n <div id=\"photoPreview\" style=\"width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #6366f1;\">\r\n <div style=\"font-size: 2.5rem;\">\ud83d\udcf7<\/div>\r\n <p style=\"margin-top: 0.5rem; font-size: 0.9rem;\">Click to upload photo<\/p>\r\n <\/div>\r\n <input type=\"file\" id=\"photoInput\" accept=\"image\/*\" style=\"display: none;\" onchange=\"handlePhotoUpload(event)\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label>Full Name *<\/label>\r\n <input type=\"text\" name=\"name\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>WhatsApp Number *<\/label>\r\n <input type=\"tel\" name=\"whatsapp\" placeholder=\"+91 98765 43210\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Wage Type *<\/label>\r\n <select name=\"wageType\" required>\r\n <option value=\"Per Day\">Per Day<\/option>\r\n <option value=\"Per Hour\">Per Hour<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Rate (\u20b9) *<\/label>\r\n <input type=\"number\" name=\"rate\" step=\"0.01\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Shift Start Time *<\/label>\r\n <input type=\"time\" name=\"shiftStart\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Shift End Time *<\/label>\r\n <input type=\"time\" name=\"shiftEnd\" required>\r\n <\/div>\r\n <div class=\"form-group full-width\">\r\n <label>4-Digit Security PIN *<\/label>\r\n <input type=\"text\" name=\"pin\" pattern=\"[0-9]{4}\" maxlength=\"4\" placeholder=\"1234\" required>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group full-width\" style=\"margin-top: 1.5rem;\">\r\n <label>\ud83d\udccb Daily Tasks (Optional)<\/label>\r\n <div id=\"tasksList\" style=\"margin-top: 1rem;\"><\/div>\r\n <button type=\"button\" class=\"btn btn-secondary btn-sm\" onclick=\"addTask()\" style=\"margin-top: 0.5rem;\">\u2795 Add Task<\/button>\r\n <\/div>\r\n \r\n <div class=\"form-group full-width\" style=\"margin-top: 1.5rem;\">\r\n <label>Documents (Max 2 files, 5MB each)<\/label>\r\n <input type=\"file\" id=\"docInput\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" multiple onchange=\"handleDocUpload(event)\" style=\"width: 100%; padding: 0.8rem; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 8px; color: #e2e8f0;\">\r\n <div id=\"docList\" style=\"margin-top: 1rem;\"><\/div>\r\n <\/div>\r\n \r\n <div style=\"display: flex; gap: 1rem; margin-top: 2rem;\">\r\n <button type=\"button\" class=\"btn btn-secondary\" style=\"flex: 1;\" onclick=\"closeModal()\">Cancel<\/button>\r\n <button type=\"submit\" class=\"btn btn-primary\" style=\"flex: 1;\">Add Staff<\/button>\r\n <\/div>\r\n <\/form>\r\n `;\r\n modal.classList.add('active');\r\n }\r\n\r\n function handlePhotoUpload(event) {\r\n const file = event.target.files[0];\r\n if (file) {\r\n if (file.size > 5 * 1024 * 1024) {\r\n showAlert('Photo must be under 5MB', 'error');\r\n return;\r\n }\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n currentPhoto = e.target.result;\r\n document.getElementById('photoPreview').innerHTML = `<img decoding=\"async\" src=\"${e.target.result}\" class=\"photo-preview\">`;\r\n };\r\n reader.readAsDataURL(file);\r\n }\r\n }\r\n\r\n function handleDocUpload(event) {\r\n const files = Array.from(event.target.files);\r\n if (files.length > 2) {\r\n showAlert('Maximum 2 documents allowed', 'error');\r\n event.target.value = '';\r\n return;\r\n }\r\n \r\n currentDocs = [];\r\n const docList = document.getElementById('docList');\r\n docList.innerHTML = '';\r\n \r\n files.forEach(file => {\r\n if (file.size > 5 * 1024 * 1024) {\r\n showAlert(`${file.name} is too large (max 5MB)`, 'error');\r\n return;\r\n }\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n currentDocs.push({\r\n name: file.name,\r\n size: file.size,\r\n type: file.type,\r\n data: e.target.result,\r\n uploadDate: new Date().toISOString()\r\n });\r\n docList.innerHTML += `\r\n <div class=\"document-item\">\r\n <span>\ud83d\udcc4 ${file.name}<\/span>\r\n <span style=\"color: #94a3b8;\">${(file.size\/1024).toFixed(1)} KB<\/span>\r\n <\/div>\r\n `;\r\n };\r\n reader.readAsDataURL(file);\r\n });\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ TASK MANAGEMENT\r\n \/\/ ============================================\r\n \r\n let currentTasks = [];\r\n\r\n function addTask() {\r\n const tasksList = document.getElementById('tasksList');\r\n const taskId = Date.now();\r\n \r\n const taskHTML = `\r\n <div class=\"task-item\" id=\"task-${taskId}\" style=\"margin-bottom: 0.8rem;\">\r\n <input type=\"text\" class=\"task-input\" placeholder=\"Enter task description\" style=\"flex: 1; padding: 0.8rem; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 8px; color: #e2e8f0;\">\r\n <button type=\"button\" class=\"btn btn-danger btn-sm\" onclick=\"removeTask(${taskId})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n `;\r\n \r\n tasksList.insertAdjacentHTML('beforeend', taskHTML);\r\n }\r\n\r\n function removeTask(taskId) {\r\n const taskElement = document.getElementById(`task-${taskId}`);\r\n if (taskElement) {\r\n taskElement.remove();\r\n }\r\n }\r\n\r\n function addEditTask() {\r\n const tasksList = document.getElementById('tasksList');\r\n const taskId = Date.now();\r\n \r\n const taskHTML = `\r\n <div class=\"task-item\" id=\"task-edit-${taskId}\" style=\"margin-bottom: 0.8rem;\">\r\n <input type=\"text\" class=\"task-input\" placeholder=\"Enter task description\" style=\"flex: 1; padding: 0.8rem; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 8px; color: #e2e8f0;\">\r\n <button type=\"button\" class=\"btn btn-danger btn-sm\" onclick=\"removeEditTask('${taskId}')\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n `;\r\n \r\n tasksList.insertAdjacentHTML('beforeend', taskHTML);\r\n }\r\n\r\n function removeEditTask(taskId) {\r\n const taskElement = document.getElementById(`task-edit-${taskId}`);\r\n if (taskElement) {\r\n taskElement.remove();\r\n }\r\n }\r\n\r\n function getTasksFromEditForm() {\r\n const taskInputs = document.querySelectorAll('#tasksList .task-input');\r\n const tasks = [];\r\n \r\n taskInputs.forEach((input, index) => {\r\n const taskText = input.value.trim();\r\n if (taskText) {\r\n \/\/ Preserve completed status if task already exists\r\n const existingTask = currentTasks[index];\r\n tasks.push({\r\n id: existingTask?.id || (Date.now() + Math.random()),\r\n text: taskText,\r\n completed: existingTask?.completed || false,\r\n createdDate: existingTask?.createdDate || new Date().toISOString()\r\n });\r\n }\r\n });\r\n \r\n return tasks;\r\n }\r\n\r\n function toggleTasks(staffId) {\r\n const tasksDiv = document.getElementById(`tasks-${staffId}`);\r\n const toggleBtn = document.getElementById(`toggle-${staffId}`);\r\n \r\n if (tasksDiv.style.display === 'none') {\r\n tasksDiv.style.display = 'block';\r\n toggleBtn.textContent = '\u25b2 Hide';\r\n } else {\r\n tasksDiv.style.display = 'none';\r\n toggleBtn.textContent = '\u25bc Show';\r\n }\r\n }\r\n\r\n function toggleTask(staffId, taskIndex) {\r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff || !staff.tasks || !staff.tasks[taskIndex]) return;\r\n \r\n staff.tasks[taskIndex].completed = !staff.tasks[taskIndex].completed;\r\n saveToStorage();\r\n \r\n \/\/ Refresh attendance view to update progress bar\r\n if (currentView === 'attendance') {\r\n renderAttendanceView(document.getElementById('mainContent'));\r\n }\r\n \r\n const status = staff.tasks[taskIndex].completed ? 'completed' : 'pending';\r\n addNotification(`Task marked as ${status}`, 'success', staff.name);\r\n }\r\n\r\n function getTasksFromForm() {\r\n const taskInputs = document.querySelectorAll('.task-input');\r\n const tasks = [];\r\n \r\n taskInputs.forEach(input => {\r\n const taskText = input.value.trim();\r\n if (taskText) {\r\n tasks.push({\r\n id: Date.now() + Math.random(),\r\n text: taskText,\r\n completed: false,\r\n createdDate: new Date().toISOString()\r\n });\r\n }\r\n });\r\n \r\n return tasks;\r\n }\r\n\r\n function saveStaff(event) {\r\n event.preventDefault();\r\n const formData = new FormData(event.target);\r\n \r\n const newStaff = {\r\n id: Date.now(),\r\n name: formData.get('name'),\r\n whatsapp: formData.get('whatsapp'),\r\n wageType: formData.get('wageType'),\r\n rate: parseFloat(formData.get('rate')),\r\n shiftStart: formData.get('shiftStart'),\r\n shiftEnd: formData.get('shiftEnd'),\r\n pin: formData.get('pin'),\r\n photo: currentPhoto,\r\n documents: currentDocs,\r\n punchRecords: [],\r\n tasks: getTasksFromForm()\r\n };\r\n \r\n staffData.push(newStaff);\r\n saveToStorage();\r\n addNotification('Staff added successfully!', 'success', newStaff.name);\r\n showAlert('Staff added successfully!', 'success');\r\n closeModal();\r\n switchView('staff');\r\n }\r\n\r\n function editStaff(staffId) {\r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n currentPhoto = staff.photo || '';\r\n currentDocs = staff.documents || [];\r\n currentTasks = staff.tasks || [];\r\n \r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = 'Edit Staff Member';\r\n document.getElementById('modalBody').innerHTML = `\r\n <form id=\"staffForm\" onsubmit=\"updateStaff(event, ${staffId})\">\r\n <div class=\"form-group full-width\" style=\"text-align: center; margin-bottom: 2rem;\">\r\n <label>Photo<\/label>\r\n <div class=\"photo-upload-area\" onclick=\"document.getElementById('photoInput').click()\">\r\n <div id=\"photoPreview\" style=\"width: 100%; height: 100%;\">\r\n ${staff.photo ? \r\n `<img decoding=\"async\" src=\"${staff.photo}\" class=\"photo-preview\">` :\r\n `<div style=\"display: flex; align-items: center; justify-content: center; flex-direction: column; color: #6366f1; height: 100%;\"><div style=\"font-size: 2.5rem;\">\ud83d\udcf7<\/div><p style=\"margin-top: 0.5rem; font-size: 0.9rem;\">Click to upload<\/p><\/div>`\r\n }\r\n <\/div>\r\n <input type=\"file\" id=\"photoInput\" accept=\"image\/*\" style=\"display: none;\" onchange=\"handlePhotoUpload(event)\">\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-grid\">\r\n <div class=\"form-group\">\r\n <label>Full Name *<\/label>\r\n <input type=\"text\" name=\"name\" value=\"${staff.name}\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>WhatsApp Number *<\/label>\r\n <input type=\"tel\" name=\"whatsapp\" value=\"${staff.whatsapp}\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Wage Type *<\/label>\r\n <select name=\"wageType\" required>\r\n <option value=\"Per Day\" ${staff.wageType === 'Per Day' ? 'selected' : ''}>Per Day<\/option>\r\n <option value=\"Per Hour\" ${staff.wageType === 'Per Hour' ? 'selected' : ''}>Per Hour<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Rate (\u20b9) *<\/label>\r\n <input type=\"number\" name=\"rate\" value=\"${staff.rate}\" step=\"0.01\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Shift Start Time *<\/label>\r\n <input type=\"time\" name=\"shiftStart\" value=\"${staff.shiftStart}\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Shift End Time *<\/label>\r\n <input type=\"time\" name=\"shiftEnd\" value=\"${staff.shiftEnd}\" required>\r\n <\/div>\r\n <div class=\"form-group full-width\">\r\n <label>4-Digit Security PIN *<\/label>\r\n <input type=\"text\" name=\"pin\" value=\"${staff.pin}\" pattern=\"[0-9]{4}\" maxlength=\"4\" required>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"form-group full-width\" style=\"margin-top: 1.5rem;\">\r\n <label>\ud83d\udccb Daily Tasks<\/label>\r\n <div id=\"tasksList\" style=\"margin-top: 1rem;\">\r\n ${currentTasks.map((task, idx) => `\r\n <div class=\"task-item\" id=\"task-edit-${idx}\" style=\"margin-bottom: 0.8rem;\">\r\n <input type=\"text\" class=\"task-input\" value=\"${task.text}\" placeholder=\"Enter task description\" style=\"flex: 1; padding: 0.8rem; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 8px; color: #e2e8f0;\">\r\n <button type=\"button\" class=\"btn btn-danger btn-sm\" onclick=\"removeEditTask(${idx})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n <button type=\"button\" class=\"btn btn-secondary btn-sm\" onclick=\"addEditTask()\" style=\"margin-top: 0.5rem;\">\u2795 Add Task<\/button>\r\n <\/div>\r\n \r\n <div class=\"form-group full-width\" style=\"margin-top: 1.5rem;\">\r\n <label>Documents (Max 2 files, 5MB each)<\/label>\r\n <div id=\"docList\" style=\"margin-bottom: 1rem;\">\r\n ${currentDocs.map((doc, i) => `\r\n <div class=\"document-item\">\r\n <span>\ud83d\udcc4 ${doc.name}<\/span>\r\n <button type=\"button\" class=\"btn btn-danger btn-sm\" onclick=\"removeDoc(${i})\">\ud83d\uddd1\ufe0f<\/button>\r\n <\/div>\r\n `).join('')}\r\n <\/div>\r\n ${currentDocs.length < 2 ? `\r\n <input type=\"file\" id=\"docInput\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" ${currentDocs.length === 1 ? '' : 'multiple'} onchange=\"handleDocUpload(event)\" style=\"width: 100%; padding: 0.8rem; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 8px; color: #e2e8f0;\">\r\n ` : ''}\r\n <\/div>\r\n \r\n <div style=\"display: flex; gap: 1rem; margin-top: 2rem;\">\r\n <button type=\"button\" class=\"btn btn-secondary\" style=\"flex: 1;\" onclick=\"closeModal()\">Cancel<\/button>\r\n <button type=\"submit\" class=\"btn btn-primary\" style=\"flex: 1;\">Save Changes<\/button>\r\n <\/div>\r\n <\/form>\r\n `;\r\n modal.classList.add('active');\r\n }\r\n\r\n function removeDoc(index) {\r\n currentDocs.splice(index, 1);\r\n \/\/ Re-render the edit form\r\n const staffId = parseInt(document.getElementById('staffForm').getAttribute('onsubmit').match(\/\\d+\/)[0]);\r\n editStaff(staffId);\r\n }\r\n\r\n function updateStaff(event, staffId) {\r\n event.preventDefault();\r\n const formData = new FormData(event.target);\r\n \r\n const index = staffData.findIndex(s => s.id === staffId);\r\n if (index !== -1) {\r\n staffData[index] = {\r\n ...staffData[index],\r\n name: formData.get('name'),\r\n whatsapp: formData.get('whatsapp'),\r\n wageType: formData.get('wageType'),\r\n rate: parseFloat(formData.get('rate')),\r\n shiftStart: formData.get('shiftStart'),\r\n shiftEnd: formData.get('shiftEnd'),\r\n pin: formData.get('pin'),\r\n photo: currentPhoto,\r\n documents: currentDocs,\r\n tasks: getTasksFromEditForm()\r\n };\r\n \r\n saveToStorage();\r\n addNotification('Staff updated successfully!', 'success', staffData[index].name);\r\n showAlert('Staff updated successfully!', 'success');\r\n closeModal();\r\n switchView('staff');\r\n }\r\n }\r\n\r\n function deleteStaff(staffId) {\r\n if (confirm('Are you sure you want to delete this staff member? This will also delete all their punch records.')) {\r\n staffData = staffData.filter(s => s.id !== staffId);\r\n saveToStorage();\r\n showAlert('Staff deleted successfully!', 'success');\r\n switchView('staff');\r\n }\r\n }\r\n\r\n function viewStaffDetails(staffId) {\r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = `Staff Details - ${staff.name}`;\r\n document.getElementById('modalBody').innerHTML = `\r\n <div>\r\n <div style=\"text-align: center; margin-bottom: 2rem;\">\r\n ${staff.photo ? \r\n `<img decoding=\"async\" src=\"${staff.photo}\" style=\"width: 150px; height: 150px; border-radius: 16px; object-fit: cover; border: 3px solid #6366f1;\">` :\r\n `<div style=\"width: 150px; height: 150px; margin: 0 auto; background: linear-gradient(135deg, #6366f1, #ec4899); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: white; font-weight: 700;\">${staff.name.charAt(0).toUpperCase()}<\/div>`\r\n }\r\n <h3 style=\"margin-top: 1rem; font-size: 1.5rem;\">${staff.name}<\/h3>\r\n <\/div>\r\n \r\n <div style=\"background: rgba(99, 102, 241, 0.1); padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem;\">\r\n <h4 style=\"margin-bottom: 1rem; color: #6366f1;\">Contact Information<\/h4>\r\n <p style=\"margin: 0.5rem 0; color: #e2e8f0;\">\ud83d\udcf1 WhatsApp: <strong>${staff.whatsapp}<\/strong><\/p>\r\n <\/div>\r\n \r\n <div style=\"background: rgba(236, 72, 153, 0.1); padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem;\">\r\n <h4 style=\"margin-bottom: 1rem; color: #ec4899;\">Wage Information<\/h4>\r\n <p style=\"margin: 0.5rem 0; color: #e2e8f0;\">\ud83d\udcb0 Wage Type: <strong>${staff.wageType}<\/strong><\/p>\r\n <p style=\"margin: 0.5rem 0; color: #e2e8f0;\">\ud83d\udcb5 Rate: <strong>\u20b9${staff.rate}<\/strong><\/p>\r\n <\/div>\r\n \r\n <div style=\"background: rgba(16, 185, 129, 0.1); padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem;\">\r\n <h4 style=\"margin-bottom: 1rem; color: #10b981;\">Shift Timing<\/h4>\r\n <p style=\"margin: 0.5rem 0; color: #e2e8f0;\">\u23f0 Start: <strong>${formatTimeAMPM(staff.shiftStart)}<\/strong><\/p>\r\n <p style=\"margin: 0.5rem 0; color: #e2e8f0;\">\u23f0 End: <strong>${formatTimeAMPM(staff.shiftEnd)}<\/strong><\/p>\r\n <\/div>\r\n \r\n <div style=\"background: rgba(245, 158, 11, 0.1); padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem;\">\r\n <h4 style=\"margin-bottom: 1rem; color: #f59e0b;\">Security<\/h4>\r\n <p style=\"margin: 0.5rem 0; color: #e2e8f0;\">\ud83d\udd12 PIN: <strong>${staff.pin}<\/strong><\/p>\r\n <\/div>\r\n \r\n <div style=\"background: rgba(99, 102, 241, 0.1); padding: 1.5rem; border-radius: 12px;\">\r\n <h4 style=\"margin-bottom: 1rem; color: #6366f1;\">Documents (${(staff.documents || []).length})<\/h4>\r\n ${(staff.documents || []).length === 0 ? \r\n '<p style=\"color: #94a3b8;\">No documents uploaded<\/p>' :\r\n (staff.documents || []).map(doc => `\r\n <div class=\"document-item\">\r\n <div>\r\n <p style=\"margin: 0; font-weight: 600;\">\ud83d\udcc4 ${doc.name}<\/p>\r\n <p style=\"margin: 0; font-size: 0.85rem; color: #94a3b8;\">\r\n ${(doc.size\/1024).toFixed(1)} KB \u2022 Uploaded ${new Date(doc.uploadDate).toLocaleDateString()}\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n `).join('')\r\n }\r\n <\/div>\r\n \r\n <button class=\"btn btn-primary\" style=\"width: 100%; margin-top: 2rem;\" onclick=\"closeModal()\">Close<\/button>\r\n <\/div>\r\n `;\r\n modal.classList.add('active');\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ PUNCH IN\/OUT\r\n \/\/ ============================================\r\n \r\n function openPunchModal() {\r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = 'Punch In\/Out - Enter PIN';\r\n document.getElementById('modalBody').innerHTML = `\r\n <div style=\"text-align: center; padding: 2rem;\">\r\n <p style=\"color: #94a3b8; margin-bottom: 2rem; font-size: 1.1rem;\">Enter your 4-digit security PIN<\/p>\r\n <div class=\"pin-input-container\">\r\n <input type=\"text\" class=\"pin-digit\" id=\"pin1\" maxlength=\"1\" pattern=\"[0-9]\" oninput=\"moveFocus(event, 'pin2')\">\r\n <input type=\"text\" class=\"pin-digit\" id=\"pin2\" maxlength=\"1\" pattern=\"[0-9]\" oninput=\"moveFocus(event, 'pin3')\">\r\n <input type=\"text\" class=\"pin-digit\" id=\"pin3\" maxlength=\"1\" pattern=\"[0-9]\" oninput=\"moveFocus(event, 'pin4')\">\r\n <input type=\"text\" class=\"pin-digit\" id=\"pin4\" maxlength=\"1\" pattern=\"[0-9]\" oninput=\"verifyPin()\">\r\n <\/div>\r\n <button class=\"btn btn-primary\" style=\"margin-top: 2rem; padding: 1rem 2rem;\" onclick=\"verifyPin()\">Verify & Punch<\/button>\r\n <\/div>\r\n `;\r\n modal.classList.add('active');\r\n setTimeout(() => document.getElementById('pin1').focus(), 100);\r\n }\r\n\r\n function moveFocus(event, nextId) {\r\n const value = event.target.value;\r\n if (value && \/[0-9]\/.test(value)) {\r\n const next = document.getElementById(nextId);\r\n if (next) next.focus();\r\n }\r\n }\r\n\r\n function verifyPin() {\r\n const pin = ['pin1', 'pin2', 'pin3', 'pin4']\r\n .map(id => document.getElementById(id)?.value || '')\r\n .join('');\r\n \r\n if (pin.length !== 4) {\r\n showAlert('Please enter complete 4-digit PIN', 'error');\r\n return;\r\n }\r\n \r\n const staff = staffData.find(s => s.pin === pin);\r\n if (!staff) {\r\n showAlert('Invalid PIN! Please try again.', 'error');\r\n \/\/ Clear PIN inputs\r\n ['pin1', 'pin2', 'pin3', 'pin4'].forEach(id => {\r\n const input = document.getElementById(id);\r\n if (input) input.value = '';\r\n });\r\n document.getElementById('pin1')?.focus();\r\n return;\r\n }\r\n \r\n const today = new Date().toDateString();\r\n const todayRecords = (staff.punchRecords || []).filter(r => \r\n new Date(r.punchIn).toDateString() === today\r\n );\r\n const activeRecord = todayRecords.find(r => !r.punchOut);\r\n \r\n if (activeRecord) {\r\n \/\/ Punch Out - Show note dialog first\r\n const modal = document.getElementById('modal');\r\n document.getElementById('modalTitle').textContent = `Punch Out - ${staff.name}`;\r\n document.getElementById('modalBody').innerHTML = `\r\n <form onsubmit=\"completePunchOut(event, ${staff.id})\">\r\n <div style=\"background: rgba(16, 185, 129, 0.1); padding: 1.5rem; border-radius: 12px; margin-bottom: 1.5rem; text-align: center;\">\r\n <div style=\"font-size: 3rem; margin-bottom: 0.5rem;\">\u2705<\/div>\r\n <h3 style=\"color: #10b981; margin: 0;\">Ready to Punch Out?<\/h3>\r\n <\/div>\r\n \r\n <div class=\"form-group\">\r\n <label>Punch Out Note (Optional)<\/label>\r\n <textarea id=\"punchOutNote\" rows=\"3\" placeholder=\"Reason for leaving, tasks completed, etc...\" style=\"width: 100%; padding: 0.8rem; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 8px; color: #e2e8f0; resize: vertical;\"><\/textarea>\r\n <p style=\"color: #94a3b8; font-size: 0.85rem; margin-top: 0.5rem;\">\ud83d\udca1 Optional: Leave a note about your shift<\/p>\r\n <\/div>\r\n \r\n <div style=\"display: flex; gap: 1rem; margin-top: 2rem;\">\r\n <button type=\"button\" class=\"btn btn-secondary\" style=\"flex: 1;\" onclick=\"closeModal()\">Cancel<\/button>\r\n <button type=\"submit\" class=\"btn btn-success\" style=\"flex: 1;\">\ud83d\udc4b Punch Out<\/button>\r\n <\/div>\r\n <\/form>\r\n `;\r\n modal.classList.add('active');\r\n return;\r\n } else {\r\n \/\/ Punch In Logic with Night Shift Support\r\n const now = new Date();\r\n const currentTime = now.getHours() * 60 + now.getMinutes();\r\n const [shiftStartHour, shiftStartMin] = staff.shiftStart.split(':').map(Number);\r\n const [shiftEndHour, shiftEndMin] = staff.shiftEnd.split(':').map(Number);\r\n const shiftStartTime = shiftStartHour * 60 + shiftStartMin;\r\n const shiftEndTime = shiftEndHour * 60 + shiftEndMin;\r\n \r\n const nightShift = isNightShift(staff.shiftStart, staff.shiftEnd);\r\n \r\n let canPunchIn = false;\r\n let lateMinutes = 0;\r\n \r\n if (nightShift) {\r\n \/\/ Night shift logic: allow punch in if current time is >= shift start OR <= shift end\r\n if (currentTime >= shiftStartTime) {\r\n \/\/ After shift start time (same day)\r\n canPunchIn = true;\r\n lateMinutes = currentTime - shiftStartTime;\r\n } else if (currentTime <= shiftEndTime) {\r\n \/\/ Before shift end time (next day morning)\r\n canPunchIn = true;\r\n \/\/ Calculate late minutes: time from shift start (previous day) to now\r\n lateMinutes = (1440 - shiftStartTime) + currentTime; \/\/ 1440 = minutes in a day\r\n } else {\r\n \/\/ Between shift end and shift start (not allowed)\r\n canPunchIn = false;\r\n }\r\n } else {\r\n \/\/ Regular shift logic: current time must be >= shift start\r\n if (currentTime >= shiftStartTime) {\r\n canPunchIn = true;\r\n lateMinutes = currentTime - shiftStartTime;\r\n } else {\r\n canPunchIn = false;\r\n }\r\n }\r\n \r\n if (!canPunchIn) {\r\n const minutesToWait = nightShift ? \r\n (shiftStartTime - currentTime) : \r\n (shiftStartTime - currentTime);\r\n \r\n addNotification(`Too early to punch in. Wait ${minutesToWait} minutes.`, 'warning', staff.name);\r\n showAlert(\r\n `Too early! Your shift starts at ${formatTimeAMPM(staff.shiftStart)}. Please wait ${minutesToWait} minutes.`, \r\n 'error'\r\n );\r\n closeModal();\r\n return;\r\n }\r\n \r\n \/\/ Punch In\r\n if (!staff.punchRecords) staff.punchRecords = [];\r\n staff.punchRecords.push({\r\n punchIn: new Date().toISOString(),\r\n punchOut: null\r\n });\r\n saveToStorage();\r\n \r\n if (lateMinutes > 0) {\r\n addNotification(`Punched in (Late by ${lateMinutes} minutes)`, 'warning', staff.name);\r\n showAlert(`${staff.name} punched in successfully! (Late by ${lateMinutes} minutes)`, 'success');\r\n } else {\r\n addNotification('Punched in on time!', 'success', staff.name);\r\n showAlert(`${staff.name} punched in on time!`, 'success');\r\n }\r\n }\r\n \r\n closeModal();\r\n if (currentView === 'attendance' || currentView === 'history') {\r\n switchView(currentView);\r\n }\r\n }\r\n\r\n function completePunchOut(event, staffId) {\r\n event.preventDefault();\r\n \r\n const staff = staffData.find(s => s.id === staffId);\r\n if (!staff) return;\r\n \r\n const note = document.getElementById('punchOutNote')?.value.trim() || '';\r\n \r\n const today = new Date().toDateString();\r\n const todayRecords = (staff.punchRecords || []).filter(r => \r\n new Date(r.punchIn).toDateString() === today\r\n );\r\n const activeRecord = todayRecords.find(r => !r.punchOut);\r\n \r\n if (!activeRecord) {\r\n showAlert('No active punch record found!', 'error');\r\n closeModal();\r\n return;\r\n }\r\n \r\n \/\/ Punch Out\r\n activeRecord.punchOut = new Date().toISOString();\r\n activeRecord.note = note;\r\n saveToStorage();\r\n \r\n \/\/ Calculate worked time\r\n const workedMinutes = (new Date(activeRecord.punchOut) - new Date(activeRecord.punchIn)) \/ (1000 * 60);\r\n const workedHours = (workedMinutes \/ 60).toFixed(2);\r\n \r\n closeModal();\r\n addNotification(`Punched out successfully! Worked: ${workedHours} hours`, 'success', staff.name);\r\n showAlert(`${staff.name} punched out successfully! Worked: ${workedHours} hours`, 'success');\r\n \r\n if (currentView === 'attendance' || currentView === 'history') {\r\n switchView(currentView);\r\n }\r\n }\r\n\r\n \/\/ Auto Punch Out Function\r\n function checkAutoPunchOut() {\r\n const now = new Date();\r\n const today = now.toDateString();\r\n const currentTime = now.getHours() * 60 + now.getMinutes();\r\n \r\n staffData.forEach(staff => {\r\n const [shiftEndHour, shiftEndMin] = staff.shiftEnd.split(':').map(Number);\r\n const shiftEndTime = shiftEndHour * 60 + shiftEndMin;\r\n const nightShift = isNightShift(staff.shiftStart, staff.shiftEnd);\r\n \r\n \/\/ Find active punch records\r\n const activeRecords = (staff.punchRecords || []).filter(r => !r.punchOut);\r\n \r\n activeRecords.forEach(activeRecord => {\r\n const punchInDate = new Date(activeRecord.punchIn);\r\n const expectedEndTime = getShiftEndDateTime(punchInDate, staff.shiftEnd, nightShift);\r\n \r\n \/\/ Check if current time has passed the expected shift end time\r\n if (now >= expectedEndTime) {\r\n \/\/ Auto punch out at shift end time\r\n activeRecord.punchOut = expectedEndTime.toISOString();\r\n saveToStorage();\r\n console.log(`Auto punched out ${staff.name} at shift end time`);\r\n }\r\n });\r\n });\r\n }\r\n\r\n \/\/ Calculate real-time earnings\r\n function calculateRealTimeEarnings(staff, punchRecord) {\r\n if (!punchRecord || !punchRecord.punchIn) return { minutes: 0, hours: 0, earnings: 0 };\r\n \r\n const startTime = new Date(punchRecord.punchIn);\r\n const endTime = punchRecord.punchOut ? new Date(punchRecord.punchOut) : new Date();\r\n \r\n let workedMinutes = (endTime - startTime) \/ (1000 * 60);\r\n \r\n \/\/ Handle negative minutes (shouldn't happen with proper punch logic, but safety check)\r\n if (workedMinutes < 0) {\r\n workedMinutes = 0;\r\n }\r\n \r\n const workedHours = workedMinutes \/ 60;\r\n \r\n \/\/ Calculate rate per minute\r\n let ratePerMinute = 0;\r\n if (staff.wageType === 'Per Hour') {\r\n ratePerMinute = staff.rate \/ 60;\r\n } else if (staff.wageType === 'Per Day') {\r\n \/\/ Assume 8 hours per day\r\n ratePerMinute = staff.rate \/ (8 * 60);\r\n }\r\n \r\n const earnings = workedMinutes * ratePerMinute;\r\n \r\n return {\r\n minutes: Math.floor(workedMinutes),\r\n hours: workedHours.toFixed(2),\r\n earnings: earnings.toFixed(2)\r\n };\r\n }\r\n\r\n \/\/ Check if shift is a night shift (crosses midnight)\r\n function isNightShift(shiftStart, shiftEnd) {\r\n const [startHour, startMin] = shiftStart.split(':').map(Number);\r\n const [endHour, endMin] = shiftEnd.split(':').map(Number);\r\n \r\n const startMinutes = startHour * 60 + startMin;\r\n const endMinutes = endHour * 60 + endMin;\r\n \r\n \/\/ If end time is less than start time, it's a night shift\r\n return endMinutes < startMinutes;\r\n }\r\n\r\n \/\/ Get shift end time considering night shifts\r\n function getShiftEndDateTime(punchInDate, shiftEnd, isNight) {\r\n const [endHour, endMin] = shiftEnd.split(':').map(Number);\r\n const endDateTime = new Date(punchInDate);\r\n \r\n if (isNight) {\r\n \/\/ Night shift - add one day\r\n endDateTime.setDate(endDateTime.getDate() + 1);\r\n }\r\n \r\n endDateTime.setHours(endHour, endMin, 0, 0);\r\n return endDateTime;\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ DATA IMPORT\/EXPORT\r\n \/\/ ============================================\r\n \r\n function exportData() {\r\n const dataStr = JSON.stringify(staffData, null, 2);\r\n const dataBlob = new Blob([dataStr], { type: 'application\/json' });\r\n const url = URL.createObjectURL(dataBlob);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = `staff-data-${new Date().toISOString().split('T')[0]}.json`;\r\n link.click();\r\n URL.revokeObjectURL(url);\r\n showAlert('Data exported successfully!', 'success');\r\n }\r\n\r\n function importData() {\r\n document.getElementById('importFileInput').click();\r\n }\r\n\r\n function handleImportFile(event) {\r\n const file = event.target.files[0];\r\n if (!file) return;\r\n \r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n try {\r\n const importedData = JSON.parse(e.target.result);\r\n if (Array.isArray(importedData)) {\r\n if (confirm('This will replace all existing data. Are you sure?')) {\r\n staffData = importedData;\r\n saveToStorage();\r\n showAlert('Data imported successfully!', 'success');\r\n switchView(currentView);\r\n }\r\n } else {\r\n showAlert('Invalid data format', 'error');\r\n }\r\n } catch (error) {\r\n showAlert('Error importing data', 'error');\r\n }\r\n };\r\n reader.readAsText(file);\r\n event.target.value = '';\r\n }\r\n\r\n function clearAllData() {\r\n if (confirm('Are you sure you want to delete ALL staff data? This cannot be undone!')) {\r\n if (confirm('Final confirmation: This will permanently delete everything including all punch records!')) {\r\n staffData = [];\r\n saveToStorage();\r\n showAlert('All data cleared successfully!', 'success');\r\n switchView('dashboard');\r\n }\r\n }\r\n }\r\n\r\n \/\/ ============================================\r\n \/\/ UTILITY FUNCTIONS\r\n \/\/ ============================================\r\n \r\n function formatTimeAMPM(time24) {\r\n \/\/ Convert 24-hour time (HH:MM) to 12-hour AM\/PM format\r\n if (!time24) return '';\r\n \r\n const [hours, minutes] = time24.split(':').map(Number);\r\n const period = hours >= 12 ? 'PM' : 'AM';\r\n const hours12 = hours % 12 || 12;\r\n \r\n return `${hours12}:${minutes.toString().padStart(2, '0')} ${period}`;\r\n }\r\n\r\n function formatDateTimeAMPM(dateTimeString) {\r\n \/\/ Convert ISO datetime to 12-hour AM\/PM format\r\n const date = new Date(dateTimeString);\r\n const hours = date.getHours();\r\n const minutes = date.getMinutes();\r\n const period = hours >= 12 ? 'PM' : 'AM';\r\n const hours12 = hours % 12 || 12;\r\n \r\n return `${hours12}:${minutes.toString().padStart(2, '0')} ${period}`;\r\n }\r\n\r\n function closeModal() {\r\n document.getElementById('modal').classList.remove('active');\r\n }\r\n\r\n function showAlert(message, type = 'success') {\r\n const alert = document.createElement('div');\r\n alert.className = `alert ${type}`;\r\n alert.innerHTML = `\r\n <span style=\"font-size: 1.5rem;\">${type === 'success' ? '\u2713' : '\u26a0'}<\/span>\r\n <span>${message}<\/span>\r\n `;\r\n document.body.appendChild(alert);\r\n \r\n setTimeout(() => {\r\n alert.style.animation = 'slideIn 0.3s ease reverse';\r\n setTimeout(() => alert.remove(), 300);\r\n }, 3000);\r\n }\r\n\r\n document.getElementById('modal').addEventListener('click', (e) => {\r\n if (e.target.id === 'modal') closeModal();\r\n });\r\n\r\n \/\/ ============================================\r\n \/\/ INITIALIZE\r\n \/\/ ============================================\r\n \r\n window.addEventListener('load', () => {\r\n \/\/ Apply dark mode on load\r\n applyDarkMode();\r\n \r\n switchView('attendance');\r\n updateNotificationBadge();\r\n \r\n \/\/ Check for auto punch out every minute\r\n setInterval(() => {\r\n checkAutoPunchOut();\r\n }, 60000);\r\n \r\n \/\/ Initial check\r\n checkAutoPunchOut();\r\n \r\n \/\/ Auto backup check (once per day)\r\n autoBackup();\r\n \r\n \/\/ Check for daily WhatsApp report (at 6 PM)\r\n checkDailyReport();\r\n setInterval(checkDailyReport, 60 * 60 * 1000); \/\/ Check every hour\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Staff Manager Pro – Free Edition \ud83d\udc65 Staff Manager Pro \ud83d\udce5 Export \ud83d\udce4 Import \ud83d\uddd1\ufe0f Clear All \u23f0 Attendance \ud83d\udd10 Admin Panel Modal \u2715<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2774","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2774","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/comments?post=2774"}],"version-history":[{"count":64,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2774\/revisions"}],"predecessor-version":[{"id":3285,"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/pages\/2774\/revisions\/3285"}],"wp:attachment":[{"href":"https:\/\/malikskitchen.in\/index.php\/wp-json\/wp\/v2\/media?parent=2774"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}