Hugging Face's logo

Spaces:
Arjunadhithya
/
creep
Running

App Files Community
creep / html /helpdesk1.html
Arjunadhithya's picture
Arjunadhithya
Upload 162 files
8e11898 verified
raw
history blame contribute delete
68.9 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Meta -->
<meta name="description" content="">
<meta name="author" content="Themepixels">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="../assets/img/favicon.png">
<title>PARMD</title>
<!-- Vendor CSS -->
<link rel="stylesheet" href="../lib/remixicon/fonts/remixicon.css">
<link rel="stylesheet" href="../lib/apexcharts/apexcharts.css">
<!-- Template CSS -->
<link rel="stylesheet" href="../assets/css/style.min.css">
<style>
.container {
width: 80%;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
transition: all 0.5s ease-in-out;
}
.alert {
background-color: #05d9ff;
border: 2px solid #35f5e8;
border-radius: 8px;
padding: 10px;
margin-bottom: 20px;
font-size: 18px;
font-family:Georgia, 'Times New Roman', Times, serif;
color: #0a0900;
transition: background-color 0.3s, opacity 0.5s, transform 0.5s;
opacity: 0;
transform: translateY(20px);
}
.alert:hover {
background-color: #a5a59d;
}
.alert-header {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.alert-count {
font-size: 22px;
font-weight: bold;
}
.fade-in {
opacity: 1;
transform: translateY(0);
}
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
justify-content: center;
align-items: center;
}
.popup-content {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
.close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="sidebar">
<div class="sidebar-header">
<!-- <a href="../" class="sidebar-logo">PERFORMANCE DASHBOARD.</a> -->
<img src="../assets/img/logo.png" alt="Your Image" class="fixed-image">
</div>
<!-- sidebar-header -->
<div id="sidebarMenu" class="sidebar-body">
<div class="nav-group show">
<a href="#" class="nav-label">PERFORMANCE DASHBOARD</a>
<!-- <ul class="nav nav-sidebar"> -->
<!-- <li class="nav-item">
<a href="../dashboard/finance.html" class="nav-link"><i class="ri-pie-chart-2-line"></i> <span>Finance Monitoring</span></a>
</li>
<li class="nav-item">
<a href="../dashboard/events.html" class="nav-link"><i class="ri-calendar-todo-line"></i> <span>Events Management</span></a>
</li>
<li class="nav-item">
<a href="../dashboard/sales.html" class="nav-link"><i class="ri-shopping-bag-3-line"></i> <span>Sales Monitoring</span></a>
</li>
<li class="nav-item">
<a href="../dashboard/analytics.html" class="nav-link"><i class="ri-bar-chart-2-line"></i> <span>Website Analytics</span></a>
</li>
<li class="nav-item">
<a href="../dashboard/crypto.html" class="nav-link"><i class="ri-coin-line"></i> <span>Cryptocurrency</span></a>
</li>
<li class="nav-item">
<a href="../dashboard/helpdesk.html" class="nav-link active"><i class="ri-service-fill"></i> <span>Helpdesk Service</span></a>
</li> -->
<!-- <li class="nav-item">
<a href="../dashboard/storage.html" class="nav-link"><i class="ri-hard-drive-2-line"></i> <span>Selected Unit</span></a> -->
<!-- </li>
<li class="nav-item">
<a href="../dashboard/product.html" class="nav-link"><i class="ri-suitcase-2-line"></i> <span>Product Management</span></a>
</li> -->
<!-- </ul> -->
</div>
<!-- nav-group -->
<!-- <div class="nav-group show">
<a href="#" class="nav-label">Applications</a>
<ul class="nav nav-sidebar">
<li class="nav-item">
<a href="../apps/file-manager.html" class="nav-link"><i class="ri-folder-2-line"></i> <span>File Manager</span></a>
</li>
<li class="nav-item">
<a href="../apps/email.html" class="nav-link"><i class="ri-mail-send-line"></i> <span>Email</span></a>
</li>
<li class="nav-item">
<a href="../apps/calendar.html" class="nav-link"><i class="ri-calendar-line"></i> <span>Calendar</span></a>
</li>
<li class="nav-item">
<a href="../apps/chat.html" class="nav-link"><i class="ri-question-answer-line"></i> <span>Chat</span></a>
</li>
<li class="nav-item">
<a href="../apps/contact.html" class="nav-link"><i class="ri-contacts-book-line"></i> <span>Contacts</span></a>
</li>
<li class="nav-item">
<a href="../apps/tasks.html" class="nav-link"><i class="ri-checkbox-multiple-line"></i> <span>Task Manager</span></a>
</li>
<li class="nav-item">
<a href="" class="nav-link has-sub"><i class="ri-gallery-line"></i> <span>Media Gallery</span></a>
<nav class="nav nav-sub">
<a href="../apps/gallery-music.html" class="nav-sub-link">Music Stream</a>
<a href="../apps/gallery-video.html" class="nav-sub-link">Video Stream</a>
</nav>
</li>
</ul>
</div> -->
<!-- nav-group -->
<div class="nav-group show">
<a href="#" class="nav-label">Pages</a>
<ul class="nav nav-sidebar">
<li class="nav-item">
<a href="" class="nav-link"><span>User Pags</span></a>
<!-- <nav class="nav nav-sub">
<a href="../pages/profile.html" class="nav-sub-link">User Profile</a>
<a href="../pages/people.html" class="nav-sub-link">People &amp; Groups</a>
<a href="../pages/activity.html" class="nav-sub-link">Activity Log</a>
<a href="../pages/events.html" class="nav-sub-link">Events</a>
<a href="../pages/settings.html" class="nav-sub-link">Settings</a>
</nav> -->
</li>
<li class="nav-item">
<a href="../alert.html" class="nav-link"><span>Authentication</span></a>
<!-- <nav class="nav nav-sub">
<a href="../pages/sign-in.html" class="nav-sub-link">Sign In Basic</a>
<a href="../pages/sign-in-2.html" class="nav-sub-link">Sign In Cover</a>
<a href="../pages/sign-up.html" class="nav-sub-link">Sign Up Basic</a>
<a href="../pages/sign-up-2.html" class="nav-sub-link">Sign Up Cover</a>
<a href="../pages/verify-account.html" class="nav-sub-link">Verify Account</a>
<a href="../pages/forgot-password.html" class="nav-sub-link">Forgot Password</a>
<a href="../pages/lock-screen.html" class="nav-sub-link">Lock Screen</a>
</nav> -->
</li>
<li class="nav-item">
<a href="../index.html" class="nav-link"><span>Home Page</span></a>
<!-- <nav class="nav nav-sub">
<a href="../pages/error-404.html" class="nav-sub-link">Page Not Found</a>
<a href="../pages/error-500.html" class="nav-sub-link">Internal Server Error</a>
<a href="../pages/error-503.html" class="nav-sub-link">Service Unavailable</a>
<a href="../pages/error-505.html" class="nav-sub-link">Forbidden</a>
</nav> -->
</li>
<li class="nav-item">
<a href="#" class="nav-link" onclick="showAlerts()" style="font-weight: bold; font-size:xx-large; color: gold;"><span>ALERTS </span></a>
</li>
</ul>
</div>
<div id="containerAlerts" class="container" style="display:none;">
<div class="alert" id="pendingInvestigations">
<div class="alert-header">Pending Investigations</div>
<p class='alert-count'>10 records</p>
</div>
<div class="alert" id="overdueReports">
<div class="alert-header">Overdue Reports</div>
<p class='alert-count'>5 records</p>
</div>
<div class="alert" id="outstandingTasks">
<div class="alert-header">Outstanding Tasks</div>
<p class='alert-count'>8 records</p>
</div>
</div>
<div id="popupAlert" class="popup">
<div class="popup-content">
<span class="close" onclick="closeAlert()">&times;</span>
<div id="alertContent"></div>
</div>
</div>
<script>
function showAlerts() {
var containerAlerts = document.getElementById("containerAlerts");
containerAlerts.style.display = "flex";
}
function closeAlert() {
var containerAlerts = document.getElementById("containerAlerts");
containerAlerts.style.display = "none";
}
document.addEventListener('DOMContentLoaded', function() {
var alerts = document.querySelectorAll('.alert');
function animateAlerts() {
alerts.forEach(function(alert, index) {
setTimeout(function() {
alert.classList.add('fade-in');
}, index * 300);
});
}
animateAlerts();
var alertButton = document.getElementById('alertButton');
alertButton.addEventListener('click', function() {
var alertContent = `
<div class="alert">
<div class="alert-header">Custom Alert</div>
<p>This is a custom alert!</p>
</div>
`;
var container = document.querySelector('.container');
container.insertAdjacentHTML('beforeend', alertContent);
alerts = document.querySelectorAll('.alert');
animateAlerts();
});
});
</script>
<!-- nav-group -->
<!-- <div class="nav-group show mb-3">
<a href="#" class="nav-label">UI Elements</a>
<ul class="nav nav-sidebar">
<li class="nav-item">
<a href="" class="nav-link has-sub"><i class="ri-pencil-ruler-2-line"></i> <span>Getting Started</span></a>
<nav class="nav nav-sub">
<a href="../docs/layout-grid.html" class="nav-sub-link">Grid System</a>
<a href="../docs/layout-columns.html" class="nav-sub-link">Columns</a>
<a href="../docs/layout-gutters.html" class="nav-sub-link">Gutters</a>
</nav>
</li>
<li class="nav-item">
<a href="" class="nav-link has-sub"><i class="ri-suitcase-line"></i> <span>Components</span></a>
<nav class="nav nav-sub">
<a href="../docs/com-accordion.html" class="nav-sub-link">Accordion</a>
<a href="../docs/com-alerts.html" class="nav-sub-link">Alerts</a>
<a href="../docs/com-avatars.html" class="nav-sub-link">Avatars</a>
<a href="../docs/com-badge.html" class="nav-sub-link">Badge</a>
<a href="../docs/com-breadcrumbs.html" class="nav-sub-link">Breadcrumbs</a>
<a href="../docs/com-buttons.html" class="nav-sub-link">Buttons</a>
<a href="../docs/com-cards.html" class="nav-sub-link">Cards</a>
<a href="../docs/com-carousel.html" class="nav-sub-link">Carousel</a>
<a href="../docs/com-collapse.html" class="nav-sub-link">Collapse</a>
<a href="../docs/com-dropdown.html" class="nav-sub-link">Dropdown</a>
<a href="../docs/com-images.html" class="nav-sub-link">Images</a>
<a href="../docs/com-listgroup.html" class="nav-sub-link">List Group</a>
<a href="../docs/com-markers.html" class="nav-sub-link">Markers</a>
<a href="../docs/com-modal.html" class="nav-sub-link">Modal</a>
<a href="../docs/com-navtabs.html" class="nav-sub-link">Navs &amp; Tabs</a>
<a href="../docs/com-offcanvas.html" class="nav-sub-link">Offcanvas</a>
<a href="../docs/com-pagination.html" class="nav-sub-link">Pagination</a>
<a href="../docs/com-placeholders.html" class="nav-sub-link">Placeholders</a>
<a href="../docs/com-popovers.html" class="nav-sub-link">Popovers</a>
<a href="../docs/com-progress.html" class="nav-sub-link">Progress</a>
<a href="../docs/com-scrollspy.html" class="nav-sub-link">Scrollspy</a>
<a href="../docs/com-spinners.html" class="nav-sub-link">Spinners</a>
<a href="../docs/com-toasts.html" class="nav-sub-link">Toasts</a>
<a href="../docs/com-tooltips.html" class="nav-sub-link">Tooltips</a>
<a href="../docs/com-tables.html" class="nav-sub-link">Tables</a>
</nav>
</li>
<li class="nav-item">
<a href="" class="nav-link has-sub"><i class="ri-list-check-2"></i> <span>Forms</span></a>
<nav class="nav nav-sub">
<a href="../docs/form-elements.html" class="nav-sub-link">Text Elements</a>
<a href="../docs/form-selects.html" class="nav-sub-link">Selects</a>
<a href="../docs/form-checksradios.html" class="nav-sub-link">Checks &amp; Radios</a>
<a href="../docs/form-tagsmasks.html" class="nav-sub-link">Tags &amp; Masks</a>
<a href="../docs/form-range.html" class="nav-sub-link">Range</a>
<a href="../docs/form-pickers.html" class="nav-sub-link">Pickers</a>
<a href="../docs/form-wizards.html" class="nav-sub-link">Wizards</a>
<a href="../docs/form-layouts.html" class="nav-sub-link">Layouts</a>
<a href="../docs/form-validation.html" class="nav-sub-link">Validation</a>
<a href="../docs/form-editors.html" class="nav-sub-link">Editors</a>
</nav>
</li>
<li class="nav-item">
<a href="" class="nav-link has-sub"><i class="ri-bar-chart-2-line"></i> <span>Charts &amp; Graphs</span></a>
<nav class="nav nav-sub">
<a href="../docs/chart-flot.html" class="nav-sub-link">Flot</a>
<a href="../docs/chart-apex.html" class="nav-sub-link">Apexcharts</a>
<a href="../docs/chart-chartjs.html" class="nav-sub-link">Chartjs</a>
<a href="../docs/chart-peity.html" class="nav-sub-link">Peity</a>
<a href="../docs/chart-morris.html" class="nav-sub-link">Morris</a>
</nav>
</li>
<li class="nav-item">
<a href="" class="nav-link has-sub"><i class="ri-stack-line"></i> <span>Maps &amp; Icons</span></a>
<nav class="nav nav-sub">
<a href="../docs/map-leaflet.html" class="nav-sub-link">Leaflet Maps</a>
<a href="../docs/map-vector.html" class="nav-sub-link">Vector Maps</a>
<a href="../docs/icon-remix.html" class="nav-sub-link">Remixicon</a>
<a href="../docs/icon-feather.html" class="nav-sub-link">Feathericons</a>
</nav>
</li>
<li class="nav-item">
<a href="" class="nav-link has-sub"><i class="ri-briefcase-4-line"></i> <span>Utilities</span></a>
<nav class="nav nav-sub">
<a href="../docs/util-animation.html" class="nav-sub-link">Animation</a>
<a href="../docs/util-background.html" class="nav-sub-link">Background</a>
<a href="../docs/util-border.html" class="nav-sub-link">Border</a>
<a href="../docs/util-colors.html" class="nav-sub-link">Colors</a>
<a href="../docs/util-divider.html" class="nav-sub-link">Divider</a>
<a href="../docs/util-flex.html" class="nav-sub-link">Flex</a>
<a href="../docs/util-sizing.html" class="nav-sub-link">Sizing</a>
<a href="../docs/util-spacing.html" class="nav-sub-link">Spacing</a>
<a href="../docs/util-opacity.html" class="nav-sub-link">Opacity</a>
<a href="../docs/util-position.html" class="nav-sub-link">Position</a>
<a href="../docs/util-typography.html" class="nav-sub-link">Typography</a>
<a href="../docs/util-shadows.html" class="nav-sub-link">Shadows</a>
<a href="../docs/util-extras.html" class="nav-sub-link">Extras</a>
</nav>
</li>
</ul>
</div> -->
<!-- nav-group -->
</div>
<!-- sidebar-body -->
<!-- <div class="sidebar-footer">
<div class="sidebar-footer-top">
<div class="sidebar-footer-thumb">
<img src="../assets/img/img1.jpg" alt="">
</div> -->
<!-- sidebar-footer-thumb -->
<!-- <div class="sidebar-footer-body">
<h6><a href="../pages/profile.html">Shaira Diaz</a></h6>
<p>Premium Member</p>
</div> -->
<!-- sidebar-footer-body -->
<!-- <a id="sidebarFooterMenu" href="" class="dropdown-link"><i class="ri-arrow-down-s-line"></i></a>
</div> -->
<!-- sidebar-footer-top -->
<!-- <div class="sidebar-footer-menu">
<nav class="nav">
<a href=""><i class="ri-edit-2-line"></i> Edit Profile</a>
<a href=""><i class="ri-profile-line"></i> View Profile</a>
</nav>
<hr>
<nav class="nav">
<a href=""><i class="ri-question-line"></i> Help Center</a>
<a href=""><i class="ri-lock-line"></i> Privacy Settings</a>
<a href=""><i class="ri-user-settings-line"></i> Account Settings</a>
<a href=""><i class="ri-logout-box-r-line"></i> Log Out</a>
</nav>
</div> -->
<!-- sidebar-footer-menu -->
<!-- </div> -->
<!-- sidebar-footer -->
</div>
<!-- sidebar -->
<!-- <div class="header-main px-3 px-lg-4">
<a id="menuSidebar" href="#" class="menu-link me-3 me-lg-4"><i class="ri-menu-2-fill"></i></a>
<div class="form-search me-auto">
<input type="text" class="form-control" placeholder="Search">
<i class="ri-search-line"></i>
</div> -->
<!-- form-search -->
<div class="dropdown dropdown-skin">
<a href="" class="dropdown-link" data-bs-toggle="dropdown" data-bs-auto-close="outside"><i class="ri-settings-3-line"></i></a>
<div class="dropdown-menu dropdown-menu-end mt-10-f">
<label>Skin Mode</label>
<nav id="skinMode" class="nav nav-skin">
<a href="" class="nav-link active">Light</a>
<a href="" class="nav-link">Dark</a>
</nav>
<hr>
<label>Sidebar Skin</label>
<nav id="sidebarSkin" class="nav nav-skin">
<a href="" class="nav-link active">Default</a>
<a href="" class="nav-link">Prime</a>
<a href="" class="nav-link">Dark</a>
</nav>
<hr>
<!-- <label>Direction</label>
<nav id="layoutDirection" class="nav nav-skin">
<a href="" class="nav-link active">LTR</a>
<a href="" class="nav-link">RTL</a>
</nav> -->
</div>
<!-- dropdown-menu -->
</div>
<!-- dropdown -->
<!-- <div class="dropdown dropdown-notification ms-3 ms-xl-4">
<a href="" class="dropdown-link" data-bs-toggle="dropdown" data-bs-auto-close="outside"><small>3</small><i class="ri-notification-3-line"></i></a>
<div class="dropdown-menu dropdown-menu-end mt-10-f me--10-f">
<div class="dropdown-menu-header">
<h6 class="dropdown-menu-title">Notifications</h6>
</div> -->
<!-- dropdown-menu-header -->
<!-- <ul class="list-group">
<li class="list-group-item">
<div class="avatar online"><img src="../assets/img/img10.jpg" alt=""></div>
<div class="list-group-body">
<p><strong>Dominador Manuel</strong> and <strong>100 other people</strong> reacted to your comment "Tell your partner that...</p>
<span>Aug 20 08:55am</span>
</div> -->
<!-- list-group-body -->
<!-- </li>
<li class="list-group-item">
<div class="avatar online"><img src="../assets/img/img11.jpg" alt=""></div>
<div class="list-group-body">
<p><strong>Angela Ighot</strong> tagged you and <strong>9 others</strong> in a post.</p>
<span>Aug 18 10:30am</span>
</div> -->
<!-- list-group-body -->
<!-- </li>
<li class="list-group-item">
<div class="avatar"><span class="avatar-initial bg-primary">a</span></div>
<div class="list-group-body">
<p>New listings were added that match your search alert <strong>house for rent</strong></p>
<span>Aug 15 08:10pm</span>
</div> -->
<!-- list-group-body -->
<!-- </li>
<li class="list-group-item">
<div class="avatar online"><img src="../assets/img/img14.jpg" alt=""></div>
<div class="list-group-body">
<p>Reminder: <strong>Jerry Cuares</strong> invited you to like <strong>Cuares Surveying Services</strong>. <br><a href="">Accept</a> or <a href="">Decline</a></p>
<span>Aug 14 11:50pm</span>
</div> -->
<!-- list-group-body -->
<!-- </li>
<li class="list-group-item">
<div class="avatar online"><img src="../assets/img/img15.jpg" alt=""></div>
<div class="list-group-body">
<p><strong>Dyanne Aceron</strong> reacted to your post <strong>King of the Bed</strong>.</p>
<span>Aug 10 05:30am</span>
</div> -->
<!-- list-group-body -->
<!-- </li>
</ul>
<div class="dropdown-menu-footer"><a href="">Show all Notifications</a></div>
</div> -->
<!-- dropdown-menu -->
<!-- </div> -->
<!-- dropdown -->
<!-- <div class="dropdown dropdown-profile ms-3 ms-xl-4">
<a href="" class="dropdown-link" data-bs-toggle="dropdown" data-bs-auto-close="outside">
<div class="avatar online"><img src="../assets/img/img1.jpg" alt=""></div>
</a>
<div class="dropdown-menu dropdown-menu-end mt-10-f">
<div class="dropdown-menu-body">
<div class="avatar avatar-xl online mb-3"><img src="../assets/img/img1.jpg" alt=""></div>
<h5 class="mb-1 text-dark fw-semibold">Shaira Diaz</h5>
<p class="fs-sm text-secondary">Premium Member</p>
<nav class="nav">
<a href=""><i class="ri-edit-2-line"></i> Edit Profile</a>
<a href=""><i class="ri-profile-line"></i> View Profile</a>
</nav>
<hr>
<nav class="nav">
<a href=""><i class="ri-question-line"></i> Help Center</a>
<a href=""><i class="ri-lock-line"></i> Privacy Settings</a>
<a href=""><i class="ri-user-settings-line"></i> Account Settings</a>
<a href=""><i class="ri-logout-box-r-line"></i> Log Out</a>
</nav>
</div> -->
<!-- dropdown-menu-body -->
<!-- </div> -->
<!-- dropdown-menu -->
<!-- </div> -->
<!-- dropdown -->
<!-- </div> -->
<!-- header-main -->
<div class="main main-app p-3 p-lg-4">
<div class="d-md-flex align-items-center justify-content-between mb-4">
<div>
<ol class="breadcrumb fs-sm mb-1">
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Unit</li>
</ol>
<center><h4 class="main-title mb-0" style="font-size:xx-large;color: rgb(112, 210, 217);font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;font-weight: bold;">BAGALKOT Rural PS Performance</h4></center>
</div>
<!-- <div class="d-flex align-items-center gap-2 mt-3 mt-md-0">
<button type="button" class="btn btn-white btn-icon"><i class="ri-share-line fs-18 lh-1"></i></button>
<button type="button" class="btn btn-white btn-icon"><i class="ri-printer-line fs-18 lh-1"></i></button>
<button type="button" class="btn btn-primary btn-icon"><i class="ri-bar-chart-2-line fs-18 lh-1"></i></button>
</div> -->
</div>
<div class="row g-3">
<div class="col-sm-4">
<div class="card card-one">
<div class="card-body p-3">
<div class="d-flex d-sm-block d-xl-flex align-items-center">
<div class="helpdesk-icon bg-primary text-white"><img src="/assets/img/handcuffs.png" alt="Star Image" class="fixed-image"></i></div>
<div class="ms-3 ms-sm-0 ms-xl-3 mt-sm-3 mt-xl-0">
<h2 class="card-value d-flex align-items-baseline mb-0">1680 </h2>
<label class="card-label fs-sm fw-medium mb-1">Total FIR Filed</label>
<!-- <div class="mutual-badge">
<ul>
<li><a href="" class="avatar"><img src="../assets/img/img10.jpg" alt=""></a></li>
<li><a href="" class="avatar"><img src="../assets/img/img11.jpg" alt=""></a></li>
<li><a href="" class="avatar"><img src="../assets/img/img9.jpg" alt=""></a></li>
<li><a href="" class="avatar"><img src="../assets/img/img8.jpg" alt=""></a></li>
</ul>
<label>8 support agents</label>
</div> -->
</div>
</div>
</div>
<!-- card-body -->
</div>
<!-- card -->
</div>
<!-- col -->
<div class="col-sm-4">
<div class="card card-one">
<div class="card-body p-3">
<div class="d-flex d-sm-block d-xl-flex align-items-center">
<div class="helpdesk-icon bg-ui-02 text-white"><img src="/assets/img/check.webp" alt="Star Image" class="fixed-image"></i></div>
<div class="ms-3 ms-sm-0 ms-xl-3 mt-sm-3 mt-xl-0">
<h2 class="card-value d-flex align-items-baseline mb-0">650</h2>
<label class="card-label fs-sm fw-medium mb-1">Solved Cases</label>
<!-- <div class="mutual-badge">
<ul>
<li><a href="" class="avatar"><img src="../assets/img/img15.jpg" alt=""></a></li>
<li><a href="" class="avatar"><img src="../assets/img/img16.jpg" alt=""></a></li>
<li><a href="" class="avatar"><img src="../assets/img/img17.jpg" alt=""></a></li>
<li><a href="" class="avatar"><img src="../assets/img/img18.jpg" alt=""></a></li>
</ul>
<label>5 support agents</label>
</div> -->
</div>
</div>
</div>
<!-- card-body -->
</div>
<!-- card -->
</div>
<!-- col -->
<div class="col-sm-4">
<div class="card card-one">
<div class="card-body p-3">
<div class="d-flex d-sm-block d-xl-flex align-items-center">
<div class="helpdesk-icon bg-ui-03 text-white"><img src="/assets/img/star_icon.png" alt="Star Image" class="fixed-image"></div>
<div class="ms-3 ms-sm-0 ms-xl-3 mt-sm-3 mt-xl-0">
<h2 class="card-value d-flex align-items-baseline mb-0">4.0</h2>
<label class="card-label fs-sm fw-medium mb-1">Overview of Unit</label>
<!-- <div class="mutual-badge">
<ul>
<li><a href="" class="avatar"><img src="../assets/img/img7.jpg" alt=""></a></li>
<li><a href="" class="avatar"><img src="../assets/img/img8.jpg" alt=""></a></li>
<li><a href="" class="avatar"><img src="../assets/img/img9.jpg" alt=""></a></li>
<li><a href="" class="avatar"><img src="../assets/img/img10.jpg" alt=""></a></li>
</ul>
<label>9 support agents</label>
</div> -->
</div>
</div>
</div>
<!-- card-body -->
</div>
<!-- card -->
</div>
<!-- col -->
<div class="col-md-7 col-xl-8">
<div class="card card-one">
<div class="card-header">
<!-- <h6 class="card-title">Place of Offence</h6> -->
<div class="card-body">
<!-- Insert the interactive HTML file using an iframe -->
<iframe src="/chart/bar_case1.html" width="100%" height="500px" frameborder="0"></iframe>
</div>
</div>
<!-- card-header -->
<!-- card-body -->
</div>
<!-- card -->
</div>
<!-- col -->
<div class="col-md-5 col-xl-4">
<div class="card card-one overflow-hidden">
<div class="card-header">
<h6 class="card-title">Complaints Received</h6>
<nav class="nav nav-icon nav-icon-sm ms-auto">
<a href="" class="nav-link"><i class="ri-refresh-line"></i></a>
<a href="" class="nav-link"><i class="ri-more-2-fill"></i></a>
</nav>
</div>
<!-- card-header -->
<div class="card-body p-0">
<!-- <div class="position-absolute p-4">
<h1 class="card-value d-flex align-items-baseline mb-0">MAP</h1>
<iframe src="pie_dark.html" width="100%" height="400px" frameborder="0"></iframe>
</div> -->
<iframe src="/chart/pie_dark4.html" width="100%" height="400px" frameborder="0"></iframe>
<!-- <div id="apexChart1"></div> -->
</div>
<!-- card-body -->
</div>
<!-- card -->
</div>
<!-- col -->
<div class="col-md-6">
<div class="card card-one">
<div class="card-body p-3">
<div class="row g-3 row-cols-auto align-items-center">
<div class="col">
<div class="apex-donut-one">
<div id="chartDonut1"></div>
<div>
<h4 class="ff-numerals text-dark mb-0">86%</h4>
<span class="fs-xs text-secondary">Reached</span>
</div>
</div>
</div>
<div class="col-6 col-xl-7">
<h2 class="card-value mb-3">Response Time</h2>
<h6 class="card-label text-dark fw-semibold mb-1">Time to Transmit Response</h6>
<p class="fs-sm text-secondary mb-0">The average time taken to response to complaint.</p>
</div>
</div>
<!-- row -->
</div>
<!-- card-body -->
</div>
<!-- card -->
</div>
<!-- col -->
<div class="col-md-6">
<div class="card card-one">
<div class="card-body p-3">
<div class="row g-3 row-cols-auto align-items-center">
<div class="col">
<div class="apex-donut-one">
<div id="chartDonut2"></div>
<div>
<h4 class="ff-numerals text-dark mb-0">68%</h4>
<span class="fs-xs text-secondary">Reached</span>
</div>
</div>
</div>
<div class="col-6 col-xl-7">
<h2 class="card-value mb-3">Clearance Rate</h2>
<h6 class="card-label text-dark fw-semibold mb-1">Average Percent of Crime Cleared</h6>
<p class="fs-sm text-secondary mb-0">The average reported crimes that resulted in arrest or closure.</p>
</div>
</div>
<!-- row -->
</div>
<!-- card-body -->
</div>
<!-- card -->
</div>
<!-- col -->
<div class="col-xl-5">
<div class="card card-one">
<div class="card-header">
<!-- <h6 class="card-title">Tickets By Request Type</h6>
<nav class="nav nav-icon nav-icon-sm ms-auto">
<a href="" class="nav-link"><i class="ri-refresh-line"></i></a>
<a href="" class="nav-link"><i class="ri-more-2-fill"></i></a>
</nav> -->
<iframe src="/chart/lineblue_blue17.html" width="100%" height="400px" frameborder="0"></iframe>
</div>
<!-- card-header -->
<!-- <div class="card-body">
<div class="chartjs-two"><canvas id="chartJS2"></canvas></div>
<iframe src="bar_blue.html" width="100%" height="400px" frameborder="0"></iframe>
</div> -->
<!-- card-body -->
</div>
<!-- card -->
</div>
<!-- col -->
<div class="col-sm-6 col-xl">
<div class="card card-one">
<div class="card-header">
<!-- <h6 class="card-title">Overall Rating</h6> -->
<!-- <nav class="nav nav-icon nav-icon-sm ms-auto">
<a href="" class="nav-link"><i class="ri-refresh-line"></i></a>
<a href="" class="nav-link"><i class="ri-more-2-fill"></i></a>
</nav> -->
<!-- <iframe src="fir_dark.html" width="100%" height="400px" frameborder="0"></iframe> -->
<!-- <iframe src="io1.html" width="100%" height="400px" frameborder="0"></iframe> -->
<table style='border-collapse: collapse;'>
<tr><th>IO Name</th><th>Success Rate</th><th>Closed Reports</th><th>Total Reports</th><th>Description</th></tr>
<tr><td><b>K D Hadagali (HC)</b></td><td>⭐⭐⭐⭐⭐</td><td>11</td><td>11</td><td>Excellent performance with 100% success rate.</td></tr>
<tr><td><b>R.B.GOUDAR (ASI)</b></td><td>⭐⭐⭐⭐⭐</td><td>1</td><td>1</td><td>Great performance with 100% success rate.</td></tr>
<tr><td><b>S.P.TORAT (HC)</b></td><td>⭐⭐⭐⭐</td><td>13</td><td>14</td><td>Impressive performance with 92.86% success rate.</td></tr>
<tr><td><b>P.S.DANDINNAVAR (HC)</b></td><td>⭐⭐⭐⭐</td><td>14</td><td>17</td><td>Good performance with 82.35% success rate.</td></tr>
<tr><td><b>U.S.RADDER (HC)</b></td><td>⭐⭐⭐⭐</td><td>27</td><td>33</td><td>Solid performance with 81.82% success rate.</td></tr>
</table>
</div>
<!-- card-header -->
<!-- <div class="card-body">
<div class="d-flex align-items-baseline gap-2 mb-0">
<h1 class="card-value mb-0">4.8</h1>
<div class="d-flex gap-1 text-warning fs-20">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-half-fill"></i>
</div>
</div>
<p class="fs-sm">Measures the quality or your support team’s efforts.</p>
<table class="table table-ratings mb-0">
<tbody>
<tr>
<td><strong>5.0</strong></td>
<td>
<div class="d-flex gap-1 text-warning fs-16">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
</div>
</td>
<td>4,230</td>
<td>58%</td>
</tr>
<tr>
<td><strong>4.0</strong></td>
<td>
<div class="d-flex gap-1 text-warning fs-16">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-line"></i>
</div>
</td>
<td>1,416</td>
<td>24%</td>
</tr>
<tr>
<td><strong>3.0</strong></td>
<td>
<div class="d-flex gap-1 text-warning fs-16">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</div>
</td>
<td>980</td>
<td>16%</td>
</tr>
<tr>
<td><strong>2.0</strong></td>
<td>
<div class="d-flex gap-1 text-warning fs-16">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</div>
</td>
<td>798</td>
<td>12%</td>
</tr>
<tr>
<td><strong>1.0</strong></td>
<td>
<div class="d-flex gap-1 text-warning fs-16">
<i class="ri-star-fill"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</div>
</td>
<td>401</td>
<td>8%</td>
</tr>
</tbody>
</table> -->
<!-- </div> -->
<!-- card-body -->
</div>
<!-- card -->
</div>
<!-- col -->
<div class="col-sm-6 col-xl">
<div class="card card-one">
<!-- <div class="card-header">
<h6 class="card-title">Performance Score</h6>
<nav class="nav nav-icon nav-icon-sm ms-auto">
<a href="" class="nav-link"><i class="ri-refresh-line"></i></a>
<a href="" class="nav-link"><i class="ri-more-2-fill"></i></a>
</nav>
</div> -->
<!-- card-header -->
<div class="card-body">
<iframe src="/chart/completion_blue12.html" width="100%" height="400px" frameborder="0"></iframe>
<!-- <div class="d-flex align-items-baseline gap-2 mb-0">
<h1 class="card-value mb-0">9.6</h1>
<div class="progress flex-fill ht-5">
<div class="progress-bar w-20" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-success w-15" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-warning w-15" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-info w-20" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
<div class="progress-bar bg-danger w-10" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<p class="fs-sm">The percentage value assigned to the operating metric.</p>
<table class="table table-ratings mb-0">
<tbody>
<tr>
<td><span class="badge-dot bg-primary"></span></td>
<td><strong>Excellent</strong></td>
<td>3,007</td>
<td>50%</td>
</tr>
<tr>
<td><span class="badge-dot bg-success"></span></td>
<td><strong>Very Good</strong></td>
<td>1,674</td>
<td>25%</td>
</tr>
<tr>
<td><span class="badge-dot bg-warning"></span></td>
<td><strong>Good</strong></td>
<td>125</td>
<td>6%</td>
</tr>
<tr>
<td><span class="badge-dot bg-info"></span></td>
<td><strong>Fair</strong></td>
<td>98</td>
<td>5%</td>
</tr>
<tr>
<td><span class="badge-dot bg-danger"></span></td>
<td><strong>Poor</strong></td>
<td>512</td>
<td>10%</td>
</tr>
</tbody>
</table> -->
</div>
<!-- card-body -->
</div>
<!-- card -->
</div>
<!-- col -->
<div class="col-12">
<div class="card card-one">
<div class="card-header">
<h6 class="card-title">Crime Hotspots</h6>
<nav class="nav nav-icon nav-icon-sm ms-auto">
<a href="" class="nav-link"><i class="ri-refresh-line"></i></a>
<a href="" class="nav-link"><i class="ri-more-2-fill"></i></a>
</nav>
</div>
<!-- card-header -->
<div class="card-body">
<iframe src="/chart/map_loc.html" width="100%" height="500px" frameborder="0"></iframe>
<!-- <div id="apexChart2" class="apex-chart-four mb-5"></div>
<div class="table-responsive">
<table class="table table-agent mb-0">
<thead>
<tr>
<th>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="ck0">
<label class="form-check-label" for="ck0"></label>
</div>
</th>
<th>Agent ID</th>
<th>Agent Name</th>
<th>Status</th>
<th>Quota</th>
<th>Reached</th>
<th>Progress</th>
<th>Rating</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="ck1">
<label class="form-check-label" for="ck1"></label>
</div>
</td>
<td><span class="ff-numerals">00035</span></td>
<td>
<div class="d-flex align-items-center gap-2">
<div class="avatar"><img src="../assets/img/img6.jpg" alt=""></div>
<div>
<h6 class="mb-0">Allan R. Palban</h6>
<span class="fs-xs text-secondary">[email protected]</span>
</div>
</div>
</td>
<td><span class="badge bg-success">Active</span></td>
<td><span class="ff-numerals">120</span></td>
<td><span class="ff-numerals">64</span></td>
<td>
<div class="progress ht-5 mb-0">
<div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
<div class="d-flex gap-1 text-warning">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-half-fill"></i>
<i class="ri-star-line"></i>
</div>
</td>
<td>
<div class="d-flex justify-content-end"><a href="" class="link-more"><i class="ri-more-2-fill"></i></a></div>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="ck2">
<label class="form-check-label" for="ck2"></label>
</div>
</td>
<td><span class="ff-numerals">00028</span></td>
<td>
<div class="d-flex align-items-center gap-2">
<div class="avatar"><img src="../assets/img/img8.jpg" alt=""></div>
<div>
<h6 class="card-label mb-0">Charlene S. Plateros</h6>
<span class="fs-xs text-secondary">[email protected]</span>
</div>
</div>
</td>
<td><span class="badge bg-info">Away</span></td>
<td><span class="ff-numerals">100</span></td>
<td><span class="ff-numerals">79</span></td>
<td>
<div class="progress ht-5 mb-0">
<div class="progress-bar w-70" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
<div class="d-flex gap-1 text-warning">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-line"></i>
</div>
</td>
<td>
<div class="d-flex justify-content-end"><a href="" class="link-more"><i class="ri-more-2-fill"></i></a></div>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="ck3">
<label class="form-check-label" for="ck3"></label>
</div>
</td>
<td><span class="ff-numerals">00025</span></td>
<td>
<div class="d-flex align-items-center gap-2">
<div class="avatar"><img src="../assets/img/img10.jpg" alt=""></div>
<div>
<h6 class="mb-0">Adrian M. Monino</h6>
<span class="fs-xs text-secondary">[email protected]</span>
</div>
</div>
</td>
<td><span class="badge bg-success">Active</span></td>
<td><span class="ff-numerals">130</span></td>
<td><span class="ff-numerals">108</span></td>
<td>
<div class="progress ht-5 mb-0">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
<div class="d-flex gap-1 text-warning">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-line"></i>
<i class="ri-star-line"></i>
</div>
</td>
<td>
<div class="d-flex justify-content-end"><a href="" class="link-more"><i class="ri-more-2-fill"></i></a></div>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="ck4">
<label class="form-check-label" for="ck4"></label>
</div>
</td>
<td><span class="ff-numerals">00024</span></td>
<td>
<div class="d-flex align-items-center gap-2">
<div class="avatar"><img src="../assets/img/img11.jpg" alt=""></div>
<div>
<h6 class="card-label mb-0">Marianne B. Audrey</h6>
<span class="fs-xs text-secondary">[email protected]</span>
</div>
</div>
</td>
<td><span class="badge bg-warning">Pending</span></td>
<td><span class="ff-numerals">110</span></td>
<td><span class="ff-numerals">45</span></td>
<td>
<div class="progress ht-5 mb-0">
<div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
<div class="d-flex gap-1 text-warning">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-line"></i>
</div>
</td>
<td>
<div class="d-flex justify-content-end"><a href="" class="link-more"><i class="ri-more-2-fill"></i></a></div>
</td>
</tr>
<tr>
<td>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="ck5">
<label class="form-check-label" for="ck5"></label>
</div>
</td>
<td><span class="ff-numerals">00023</span></td>
<td>
<div class="d-flex align-items-center gap-2">
<div class="avatar"><img src="../assets/img/img12.jpg" alt=""></div>
<div>
<h6 class="mb-0">Carlyn Y. Salomon</h6>
<span class="fs-xs text-secondary">[email protected]</span>
</div>
</div>
</td>
<td><span class="badge bg-secondary">Inactive</span></td>
<td><span class="ff-numerals">120</span></td>
<td><span class="ff-numerals">32</span></td>
<td>
<div class="progress ht-5 mb-0">
<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</td>
<td>
<div class="d-flex gap-1 text-warning">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-half-fill"></i>
<i class="ri-star-line"></i>
</div>
</td>
<td>
<div class="d-flex justify-content-end"><a href="" class="link-more"><i class="ri-more-2-fill"></i></a></div>
</td>
</tr>
</tbody>
</table>
</div> -->
<!-- table-responsive -->
</div>
<!-- card-body -->
</div>
<!-- card -->
</div>
<!-- col -->
</div>
<!-- row -->
<!-- main-footer -->
</div>
<!-- main -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var alertButton = document.getElementById('alertButton');
alertButton.addEventListener('click', function(event) {
event.preventDefault(); // Prevent default link behavior
// Your code to show custom alert here
var alertContent = `
<div class="alert">
<div class="alert-header">Custom Alert</div>
<p>This is a custom alert!</p>
</div>
`;
var container = document.querySelector('.container');
container.insertAdjacentHTML('beforeend', alertContent);
animateAlerts(); // Assuming animateAlerts function is defined
});
});
// Function to animate alerts
function animateAlerts() {
var alerts = document.querySelectorAll('.alert');
alerts.forEach(function(alert, index) {
setTimeout(function() {
alert.classList.add('fade-in');
}, index * 300);
});
}
</script>
<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../lib/perfect-scrollbar/perfect-scrollbar.min.js"></script>
<script src="../lib/chart.js/chart.min.js"></script>
<script src="../lib/apexcharts/apexcharts.min.js"></script>
<script src="../assets/js/script.js"></script>
<script src="../assets/js/db.data.js"></script>
<script src="../assets/js/db.helpdesk.js"></script>
</body>
</html>