Scribd
Upload
23 views13 pages

Reporting Portal 1

Uploaded by

Adarsh Ranjan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
23 views13 pages

Reporting Portal 1

Uploaded by

Adarsh Ranjan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 13

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Enhanced Dashboard Layout</title>
<!-- Bootstrap CSS -->
<link

href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet"
/>
<!-- FontAwesome Icons -->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/
all.min.css"
rel="stylesheet"
/>
<!-- Select2 CSS -->
<link

href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css"
rel="stylesheet"
/>

<!-- Custom CSS -->


<style>

/* Default Theme */
body {
background-color: #f4f4f4; /* Light background */
color: #000; /* Black text */
transition: background-color 0.3s, color 0.3s;
margin: 0;
}

.sidebar {
background: #c72c41; /* Vibrant reddish color */
color: #fff; /* White text */
}

.header {
background-color: #c72c41; /* Matching sidebar color */
color: #fff; /* White text */
padding: 10px 20px; /* Adjusted padding */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
}

.header .title {
margin: 0;
font-size: 1.5rem;
font-weight: bold;
color: #fff; /* White text color for title */
}
.header .icons {
display: flex;
align-items: center;
gap: 20px; /* Increased space between icons */
}

.header .icons i {
font-size: 1.5rem; /* Adjust icon size */
}

.card {
background: #fff; /* White background for cards */
color: #000; /* Black text */
border: none;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
min-height: 200px; /* Ensures all cards are the same height */
display: flex;
flex-direction: column;
justify-content: center;
border-radius: 8px;
}

.card:hover {
transform: translateY(-10px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.icon-large {
font-size: 2.5rem;
margin-bottom: 15px;
}

.section-title {
margin-bottom: 30px;
font-weight: bold;
font-size: 1.75rem;
color: #c72c41; /* Matching sidebar color */
}

.card h5 {
font-size: 1.2rem;
font-weight: 500;
}

/* Dark Theme */
body.dark-theme {
background-color: #121212; /* Darker background */
color: #e0e0e0; /* Lighter text color for contrast */
}

body.dark-theme .sidebar {
background: #1f1f1f; /* Slightly lighter dark background */
color: #e0e0e0; /* Light text color */
}

body.dark-theme .header {
background-color: #1f1f1f; /* Matching sidebar color */
color: #e0e0e0; /* Light text color */
}

body.dark-theme .card {
background: #2c2c2c; /* Dark card background */
color: #e0e0e0; /* Light card text color */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Enhanced shadow */
}

body.dark-theme .card h5 {
color: #f5f5f5; /* Slightly lighter text for card headings */
}

body.dark-theme .section-title {
color: #e74c3c; /* Light red for section titles */
}

/* Sidebar styling */
.sidebar {
height: 100vh;
padding: 20px;
position: fixed;
left: -250px;
top: 0;
width: 250px;
transition: all 0.3s ease;
z-index: 9999; /* Ensures it is above the content */
box-shadow: 4px 0 8px rgba(0, 0, 0, 0.3); /* Stronger shadow effect */
}

.sidebar.open {
left: 0;
}

.sidebar .close-btn {
position: absolute;
top: 15px;
right: 15px;
font-size: 1.5rem;
cursor: pointer;
}

.filter-pane {
position: fixed;
top: 0; /* Start from the top */
right: -300px; /* Hidden by default */
width: 300px; /* Adjust width as needed */
height: 100%; /* Full height of the viewport */
background: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
padding: 20px;
transition: right 0.3s ease;
z-index: 10000; /* Ensure it is above other elements */
}

.filter-pane.open {
right: 0; /* Show the filter pane */
}

.filter-pane .close-btn {
position: absolute;
top: 15px;
right: 15px;
font-size: 1.5rem;
cursor: pointer;
color: #c72c41; /* Match the theme color */
}

.content {
transition: margin-left 0.3s ease;
padding: 20px;
z-index: 1; /* Below the sidebar */
}

.profile-img {
width: 120px;
height: 120px;
border-radius: 50%;
border: 4px solid #fff;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
margin-bottom: 15px;
}

.quick-links a {
color: #fff; /* White text in sidebar */
text-decoration: none;
display: block;
margin-bottom: 10px;
font-size: 1rem;
}

.quick-links a:hover {
text-decoration: underline;
color: #f5a623; /* Light orange for contrast */
}

/* Header Styling */
header {
padding: 15px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

header i {
cursor: pointer;
}

.sidebar .menu-heading {
font-weight: bold;
font-size: 1.2rem;
margin-bottom: 20px;
}

/* Iframe Container */
.iframe-container {
display: none; /* Hidden initially */
width: 100%;
height: calc(100vh - 60px); /* Full height minus header */
margin: 0; /* Space for the header */
padding: 0;
}
.iframe-container iframe {
width: 100%;
height: 100%;
border: none;
}

/* Media Query for Responsiveness */


@media (max-width: 768px) {
.content {
margin: 0;
padding: 10px;
}

.sidebar {
width: 200px;
}

.content.open {
margin-left: 0;
}
}
</style>
</head>
<body>
<!-- Header -->
<header class="header">
<i class="fas fa-bars fa-lg" id="menu-toggle"></i>
<h1 class="title">MAQ Reporting Portal</h1>
<div class="icons">
<i class="fas fa-home fa-lg" id="home-icon" style="display: none;"></i>
<i class="fas fa-filter fa-lg" id="filter-icon"></i>
<i class="fas fa-bookmark fa-lg" id="bookmark-icon"></i>
<i class="fas fa-sun fa-lg" id="theme-toggle"></i>
</div>
</header>

<!-- Filter Pane -->


<div class="filter-pane" id="filter-pane">
<h5>Filters</h5>
<span class="close-btn" id="close-filter-btn">&times;</span> <!-- Close Icon -->
<div class="form-group">
<label for="supervisorName">Supervisor</label>
<select class="form-control" id="supervisorName">
<option value="">Select Supervisor</option>
</select>
</div>

<!-- Manager Filter -->


<div class="form-group">
<label for="managerName">Project Manager</label>
<select class="form-control" id="managerName">
<option value="">Select Manager</option>
</select>
</div>

<!-- Manager Filter -->


<div class="form-group">
<label for="employeeName">Employee Name</label>
<select class="form-control" id="employeeName">
<option value="">Select Employee</option>
</select>
</div>
<button class="btn btn-primary" id="clear-filters">Clear Filters</button>
</div>

<div class="container-fluid">
<div class="row">
<!-- Sidebar Section -->
<nav class="sidebar" id="sidebar">
<!-- Close Button -->
<span class="close-btn" id="close-btn">&times;</span>
<div class="text-center">
<img
src="https://via.placeholder.com/120"
alt="Profile Picture"
class="profile-img"
/>
<h4>Chirag</h4>
<p>Software Engineer 2</p>
</div>
<div class="quick-links mt-4">
<div class="menu-heading">Quick Links</div>
<a href="#">MySpace</a>
<a href="#">Learning Portal</a>
<a href="#">Project Review Tracker</a>
</div>
</nav>

<!-- Main Dashboard Section -->


<main class="col content" id="main-content">
<!-- Learnings Section -->
<section class="mt-4">
<h2 class="section-title">Learnings</h2>
<div class="row">
<div class="col-md-3 col-sm-6 mb-4">
<div class="card text-center p-4" id="learning-card">
<i class="fas fa-lightbulb icon-large text-warning"></i>
<h5>Learning Tracker Dashboard</h5>
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="card text-center p-4" id="bootcamp-card">
<i class="fas fa-chalkboard-teacher icon-large text-primary"></i>
<h5>Extended Bootcamp</h5>
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="card text-center p-4" id="study-card">
<i class="fas fa-users icon-large text-success"></i>
<h5>Study Group</h5>
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="card text-center p-4" id="WLH_card">
<i class="fas fa-laptop-code icon-large text-info"></i>
<h5>WLH/Other Trainings</h5>
</div>
</div>
</div>
</section>

<!-- Project Reviews & Configuration Section -->


<section class="mb-5">
<h2 class="section-title">Project Reviews & Configuration</h2>
<div class="row">
<div class="col-md-3 col-sm-6 mb-4">
<div class="card text-center p-4">
<i class="fas fa-code icon-large text-danger"></i>
<h5>Code Review Dashboard</h5>
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="card text-center p-4">
<i class="fas fa-comments icon-large text-warning"></i>
<h5>Project Review Dashboard</h5>
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="card text-center p-4">
<i class="fas fa-user-cog icon-large text-primary"></i>
<h5>Functional Area Contribution</h5>
</div>
</div>
<div class="col-md-3 col-sm-6 mb-4">
<div class="card text-center p-4">
<i class="fas fa-check-circle icon-large text-success"></i>
<h5>Hygiene Dashboard</h5>
</div>
</div>
</div>
</section>

<!-- Hiring & Marketing Section -->


<section class="mb-5">
<h2 class="section-title">Hiring & Marketing</h2>
<div class="row">
<div class="col-md-6 col-sm-12 mb-4">
<div class="card text-center p-4">
<i class="fas fa-handshake icon-large text-primary"></i>
<h5>Recruitment Contribution Report</h5>
</div>
</div>
<div class="col-md-6 col-sm-12 mb-4">
<div class="card text-center p-4">
<i class="fas fa-podium icon-large text-warning"></i>
<h5>Training Contribution Report</h5>
</div>
</div>
</div>
</section>

<!-- Iframe Container -->


<div class="iframe-container" id="iframe-container">
<iframe src="https://app.powerbi.com/reportEmbed?reportId=a8c77877-
2cc9-428f-97fa-0447ea6b0e1c&autoAuth=true&ctid=e4d98dd2-9199-42e5-ba8b-
da3e763ede2e" title="Power BI Report"></iframe>
</div>
</main>
</div>
</div>

<!-- Bootstrap JS, Popper.js, and jQuery -->


<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></
script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></
script>
<script
src="https://cdn.jsdelivr.net/npm/powerbi-client@2.13.1/dist/powerbi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/powerbi-client/2.18.1/
powerbi.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></
script>

<!-- Custom JS for Sidebar and Theme Toggle -->


<script>
document
.getElementById("menu-toggle")
.addEventListener("click", function () {
document.getElementById("sidebar").classList.toggle("open");
document.getElementById("main-content").classList.toggle("open");
});

document
.getElementById("close-btn")
.addEventListener("click", function () {
document.getElementById("sidebar").classList.remove("open");
document.getElementById("main-content").classList.remove("open");
});

document
.getElementById("theme-toggle")
.addEventListener("click", function () {
document.body.classList.toggle("dark-theme");
this.classList.toggle("fa-sun");
this.classList.toggle("fa-moon");
});
$(document).ready(function () {
// Initialize Select2 on each dropdown
$('#supervisorName').select2({
placeholder: "Select Supervisor",
allowClear: true
});

$('#managerName').select2({
placeholder: "Select Manager",
allowClear: true
});

$('#employeeName').select2({
placeholder: "Select Employee",
allowClear: true
});

// Toggle sidebar
$("#menu-toggle").click(function () {
$("#sidebar").toggleClass("open");
$(".content").toggleClass("open");
});

// Close sidebar
$("#close-btn").click(function () {
$("#sidebar").removeClass("open");
$(".content").removeClass("open");
});

// Toggle filter pane


$("#filter-icon").click(function () {
$("#filter-pane").toggleClass("open");
});

// Function to show the home icon when a report is opened


function showHomeIcon() {
$("#home-icon").show();
}

// Function to hide the home icon


function hideHomeIcon() {
$("#home-icon").hide();
}

// Show the iframe container and home icon when a card is clicked (open report)
$("#learning-card").click(function () {
$("#iframe-container").show(); // Show the iframe
showHomeIcon(); // Show home icon
});

// Navigate to the homepage when the home icon is clicked


$("#home-icon").click(function () {
window.location.href = "index.html"; // Assuming your homepage is index.html
});

// Example: Hide iframe and home icon on page load (if no report is open)
$(window).on("load", function () {
$("#iframe-container").hide(); // Initially hide the iframe
hideHomeIcon(); // Initially hide the home icon
});

// Close filter pane when clicking outside


$(document).click(function (e) {
if (!$(e.target).closest("#filter-pane, #filter-icon").length) {
$("#filter-pane").removeClass("open");
}
});

});

// Close filter pane using the close button


$("#close-filter-btn").click(function () {
$("#filter-pane").removeClass("open");
});

// Clear filters functionality


$("#clear-filters").click(function () {
$("#managerName").val(""); // Clear the Manager Name filter
$("#employeeName").val(""); // Clear the Employee Name filter
$("#supervisorName").val(""); // Clear the Supervisor Name filter
});

// Function to update the Power BI report with filters


function updateReport() {
const supervisor = document.getElementById("supervisorName").value;
const manager = document.getElementById("managerName").value; // Get the
selected manager value
const employee = document.getElementById("employeeName").value; // Get the
selected employee value
let filterQuery = '';

if (supervisor) {
// Ensure to encode the column name properly for the supervisor
filterQuery += `&$filter=EmployeesMaster/Supervisor eq '$
{encodeURIComponent(supervisor)}'`;
}

if (manager) {
// Ensure to encode the column name properly for the manager
if (filterQuery) {
filterQuery += ` and `; // Use 'and' if there's already a supervisor
filter
} else {
filterQuery += `&$filter=`; // Start filter query if it’s empty
}
filterQuery += `EmployeesMaster/Manager eq '$
{encodeURIComponent(manager)}'`; // Add manager filter
}

if (employee) {
// Ensure to encode the column name properly for the employee
if (filterQuery) {
filterQuery += ` and `; // Use 'and' if there are already filters
} else {
filterQuery += `&$filter=`; // Start filter query if it’s empty
}
filterQuery += `EmployeesMaster/EmployeeName eq '$
{encodeURIComponent(employee)}'`; // Add employee filter
}

const baseUrl = "https://app.powerbi.com/reportEmbed?reportId=a8c77877-2cc9-


428f-97fa-0447ea6b0e1c&autoAuth=true&ctid=e4d98dd2-9199-42e5-ba8b-da3e763ede2e";
const fullUrl = baseUrl + filterQuery;

// Update the iframe src with the new URL


const iframe = document.querySelector("#iframe-container iframe");
iframe.src = fullUrl;
}

// Trigger the updateReport function whenever the filters are changed


document.getElementById("supervisorName").addEventListener("change", function () {
updateReport(); // Update the report with the selected supervisor filter
});

document.getElementById("managerName").addEventListener("change", function () {
updateReport(); // Update the report with the selected manager filter
});

document.getElementById("employeeName").addEventListener("change", function () {
updateReport(); // Update the report with the selected employee filter
});

// When the "Learning Tracker Dashboard" card is clicked, ensure that the report is
displayed with the current filter
document.getElementById("learning-card").addEventListener("click", function () {
document.getElementById("iframe-container").style.display = "block";

// Hide all cards


document.querySelectorAll(".card").forEach((card) => {
card.style.display = "none";
});

// Hide all section titles


document.querySelectorAll(".section-title").forEach((title) => {
title.style.display = "none";
});

// Adjust main content layout


const mainContent = document.getElementById("main-content");
mainContent.style.padding = "0";
mainContent.style.width = "100%";
mainContent.style.display = "flex";

// Call the updateReport function to apply the current filter to the report
updateReport();
});

// Fetch the list of supervisors from the backend and populate the dropdown
function fetchSupervisors() {
fetch('http://localhost:3000/api/supervisors') // Update with your server's URL
if deployed
.then(response => response.json())
.then(data => {
const supervisorDropdown = document.getElementById('supervisorName');

// Clear existing options


supervisorDropdown.innerHTML = '<option value="">Select Supervisor</option>';

// Populate the dropdown with fetched supervisor data


data.forEach(supervisor => {
const option = document.createElement('option');
option.value = supervisor.Supervisor;
option.textContent = supervisor.Supervisor;
supervisorDropdown.appendChild(option);
});
})
.catch(err => {
console.error('Error fetching supervisors:', err);
});
}

// Fetch the list of managers from the backend and populate the dropdown
function fetchManagers() {
fetch('http://localhost:3000/api/managers') // Update with your server's URL if
deployed
.then(response => response.json())
.then(data => {
const managerDropdown = document.getElementById('managerName');

// Clear existing options


managerDropdown.innerHTML = '<option value="">Select Manager</option>';

// Populate the dropdown with fetched manager data


data.forEach(manager => {
const option = document.createElement('option');
option.value = manager.Manager;
option.textContent = manager.Manager;
managerDropdown.appendChild(option);
});
})
.catch(err => {
console.error('Error fetching managers:', err);
});
}

// Fetch the list of employee names from the backend and populate the dropdown
function fetchEmployeeNames() {
fetch('http://localhost:3000/api/employeename') // Update with your server's URL
if deployed
.then(response => response.json())
.then(data => {
const employeeDropdown = document.getElementById('employeeName'); // Ensure
you have an element with this ID

// Clear existing options


employeeDropdown.innerHTML = '<option value="">Select Employee</option>';

// Populate the dropdown with fetched employee data


data.forEach(employee => {
const option = document.createElement('option');
option.value = employee.EmployeeName; // Use the correct property from your
data
option.textContent = employee.EmployeeName; // Use the correct property
from your data
employeeDropdown.appendChild(option);
});
})
.catch(err => {
console.error('Error fetching employee names:', err);
});
}

// Call the functions when the page is loaded


document.addEventListener('DOMContentLoaded', () => {
fetchSupervisors(); // Fetch and populate the Supervisor dropdown
fetchManagers(); // Fetch and populate the Manager dropdown
fetchEmployeeNames(); // Fetch and populate the employee names
});
</script>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy