Spaces:
Running
Running
| <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: #6B8E23; | |
| } | |
| .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 & 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'>8 records</p> | |
| </div> | |
| <div class="alert" id="overdueReports"> | |
| <div class="alert-header">Overdue Reports</div> | |
| <p class='alert-count'>6 records</p> | |
| </div> | |
| <div class="alert" id="outstandingTasks"> | |
| <div class="alert-header">Outstanding Tasks</div> | |
| <p class='alert-count'>6 records</p> | |
| </div> | |
| </div> | |
| <div id="popupAlert" class="popup"> | |
| <div class="popup-content"> | |
| <span class="close" onclick="closeAlert()">×</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 & 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 & Radios</a> | |
| <a href="../docs/form-tagsmasks.html" class="nav-sub-link">Tags & 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 & 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 & 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> | |
| <h4 class="main-title mb-0" style="font-size:xx-large;color: rgb(245, 160, 2);font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;font-weight: bold;">ANEKAL PS Performance</h4> | |
| </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">1554 </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">530</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">3.8</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/Anekalbar_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/Anekalpie_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">80%</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">58%</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/Anekallineblue_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>HANUMANTHA BHOVI (ASI)</b></td><td>⭐⭐⭐⭐⭐</td><td>100.0</td><td>1</td><td>Excellent performance with 100% success rate.</td></tr> | |
| <tr><td><b>UMESH S K (Dy.SP)</b></td><td>⭐⭐</td><td>50.0</td><td>2</td><td>Good performance with 50.00% success rate.</td></tr> | |
| <tr><td><b>ARJUN S R GOWDA (PSI)</b></td><td>⭐</td><td>25.862068965517242</td><td>58</td><td>Solid performance with 25.86% success rate.</td></tr> | |
| <tr><td><b>SHANKAR NAIK G. K (PI)</b></td><td>⭐</td><td>25.0</td><td>8</td><td>Solid performance with 25.00% success rate.</td></tr> | |
| <tr><td><b>SRINIVASA C.K (ASI)</b></td><td>⭐</td><td>18.181818181818183</td><td>33</td><td>Solid performance with 18.18% 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/bantwalacompletion_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/map3.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> </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> |