\u062f\u0627\u0644\u0641\u064a - \u0646\u0638\u0627\u0645 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0628\u0634\u0631\u064a\u0629 \u0648\u0627\u0644\u0623\u062c\u0648\u0631<\/title>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n \r\n <script src=\"https:\/\/cdn.sheetjs.com\/xlsx-0.20.2\/package\/dist\/xlsx.full.min.js\"><\/script>\r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\" integrity=\"sha512-GsLlZN\/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA\/HdeKFVgA5v3S\/cIrLF7QnIg==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"><\/script>\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: 'Cairo', 'Segoe UI', Tahoma, sans-serif;\r\n background: #f0f2f5;\r\n direction: rtl;\r\n }\r\n\r\n \/* header *\/\r\n .app-header {\r\n background: linear-gradient(135deg, #0b2b26, #1a4a3a);\r\n color: white;\r\n padding: 20px 30px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\r\n }\r\n .logo-area h1 {\r\n font-size: 1.8rem;\r\n display: inline-block;\r\n }\r\n .logo-area span {\r\n font-size: 0.9rem;\r\n background: #b87c4f;\r\n padding: 4px 10px;\r\n border-radius: 40px;\r\n margin-right: 10px;\r\n }\r\n .backup-actions button {\r\n background: #d9a066;\r\n border: none;\r\n padding: 8px 15px;\r\n border-radius: 30px;\r\n margin-right: 10px;\r\n font-weight: bold;\r\n cursor: pointer;\r\n }\r\n \/* tabs *\/\r\n .tabs {\r\n display: flex;\r\n background: white;\r\n border-bottom: 2px solid #ddd;\r\n padding: 0 20px;\r\n flex-wrap: wrap;\r\n }\r\n .tab-btn {\r\n padding: 14px 28px;\r\n font-size: 1rem;\r\n font-weight: bold;\r\n background: transparent;\r\n border: none;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n color: #2c5a4a;\r\n }\r\n .tab-btn.active {\r\n border-bottom: 3px solid #c49a6c;\r\n color: #b87c4f;\r\n }\r\n .tab-content {\r\n display: none;\r\n padding: 25px;\r\n background: #fefaf0;\r\n min-height: 70vh;\r\n }\r\n .tab-content.active {\r\n display: block;\r\n }\r\n \/* cards & forms *\/\r\n .card {\r\n background: white;\r\n border-radius: 24px;\r\n padding: 20px;\r\n margin-bottom: 25px;\r\n box-shadow: 0 5px 12px rgba(0,0,0,0.05);\r\n }\r\n .form-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(280px,1fr));\r\n gap: 15px;\r\n }\r\n .form-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n }\r\n .form-group label {\r\n font-weight: bold;\r\n color: #2c5a4a;\r\n }\r\n input, select {\r\n padding: 10px;\r\n border-radius: 30px;\r\n border: 1px solid #d4c4a8;\r\n background: #fffcf5;\r\n }\r\n button {\r\n background: #2c7a5c;\r\n color: white;\r\n padding: 10px 18px;\r\n border-radius: 40px;\r\n border: none;\r\n font-weight: bold;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n }\r\n button i {\r\n margin-left: 6px;\r\n }\r\n .btn-sm {\r\n padding: 5px 12px;\r\n font-size: 0.8rem;\r\n }\r\n table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n background: white;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n }\r\n th, td {\r\n padding: 12px;\r\n border-bottom: 1px solid #eee;\r\n text-align: center;\r\n }\r\n th {\r\n background: #e9e0cf;\r\n color: #2c5a4a;\r\n }\r\n .action-icons i {\r\n margin: 0 5px;\r\n cursor: pointer;\r\n color: #9b6e42;\r\n }\r\n .salary-slips {\r\n background: #f9f4e6;\r\n border-radius: 20px;\r\n padding: 15px;\r\n margin-top: 20px;\r\n }\r\n footer {\r\n text-align: center;\r\n padding: 20px;\r\n font-size: 0.8rem;\r\n color: #8b7a62;\r\n }\r\n @media (max-width: 700px) {\r\n .tabs { flex-direction: column; }\r\n .tab-btn { text-align: center; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"app-header\">\r\n <div class=\"logo-area\">\r\n <h1><i class=\"fas fa-chalkboard-user\"><\/i> \u062f\u0627\u0644\u0641\u064a HR <span>\u0627\u0644\u0623\u062c\u0648\u0631 \u0648\u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0628\u0634\u0631\u064a\u0629<\/span><\/h1>\r\n <p>\u0625\u062f\u0627\u0631\u0629 \u0634\u0627\u0645\u0644\u0629 \u00b7 \u0639\u0642\u0648\u062f \u062c\u0645\u0627\u0639\u064a\u0629 \u00b7 \u0631\u0648\u0627\u062a\u0628 \u00b7 \u062a\u0642\u0627\u0631\u064a\u0631 PDF\/Excel<\/p>\r\n <\/div>\r\n <div class=\"backup-actions\">\r\n <button id=\"backupAllDataBtn\"><i class=\"fas fa-download\"><\/i> \u0646\u0633\u062e\u0629 \u0627\u062d\u062a\u064a\u0627\u0637\u064a\u0629 (JSON)<\/button>\r\n <button id=\"restoreDataBtn\"><i class=\"fas fa-upload\"><\/i> \u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0628\u064a\u0627\u0646\u0627\u062a<\/button>\r\n <input type=\"file\" id=\"restoreFileInput\" style=\"display:none\" accept=\".json\">\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"tabs\">\r\n <button class=\"tab-btn active\" data-tab=\"dashboard\"><i class=\"fas fa-tachometer-alt\"><\/i> \u0644\u0648\u062d\u0629 \u0627\u0644\u0642\u064a\u0627\u062f\u0629<\/button>\r\n <button class=\"tab-btn\" data-tab=\"employees\"><i class=\"fas fa-users\"><\/i> \u0627\u0644\u0645\u0648\u0638\u0641\u0648\u0646<\/button>\r\n <button class=\"tab-btn\" data-tab=\"contracts\"><i class=\"fas fa-file-signature\"><\/i> \u0639\u0642\u0648\u062f \u062c\u0645\u0627\u0639\u064a\u0629<\/button>\r\n <button class=\"tab-btn\" data-tab=\"payroll\"><i class=\"fas fa-calculator\"><\/i> \u0635\u0631\u0641 \u0627\u0644\u0631\u0648\u0627\u062a\u0628<\/button>\r\n <button class=\"tab-btn\" data-tab=\"reports\"><i class=\"fas fa-chart-line\"><\/i> \u0627\u0644\u062a\u0642\u0627\u0631\u064a\u0631 \u0648\u0627\u0644\u062a\u0635\u062f\u064a\u0631<\/button>\r\n<\/div>\r\n\r\n\r\n<div id=\"dashboard\" class=\"tab-content active\">\r\n <div class=\"card\">\r\n <h3><i class=\"fas fa-chart-simple\"><\/i> \u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u0633\u0631\u064a\u0639\u0629<\/h3>\r\n <div id=\"dashboardStats\" style=\"display: flex; gap: 20px; flex-wrap: wrap; margin-top: 15px;\">\r\n \r\n <\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3><i class=\"fas fa-bell\"><\/i> \u0622\u062e\u0631 \u0627\u0644\u0631\u0648\u0627\u062a\u0628 \u0627\u0644\u0645\u0633\u062c\u0644\u0629<\/h3>\r\n <div id=\"lastPaymentsList\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"employees\" class=\"tab-content\">\r\n <div class=\"card\">\r\n <h3><i class=\"fas fa-user-plus\"><\/i> \u0625\u0636\u0627\u0641\u0629 \/ \u062a\u0639\u062f\u064a\u0644 \u0645\u0648\u0638\u0641<\/h3>\r\n <div class=\"form-grid\" id=\"employeeForm\">\r\n <div class=\"form-group\"><label>\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644<\/label><input type=\"text\" id=\"empName\" placeholder=\"\u0623\u062d\u0645\u062f \u0628\u0646 \u0639\u0644\u064a\"><\/div>\r\n <div class=\"form-group\"><label>\u0627\u0644\u0631\u0642\u0645 \u0627\u0644\u0648\u0638\u064a\u0641\u064a<\/label><input type=\"text\" id=\"empCode\" placeholder=\"DAL001\"><\/div>\r\n <div class=\"form-group\"><label>\u0627\u0644\u0642\u0633\u0645<\/label><input type=\"text\" id=\"empDept\" placeholder=\"\u0645\u062d\u0627\u0633\u0628\u0629\"><\/div>\r\n <div class=\"form-group\"><label>\u0627\u0644\u0623\u062c\u0631 \u0627\u0644\u0623\u0633\u0627\u0633\u064a (\u062f\u062c)<\/label><input type=\"number\" id=\"empBase\" value=\"45000\"><\/div>\r\n <div class=\"form-group\"><label>\u0633\u0646\u0648\u0627\u062a \u0627\u0644\u062e\u0628\u0631\u0629<\/label><input type=\"number\" id=\"empExp\" value=\"8\"><\/div>\r\n <div class=\"form-group\"><label>\u0627\u0644\u0623\u0642\u062f\u0645\u064a\u0629 \u0641\u064a \u062f\u0627\u0644\u0641\u064a<\/label><input type=\"number\" id=\"empDalfiSeniority\" value=\"5\"><\/div>\r\n <div class=\"form-group\"><label>\u0639\u062f\u062f \u0627\u0644\u0623\u0637\u0641\u0627\u0644<\/label><input type=\"number\" id=\"empEnfants\" value=\"2\"><\/div>\r\n <button id=\"saveEmployeeBtn\"><i class=\"fas fa-save\"><\/i> \u062d\u0641\u0638 \u0627\u0644\u0645\u0648\u0638\u0641<\/button>\r\n <button id=\"resetEmployeeForm\" class=\"btn-sm\" style=\"background:#aaa;\">\u0625\u0644\u063a\u0627\u0621<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3><i class=\"fas fa-list\"><\/i> \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646<\/h3>\r\n <table id=\"employeeTable\">\r\n <thead><tr><th>\u0627\u0644\u0643\u0648\u062f<\/th><th>\u0627\u0644\u0627\u0633\u0645<\/th><th>\u0627\u0644\u0642\u0633\u0645<\/th><th>\u0627\u0644\u0623\u0633\u0627\u0633\u064a<\/th><th>\u062e\u0628\u0631\u0629<\/th><th>\u0623\u0642\u062f\u0645\u064a\u0629 \u062f\u0627\u0644\u0641\u064a<\/th><th>\u0623\u0637\u0641\u0627\u0644<\/th><th>\u0625\u062c\u0631\u0627\u0621\u0627\u062a<\/th><\/tr><\/thead>\r\n <tbody><\/tbody>\r\n <\/table>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"contracts\" class=\"tab-content\">\r\n <div class=\"card\">\r\n <h3><i class=\"fas fa-layer-group\"><\/i> \u0625\u0646\u0634\u0627\u0621 \u0639\u0642\u062f \u062c\u0645\u0627\u0639\u064a (\u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0648\u0638\u0641\u064a\u0646)<\/h3>\r\n <div class=\"form-group\"><label>\u0627\u0633\u0645 \u0627\u0644\u0639\u0642\u062f \/ \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629<\/label><input type=\"text\" id=\"contractName\" placeholder=\"\u0639\u0642\u062f \u0642\u0633\u0645 \u0627\u0644\u0645\u062d\u0627\u0633\u0628\u0629\"><\/div>\r\n <div class=\"form-group\"><label>\u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646 (ctrl+click \u0644\u062a\u062d\u062f\u064a\u062f \u0639\u062f\u0629)<\/label>\r\n <select id=\"contractEmployeesSelect\" multiple size=\"5\" style=\"height:120px\"><\/select>\r\n <\/div>\r\n <div class=\"form-group\"><label>\u0645\u0646\u062d\u0629 \u0625\u0636\u0627\u0641\u064a\u0629 \u062c\u0645\u0627\u0639\u064a\u0629 (\u062f\u062c)<\/label><input type=\"number\" id=\"collectiveBonus\" value=\"0\"><\/div>\r\n <button id=\"createContractBtn\"><i class=\"fas fa-gavel\"><\/i> \u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0639\u0642\u062f \u0648\u062d\u0641\u0638\u0647<\/button>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u062c\u0645\u0627\u0639\u064a\u0629 \u0627\u0644\u0645\u0633\u062c\u0644\u0629<\/h3>\r\n <div id=\"contractsList\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"payroll\" class=\"tab-content\">\r\n <div class=\"card\">\r\n <h3>\u062d\u0633\u0627\u0628 \u0631\u0648\u0627\u062a\u0628 \u0641\u0631\u062f\u064a \u0623\u0648 \u062c\u0645\u0627\u0639\u064a<\/h3>\r\n <div class=\"form-group\"><label>\u0627\u062e\u062a\u0631 \u0645\u0648\u0638\u0641\u0627\u064b<\/label>\r\n <select id=\"payrollEmployeeSelect\"><\/select>\r\n <button id=\"calcSingleSalaryBtn\"><i class=\"fas fa-calculator\"><\/i> \u062d\u0633\u0627\u0628 \u0631\u0627\u062a\u0628 \u0647\u0630\u0627 \u0627\u0644\u0645\u0648\u0638\u0641<\/button>\r\n <\/div>\r\n <button id=\"calcAllSalariesBtn\" style=\"background:#b87c4f;\"><i class=\"fas fa-users\"><\/i> \u062d\u0633\u0627\u0628 \u0631\u0648\u0627\u062a\u0628 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646 (\u0634\u0647\u0631\u064a\u0627\u064b)<\/button>\r\n <\/div>\r\n <div class=\"salary-slips\" id=\"salarySlipArea\">\r\n <h4>\u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0631\u0648\u0627\u062a\u0628<\/h4>\r\n <div id=\"salaryResults\"><\/div>\r\n <button id=\"exportAllSalariesExcelBtn\" style=\"margin-top:15px;\"><i class=\"fas fa-file-excel\"><\/i> \u062a\u0635\u062f\u064a\u0631 \u0627\u0644\u0643\u0644 \u0625\u0644\u0649 Excel<\/button>\r\n <button id=\"printAllSalariesBtn\"><i class=\"fas fa-print\"><\/i> \u0637\u0628\u0627\u0639\u0629 \u062c\u0645\u064a\u0639 \u0642\u0633\u0627\u0626\u0645 \u0627\u0644\u0631\u0648\u0627\u062a\u0628<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"reports\" class=\"tab-content\">\r\n <div class=\"card\">\r\n <h3>\u062a\u0635\u062f\u064a\u0631 \u0648\u0627\u0633\u062a\u0631\u062c\u0627\u0639 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a<\/h3>\r\n <button id=\"exportFullDataJsonBtn\"><i class=\"fas fa-archive\"><\/i> \u062a\u0635\u062f\u064a\u0631 \u0643\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a (JSON)<\/button>\r\n <button id=\"exportEmployeesExcelBtn\"><i class=\"fas fa-file-excel\"><\/i> \u062a\u0635\u062f\u064a\u0631 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646 Excel<\/button>\r\n <button id=\"exportContractsExcelBtn\"><i class=\"fas fa-file-excel\"><\/i> \u062a\u0635\u062f\u064a\u0631 \u0627\u0644\u0639\u0642\u0648\u062f Excel<\/button>\r\n <hr>\r\n <h3>\u0625\u0646\u0634\u0627\u0621 \u062a\u0642\u0631\u064a\u0631 \u0634\u0647\u0631\u064a PDF<\/h3>\r\n <button id=\"generateMonthlyReportBtn\"><i class=\"fas fa-file-pdf\"><\/i> \u0625\u0646\u0634\u0627\u0621 \u062a\u0642\u0631\u064a\u0631 PDF (\u0622\u062e\u0631 \u0635\u0631\u0641)<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<footer>\u0646\u0638\u0627\u0645 \u062f\u0627\u0644\u0641\u064a \u0627\u0644\u0645\u062a\u0643\u0627\u0645\u0644 - \u062d\u0641\u0638 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0645\u062d\u0644\u064a\u0627\u064b + \u062a\u0635\u062f\u064a\u0631 \u0648\u0627\u0633\u062a\u0639\u0627\u062f\u0629 - \u0645\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062c\u0632\u0627\u0626\u0631\u064a<\/footer>\r\n\r\n<script>\r\n \/\/ ---------------------- \u0647\u064a\u0643\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 ----------------------\r\n let employees = []; \/\/ \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646\r\n let contracts = []; \/\/ \u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u062c\u0645\u0627\u0639\u064a\u0629\r\n let payrollHistory = []; \/\/ \u0633\u062c\u0644 \u0627\u0644\u0631\u0648\u0627\u062a\u0628 (\u0643\u0644 \u0639\u0645\u0644\u064a\u0629 \u0635\u0631\u0641)\r\n\r\n \/\/ \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u062d\u0633\u0627\u0628 (\u0645\u062b\u0644 \u062f\u0627\u0644\u0641\u064a)\r\n const SALARY_CONFIG = {\r\n snmg: 20000,\r\n tauxCNAS: 0.09,\r\n primeRendementTaux: 0.20,\r\n primeSoccombre: 4000,\r\n primeTransport: 3000,\r\n primeFamilleParEnfant: 2500,\r\n maxEnfants: 4,\r\n primeFideliteParAn: 500,\r\n maxFidelite: 8000,\r\n primeExperienceTauxParAn: 0.01,\r\n primeExperienceMax: 0.25,\r\n irgBareme: [[0,30000,0,0],[30001,50000,0.20,0],[50001,100000,0.25,2500],[100001,999999999,0.30,7500]]\r\n };\r\n\r\n \/\/ \u062f\u0648\u0627\u0644 \u0645\u0633\u0627\u0639\u062f\u0629\r\n function calcIRG(imposable) {\r\n for(let [min,max,taux,abat] of SALARY_CONFIG.irgBareme)\r\n if(imposable>=min && imposable<=max) return Math.max(0, (imposable*taux)-abat);\r\n return 0;\r\n }\r\n function calculerSalaireDetail(emp, primeSpeciale=0) {\r\n let base = Math.max(emp.salaireBase, SALARY_CONFIG.snmg);\r\n let primeExp = Math.min(SALARY_CONFIG.primeExperienceMax, emp.experience * SALARY_CONFIG.primeExperienceTauxParAn) * base;\r\n let primeRend = base * SALARY_CONFIG.primeRendementTaux;\r\n let primeSoc = SALARY_CONFIG.primeSoccombre;\r\n let primeTrans = SALARY_CONFIG.primeTransport;\r\n let enfantsEff = Math.min(emp.enfants, SALARY_CONFIG.maxEnfants);\r\n let primeFam = enfantsEff * SALARY_CONFIG.primeFamilleParEnfant;\r\n let fidelite = Math.min(emp.dalfiSeniority * SALARY_CONFIG.primeFideliteParAn, SALARY_CONFIG.maxFidelite);\r\n let totalPrimes = primeExp+primeRend+primeSoc+primeTrans+primeFam+fidelite+primeSpeciale;\r\n let brut = base + totalPrimes;\r\n let cnas = brut * SALARY_CONFIG.tauxCNAS;\r\n let imposable = brut - cnas;\r\n let irg = calcIRG(imposable);\r\n let net = brut - cnas - irg;\r\n return { base, brut, cnas, irg, net, detail:{primeExp,primeRend,primeSoc,primeTrans,primeFam,fidelite,primeSpeciale} };\r\n }\r\n\r\n \/\/ \u062d\u0641\u0638 \u0643\u0644 \u0634\u064a\u0621 \u0641\u064a localStorage\r\n function saveAllData() {\r\n localStorage.setItem('dalfi_employees', JSON.stringify(employees));\r\n localStorage.setItem('dalfi_contracts', JSON.stringify(contracts));\r\n localStorage.setItem('dalfi_payrollHistory', JSON.stringify(payrollHistory));\r\n }\r\n function loadAllData() {\r\n let e = localStorage.getItem('dalfi_employees');\r\n if(e) employees = JSON.parse(e);\r\n let c = localStorage.getItem('dalfi_contracts');\r\n if(c) contracts = JSON.parse(c);\r\n let p = localStorage.getItem('dalfi_payrollHistory');\r\n if(p) payrollHistory = JSON.parse(p);\r\n if(employees.length===0) { \/\/ \u0628\u064a\u0627\u0646\u0627\u062a \u062a\u062c\u0631\u064a\u0628\u064a\u0629\r\n employees.push({id:\"1\",code:\"DAL001\",name:\"\u0623\u062d\u0645\u062f \u0628\u0646 \u0639\u0644\u064a\",dept:\"\u0645\u062d\u0627\u0633\u0628\u0629\",salaireBase:45000,experience:8,dalfiSeniority:5,enfants:2});\r\n employees.push({id:\"2\",code:\"DAL002\",name:\"\u0633\u0645\u064a\u0629 \u0632\u0631\u0648\u0642\",dept:\"\u062a\u0633\u064a\u064a\u0631\",salaireBase:50000,experience:12,dalfiSeniority:8,enfants:3});\r\n saveAllData();\r\n }\r\n }\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0648\u0627\u062c\u0647\u0627\u062a\r\n function refreshEmployeesTable() {\r\n let tbody = document.querySelector('#employeeTable tbody');\r\n tbody.innerHTML = '';\r\n employees.forEach(emp => {\r\n let tr = document.createElement('tr');\r\n tr.innerHTML = `<td>${emp.code}<\/td><td>${emp.name}<\/td><td>${emp.dept}<\/td><td>${emp.salaireBase}<\/td><td>${emp.experience}<\/td><td>${emp.dalfiSeniority}<\/td><td>${emp.enfants}<\/td>\r\n <td class=\"action-icons\"><i class=\"fas fa-edit\" onclick=\"editEmployee('${emp.id}')\"><\/i> <i class=\"fas fa-trash-alt\" onclick=\"deleteEmployee('${emp.id}')\"><\/i><\/td>`;\r\n tbody.appendChild(tr);\r\n });\r\n fillEmployeeSelects();\r\n refreshDashboard();\r\n }\r\n function fillEmployeeSelects() {\r\n let sel1 = document.getElementById('contractEmployeesSelect');\r\n let sel2 = document.getElementById('payrollEmployeeSelect');\r\n let opts = '<option value=\"\">--\u0627\u062e\u062a\u0631 \u0645\u0648\u0638\u0641--<\/option>'+employees.map(e=>`<option value=\"${e.id}\">${e.name} (${e.code})<\/option>`).join('');\r\n if(sel1) sel1.innerHTML = employees.map(e=>`<option value=\"${e.id}\">${e.name} - ${e.dept}<\/option>`).join('');\r\n if(sel2) sel2.innerHTML = opts;\r\n }\r\n function refreshDashboard() {\r\n let statsDiv = document.getElementById('dashboardStats');\r\n statsDiv.innerHTML = `<div class=\"card\">\ud83d\udc65 \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646: ${employees.length}<\/div>\r\n <div class=\"card\">\ud83d\udcc4 \u0639\u062f\u062f \u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u062c\u0645\u0627\u0639\u064a\u0629: ${contracts.length}<\/div>\r\n <div class=\"card\">\ud83d\udcb0 \u0639\u0645\u0644\u064a\u0627\u062a \u0635\u0631\u0641 \u0645\u0633\u062c\u0644\u0629: ${payrollHistory.length}<\/div>`;\r\n let lastDiv = document.getElementById('lastPaymentsList');\r\n lastDiv.innerHTML = payrollHistory.slice(-5).reverse().map(p => `<div>\ud83d\udcc5 ${p.date} | ${p.employeesCount} \u0645\u0648\u0638\u0641 | \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0623\u062c\u0648\u0631: ${p.totalNet} \u062f\u062c<\/div>`).join('');\r\n }\r\n function refreshContractsList() {\r\n let div = document.getElementById('contractsList');\r\n if(!div) return;\r\n div.innerHTML = contracts.map((c,i)=>`<div style=\"border:1px solid #ddd; margin:8px; padding:10px\"><b>${c.name}<\/b> - \u0645\u0643\u0627\u0641\u0623\u0629 \u062c\u0645\u0627\u0639\u064a\u0629: ${c.collectiveBonus} \u062f\u062c <br> \u0627\u0644\u0645\u0648\u0638\u0641\u0648\u0646: ${c.employeeIds.map(id=>employees.find(e=>e.id===id)?.name).join(', ')} <button onclick=\"deleteContract(${i})\">\u062d\u0630\u0641 \u0627\u0644\u0639\u0642\u062f<\/button><\/div>`).join('');\r\n }\r\n \/\/ \u062f\u0648\u0627\u0644 \u062a\u062d\u0631\u064a\u0631\r\n window.editEmployee = (id) => {\r\n let emp = employees.find(e=>e.id===id);\r\n if(emp){\r\n document.getElementById('empName').value=emp.name; document.getElementById('empCode').value=emp.code;\r\n document.getElementById('empDept').value=emp.dept; document.getElementById('empBase').value=emp.salaireBase;\r\n document.getElementById('empExp').value=emp.experience; document.getElementById('empDalfiSeniority').value=emp.dalfiSeniority;\r\n document.getElementById('empEnfants').value=emp.enfants;\r\n \/\/ \u062d\u0630\u0641 \u0627\u0644\u0642\u062f\u064a\u0645 \u062b\u0645 \u062d\u0641\u0638 \u0644\u0627\u062d\u0642\u0627\u064b\r\n employees = employees.filter(e=>e.id!==id);\r\n saveAllData(); refreshEmployeesTable();\r\n }\r\n };\r\n window.deleteEmployee = (id) => { if(confirm(\"\u062d\u0630\u0641 \u0627\u0644\u0645\u0648\u0638\u0641\u061f\")){ employees=employees.filter(e=>e.id!==id); saveAllData(); refreshEmployeesTable(); } };\r\n window.deleteContract = (idx) => { contracts.splice(idx,1); saveAllData(); refreshContractsList(); refreshDashboard(); };\r\n\r\n \/\/ \u062d\u0641\u0638 \u0645\u0648\u0638\u0641\r\n document.getElementById('saveEmployeeBtn')?.addEventListener('click',()=>{\r\n let id = Date.now().toString();\r\n let code = document.getElementById('empCode').value;\r\n if(employees.some(e=>e.code===code && e.id!==id)) { alert(\"\u0627\u0644\u0643\u0648\u062f \u0645\u0648\u062c\u0648\u062f \u0645\u0633\u0628\u0642\u0627\u064b\"); return; }\r\n let newEmp = {\r\n id, code, name:document.getElementById('empName').value, dept:document.getElementById('empDept').value,\r\n salaireBase:parseFloat(document.getElementById('empBase').value), experience:parseInt(document.getElementById('empExp').value),\r\n dalfiSeniority:parseInt(document.getElementById('empDalfiSeniority').value), enfants:parseInt(document.getElementById('empEnfants').value)\r\n };\r\n employees.push(newEmp);\r\n saveAllData(); refreshEmployeesTable(); alert(\"\u062a\u0645 \u0627\u0644\u062d\u0641\u0638\");\r\n });\r\n document.getElementById('resetEmployeeForm')?.addEventListener('click',()=>document.querySelector('#employeeForm input').forEach(i=>i.value=''));\r\n\r\n \/\/ \u0639\u0642\u0648\u062f\r\n document.getElementById('createContractBtn')?.addEventListener('click',()=>{\r\n let name = document.getElementById('contractName').value;\r\n let select = document.getElementById('contractEmployeesSelect');\r\n let selectedIds = Array.from(select.selectedOptions).map(opt=>opt.value);\r\n let collectiveBonus = parseFloat(document.getElementById('collectiveBonus').value)||0;\r\n if(!name || selectedIds.length===0) { alert(\"\u0623\u062f\u062e\u0644 \u0627\u0633\u0645 \u0627\u0644\u0639\u0642\u062f \u0648\u0627\u062e\u062a\u0631 \u0645\u0648\u0638\u0641\u064a\u0646\"); return; }\r\n contracts.push({id:Date.now(), name, employeeIds:selectedIds, collectiveBonus});\r\n saveAllData(); refreshContractsList(); alert(\"\u062a\u0645 \u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0639\u0642\u062f \u0627\u0644\u062c\u0645\u0627\u0639\u064a\");\r\n });\r\n\r\n \/\/ \u062d\u0633\u0627\u0628\u0627\u062a \u0627\u0644\u0631\u0648\u0627\u062a\u0628\r\n function computeSalaryForEmployee(empId, extraBonus=0){\r\n let emp = employees.find(e=>e.id===empId);\r\n if(!emp) return null;\r\n return calculerSalaireDetail(emp, extraBonus);\r\n }\r\n document.getElementById('calcSingleSalaryBtn')?.addEventListener('click',()=>{\r\n let empId = document.getElementById('payrollEmployeeSelect').value;\r\n if(!empId) { alert(\"\u0627\u062e\u062a\u0631 \u0645\u0648\u0638\u0641\u0627\u064b\"); return; }\r\n let res = computeSalaryForEmployee(empId);\r\n if(res) document.getElementById('salaryResults').innerHTML = `<div class=\"card\">\u0627\u0644\u0645\u0648\u0638\u0641: ${employees.find(e=>e.id===empId).name} <br> \u0627\u0644\u0623\u062c\u0631 \u0627\u0644\u0635\u0627\u0641\u064a: ${res.net.toFixed(2)} \u062f\u062c <br> brut: ${res.brut.toFixed(2)} , IRG: ${res.irg.toFixed(2)}<\/div>`;\r\n });\r\n document.getElementById('calcAllSalariesBtn')?.addEventListener('click',()=>{\r\n let salaires = [];\r\n let totalNet = 0;\r\n for(let emp of employees){\r\n let res = calculerSalaireDetail(emp);\r\n salaires.push({nom:emp.name, net:res.net, brut:res.brut, cnas:res.cnas, irg:res.irg, details:res.detail});\r\n totalNet += res.net;\r\n }\r\n let now = new Date().toLocaleString();\r\n payrollHistory.push({date:now, employeesCount:employees.length, totalNet, details:salaires});\r\n saveAllData();\r\n let html = '<table border=\"1\" style=\"width:100%\"><tr><th>\u0627\u0644\u0645\u0648\u0638\u0641<\/th><th>\u0627\u0644\u062e\u0627\u0645<\/th><th>CNAS<\/th><th>IRG<\/th><th>\u0627\u0644\u0635\u0627\u0641\u064a<\/th><\/tr>';\r\n salaires.forEach(s=>{ html+=`<tr><td>${s.nom}<\/td><td>${s.brut}<\/td><td>${s.cnas}<\/td><td>${s.irg}<\/td><td>${s.net}<\/td><\/tr>`; });\r\n html+='<\/table><p>\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0623\u062c\u0648\u0631 \u0627\u0644\u0635\u0627\u0641\u064a\u0629: '+totalNet+' \u062f\u062c<\/p>';\r\n document.getElementById('salaryResults').innerHTML = html;\r\n refreshDashboard();\r\n });\r\n\r\n \/\/ \u062a\u0635\u062f\u064a\u0631 Excel \u0644\u0644\u0631\u0648\u0627\u062a\u0628 \u0627\u0644\u062d\u0627\u0644\u064a\u0629\r\n document.getElementById('exportAllSalariesExcelBtn')?.addEventListener('click',()=>{\r\n let data = [[\"\u0627\u0644\u0645\u0648\u0638\u0641\",\"\u0627\u0644\u0623\u062c\u0631 \u0627\u0644\u062e\u0627\u0645\",\"CNAS\",\"IRG\",\"\u0627\u0644\u0635\u0627\u0641\u064a\"]];\r\n for(let emp of employees){\r\n let r = calculerSalaireDetail(emp);\r\n data.push([emp.name, r.brut, r.cnas, r.irg, r.net]);\r\n }\r\n let ws = XLSX.utils.aoa_to_sheet(data);\r\n let wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb,ws,\"\u0631\u0648\u0627\u062a\u0628\");\r\n XLSX.writeFile(wb,\"dalfi_rotaib.xlsx\");\r\n });\r\n \/\/ \u062a\u0635\u062f\u064a\u0631 \u0648\u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0643\u0627\u0645\u0644\u0629\r\n document.getElementById('backupAllDataBtn')?.addEventListener('click',()=>{\r\n let all = {employees, contracts, payrollHistory};\r\n let dataStr = JSON.stringify(all,null,2);\r\n let blob = new Blob([dataStr],{type:\"application\/json\"});\r\n let url = URL.createObjectURL(blob);\r\n let a = document.createElement('a'); a.href=url; a.download=\"dalfi_backup.json\"; a.click(); URL.revokeObjectURL(url);\r\n });\r\n document.getElementById('restoreDataBtn')?.addEventListener('click',()=>document.getElementById('restoreFileInput').click());\r\n document.getElementById('restoreFileInput')?.addEventListener('change',(e)=>{\r\n let file = e.target.files[0];\r\n if(!file) return;\r\n let reader = new FileReader();\r\n reader.onload = function(ev){\r\n let data = JSON.parse(ev.target.result);\r\n if(data.employees) employees = data.employees;\r\n if(data.contracts) contracts = data.contracts;\r\n if(data.payrollHistory) payrollHistory = data.payrollHistory;\r\n saveAllData();\r\n refreshEmployeesTable(); refreshContractsList(); refreshDashboard();\r\n alert(\"\u062a\u0645\u062a \u0627\u0644\u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0628\u0646\u062c\u0627\u062d\");\r\n };\r\n reader.readAsText(file);\r\n });\r\n \/\/ \u062a\u0635\u062f\u064a\u0631 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646 \u0648\u0627\u0644\u0639\u0642\u0648\u062f excel\r\n document.getElementById('exportEmployeesExcelBtn')?.addEventListener('click',()=>{\r\n let sheetData = [[\"\u0627\u0644\u0643\u0648\u062f\",\"\u0627\u0644\u0627\u0633\u0645\",\"\u0627\u0644\u0642\u0633\u0645\",\"\u0627\u0644\u0623\u0633\u0627\u0633\u064a\",\"\u062e\u0628\u0631\u0629\",\"\u0623\u0642\u062f\u0645\u064a\u0629 \u062f\u0627\u0644\u0641\u064a\",\"\u0623\u0637\u0641\u0627\u0644\"]];\r\n employees.forEach(e=>sheetData.push([e.code,e.name,e.dept,e.salaireBase,e.experience,e.dalfiSeniority,e.enfants]));\r\n let ws = XLSX.utils.aoa_to_sheet(sheetData); let wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb,ws,\"\u0645\u0648\u0638\u0641\u064a\u0646\"); XLSX.writeFile(wb,\"dalfi_employees.xlsx\");\r\n });\r\n \/\/ PDF \u062a\u0642\u0631\u064a\u0631\r\n document.getElementById('generateMonthlyReportBtn')?.addEventListener('click',()=>{\r\n let element = document.getElementById('salaryResults');\r\n if(!element.innerText) alert(\"\u0642\u0645 \u0628\u062d\u0633\u0627\u0628 \u0627\u0644\u0631\u0648\u0627\u062a\u0628 \u0623\u0648\u0644\u0627\");\r\n else html2pdf().from(element).save(\"dalfi_report.pdf\");\r\n });\r\n document.getElementById('printAllSalariesBtn')?.addEventListener('click',()=>{\r\n let win = window.open(); win.document.write('<html><body>'+document.getElementById('salaryResults').innerHTML+'<\/body><\/html>'); win.print();\r\n });\r\n \/\/ \u0625\u0636\u0627\u0641\u0627\u062a \u062a\u0635\u062f\u064a\u0631 JSON\r\n document.getElementById('exportFullDataJsonBtn')?.addEventListener('click',()=>{\r\n let data = {employees, contracts, payrollHistory};\r\n let blob = new Blob([JSON.stringify(data,null,2)],{type:\"application\/json\"});\r\n let a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download=\"dalfi_full_data.json\"; a.click();\r\n });\r\n document.getElementById('exportContractsExcelBtn')?.addEventListener('click',()=>{\r\n let data = [[\"\u0627\u0633\u0645 \u0627\u0644\u0639\u0642\u062f\",\"\u0645\u0646\u062d\u0629 \u062c\u0645\u0627\u0639\u064a\u0629\",\"\u0627\u0644\u0645\u0648\u0638\u0641\u0648\u0646\"]];\r\n contracts.forEach(c=>{ data.push([c.name, c.collectiveBonus, c.employeeIds.map(id=>employees.find(e=>e.id===id)?.name).join(',')]); });\r\n let ws = XLSX.utils.aoa_to_sheet(data); let wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb,ws,\"\u0639\u0642\u0648\u062f\"); XLSX.writeFile(wb,\"dalfi_contracts.xlsx\");\r\n });\r\n\r\n \/\/ \u0627\u0644\u062a\u0628\u0648\u064a\u0628\u0627\u062a\r\n document.querySelectorAll('.tab-btn').forEach(btn=>{\r\n btn.addEventListener('click',()=>{\r\n document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));\r\n btn.classList.add('active');\r\n let tabId = btn.getAttribute('data-tab');\r\n document.querySelectorAll('.tab-content').forEach(t=>t.classList.remove('active'));\r\n document.getElementById(tabId).classList.add('active');\r\n });\r\n });\r\n loadAllData();\r\n refreshEmployeesTable();\r\n refreshContractsList();\r\n refreshDashboard();\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>html \u062f\u0627\u0644\u0641\u064a – \u0646\u0638\u0627\u0645 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0628\u0634\u0631\u064a\u0629 \u0648\u0627\u0644\u0623\u062c\u0648\u0631 \u062f\u0627\u0644\u0641\u064a HR \u0627\u0644\u0623\u062c\u0648\u0631 \u0648\u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0628\u0634\u0631\u064a\u0629 \u0625\u062f\u0627\u0631\u0629 \u0634\u0627\u0645\u0644\u0629 \u00b7 \u0639\u0642\u0648\u062f \u062c\u0645\u0627\u0639\u064a\u0629 \u00b7 \u0631\u0648\u0627\u062a\u0628 \u00b7 \u062a\u0642\u0627\u0631\u064a\u0631 PDF\/Excel \u0646\u0633\u062e\u0629 \u0627\u062d\u062a\u064a\u0627\u0637\u064a\u0629 (JSON) \u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0628\u064a\u0627\u0646\u0627\u062a \u0644\u0648\u062d\u0629 \u0627\u0644\u0642\u064a\u0627\u062f\u0629 \u0627\u0644\u0645\u0648\u0638\u0641\u0648\u0646 \u0639\u0642\u0648\u062f \u062c\u0645\u0627\u0639\u064a\u0629 \u0635\u0631\u0641 \u0627\u0644\u0631\u0648\u0627\u062a\u0628 \u0627\u0644\u062a\u0642\u0627\u0631\u064a\u0631 \u0648\u0627\u0644\u062a\u0635\u062f\u064a\u0631 \u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u0633\u0631\u064a\u0639\u0629 \u0622\u062e\u0631 \u0627\u0644\u0631\u0648\u0627\u062a\u0628 \u0627\u0644\u0645\u0633\u062c\u0644\u0629 \u0625\u0636\u0627\u0641\u0629 \/ \u062a\u0639\u062f\u064a\u0644 \u0645\u0648\u0638\u0641 \u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 \u0627\u0644\u0631\u0642\u0645 \u0627\u0644\u0648\u0638\u064a\u0641\u064a \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0623\u062c\u0631 \u0627\u0644\u0623\u0633\u0627\u0633\u064a (\u062f\u062c) \u0633\u0646\u0648\u0627\u062a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3266","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/environnement-skikda.dz\/ar\/wp-json\/wp\/v2\/pages\/3266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/environnement-skikda.dz\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/environnement-skikda.dz\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/environnement-skikda.dz\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/environnement-skikda.dz\/ar\/wp-json\/wp\/v2\/comments?post=3266"}],"version-history":[{"count":10,"href":"https:\/\/environnement-skikda.dz\/ar\/wp-json\/wp\/v2\/pages\/3266\/revisions"}],"predecessor-version":[{"id":3277,"href":"https:\/\/environnement-skikda.dz\/ar\/wp-json\/wp\/v2\/pages\/3266\/revisions\/3277"}],"wp:attachment":[{"href":"https:\/\/environnement-skikda.dz\/ar\/wp-json\/wp\/v2\/media?parent=3266"}],"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\t<\/div>\n\t\t\t\t<\/div>\n\t\t

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

\n\t\t\t\t

\n\t\t\t\t\thtml\r\n\r\n\r\n\r\n \r\n \r\n \u062f\u0627\u0644\u0641\u064a - \u0646\u0638\u0627\u0645 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0628\u0634\u0631\u064a\u0629 \u0648\u0627\u0644\u0623\u062c\u0648\u0631<\/title>\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n \r\n <script src=\"https:\/\/cdn.sheetjs.com\/xlsx-0.20.2\/package\/dist\/xlsx.full.min.js\"><\/script>\r\n \r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\" integrity=\"sha512-GsLlZN\/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA\/HdeKFVgA5v3S\/cIrLF7QnIg==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\"><\/script>\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: 'Cairo', 'Segoe UI', Tahoma, sans-serif;\r\n background: #f0f2f5;\r\n direction: rtl;\r\n }\r\n\r\n \/* header *\/\r\n .app-header {\r\n background: linear-gradient(135deg, #0b2b26, #1a4a3a);\r\n color: white;\r\n padding: 20px 30px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\r\n }\r\n .logo-area h1 {\r\n font-size: 1.8rem;\r\n display: inline-block;\r\n }\r\n .logo-area span {\r\n font-size: 0.9rem;\r\n background: #b87c4f;\r\n padding: 4px 10px;\r\n border-radius: 40px;\r\n margin-right: 10px;\r\n }\r\n .backup-actions button {\r\n background: #d9a066;\r\n border: none;\r\n padding: 8px 15px;\r\n border-radius: 30px;\r\n margin-right: 10px;\r\n font-weight: bold;\r\n cursor: pointer;\r\n }\r\n \/* tabs *\/\r\n .tabs {\r\n display: flex;\r\n background: white;\r\n border-bottom: 2px solid #ddd;\r\n padding: 0 20px;\r\n flex-wrap: wrap;\r\n }\r\n .tab-btn {\r\n padding: 14px 28px;\r\n font-size: 1rem;\r\n font-weight: bold;\r\n background: transparent;\r\n border: none;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n color: #2c5a4a;\r\n }\r\n .tab-btn.active {\r\n border-bottom: 3px solid #c49a6c;\r\n color: #b87c4f;\r\n }\r\n .tab-content {\r\n display: none;\r\n padding: 25px;\r\n background: #fefaf0;\r\n min-height: 70vh;\r\n }\r\n .tab-content.active {\r\n display: block;\r\n }\r\n \/* cards & forms *\/\r\n .card {\r\n background: white;\r\n border-radius: 24px;\r\n padding: 20px;\r\n margin-bottom: 25px;\r\n box-shadow: 0 5px 12px rgba(0,0,0,0.05);\r\n }\r\n .form-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(280px,1fr));\r\n gap: 15px;\r\n }\r\n .form-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 6px;\r\n }\r\n .form-group label {\r\n font-weight: bold;\r\n color: #2c5a4a;\r\n }\r\n input, select {\r\n padding: 10px;\r\n border-radius: 30px;\r\n border: 1px solid #d4c4a8;\r\n background: #fffcf5;\r\n }\r\n button {\r\n background: #2c7a5c;\r\n color: white;\r\n padding: 10px 18px;\r\n border-radius: 40px;\r\n border: none;\r\n font-weight: bold;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n }\r\n button i {\r\n margin-left: 6px;\r\n }\r\n .btn-sm {\r\n padding: 5px 12px;\r\n font-size: 0.8rem;\r\n }\r\n table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n background: white;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n }\r\n th, td {\r\n padding: 12px;\r\n border-bottom: 1px solid #eee;\r\n text-align: center;\r\n }\r\n th {\r\n background: #e9e0cf;\r\n color: #2c5a4a;\r\n }\r\n .action-icons i {\r\n margin: 0 5px;\r\n cursor: pointer;\r\n color: #9b6e42;\r\n }\r\n .salary-slips {\r\n background: #f9f4e6;\r\n border-radius: 20px;\r\n padding: 15px;\r\n margin-top: 20px;\r\n }\r\n footer {\r\n text-align: center;\r\n padding: 20px;\r\n font-size: 0.8rem;\r\n color: #8b7a62;\r\n }\r\n @media (max-width: 700px) {\r\n .tabs { flex-direction: column; }\r\n .tab-btn { text-align: center; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"app-header\">\r\n <div class=\"logo-area\">\r\n <h1><i class=\"fas fa-chalkboard-user\"><\/i> \u062f\u0627\u0644\u0641\u064a HR <span>\u0627\u0644\u0623\u062c\u0648\u0631 \u0648\u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0628\u0634\u0631\u064a\u0629<\/span><\/h1>\r\n <p>\u0625\u062f\u0627\u0631\u0629 \u0634\u0627\u0645\u0644\u0629 \u00b7 \u0639\u0642\u0648\u062f \u062c\u0645\u0627\u0639\u064a\u0629 \u00b7 \u0631\u0648\u0627\u062a\u0628 \u00b7 \u062a\u0642\u0627\u0631\u064a\u0631 PDF\/Excel<\/p>\r\n <\/div>\r\n <div class=\"backup-actions\">\r\n <button id=\"backupAllDataBtn\"><i class=\"fas fa-download\"><\/i> \u0646\u0633\u062e\u0629 \u0627\u062d\u062a\u064a\u0627\u0637\u064a\u0629 (JSON)<\/button>\r\n <button id=\"restoreDataBtn\"><i class=\"fas fa-upload\"><\/i> \u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0628\u064a\u0627\u0646\u0627\u062a<\/button>\r\n <input type=\"file\" id=\"restoreFileInput\" style=\"display:none\" accept=\".json\">\r\n <\/div>\r\n<\/div>\r\n\r\n<div class=\"tabs\">\r\n <button class=\"tab-btn active\" data-tab=\"dashboard\"><i class=\"fas fa-tachometer-alt\"><\/i> \u0644\u0648\u062d\u0629 \u0627\u0644\u0642\u064a\u0627\u062f\u0629<\/button>\r\n <button class=\"tab-btn\" data-tab=\"employees\"><i class=\"fas fa-users\"><\/i> \u0627\u0644\u0645\u0648\u0638\u0641\u0648\u0646<\/button>\r\n <button class=\"tab-btn\" data-tab=\"contracts\"><i class=\"fas fa-file-signature\"><\/i> \u0639\u0642\u0648\u062f \u062c\u0645\u0627\u0639\u064a\u0629<\/button>\r\n <button class=\"tab-btn\" data-tab=\"payroll\"><i class=\"fas fa-calculator\"><\/i> \u0635\u0631\u0641 \u0627\u0644\u0631\u0648\u0627\u062a\u0628<\/button>\r\n <button class=\"tab-btn\" data-tab=\"reports\"><i class=\"fas fa-chart-line\"><\/i> \u0627\u0644\u062a\u0642\u0627\u0631\u064a\u0631 \u0648\u0627\u0644\u062a\u0635\u062f\u064a\u0631<\/button>\r\n<\/div>\r\n\r\n\r\n<div id=\"dashboard\" class=\"tab-content active\">\r\n <div class=\"card\">\r\n <h3><i class=\"fas fa-chart-simple\"><\/i> \u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u0633\u0631\u064a\u0639\u0629<\/h3>\r\n <div id=\"dashboardStats\" style=\"display: flex; gap: 20px; flex-wrap: wrap; margin-top: 15px;\">\r\n \r\n <\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3><i class=\"fas fa-bell\"><\/i> \u0622\u062e\u0631 \u0627\u0644\u0631\u0648\u0627\u062a\u0628 \u0627\u0644\u0645\u0633\u062c\u0644\u0629<\/h3>\r\n <div id=\"lastPaymentsList\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"employees\" class=\"tab-content\">\r\n <div class=\"card\">\r\n <h3><i class=\"fas fa-user-plus\"><\/i> \u0625\u0636\u0627\u0641\u0629 \/ \u062a\u0639\u062f\u064a\u0644 \u0645\u0648\u0638\u0641<\/h3>\r\n <div class=\"form-grid\" id=\"employeeForm\">\r\n <div class=\"form-group\"><label>\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644<\/label><input type=\"text\" id=\"empName\" placeholder=\"\u0623\u062d\u0645\u062f \u0628\u0646 \u0639\u0644\u064a\"><\/div>\r\n <div class=\"form-group\"><label>\u0627\u0644\u0631\u0642\u0645 \u0627\u0644\u0648\u0638\u064a\u0641\u064a<\/label><input type=\"text\" id=\"empCode\" placeholder=\"DAL001\"><\/div>\r\n <div class=\"form-group\"><label>\u0627\u0644\u0642\u0633\u0645<\/label><input type=\"text\" id=\"empDept\" placeholder=\"\u0645\u062d\u0627\u0633\u0628\u0629\"><\/div>\r\n <div class=\"form-group\"><label>\u0627\u0644\u0623\u062c\u0631 \u0627\u0644\u0623\u0633\u0627\u0633\u064a (\u062f\u062c)<\/label><input type=\"number\" id=\"empBase\" value=\"45000\"><\/div>\r\n <div class=\"form-group\"><label>\u0633\u0646\u0648\u0627\u062a \u0627\u0644\u062e\u0628\u0631\u0629<\/label><input type=\"number\" id=\"empExp\" value=\"8\"><\/div>\r\n <div class=\"form-group\"><label>\u0627\u0644\u0623\u0642\u062f\u0645\u064a\u0629 \u0641\u064a \u062f\u0627\u0644\u0641\u064a<\/label><input type=\"number\" id=\"empDalfiSeniority\" value=\"5\"><\/div>\r\n <div class=\"form-group\"><label>\u0639\u062f\u062f \u0627\u0644\u0623\u0637\u0641\u0627\u0644<\/label><input type=\"number\" id=\"empEnfants\" value=\"2\"><\/div>\r\n <button id=\"saveEmployeeBtn\"><i class=\"fas fa-save\"><\/i> \u062d\u0641\u0638 \u0627\u0644\u0645\u0648\u0638\u0641<\/button>\r\n <button id=\"resetEmployeeForm\" class=\"btn-sm\" style=\"background:#aaa;\">\u0625\u0644\u063a\u0627\u0621<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3><i class=\"fas fa-list\"><\/i> \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646<\/h3>\r\n <table id=\"employeeTable\">\r\n <thead><tr><th>\u0627\u0644\u0643\u0648\u062f<\/th><th>\u0627\u0644\u0627\u0633\u0645<\/th><th>\u0627\u0644\u0642\u0633\u0645<\/th><th>\u0627\u0644\u0623\u0633\u0627\u0633\u064a<\/th><th>\u062e\u0628\u0631\u0629<\/th><th>\u0623\u0642\u062f\u0645\u064a\u0629 \u062f\u0627\u0644\u0641\u064a<\/th><th>\u0623\u0637\u0641\u0627\u0644<\/th><th>\u0625\u062c\u0631\u0627\u0621\u0627\u062a<\/th><\/tr><\/thead>\r\n <tbody><\/tbody>\r\n <\/table>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"contracts\" class=\"tab-content\">\r\n <div class=\"card\">\r\n <h3><i class=\"fas fa-layer-group\"><\/i> \u0625\u0646\u0634\u0627\u0621 \u0639\u0642\u062f \u062c\u0645\u0627\u0639\u064a (\u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0648\u0638\u0641\u064a\u0646)<\/h3>\r\n <div class=\"form-group\"><label>\u0627\u0633\u0645 \u0627\u0644\u0639\u0642\u062f \/ \u0627\u0644\u0645\u062c\u0645\u0648\u0639\u0629<\/label><input type=\"text\" id=\"contractName\" placeholder=\"\u0639\u0642\u062f \u0642\u0633\u0645 \u0627\u0644\u0645\u062d\u0627\u0633\u0628\u0629\"><\/div>\r\n <div class=\"form-group\"><label>\u0627\u062e\u062a\u064a\u0627\u0631 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646 (ctrl+click \u0644\u062a\u062d\u062f\u064a\u062f \u0639\u062f\u0629)<\/label>\r\n <select id=\"contractEmployeesSelect\" multiple size=\"5\" style=\"height:120px\"><\/select>\r\n <\/div>\r\n <div class=\"form-group\"><label>\u0645\u0646\u062d\u0629 \u0625\u0636\u0627\u0641\u064a\u0629 \u062c\u0645\u0627\u0639\u064a\u0629 (\u062f\u062c)<\/label><input type=\"number\" id=\"collectiveBonus\" value=\"0\"><\/div>\r\n <button id=\"createContractBtn\"><i class=\"fas fa-gavel\"><\/i> \u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0639\u0642\u062f \u0648\u062d\u0641\u0638\u0647<\/button>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u062c\u0645\u0627\u0639\u064a\u0629 \u0627\u0644\u0645\u0633\u062c\u0644\u0629<\/h3>\r\n <div id=\"contractsList\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"payroll\" class=\"tab-content\">\r\n <div class=\"card\">\r\n <h3>\u062d\u0633\u0627\u0628 \u0631\u0648\u0627\u062a\u0628 \u0641\u0631\u062f\u064a \u0623\u0648 \u062c\u0645\u0627\u0639\u064a<\/h3>\r\n <div class=\"form-group\"><label>\u0627\u062e\u062a\u0631 \u0645\u0648\u0638\u0641\u0627\u064b<\/label>\r\n <select id=\"payrollEmployeeSelect\"><\/select>\r\n <button id=\"calcSingleSalaryBtn\"><i class=\"fas fa-calculator\"><\/i> \u062d\u0633\u0627\u0628 \u0631\u0627\u062a\u0628 \u0647\u0630\u0627 \u0627\u0644\u0645\u0648\u0638\u0641<\/button>\r\n <\/div>\r\n <button id=\"calcAllSalariesBtn\" style=\"background:#b87c4f;\"><i class=\"fas fa-users\"><\/i> \u062d\u0633\u0627\u0628 \u0631\u0648\u0627\u062a\u0628 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646 (\u0634\u0647\u0631\u064a\u0627\u064b)<\/button>\r\n <\/div>\r\n <div class=\"salary-slips\" id=\"salarySlipArea\">\r\n <h4>\u0646\u062a\u0627\u0626\u062c \u0627\u0644\u0631\u0648\u0627\u062a\u0628<\/h4>\r\n <div id=\"salaryResults\"><\/div>\r\n <button id=\"exportAllSalariesExcelBtn\" style=\"margin-top:15px;\"><i class=\"fas fa-file-excel\"><\/i> \u062a\u0635\u062f\u064a\u0631 \u0627\u0644\u0643\u0644 \u0625\u0644\u0649 Excel<\/button>\r\n <button id=\"printAllSalariesBtn\"><i class=\"fas fa-print\"><\/i> \u0637\u0628\u0627\u0639\u0629 \u062c\u0645\u064a\u0639 \u0642\u0633\u0627\u0626\u0645 \u0627\u0644\u0631\u0648\u0627\u062a\u0628<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<div id=\"reports\" class=\"tab-content\">\r\n <div class=\"card\">\r\n <h3>\u062a\u0635\u062f\u064a\u0631 \u0648\u0627\u0633\u062a\u0631\u062c\u0627\u0639 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a<\/h3>\r\n <button id=\"exportFullDataJsonBtn\"><i class=\"fas fa-archive\"><\/i> \u062a\u0635\u062f\u064a\u0631 \u0643\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a (JSON)<\/button>\r\n <button id=\"exportEmployeesExcelBtn\"><i class=\"fas fa-file-excel\"><\/i> \u062a\u0635\u062f\u064a\u0631 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646 Excel<\/button>\r\n <button id=\"exportContractsExcelBtn\"><i class=\"fas fa-file-excel\"><\/i> \u062a\u0635\u062f\u064a\u0631 \u0627\u0644\u0639\u0642\u0648\u062f Excel<\/button>\r\n <hr>\r\n <h3>\u0625\u0646\u0634\u0627\u0621 \u062a\u0642\u0631\u064a\u0631 \u0634\u0647\u0631\u064a PDF<\/h3>\r\n <button id=\"generateMonthlyReportBtn\"><i class=\"fas fa-file-pdf\"><\/i> \u0625\u0646\u0634\u0627\u0621 \u062a\u0642\u0631\u064a\u0631 PDF (\u0622\u062e\u0631 \u0635\u0631\u0641)<\/button>\r\n <\/div>\r\n<\/div>\r\n\r\n<footer>\u0646\u0638\u0627\u0645 \u062f\u0627\u0644\u0641\u064a \u0627\u0644\u0645\u062a\u0643\u0627\u0645\u0644 - \u062d\u0641\u0638 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0645\u062d\u0644\u064a\u0627\u064b + \u062a\u0635\u062f\u064a\u0631 \u0648\u0627\u0633\u062a\u0639\u0627\u062f\u0629 - \u0645\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 \u0627\u0644\u0642\u0627\u0646\u0648\u0646 \u0627\u0644\u062c\u0632\u0627\u0626\u0631\u064a<\/footer>\r\n\r\n<script>\r\n \/\/ ---------------------- \u0647\u064a\u0643\u0644 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 ----------------------\r\n let employees = []; \/\/ \u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646\r\n let contracts = []; \/\/ \u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u062c\u0645\u0627\u0639\u064a\u0629\r\n let payrollHistory = []; \/\/ \u0633\u062c\u0644 \u0627\u0644\u0631\u0648\u0627\u062a\u0628 (\u0643\u0644 \u0639\u0645\u0644\u064a\u0629 \u0635\u0631\u0641)\r\n\r\n \/\/ \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u062d\u0633\u0627\u0628 (\u0645\u062b\u0644 \u062f\u0627\u0644\u0641\u064a)\r\n const SALARY_CONFIG = {\r\n snmg: 20000,\r\n tauxCNAS: 0.09,\r\n primeRendementTaux: 0.20,\r\n primeSoccombre: 4000,\r\n primeTransport: 3000,\r\n primeFamilleParEnfant: 2500,\r\n maxEnfants: 4,\r\n primeFideliteParAn: 500,\r\n maxFidelite: 8000,\r\n primeExperienceTauxParAn: 0.01,\r\n primeExperienceMax: 0.25,\r\n irgBareme: [[0,30000,0,0],[30001,50000,0.20,0],[50001,100000,0.25,2500],[100001,999999999,0.30,7500]]\r\n };\r\n\r\n \/\/ \u062f\u0648\u0627\u0644 \u0645\u0633\u0627\u0639\u062f\u0629\r\n function calcIRG(imposable) {\r\n for(let [min,max,taux,abat] of SALARY_CONFIG.irgBareme)\r\n if(imposable>=min && imposable<=max) return Math.max(0, (imposable*taux)-abat);\r\n return 0;\r\n }\r\n function calculerSalaireDetail(emp, primeSpeciale=0) {\r\n let base = Math.max(emp.salaireBase, SALARY_CONFIG.snmg);\r\n let primeExp = Math.min(SALARY_CONFIG.primeExperienceMax, emp.experience * SALARY_CONFIG.primeExperienceTauxParAn) * base;\r\n let primeRend = base * SALARY_CONFIG.primeRendementTaux;\r\n let primeSoc = SALARY_CONFIG.primeSoccombre;\r\n let primeTrans = SALARY_CONFIG.primeTransport;\r\n let enfantsEff = Math.min(emp.enfants, SALARY_CONFIG.maxEnfants);\r\n let primeFam = enfantsEff * SALARY_CONFIG.primeFamilleParEnfant;\r\n let fidelite = Math.min(emp.dalfiSeniority * SALARY_CONFIG.primeFideliteParAn, SALARY_CONFIG.maxFidelite);\r\n let totalPrimes = primeExp+primeRend+primeSoc+primeTrans+primeFam+fidelite+primeSpeciale;\r\n let brut = base + totalPrimes;\r\n let cnas = brut * SALARY_CONFIG.tauxCNAS;\r\n let imposable = brut - cnas;\r\n let irg = calcIRG(imposable);\r\n let net = brut - cnas - irg;\r\n return { base, brut, cnas, irg, net, detail:{primeExp,primeRend,primeSoc,primeTrans,primeFam,fidelite,primeSpeciale} };\r\n }\r\n\r\n \/\/ \u062d\u0641\u0638 \u0643\u0644 \u0634\u064a\u0621 \u0641\u064a localStorage\r\n function saveAllData() {\r\n localStorage.setItem('dalfi_employees', JSON.stringify(employees));\r\n localStorage.setItem('dalfi_contracts', JSON.stringify(contracts));\r\n localStorage.setItem('dalfi_payrollHistory', JSON.stringify(payrollHistory));\r\n }\r\n function loadAllData() {\r\n let e = localStorage.getItem('dalfi_employees');\r\n if(e) employees = JSON.parse(e);\r\n let c = localStorage.getItem('dalfi_contracts');\r\n if(c) contracts = JSON.parse(c);\r\n let p = localStorage.getItem('dalfi_payrollHistory');\r\n if(p) payrollHistory = JSON.parse(p);\r\n if(employees.length===0) { \/\/ \u0628\u064a\u0627\u0646\u0627\u062a \u062a\u062c\u0631\u064a\u0628\u064a\u0629\r\n employees.push({id:\"1\",code:\"DAL001\",name:\"\u0623\u062d\u0645\u062f \u0628\u0646 \u0639\u0644\u064a\",dept:\"\u0645\u062d\u0627\u0633\u0628\u0629\",salaireBase:45000,experience:8,dalfiSeniority:5,enfants:2});\r\n employees.push({id:\"2\",code:\"DAL002\",name:\"\u0633\u0645\u064a\u0629 \u0632\u0631\u0648\u0642\",dept:\"\u062a\u0633\u064a\u064a\u0631\",salaireBase:50000,experience:12,dalfiSeniority:8,enfants:3});\r\n saveAllData();\r\n }\r\n }\r\n\r\n \/\/ \u062a\u062d\u062f\u064a\u062b \u0648\u0627\u062c\u0647\u0627\u062a\r\n function refreshEmployeesTable() {\r\n let tbody = document.querySelector('#employeeTable tbody');\r\n tbody.innerHTML = '';\r\n employees.forEach(emp => {\r\n let tr = document.createElement('tr');\r\n tr.innerHTML = `<td>${emp.code}<\/td><td>${emp.name}<\/td><td>${emp.dept}<\/td><td>${emp.salaireBase}<\/td><td>${emp.experience}<\/td><td>${emp.dalfiSeniority}<\/td><td>${emp.enfants}<\/td>\r\n <td class=\"action-icons\"><i class=\"fas fa-edit\" onclick=\"editEmployee('${emp.id}')\"><\/i> <i class=\"fas fa-trash-alt\" onclick=\"deleteEmployee('${emp.id}')\"><\/i><\/td>`;\r\n tbody.appendChild(tr);\r\n });\r\n fillEmployeeSelects();\r\n refreshDashboard();\r\n }\r\n function fillEmployeeSelects() {\r\n let sel1 = document.getElementById('contractEmployeesSelect');\r\n let sel2 = document.getElementById('payrollEmployeeSelect');\r\n let opts = '<option value=\"\">--\u0627\u062e\u062a\u0631 \u0645\u0648\u0638\u0641--<\/option>'+employees.map(e=>`<option value=\"${e.id}\">${e.name} (${e.code})<\/option>`).join('');\r\n if(sel1) sel1.innerHTML = employees.map(e=>`<option value=\"${e.id}\">${e.name} - ${e.dept}<\/option>`).join('');\r\n if(sel2) sel2.innerHTML = opts;\r\n }\r\n function refreshDashboard() {\r\n let statsDiv = document.getElementById('dashboardStats');\r\n statsDiv.innerHTML = `<div class=\"card\">\ud83d\udc65 \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646: ${employees.length}<\/div>\r\n <div class=\"card\">\ud83d\udcc4 \u0639\u062f\u062f \u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u062c\u0645\u0627\u0639\u064a\u0629: ${contracts.length}<\/div>\r\n <div class=\"card\">\ud83d\udcb0 \u0639\u0645\u0644\u064a\u0627\u062a \u0635\u0631\u0641 \u0645\u0633\u062c\u0644\u0629: ${payrollHistory.length}<\/div>`;\r\n let lastDiv = document.getElementById('lastPaymentsList');\r\n lastDiv.innerHTML = payrollHistory.slice(-5).reverse().map(p => `<div>\ud83d\udcc5 ${p.date} | ${p.employeesCount} \u0645\u0648\u0638\u0641 | \u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0623\u062c\u0648\u0631: ${p.totalNet} \u062f\u062c<\/div>`).join('');\r\n }\r\n function refreshContractsList() {\r\n let div = document.getElementById('contractsList');\r\n if(!div) return;\r\n div.innerHTML = contracts.map((c,i)=>`<div style=\"border:1px solid #ddd; margin:8px; padding:10px\"><b>${c.name}<\/b> - \u0645\u0643\u0627\u0641\u0623\u0629 \u062c\u0645\u0627\u0639\u064a\u0629: ${c.collectiveBonus} \u062f\u062c <br> \u0627\u0644\u0645\u0648\u0638\u0641\u0648\u0646: ${c.employeeIds.map(id=>employees.find(e=>e.id===id)?.name).join(', ')} <button onclick=\"deleteContract(${i})\">\u062d\u0630\u0641 \u0627\u0644\u0639\u0642\u062f<\/button><\/div>`).join('');\r\n }\r\n \/\/ \u062f\u0648\u0627\u0644 \u062a\u062d\u0631\u064a\u0631\r\n window.editEmployee = (id) => {\r\n let emp = employees.find(e=>e.id===id);\r\n if(emp){\r\n document.getElementById('empName').value=emp.name; document.getElementById('empCode').value=emp.code;\r\n document.getElementById('empDept').value=emp.dept; document.getElementById('empBase').value=emp.salaireBase;\r\n document.getElementById('empExp').value=emp.experience; document.getElementById('empDalfiSeniority').value=emp.dalfiSeniority;\r\n document.getElementById('empEnfants').value=emp.enfants;\r\n \/\/ \u062d\u0630\u0641 \u0627\u0644\u0642\u062f\u064a\u0645 \u062b\u0645 \u062d\u0641\u0638 \u0644\u0627\u062d\u0642\u0627\u064b\r\n employees = employees.filter(e=>e.id!==id);\r\n saveAllData(); refreshEmployeesTable();\r\n }\r\n };\r\n window.deleteEmployee = (id) => { if(confirm(\"\u062d\u0630\u0641 \u0627\u0644\u0645\u0648\u0638\u0641\u061f\")){ employees=employees.filter(e=>e.id!==id); saveAllData(); refreshEmployeesTable(); } };\r\n window.deleteContract = (idx) => { contracts.splice(idx,1); saveAllData(); refreshContractsList(); refreshDashboard(); };\r\n\r\n \/\/ \u062d\u0641\u0638 \u0645\u0648\u0638\u0641\r\n document.getElementById('saveEmployeeBtn')?.addEventListener('click',()=>{\r\n let id = Date.now().toString();\r\n let code = document.getElementById('empCode').value;\r\n if(employees.some(e=>e.code===code && e.id!==id)) { alert(\"\u0627\u0644\u0643\u0648\u062f \u0645\u0648\u062c\u0648\u062f \u0645\u0633\u0628\u0642\u0627\u064b\"); return; }\r\n let newEmp = {\r\n id, code, name:document.getElementById('empName').value, dept:document.getElementById('empDept').value,\r\n salaireBase:parseFloat(document.getElementById('empBase').value), experience:parseInt(document.getElementById('empExp').value),\r\n dalfiSeniority:parseInt(document.getElementById('empDalfiSeniority').value), enfants:parseInt(document.getElementById('empEnfants').value)\r\n };\r\n employees.push(newEmp);\r\n saveAllData(); refreshEmployeesTable(); alert(\"\u062a\u0645 \u0627\u0644\u062d\u0641\u0638\");\r\n });\r\n document.getElementById('resetEmployeeForm')?.addEventListener('click',()=>document.querySelector('#employeeForm input').forEach(i=>i.value=''));\r\n\r\n \/\/ \u0639\u0642\u0648\u062f\r\n document.getElementById('createContractBtn')?.addEventListener('click',()=>{\r\n let name = document.getElementById('contractName').value;\r\n let select = document.getElementById('contractEmployeesSelect');\r\n let selectedIds = Array.from(select.selectedOptions).map(opt=>opt.value);\r\n let collectiveBonus = parseFloat(document.getElementById('collectiveBonus').value)||0;\r\n if(!name || selectedIds.length===0) { alert(\"\u0623\u062f\u062e\u0644 \u0627\u0633\u0645 \u0627\u0644\u0639\u0642\u062f \u0648\u0627\u062e\u062a\u0631 \u0645\u0648\u0638\u0641\u064a\u0646\"); return; }\r\n contracts.push({id:Date.now(), name, employeeIds:selectedIds, collectiveBonus});\r\n saveAllData(); refreshContractsList(); alert(\"\u062a\u0645 \u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u0639\u0642\u062f \u0627\u0644\u062c\u0645\u0627\u0639\u064a\");\r\n });\r\n\r\n \/\/ \u062d\u0633\u0627\u0628\u0627\u062a \u0627\u0644\u0631\u0648\u0627\u062a\u0628\r\n function computeSalaryForEmployee(empId, extraBonus=0){\r\n let emp = employees.find(e=>e.id===empId);\r\n if(!emp) return null;\r\n return calculerSalaireDetail(emp, extraBonus);\r\n }\r\n document.getElementById('calcSingleSalaryBtn')?.addEventListener('click',()=>{\r\n let empId = document.getElementById('payrollEmployeeSelect').value;\r\n if(!empId) { alert(\"\u0627\u062e\u062a\u0631 \u0645\u0648\u0638\u0641\u0627\u064b\"); return; }\r\n let res = computeSalaryForEmployee(empId);\r\n if(res) document.getElementById('salaryResults').innerHTML = `<div class=\"card\">\u0627\u0644\u0645\u0648\u0638\u0641: ${employees.find(e=>e.id===empId).name} <br> \u0627\u0644\u0623\u062c\u0631 \u0627\u0644\u0635\u0627\u0641\u064a: ${res.net.toFixed(2)} \u062f\u062c <br> brut: ${res.brut.toFixed(2)} , IRG: ${res.irg.toFixed(2)}<\/div>`;\r\n });\r\n document.getElementById('calcAllSalariesBtn')?.addEventListener('click',()=>{\r\n let salaires = [];\r\n let totalNet = 0;\r\n for(let emp of employees){\r\n let res = calculerSalaireDetail(emp);\r\n salaires.push({nom:emp.name, net:res.net, brut:res.brut, cnas:res.cnas, irg:res.irg, details:res.detail});\r\n totalNet += res.net;\r\n }\r\n let now = new Date().toLocaleString();\r\n payrollHistory.push({date:now, employeesCount:employees.length, totalNet, details:salaires});\r\n saveAllData();\r\n let html = '<table border=\"1\" style=\"width:100%\"><tr><th>\u0627\u0644\u0645\u0648\u0638\u0641<\/th><th>\u0627\u0644\u062e\u0627\u0645<\/th><th>CNAS<\/th><th>IRG<\/th><th>\u0627\u0644\u0635\u0627\u0641\u064a<\/th><\/tr>';\r\n salaires.forEach(s=>{ html+=`<tr><td>${s.nom}<\/td><td>${s.brut}<\/td><td>${s.cnas}<\/td><td>${s.irg}<\/td><td>${s.net}<\/td><\/tr>`; });\r\n html+='<\/table><p>\u0625\u062c\u0645\u0627\u0644\u064a \u0627\u0644\u0623\u062c\u0648\u0631 \u0627\u0644\u0635\u0627\u0641\u064a\u0629: '+totalNet+' \u062f\u062c<\/p>';\r\n document.getElementById('salaryResults').innerHTML = html;\r\n refreshDashboard();\r\n });\r\n\r\n \/\/ \u062a\u0635\u062f\u064a\u0631 Excel \u0644\u0644\u0631\u0648\u0627\u062a\u0628 \u0627\u0644\u062d\u0627\u0644\u064a\u0629\r\n document.getElementById('exportAllSalariesExcelBtn')?.addEventListener('click',()=>{\r\n let data = [[\"\u0627\u0644\u0645\u0648\u0638\u0641\",\"\u0627\u0644\u0623\u062c\u0631 \u0627\u0644\u062e\u0627\u0645\",\"CNAS\",\"IRG\",\"\u0627\u0644\u0635\u0627\u0641\u064a\"]];\r\n for(let emp of employees){\r\n let r = calculerSalaireDetail(emp);\r\n data.push([emp.name, r.brut, r.cnas, r.irg, r.net]);\r\n }\r\n let ws = XLSX.utils.aoa_to_sheet(data);\r\n let wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb,ws,\"\u0631\u0648\u0627\u062a\u0628\");\r\n XLSX.writeFile(wb,\"dalfi_rotaib.xlsx\");\r\n });\r\n \/\/ \u062a\u0635\u062f\u064a\u0631 \u0648\u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0627\u0644\u0628\u064a\u0627\u0646\u0627\u062a \u0627\u0644\u0643\u0627\u0645\u0644\u0629\r\n document.getElementById('backupAllDataBtn')?.addEventListener('click',()=>{\r\n let all = {employees, contracts, payrollHistory};\r\n let dataStr = JSON.stringify(all,null,2);\r\n let blob = new Blob([dataStr],{type:\"application\/json\"});\r\n let url = URL.createObjectURL(blob);\r\n let a = document.createElement('a'); a.href=url; a.download=\"dalfi_backup.json\"; a.click(); URL.revokeObjectURL(url);\r\n });\r\n document.getElementById('restoreDataBtn')?.addEventListener('click',()=>document.getElementById('restoreFileInput').click());\r\n document.getElementById('restoreFileInput')?.addEventListener('change',(e)=>{\r\n let file = e.target.files[0];\r\n if(!file) return;\r\n let reader = new FileReader();\r\n reader.onload = function(ev){\r\n let data = JSON.parse(ev.target.result);\r\n if(data.employees) employees = data.employees;\r\n if(data.contracts) contracts = data.contracts;\r\n if(data.payrollHistory) payrollHistory = data.payrollHistory;\r\n saveAllData();\r\n refreshEmployeesTable(); refreshContractsList(); refreshDashboard();\r\n alert(\"\u062a\u0645\u062a \u0627\u0644\u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0628\u0646\u062c\u0627\u062d\");\r\n };\r\n reader.readAsText(file);\r\n });\r\n \/\/ \u062a\u0635\u062f\u064a\u0631 \u0627\u0644\u0645\u0648\u0638\u0641\u064a\u0646 \u0648\u0627\u0644\u0639\u0642\u0648\u062f excel\r\n document.getElementById('exportEmployeesExcelBtn')?.addEventListener('click',()=>{\r\n let sheetData = [[\"\u0627\u0644\u0643\u0648\u062f\",\"\u0627\u0644\u0627\u0633\u0645\",\"\u0627\u0644\u0642\u0633\u0645\",\"\u0627\u0644\u0623\u0633\u0627\u0633\u064a\",\"\u062e\u0628\u0631\u0629\",\"\u0623\u0642\u062f\u0645\u064a\u0629 \u062f\u0627\u0644\u0641\u064a\",\"\u0623\u0637\u0641\u0627\u0644\"]];\r\n employees.forEach(e=>sheetData.push([e.code,e.name,e.dept,e.salaireBase,e.experience,e.dalfiSeniority,e.enfants]));\r\n let ws = XLSX.utils.aoa_to_sheet(sheetData); let wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb,ws,\"\u0645\u0648\u0638\u0641\u064a\u0646\"); XLSX.writeFile(wb,\"dalfi_employees.xlsx\");\r\n });\r\n \/\/ PDF \u062a\u0642\u0631\u064a\u0631\r\n document.getElementById('generateMonthlyReportBtn')?.addEventListener('click',()=>{\r\n let element = document.getElementById('salaryResults');\r\n if(!element.innerText) alert(\"\u0642\u0645 \u0628\u062d\u0633\u0627\u0628 \u0627\u0644\u0631\u0648\u0627\u062a\u0628 \u0623\u0648\u0644\u0627\");\r\n else html2pdf().from(element).save(\"dalfi_report.pdf\");\r\n });\r\n document.getElementById('printAllSalariesBtn')?.addEventListener('click',()=>{\r\n let win = window.open(); win.document.write('<html><body>'+document.getElementById('salaryResults').innerHTML+'<\/body><\/html>'); win.print();\r\n });\r\n \/\/ \u0625\u0636\u0627\u0641\u0627\u062a \u062a\u0635\u062f\u064a\u0631 JSON\r\n document.getElementById('exportFullDataJsonBtn')?.addEventListener('click',()=>{\r\n let data = {employees, contracts, payrollHistory};\r\n let blob = new Blob([JSON.stringify(data,null,2)],{type:\"application\/json\"});\r\n let a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download=\"dalfi_full_data.json\"; a.click();\r\n });\r\n document.getElementById('exportContractsExcelBtn')?.addEventListener('click',()=>{\r\n let data = [[\"\u0627\u0633\u0645 \u0627\u0644\u0639\u0642\u062f\",\"\u0645\u0646\u062d\u0629 \u062c\u0645\u0627\u0639\u064a\u0629\",\"\u0627\u0644\u0645\u0648\u0638\u0641\u0648\u0646\"]];\r\n contracts.forEach(c=>{ data.push([c.name, c.collectiveBonus, c.employeeIds.map(id=>employees.find(e=>e.id===id)?.name).join(',')]); });\r\n let ws = XLSX.utils.aoa_to_sheet(data); let wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb,ws,\"\u0639\u0642\u0648\u062f\"); XLSX.writeFile(wb,\"dalfi_contracts.xlsx\");\r\n });\r\n\r\n \/\/ \u0627\u0644\u062a\u0628\u0648\u064a\u0628\u0627\u062a\r\n document.querySelectorAll('.tab-btn').forEach(btn=>{\r\n btn.addEventListener('click',()=>{\r\n document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));\r\n btn.classList.add('active');\r\n let tabId = btn.getAttribute('data-tab');\r\n document.querySelectorAll('.tab-content').forEach(t=>t.classList.remove('active'));\r\n document.getElementById(tabId).classList.add('active');\r\n });\r\n });\r\n loadAllData();\r\n refreshEmployeesTable();\r\n refreshContractsList();\r\n refreshDashboard();\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>html \u062f\u0627\u0644\u0641\u064a – \u0646\u0638\u0627\u0645 \u0625\u062f\u0627\u0631\u0629 \u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0628\u0634\u0631\u064a\u0629 \u0648\u0627\u0644\u0623\u062c\u0648\u0631 \u062f\u0627\u0644\u0641\u064a HR \u0627\u0644\u0623\u062c\u0648\u0631 \u0648\u0627\u0644\u0645\u0648\u0627\u0631\u062f \u0627\u0644\u0628\u0634\u0631\u064a\u0629 \u0625\u062f\u0627\u0631\u0629 \u0634\u0627\u0645\u0644\u0629 \u00b7 \u0639\u0642\u0648\u062f \u062c\u0645\u0627\u0639\u064a\u0629 \u00b7 \u0631\u0648\u0627\u062a\u0628 \u00b7 \u062a\u0642\u0627\u0631\u064a\u0631 PDF\/Excel \u0646\u0633\u062e\u0629 \u0627\u062d\u062a\u064a\u0627\u0637\u064a\u0629 (JSON) \u0627\u0633\u062a\u0639\u0627\u062f\u0629 \u0628\u064a\u0627\u0646\u0627\u062a \u0644\u0648\u062d\u0629 \u0627\u0644\u0642\u064a\u0627\u062f\u0629 \u0627\u0644\u0645\u0648\u0638\u0641\u0648\u0646 \u0639\u0642\u0648\u062f \u062c\u0645\u0627\u0639\u064a\u0629 \u0635\u0631\u0641 \u0627\u0644\u0631\u0648\u0627\u062a\u0628 \u0627\u0644\u062a\u0642\u0627\u0631\u064a\u0631 \u0648\u0627\u0644\u062a\u0635\u062f\u064a\u0631 \u0625\u062d\u0635\u0627\u0626\u064a\u0627\u062a \u0633\u0631\u064a\u0639\u0629 \u0622\u062e\u0631 \u0627\u0644\u0631\u0648\u0627\u062a\u0628 \u0627\u0644\u0645\u0633\u062c\u0644\u0629 \u0625\u0636\u0627\u0641\u0629 \/ \u062a\u0639\u062f\u064a\u0644 \u0645\u0648\u0638\u0641 \u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 \u0627\u0644\u0631\u0642\u0645 \u0627\u0644\u0648\u0638\u064a\u0641\u064a \u0627\u0644\u0642\u0633\u0645 \u0627\u0644\u0623\u062c\u0631 \u0627\u0644\u0623\u0633\u0627\u0633\u064a (\u062f\u062c) \u0633\u0646\u0648\u0627\u062a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3266","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/environnement-skikda.dz\/ar\/wp-json\/wp\/v2\/pages\/3266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/environnement-skikda.dz\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/environnement-skikda.dz\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/environnement-skikda.dz\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/environnement-skikda.dz\/ar\/wp-json\/wp\/v2\/comments?post=3266"}],"version-history":[{"count":10,"href":"https:\/\/environnement-skikda.dz\/ar\/wp-json\/wp\/v2\/pages\/3266\/revisions"}],"predecessor-version":[{"id":3277,"href":"https:\/\/environnement-skikda.dz\/ar\/wp-json\/wp\/v2\/pages\/3266\/revisions\/3277"}],"wp:attachment":[{"href":"https:\/\/environnement-skikda.dz\/ar\/wp-json\/wp\/v2\/media?parent=3266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}