Fixed JS not working because of removed charts

assets/js/app.js

@@ -1,114 +1,72 @@
 $(function () {
-	"use strict";
+    "use strict";
 
-	new PerfectScrollbar(".app-container"),
+    new PerfectScrollbar(".header-notifications-list"),
-		new PerfectScrollbar(".header-message-list"),
-		new PerfectScrollbar(".header-notifications-list"),
 
+    $(".mobile-toggle-icon").on("click", function () {
+        $(".wrapper").toggleClass("toggled")
+    }),
 
-		$(".mobile-toggle-icon").on("click", function () {
+    /* Force Dark Mode */
-			$(".wrapper").toggleClass("toggled")
+    $("html").attr("data-bs-theme", "dark");  // Force dark mode at load time
-		}),
+    $(".dark-mode-icon i").attr("class", "bx bx-sun");  // Set correct icon for dark mode
 
-		/* dark mode button */
+    $(".dark-mode").click(function () {
+        $("html").attr("data-bs-theme", function (i, v) {
+            return v === 'dark' ? 'light' : 'dark';
+        })
+    })
 
-		$(".dark-mode").click(function () {
+    $(".dark-mode").on("click", function () {
-			$("html").attr("data-bs-theme", function (i, v) {
+        if ($(".dark-mode-icon i").attr("class") == 'bx bx-sun') {
-				return v === 'dark' ? 'light' : 'dark';
+            $(".dark-mode-icon i").attr("class", "bx bx-moon");
-			})
+        } else {
-		})
+            $(".dark-mode-icon i").attr("class", "bx bx-sun");
-
+        }
-	$(".dark-mode").on("click", function () {
+    }),
-
-		if ($(".dark-mode-icon i").attr("class") == 'bx bx-sun') {
-			$(".dark-mode-icon i").attr("class", "bx bx-moon");
-		} else {
-			$(".dark-mode-icon i").attr("class", "bx bx-sun");
-		}
-	}),
-
-
-
-		$(".mobile-toggle-menu").click(function () {
-			$(".wrapper").hasClass("toggled") ? ($(".wrapper").removeClass("toggled"), $(".sidebar-wrapper").unbind("hover")) : ($(".wrapper").addClass("toggled"), $(".sidebar-wrapper").hover(function () {
-				$(".wrapper").addClass("sidebar-hovered")
-			}, function () {
-				$(".wrapper").removeClass("sidebar-hovered")
-			}))
-		}),
-
-		// back to top button
-		$(document).ready(function () {
-			$(window).on("scroll", function () {
-				$(this).scrollTop() > 300 ? $(".back-to-top").fadeIn() : $(".back-to-top").fadeOut()
-			}), $(".back-to-top").on("click", function () {
-				return $("html, body").animate({
-					scrollTop: 0
-				}, 600), !1
-			})
-		}),
-
-
-		// menu 
-		$(function () {
-			$("#menu").metisMenu()
-		}),
-
-		// active 
-		$(function () {
-			for (var e = window.location, o = $(".metismenu li a").filter(function () {
-				return this.href == e
-			}).addClass("").parent().addClass("mm-active"); o.is("li");) o = o.parent("").addClass("mm-show").parent("").addClass("mm-active")
-		}),
-
-		// chat process 
-		$(".chat-toggle-btn").on("click", function () {
-			$(".chat-wrapper").toggleClass("chat-toggled")
-		}), $(".chat-toggle-btn-mobile").on("click", function () {
-			$(".chat-wrapper").removeClass("chat-toggled")
-		}),
-
-		// email
-		$(".email-toggle-btn").on("click", function () {
-			$(".email-wrapper").toggleClass("email-toggled")
-		}), $(".email-toggle-btn-mobile").on("click", function () {
-			$(".email-wrapper").removeClass("email-toggled")
-		}), $(".compose-mail-btn").on("click", function () {
-			$(".compose-mail-popup").show()
-		}), $(".compose-mail-close").on("click", function () {
-			$(".compose-mail-popup").hide()
-		}),
-
-
-		/* switcher */
-
-		$("#LightTheme").on("click", function () {
-			$("html").attr("data-bs-theme", "light")
-		}),
-
-		$("#DarkTheme").on("click", function () {
-			$("html").attr("data-bs-theme", "dark")
-		}),
-
-		$("#SemiDarkTheme").on("click", function () {
-			$("html").attr("data-bs-theme", "semi-dark")
-		}),
-
-		$("#BoderedTheme").on("click", function () {
-			$("html").attr("data-bs-theme", "bodered-theme")
-		})
-
-
-	$(".switcher-btn").on("click", function () {
-		$(".switcher-wrapper").toggleClass("switcher-toggled")
-	}), $(".close-switcher").on("click", function () {
-		$(".switcher-wrapper").removeClass("switcher-toggled")
-	})
 
+    $(".mobile-toggle-menu").click(function () {
+        $(".wrapper").hasClass("toggled") ? ($(".wrapper").removeClass("toggled"), $(".sidebar-wrapper").unbind("hover")) : ($(".wrapper").addClass("toggled"), $(".sidebar-wrapper").hover(function () {
+            $(".wrapper").addClass("sidebar-hovered")
+        }, function () {
+            $(".wrapper").removeClass("sidebar-hovered")
+        }))
+    }),
 
+    $(document).ready(function () {
+        $(window).on("scroll", function () {
+            $(this).scrollTop() > 300 ? $(".back-to-top").fadeIn() : $(".back-to-top").fadeOut()
+        }), $(".back-to-top").on("click", function () {
+            return $("html, body").animate({
+                scrollTop: 0
+            }, 600), !1
+        })
+    }),
 
+    $(function () {
+        $("#menu").metisMenu()
+    }),
 
+    $(function () {
+        for (var e = window.location, o = $(".metismenu li a").filter(function () {
+            return this.href == e
+        }).addClass("").parent().addClass("mm-active"); o.is("li");) o = o.parent("").addClass("mm-show").parent("").addClass("mm-active")
+    }),
 
+    $(".chat-toggle-btn").on("click", function () {
+        $(".chat-wrapper").toggleClass("chat-toggled")
+    }), $(".chat-toggle-btn-mobile").on("click", function () {
+        $(".chat-wrapper").removeClass("chat-toggled")
+    }),
 
+    $(".email-toggle-btn").on("click", function () {
+        $(".email-wrapper").toggleClass("email-toggled")
+    }), $(".email-toggle-btn-mobile").on("click", function () {
+        $(".email-wrapper").removeClass("email-toggled")
+    }), $(".compose-mail-btn").on("click", function () {
+        $(".compose-mail-popup").show()
+    }), $(".compose-mail-close").on("click", function () {
+        $(".compose-mail-popup").hide()
+    })
 
 });

assets/js/index.js

@@ -1,7 +1,6 @@
 $(function () {
     "use strict";
 
-
   // chart 1
   var options = {
     series: [{
@@ -335,222 +334,6 @@ $(function () {
 
 
 
-
-  // chart 5
-  var options = {
-    series: [{
-      name: "Total Clicks",
-      data: [44, 30, 55, 44, 90, 45, 75]
-    }],
-    chart: {
-      //width:150,
-      toolbar: {
-        show: !1,
-      },
-      height: 240,
-      type: 'area',
-      sparkline: {
-        enabled: !0
-      },
-      zoom: {
-        enabled: false
-      }
-    },
-    dataLabels: {
-      enabled: false
-    },
-    stroke: {
-      width: 3,
-      curve: 'smooth'
-    },
-    fill: {
-      type: 'gradient',
-      gradient: {
-        shade: 'dark',
-        gradientToColors: ['#fd7e14'],
-        shadeIntensity: 1,
-        type: 'vertical',
-        opacityFrom: 0.5,
-        opacityTo: 0.1
-        //stops: [0, 100, 100, 100]
-      },
-    },
-    colors: ["#fd7e14"],
-    grid: {
-      show: false,
-      borderColor: 'rgba(0, 0, 0, 0.15)',
-      strokeDashArray: 4,
-    },
-    tooltip: {
-      theme: "dark",
-      fixed: {
-        enabled: !1
-      },
-      x: {
-        show: !1
-      },
-      y: {
-        title: {
-          formatter: function (e) {
-            return ""
-          }
-        }
-      },
-      marker: {
-        show: !1
-      }
-    },
-    xaxis: {
-      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
-    }
-  };
-
-  var chart = new ApexCharts(document.querySelector("#chart5"), options);
-  chart.render();
-
-
-
-
-
-
-  // chart 6
-  var options = {
-    series: [{
-      name: "Orders",
-      data: [44, 69, 55, 44, 90, 45, 75, 55, 65, 68, 45, 78, 42, 55, 47, 30, 27]
-    }],
-    chart: {
-      //width:150,
-      toolbar: {
-        show: !1,
-      },
-      height: 180,
-      type: 'bar',
-      sparkline: {
-        enabled: !0
-      },
-      zoom: {
-        enabled: false
-      }
-    },
-    dataLabels: {
-      enabled: false
-    },
-    stroke: {
-      width: 0,
-      curve: 'smooth'
-    },
-    plotOptions: {
-      bar: {
-        horizontal: false,
-        borderRadius: 10,
-        borderRadiusApplication: 'around',
-        borderRadiusWhenStacked: 'last',
-        columnWidth: '40%',
-        endingShape: "rounded"
-      }
-    },
-    fill: {
-      type: 'gradient',
-      gradient: {
-        shade: 'dark',
-        gradientToColors: ['#008cff'],
-        shadeIntensity: 1,
-        type: 'vertical',
-        opacityFrom: 1,
-        opacityTo: 1
-        //stops: [0, 100, 100, 100]
-      },
-    },
-    colors: ["#008cff"],
-    grid: {
-      show: false,
-      borderColor: 'rgba(0, 0, 0, 0.15)',
-      strokeDashArray: 4,
-    },
-    tooltip: {
-      theme: "dark",
-      fixed: {
-        enabled: !1
-      },
-      x: {
-        show: !1
-      },
-      y: {
-        title: {
-          formatter: function (e) {
-            return ""
-          }
-        }
-      },
-      marker: {
-        show: !1
-      }
-    },
-    xaxis: {
-      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
-    }
-  };
-
-  var chart = new ApexCharts(document.querySelector("#chart6"), options);
-  chart.render();
-
-
-
-// chart 7
-var options = {
-  series: [10, 24, 24],
-  chart: {
-      height: 240,
-      type: 'donut',
-  },
-  legend: {
-      position: 'bottom',
-      show: !1
-  },
-  fill: {
-      type: 'gradient',
-      gradient: {
-          shade: 'dark',
-          gradientToColors: ['#ff6a00', '#98ec2d', '#3f51b5'],
-          shadeIntensity: 1,
-          type: 'vertical',
-          opacityFrom: 1,
-          opacityTo: 1,
-          //stops: [0, 100, 100, 100]
-      },
-  },
-  colors: ["#ff6a00", "#98ec2d", "#3f51b5"],
-  dataLabels: {
-      enabled: !1
-  },
-  plotOptions: {
-      pie: {
-          donut: {
-              size: "80%"
-          }
-      }
-  },
-  responsive: [{
-      breakpoint: 480,
-      options: {
-          chart: {
-              height: 250
-          },
-          legend: {
-              position: 'bottom',
-              show: !1
-          }
-      }
-  }]
-};
-
-var chart = new ApexCharts(document.querySelector("#chart7"), options);
-chart.render();
-
-
-
-
  // chart 8
  var options = {
   series: [{

assets/php/db.php

@@ -2,7 +2,7 @@
 $host = '172.16.18.3';
 $db = 'TechOdysseyDashboard';
 $user = 'tod_admin';
-$pass = '';
+$pass = 'QprczJwYor./_.T*';
 
 try {
     $pdo = new PDO("mysql:host=$host;dbname=$db", $user, $pass);

assets/php/login.php

@@ -10,9 +10,11 @@ if ($_SERVER['REQUEST_METHOD'] == 'POST') {
     $stmt->execute([$username]);
     $user = $stmt->fetch();
 
-    if ($user && password_verify($password, $user['password'])) {
+    if ($user && password_verify($password, $user['password']) && !$user['disabled']) {
+        // Store user ID, username, and role in session
         $_SESSION['user_id'] = $user['id'];
         $_SESSION['username'] = $user['username'];
+        $_SESSION['role'] = $user['role'];  // Store user role
         echo 'success';
     } else {
         echo 'Invalid login credentials';

index.php

@@ -1,8 +1,5 @@
-<?php
+<?php include 'assets/php/session_check.php'; ?>
 
-include 'assets/php/session_check.php'; 
-
-?>
 <html lang="en" data-bs-theme="light">
 <head>
 	<!-- Required meta tags -->
@@ -101,8 +98,8 @@ include 'assets/php/session_check.php';
 						<a class="d-flex align-items-center nav-link dropdown-toggle gap-3 dropdown-toggle-nocaret" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 							<img src="assets/images/avatars/avatar-2.png" class="user-img" alt="user avatar">
 							<div class="user-info">
-								<p class="user-name mb-0">Pauline Seitz</p>
+								<p class="user-name mb-0"><?php echo isset($_SESSION['username']) ? htmlspecialchars($_SESSION['username']) : 'Guest'; ?></p>
-								<p class="designattion mb-0">Web Designer</p>
+								<p class="designattion mb-0"><?php echo isset($_SESSION['role']) ? htmlspecialchars($_SESSION['role']) : 'N/A'; ?></p>
 							</div>
 						</a>
 						<ul class="dropdown-menu dropdown-menu-end">