ILearnDemo/admin_payroll.html at main · nkath99/ILearnDemo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html>
<head>
    <title>Admin - Payroll</title>
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
      /* Dollar animation effect */
      .dollar-animation {
          position: absolute;
          font-size: 2em;
          color: green;
          animation: fadeOut 2s forwards;
          pointer-events: none;
      }
      @keyframes fadeOut {
          0% { opacity: 1; }
          100% { opacity: 0; }
      }
      /* Blue effect for deduction */
      .blue-effect {
          background-color: blue !important;
          color: white;
      }
    </style>
</head>
<body>
    <!-- Admin-specific Navbar -->
    <nav class="navbar navbar-expand-md navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="admin.html">Admin Dashboard</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#adminNavbar" aria-controls="adminNavbar" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="adminNavbar">
           <ul class="navbar-nav me-auto">
             <li class="nav-item">
               <a class="nav-link" href="admin_teachers.html">Teachers List</a>
             </li>
             <li class="nav-item">
               <a class="nav-link active" href="admin_payroll.html">Payroll</a>
             </li>
             <li class="nav-item">
               <a class="nav-link" href="admin_hello.html">Hello Admin</a>
             </li>
           </ul>
           <button class="btn btn-outline-secondary" onclick="confirmLogout();">Logout</button>
        </div>
      </div>
    </nav>

    <!-- Toast container -->
    <div aria-live="polite" aria-atomic="true" class="position-relative">
      <div id="toastContainer" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
    </div>

    <div class="container mt-4">
        <h1>Payroll</h1>
        <table class="table table-bordered" id="payrollTable">
          <thead>
            <tr>
              <th>Teacher Name</th>
              <th>Base Salary</th>
              <th>Bonus</th>
              <th>Total</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <!-- Rows will be populated by JavaScript -->
          </tbody>
        </table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      function confirmLogout(e) {
          if(confirm("Are you sure you want to logout?")) {
              localStorage.removeItem("isLoggedIn");
              window.location.href = "index.html";
          } else {
              if(e) e.preventDefault();
              return false;
          }
      }


      function getTeachersData() {
          let data = localStorage.getItem("teachersData");
          return data ? JSON.parse(data) : [];
      }

      function saveTeachersData(data) {
          localStorage.setItem("teachersData", JSON.stringify(data));
      }


      function renderPayrollTable() {
          let teachers = getTeachersData();
          let tbody = document.querySelector("#payrollTable tbody");
          tbody.innerHTML = "";
          teachers.forEach((teacher, index) => {
              let total = teacher.baseSalary + teacher.bonus;
              let row = document.createElement("tr");
              row.innerHTML = `
                  <td>${teacher.name}</td>
                  <td>$${teacher.baseSalary}</td>
                  <td>$${teacher.bonus}</td>
                  <td>$${total}</td>
                  <td>
                      <button class="btn btn-sm btn-success me-1" onclick="increaseSalary(${index}, this)">Increase Salary</button>
                      <button class="btn btn-sm btn-primary" onclick="deductPay(${index}, this)">Deduct Pay</button>
                  </td>
              `;
              tbody.appendChild(row);
          });
      }

      // Increase salary: adds $100 to baseSalary and shows a dollar animation.
      function increaseSalary(index, btn) {
          let teachers = getTeachersData();
          teachers[index].baseSalary += 100;
          saveTeachersData(teachers);
          renderPayrollTable();
          let dollarDiv = document.createElement("div");
          dollarDiv.className = "dollar-animation";
          dollarDiv.innerHTML = "$$$";
          let rect = btn.getBoundingClientRect();
          dollarDiv.style.left = rect.left + "px";
          dollarDiv.style.top = (rect.top - 30) + "px";
          document.body.appendChild(dollarDiv);
          setTimeout(() => { dollarDiv.remove(); }, 2000);
      }

      // Deduct pay: subtracts $100 from baseSalary and adds a blue effect to the row.
      function deductPay(index, btn) {
          let teachers = getTeachersData();
          teachers[index].baseSalary = Math.max(0, teachers[index].baseSalary - 100);
          saveTeachersData(teachers);
          let row = btn.closest("tr");
          row.classList.add("blue-effect");
          setTimeout(() => { row.classList.remove("blue-effect"); }, 2000);
          renderPayrollTable();
      }

      window.addEventListener("load", function() {
          renderPayrollTable();
      });
    </script>
</body>
</html>