Files
fln-ui/index.html
2026-02-11 03:27:31 +07:00

1028 lines
61 KiB
HTML

<!--
* © 2025-2026 Skoci Admin
* Designed and Developed by Abimanyu
* Contact : abimanyuag12@gmail.com
* All Rights Reserved
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="view-transition" content="same-origin">
<title>Skoci Admin | Dashboard</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="static/vendor/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet" href="static/vendor/bootstrap-icons/bootstrap-icons.css">
<!-- Icons -->
<link rel="stylesheet" href="static/vendor/tabler-icons/tabler-icons.css">
<link rel="stylesheet" href="static/vendor/micons/micons.css">
<link rel="stylesheet" href="static/vendor/mdi/materialdesignicons.min.css">
<link rel="stylesheet" href="static/vendor/remixicon/remixicon.css">
<link rel="stylesheet" href="static/vendor/coreui-icons/free.css">
<link rel="stylesheet" href="static/vendor/coreui-icons/brand.css">
<link rel="stylesheet" href="static/vendor/coreui-icons/flag.css">
<!-- Chart.js Add-ons -->
<script src="static/vendor/chartjs/chart.min.js"></script>
<script src="static/vendor/chartjs/chartjs-plugin-datalabels.min.js"></script>
<script src="static/vendor/chartjs/chartjs-plugin-doughnutlabel-rebourne.min.js"></script>
<script src="static/vendor/jquery/jquery.min.js"></script>
</head>
<body>
<div id="bz-preloader">
<div class="bz-spinner"></div>
</div>
<!-- topbar-right -->
<div class="topbar-right">
<a href="index.html" class="text-decoration-none">
<div class="d-flex align-items-center gap-2">
<img src="static/images/logo.png" alt="logo-icon">
<div class="d-flex flex-column">
<h5 class="mb-0 fw-bold text-light text-uppercase">
Skoci
</h5>
</div>
</div>
</a>
<button id="toggleSidebarRight" class="btn btn-sm toggle-btn">
<i class="ri-arrow-left-s-line chevron"></i>
</button>
</div>
<!-- sidebar-right -->
<div class="sidebar-right">
<ul class="nav flex-column">
<li class="sidebar-title">
<span>Overview</span>
</li>
<li class="nav-item">
<a href="index.html" class="nav-link active" data-tooltip="Dashboard">
<i class="ri-apps-line"></i>
<span class="text-wrapper">
<span class="text-inner">Dashboard</span>
</span>
</a>
</li>
<li class="sidebar-title">
<span>Menu</span>
</li>
<li class="nav-item">
<a href="basic-form.html" class="nav-link" data-tooltip="Form">
<i class="ri-layout-5-line"></i>
<span class="text-wrapper">
<span class="text-inner">Forms</span>
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center"
data-bs-toggle="collapse"
href="#menuTables"
role="button"
aria-expanded="false"
aria-controls="menuTables">
<i class="ri-table-line"></i>
<span class="text-inner">Tables</span>
<i class="bi bi-chevron-right ms-auto"></i>
</a>
<div class="collapse" id="menuTables">
<ul class="nav flex-column">
<li class="nav-item">
<a href="table1.html" class="nav-link">
DataTables
</a>
</li>
<li class="nav-item">
<a href="table2.html" class="nav-link">
Bootstrap-Table
</a>
</li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link d-flex align-items-center"
data-bs-toggle="collapse"
href="#menuPages"
role="button"
aria-expanded="false"
aria-controls="menuPages">
<i class="cil-notes"></i>
<span class="text-inner">Pages</span>
<i class="bi bi-chevron-right ms-auto"></i>
</a>
<div class="collapse" id="menuPages">
<ul class="nav flex-column">
<li class="nav-item">
<a href="login.html" class="nav-link">
Login
</a>
</li>
<li class="nav-item">
<a href="404.html" class="nav-link">
404 Page
</a>
</li>
<li class="nav-item">
<a href="403.html" class="nav-link">
403 Page
</a>
</li>
<li class="nav-item">
<a href="blank-page.html" class="nav-link">
Blank Page
</a>
</li>
</ul>
</div>
</li>
<li class="sidebar-title">
<span>UI Elements</span>
</li>
<li class="nav-item">
<a href="alert.html" class="nav-link" data-tooltip="Alert">
<i class="cil-bell"></i>
<span class="text-wrapper">
<span class="text-inner">Alerts</span>
</span>
</a>
</li>
</ul>
</div>
<!-- topbar-main -->
<div class="topbar-main">
<div class="d-flex align-items-center gap-3" style="height: 79px;">
<img class="d-lg-none" src="static/images/logo.png" alt="logo-icon">
<button id="mobileToogle" class="btn btn-topbar d-lg-none d-flex align-items-center justify-content-center">
<i class="ti ti-align-left"></i>
</button>
<div class="vr d-lg-none"></div>
<h5 class="fw-bold mb-0 text-uppercase fs-6 d-flex align-items-center">
Overview
</h5>
</div>
<div class="d-flex align-items-center gap-3">
<div class="position-relative search-form">
<input type="text" class="form-control" placeholder="Search for results...">
<i class="icon-search search-icon position-absolute top-50 end-0 translate-middle-y me-2"></i>
</div>
<div class="vr d-none d-lg-block"></div>
<!-- Cart -->
<button class="btn position-relative p-0 btn-topbar" type="button" data-bs-toggle="offcanvas" data-bs-target="#cartOffcanvas" aria-controls="messagesSidebar">
<i class="cil-cart"></i>
<span class="position-absolute translate-middle badge rounded-pill bg-danger d-flex align-items-center justify-content-center">
4
</span>
</button>
<!-- Notifikasi -->
<button class="btn position-relative p-0 btn-topbar border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#notificationOffcanvas" aria-controls="notificationOffcanvas">
<i class="cil-bell"></i>
<span class="position-absolute translate-middle badge rounded-pill bg-danger d-flex align-items-center justify-content-center">
2
</span>
</button>
<div class="vr"></div>
<!-- User Profile -->
<button
class="btn btn-link text-secondary text-decoration-none d-flex align-items-center gap-3 p-0"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#profileOffcanvas"
aria-controls="profileOffcanvas"
>
<img src="static/images/profile.png" alt="Profile Avatar" class="image-profile rounded-circle border border-2">
<div class="d-lg-flex align-items-center gap-1 d-none">
<div class="d-flex flex-column align-items-start lh-sm">
<div class="fw-bold" style="font-size: 1rem;">Admin</div>
<div class="text-muted small opacity-75">Superuser</div>
</div>
<!-- <i class="ti ti-chevron-down align-middle"></i> -->
</div>
</button>
</div>
</div>
<!-- topbar-secondary -->
<div class="topbar-secondary d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center">
<a href="javascript:history.back()" class="btn-back d-none d-lg-block">
<i class="ri-arrow-left-double-line"></i>
</a>
<div class="vr mx-3 d-none d-lg-block"></div>
<h5 class="fw-medium mb-0 text-light">Dashboard</h5>
</div>
</div>
<!-- main-content -->
<div class="main-content">
<div class="container-fluid py-4">
<div class="row mt-2">
<div class="col-6 col-md-3 mb-4">
<div class="card shadow-sm border-0 h-100">
<div class="card-body p-3">
<div class="mb-2">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">Total Bin Locations</span>
<h3 class="mb-0 fw-bold lh-1">1157</h3>
</div>
<div class="mb-2">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">selection</span>
<p class="mb-0 text-muted small">1154</p>
</div>
<div class="mb-2">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">reserve</span>
<p class="mb-0 text-muted small">3</p>
</div>
<div class="mt-auto pt-3 border-top">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">Last Update System</span>
<p class="mb-0 text-muted small"><i class="bi bi-clock-history text-muted me-1"></i>1&nbsp;day ago</p>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-3 mb-4">
<div class="card shadow-sm border-0 h-100">
<div class="card-body p-3">
<div class="mb-2">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">Total Parts</span>
<h3 class="mb-0 fw-bold lh-1">1152</h3>
</div>
<div class="mb-2">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">active</span>
<p class="mb-0 text-muted small">1152</p>
</div>
<div class="mb-2">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">blocked</span>
<p class="mb-0 text-muted small">0</p>
</div>
<div class="mt-auto pt-3 border-top">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">Last Update System</span>
<p class="mb-0 text-muted small"><i class="bi bi-clock-history text-muted me-1"></i>1&nbsp;week ago</p>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-3 mb-4">
<div class="card shadow-sm border-0 h-100">
<div class="card-body p-3">
<div class="mb-2">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">Total Parts in Cart</span>
<h3 class="mb-0 fw-bold lh-1">2</h3>
</div>
<div class="mt-auto pt-3 border-top">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">Last Update System</span>
<p class="mb-0 text-muted small"><i class="bi bi-clock-history text-muted me-1"></i>8&nbsp;minutes ago</p>
</div>
</div>
</div>
</div>
<div class="col-6 col-md-3 mb-4">
<div class="card shadow-sm border-0 h-100">
<div class="card-body p-3">
<div class="mb-2">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">Total Pending Stock Opname</span>
<h3 class="mb-0 fw-bold lh-1">3</h3>
</div>
<div class="mt-auto pt-3 border-top">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">Last Update System</span>
<p class="mb-0 text-muted small"><i class="bi bi-clock-history text-muted me-1"></i>4&nbsp;days ago</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-md-3 mb-4">
<div class="card shadow-sm border-0 h-100">
<div class="card-body p-3">
<div class="row">
<div class="col-12">
<div class="mb-2">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">Total Selection Bin Locations</span>
</div>
<div class="mb-4 p-2 bg-light rounded-3 shadow-sm border">
<div class="row g-0 align-items-center">
<div class="col-12 mb-2">
<canvas id="myDonutChartFirst" width="327" height="200" style="display: block; box-sizing: border-box; height: 200px; width: 327px;"></canvas>
</div>
<div class="col-12 px-2 pb-2">
<div class="text-uppercase text-muted fw-bold mb-1" style="font-size: 0.65rem; letter-spacing: 0.05em;">Selection Summary</div>
<hr class="mt-0 mb-2 opacity-25">
<div class="row">
<div class="col-6 mb-1">
<div class="text-xs text-dark fw-semibold">
Used
</div>
<div class="text-muted">1003</div>
</div>
<div class="col-6 mb-1">
<div class="text-xs text-dark fw-semibold">
Held
</div>
<div class="text-muted">1</div>
</div>
<div class="col-6 mb-1">
<div class="text-xs text-dark fw-semibold">
Free
</div>
<div class="text-muted">150</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-auto pt-3 border-top">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">Last Update System</span>
<div class="d-flex align-items-center mt-1">
<p class="mb-0 text-muted small fw-semibold"><i class="bi bi-clock-history text-muted me-1"></i>1&nbsp;week ago</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-3 mb-4">
<div class="card shadow-sm border-0 h-100">
<div class="card-body p-3">
<div class="row">
<div class="col-12">
<div class="mb-2">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">Total Reserve Bin Locations</span>
</div>
<div class="mb-4 p-2 bg-light rounded-3 shadow-sm border">
<div class="row g-0 align-items-center">
<div class="col-12 mb-2">
<canvas id="myDonutChartSecond" width="327" height="200" style="display: block; box-sizing: border-box; height: 200px; width: 327px;"></canvas>
</div>
<div class="col-12 px-2 pb-2">
<div class="text-uppercase text-muted fw-bold mb-1" style="font-size: 0.65rem; letter-spacing: 0.05em;">Reserve Summary</div>
<hr class="mt-0 mb-2 opacity-25">
<div class="row">
<div class="col-6 mb-1">
<div class="text-xs text-dark fw-semibold">
Used
</div>
<div class="text-muted">2</div>
</div>
<div class="col-6 mb-1">
<div class="text-xs text-dark fw-semibold">
Held
</div>
<div class="text-muted">0</div>
</div>
<div class="col-6 mb-1">
<div class="text-xs text-dark fw-semibold">
Free
</div>
<div class="text-muted">1</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-auto pt-3 border-top">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">Last Update System</span>
<div class="d-flex align-items-center mt-1">
<p class="mb-0 text-muted small fw-semibold"><i class="bi bi-clock-history text-muted me-1"></i>1&nbsp;week ago</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-3 mb-4">
<div class="card shadow-sm border-0 h-100">
<div class="card-body p-3">
<div class="row">
<div class="col-12">
<div class="mb-2">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">Level Stock Status</span>
</div>
<div class="mb-4 p-2 bg-light rounded-3 shadow-sm border">
<div class="row g-0 align-items-center">
<div class="col-12 mb-2">
<canvas id="myDonutChartThird" width="327" height="200" style="display: block; box-sizing: border-box; height: 200px; width: 327px;"></canvas>
</div>
<div class="col-12 px-2 pb-2">
<div class="text-uppercase text-muted fw-bold mb-1" style="font-size: 0.65rem; letter-spacing: 0.05em;">Level Stock Summary</div>
<hr class="mt-0 mb-2 opacity-25">
<div class="row">
<div class="col-6 mb-1">
<div class="text-xs text-dark fw-semibold">
Empty
</div>
<div class="text-muted">96</div>
</div>
<div class="col-6 mb-1">
<div class="text-xs text-dark fw-semibold">
Surplus
</div>
<div class="text-muted">168</div>
</div>
<div class="col-6 mb-1">
<div class="text-xs text-dark fw-semibold">
Critical
</div>
<div class="text-muted">161</div>
</div>
<div class="col-6 mb-1">
<div class="text-xs text-dark fw-semibold">
Safety
</div>
<div class="text-muted">588</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-auto pt-3 border-top">
<span class="text-muted" style="font-size: 0.7rem; font-weight: 800; text-transform: uppercase;">Last Update System</span>
<div class="d-flex align-items-center mt-1">
<p class="mb-0 text-muted small fw-semibold"><i class="bi bi-clock-history text-muted me-1"></i>5&nbsp;days ago</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-3 mb-4">
<div class="card shadow-sm border-0 h-100">
<div class="card-body p-3">
<div class="mb-3">
<span class="text-muted" style="font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;">
Most Demand January
</span>
</div>
<div class="mb-3">
<div class="d-flex align-items-center mb-2">
<div class="bg-primary rounded-pill me-2" style="width: 4px; height: 1rem;"></div>
<p class="small m-0 fw-bold text-primary" style="font-size: 0.8rem;">Top 5: Frequency</p>
</div>
<div class="table-responsive">
<table class="table table-sm table-hover border-bottom small">
<thead class="table-light">
<tr>
<th style="width: 10%">#</th>
<th style="width: 30%">Part No.</th>
<th style="width: 45%">Part Name</th>
<th style="width: 15%" class="text-end">Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="text-truncate small">DELL-5430</td>
<td class="text-truncate small">Keyboard US</td>
<td class="text-end fw-bold small">45</td>
</tr>
<tr>
<td>2</td>
<td class="text-truncate small">BATT-54WH</td>
<td class="text-truncate small">Battery 4-Cell</td>
<td class="text-end fw-bold small">38</td>
</tr>
<tr>
<td>3</td>
<td class="text-truncate small">MEM-16GB</td>
<td class="text-truncate small">RAM DDR4</td>
<td class="text-end fw-bold small">30</td>
</tr>
<tr>
<td>4</td>
<td class="text-truncate small">SSD-512GB</td>
<td class="text-truncate small">NVMe SSD</td>
<td class="text-end fw-bold small">22</td>
</tr>
<tr>
<td>5</td>
<td class="text-truncate small">ADP-65W</td>
<td class="text-truncate small">AC Adapter</td>
<td class="text-end fw-bold small">18</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div class="d-flex align-items-center mb-2">
<div class="bg-success rounded-pill me-2" style="width: 4px; height: 1rem;"></div>
<p class="small m-0 fw-bold text-success" style="font-size: 0.8rem;">Top 5: Quantity</p>
</div>
<div class="table-responsive">
<table class="table table-sm table-hover border-bottom small">
<thead class="table-light">
<tr>
<th style="width: 10%">#</th>
<th style="width: 30%">Part No.</th>
<th style="width: 45%">Part Name</th>
<th style="width: 15%" class="text-end">Qty</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="text-truncate small">MEM-16GB</td>
<td class="text-truncate small">RAM DDR4</td>
<td class="text-end fw-bold small">250</td>
</tr>
<tr>
<td>2</td>
<td class="text-truncate small">SSD-512GB</td>
<td class="text-truncate small">NVMe SSD</td>
<td class="text-end fw-bold small">120</td>
</tr>
<tr>
<td>3</td>
<td class="text-truncate small">BATT-54WH</td>
<td class="text-truncate small">Battery 4-Cell</td>
<td class="text-end fw-bold small">85</td>
</tr>
<tr>
<td>4</td>
<td class="text-truncate small">DELL-5430</td>
<td class="text-truncate small">Keyboard US</td>
<td class="text-end fw-bold small">50</td>
</tr>
<tr>
<td>5</td>
<td class="text-truncate small">ADP-65W</td>
<td class="text-truncate small">AC Adapter</td>
<td class="text-end fw-bold small">45</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="cartOffcanvas" aria-labelledby="cartOffcanvas">
<div class="offcanvas-header border-bottom">
<div class="d-flex align-items-center w-100">
<div class="flex-grow-1">
<p class="offcanvas-title mb-0 fw-bold" id="cartOffcanvasLabel">
Carts
</p>
<div class="fsmall mb-0">You have 4 item in your cart</div>
</div>
<div class="d-flex align-items-center">
<button type="button" class="btn-close btn-close-white small" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
</div>
</div>
<div class="offcanvas-body p-0">
<div id="cartContainer">
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action border-bottom py-2 px-3">
<div class="d-flex align-items-start">
<div class="me-3">
<div class="rounded-circle bg-primary bg-opacity-10 text-primary d-flex align-items-center justify-content-center"
style="width: 36px; height: 36px;">
<i class="bi bi-cart"></i>
</div>
</div>
<div class="flex-grow-1">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="fw-bold text-dark mb-1">DELL-5430-KYBD</div>
<div class="text-muted small mb-2">Internal Keyboard US-English</div>
</div>
<small class="text-muted text-nowrap ms-3 d-flex align-items-center">
<i class="ri-time-line me-1"></i>2 minutes ago
</small>
</div>
<div class="text-muted small">Qty: 2 unit(s)</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action border-bottom py-2 px-3">
<div class="d-flex align-items-start">
<div class="me-3">
<div class="rounded-circle bg-primary bg-opacity-10 text-primary d-flex align-items-center justify-content-center"
style="width: 36px; height: 36px;">
<i class="bi bi-cart"></i>
</div>
</div>
<div class="flex-grow-1">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="fw-bold text-dark mb-1">BATT-54WH-RY</div>
<div class="text-muted small mb-2">Battery 4-Cell 54Wh Long Life</div>
</div>
<small class="text-muted text-nowrap ms-3 d-flex align-items-center">
<i class="ri-time-line me-1"></i>15 minutes ago
</small>
</div>
<div class="text-muted small">Qty: 1 unit(s)</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action border-bottom py-2 px-3">
<div class="d-flex align-items-start">
<div class="me-3">
<div class="rounded-circle bg-primary bg-opacity-10 text-primary d-flex align-items-center justify-content-center"
style="width: 36px; height: 36px;">
<i class="bi bi-cart"></i>
</div>
</div>
<div class="flex-grow-1">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="fw-bold text-dark mb-1">SSD-NVME-512</div>
<div class="text-muted small mb-2">512GB NVMe M.2 2280 Gen4</div>
</div>
<small class="text-muted text-nowrap ms-3 d-flex align-items-center">
<i class="ri-time-line me-1"></i>1 hours ago
</small>
</div>
<div class="text-muted small">Qty: 5 unit(s)</div>
</div>
</div>
</a>
<a href="#" class="list-group-item list-group-item-action border-bottom py-2 px-3">
<div class="d-flex align-items-start">
<div class="me-3">
<div class="rounded-circle bg-primary bg-opacity-10 text-primary d-flex align-items-center justify-content-center"
style="width: 36px; height: 36px;">
<i class="bi bi-cart"></i>
</div>
</div>
<div class="flex-grow-1">
<div class="d-flex justify-content-between align-items-start">
<div>
<div class="fw-bold text-dark mb-1">MEM-DDR4-16G</div>
<div class="text-muted small mb-2">16GB DDR4 3200MHz SODIMM</div>
</div>
<small class="text-muted text-nowrap ms-3 d-flex align-items-center">
<i class="ri-time-line me-1"></i>2 hours ago
</small>
</div>
<div class="text-muted small">Qty: 3 unit(s)</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="notificationOffcanvas" aria-labelledby="notificationOffcanvasLabel">
<div class="offcanvas-header border-bottom">
<div class="d-flex align-items-center w-100">
<div class="flex-grow-1">
<p class="offcanvas-title mb-0 fw-bold" id="notificationOffcanvasLabel">
Notifications
</p>
<div class="fsmall mb-0">You have 2 new notifications</div>
</div>
<div class="d-flex align-items-center">
<button type="button" class="btn-close btn-close-white small" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
</div>
</div>
<div class="offcanvas-body p-0">
<div id="notificationContainer">
<div class="sticky-top bg-light">
<div class="d-flex justify-content-between align-items-center px-2 border">
<div class="d-flex align-items-center ps-2">
<div class="form-check d-flex align-items-center m-0 p-0">
<input class="form-check-input m-0" type="checkbox" id="selectAll">
<label class="form-check-label ms-3" for="selectAll">Select All</label>
</div>
</div>
<div class="d-flex align-items-center">
<div class="btn-group" role="group">
<button type="button" onclick="handleBulkAction('mark_read')" id="btnBulkRead" class="btn btn-sm btn-link text-secondary text-decoration-none">
<i class="ri-mail-open-line"></i><span> Mark Read</span>
</button>
<div class="vr mx-2 align-self-center" style="height: 16px; opacity: 0.2;"></div>
<button type="button" onclick="handleBulkAction('delete')" id="btnBulkDelete" class="btn btn-sm btn-link text-danger text-decoration-none">
<i class="ri-delete-bin-line"></i><span> Delete</span>
</button>
</div>
</div>
</div>
</div>
<div class="list-group list-group-flush">
<!-- Item 1 -->
<div class="list-group-item p-0 border-bottom bg-offcanvas-body text-dark fw-semibold">
<div class="d-flex align-items-start py-2 px-3">
<div class="pe-3 pt-1">
<input class="form-check-input notif-checkbox" type="checkbox">
</div>
<a href="#" class="text-decoration-none text-dark d-flex justify-content-between align-items-start flex-grow-1 gap-3">
<div>
<p class="mb-0 small">
Your Order Has Been Shipped
</p>
<span class="text-muted small">
Order #DO-123456 has shipped to your delivery address
</span>
</div>
<div class="text-muted small text-nowrap d-flex align-items-center pt-1">
<i class="ri-time-line me-1"></i>
2 hours ago
</div>
</a>
</div>
</div>
<!-- Item 2 -->
<div class="list-group-item p-0 border-bottom bg-offcanvas-body text-dark fw-semibold">
<div class="d-flex align-items-start py-2 px-3">
<!-- Checkbox -->
<div class="pe-3 pt-1">
<input class="form-check-input notif-checkbox" type="checkbox">
</div>
<!-- Content -->
<a href="#" class="text-decoration-none text-dark d-flex justify-content-between align-items-start flex-grow-1 gap-3">
<!-- Left -->
<div>
<p class="mb-0 small">
Payment Received
</p>
<span class="text-muted small">
Invoice #INV-202401 has been paid successfully
</span>
</div>
<!-- Time -->
<div class="text-muted small text-nowrap d-flex align-items-center pt-1">
<i class="ri-time-line me-1"></i>
5 hours ago
</div>
</a>
</div>
</div>
<!-- Item 3 -->
<div class="list-group-item p-0 border-bottom text-dark fw-normal">
<div class="d-flex align-items-start py-2 px-3">
<!-- Checkbox -->
<div class="pe-3 pt-1">
<input class="form-check-input notif-checkbox" type="checkbox">
</div>
<!-- Content -->
<a href="#" class="text-decoration-none text-dark d-flex justify-content-between align-items-start flex-grow-1 gap-3">
<!-- Left -->
<div>
<p class="mb-0 small">
New Login Detected
</p>
<span class="text-muted small">
Jakarta, ID • Chrome on Ubuntu
</span>
</div>
<!-- Time -->
<div class="text-muted small text-nowrap d-flex align-items-center pt-1">
<i class="ri-time-line me-1"></i>
Yesterday
</div>
</a>
</div>
</div>
<!-- Item 4 -->
<div class="list-group-item p-0 border-bottom text-dark fw-normal">
<div class="d-flex align-items-start py-2 px-3">
<!-- Checkbox -->
<div class="pe-3 pt-1">
<input class="form-check-input notif-checkbox" type="checkbox">
</div>
<!-- Content -->
<a href="#" class="text-decoration-none text-dark d-flex justify-content-between align-items-start flex-grow-1 gap-3">
<!-- Left -->
<div>
<p class="mb-0 small">
Stock Opname in Progress
</p>
<span class="text-muted small">
Reference: #SO-12-2025 (Warehouse B)
</span>
</div>
<!-- Time -->
<div class="text-muted small text-nowrap d-flex align-items-center pt-1">
<i class="ri-time-line me-1"></i>
4 days ago
</div>
</a>
</div>
</div>
<!-- Item 5 -->
<div class="list-group-item p-0 border-bottom text-dark fw-normal">
<div class="d-flex align-items-start py-2 px-3">
<!-- Checkbox -->
<div class="pe-3 pt-1">
<input class="form-check-input notif-checkbox" type="checkbox">
</div>
<!-- Content -->
<a href="#" class="text-decoration-none text-dark d-flex justify-content-between align-items-start flex-grow-1 gap-3">
<!-- Left -->
<div>
<p class="mb-0 small">
System Test Completed
</p>
<span class="text-muted small">
Reference: #TEST-DEBUG-LOG
</span>
</div>
<!-- Time -->
<div class="text-muted small text-nowrap d-flex align-items-center pt-1">
<i class="ri-time-line me-1"></i>
6 days ago
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="profileOffcanvas" aria-labelledby="profileOffcanvasLabel">
<div class="offcanvas-header border-bottom">
<div class="d-flex align-items-center w-100">
<div class="flex-grow-1">
<p class="offcanvas-title mb-0 fw-bold" id="profileOffcanvasLabel">
Your Account
</p>
<div class="fsmall mb-0">Last sign-in: 02/01/2025-2026 17:36</div>
</div>
<button type="button" class="btn-close btn-close-white small" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
</div>
<div class="offcanvas-body p-0">
<div class="p-4 text-center text-account-dropdown">
<div class="position-relative d-inline-block mx-auto">
<div class="profile-img-container">
<img src="static/images/profile.png" class="img img-thumbnail rounded-circle w-25" alt="Profile Avatar">
</div>
</div>
<div class="fw-bold mt-3 mb-2 opacity-75" style="font-size: 1rem;">Admin</div>
<div class="text-muted fsmall opacity-75">Superuser</div>
<div class="text-muted fsmall opacity-75">admin@mail.com</div>
<div class="mt-3 text-center">
<button type="button" class="btn btn-danger btn-bz-size" onclick="location.href='login.html'">
<i class="ri-logout-box-r-line"></i> Sign Out
</button>
</div>
</div>
</div>
<!-- Copyright -->
<div class="offcanvas-footer p-4 bg-light">
<div class="text-center text-muted fsmall">
<p class="fw-semibold text-dark mb-2">
&copy; 2025-2026&ensp;Skoci Admin<br>All rights reserved.
</p>
<p class="mb-2">
<a href="https://github.com/abeemanew/skoci-admin" target="_blank" class="text-decoration-none text-muted">
<i class="bi bi-github me-1"></i> GitHub Repository
</a>
</p>
<p class="mb-0 d-inline-flex align-items-center">
Built with
<img src="static/images/favicon.ico" alt="Icon" width="18" height="18" class="mx-1">
<span class="fw-semibold text-dark me-1"> Skoci Admin</span> • v2.2
</p>
</div>
</div>
</div>
<script>
// Function to create a donut chart
function createDonutChart(canvasId, summaryLocation) {
const labels = [];
const dataValues = [];
// Populate labels and dataValues arrays
for (const [key, value] of Object.entries(summaryLocation)) {
labels.push(key);
dataValues.push(value);
}
const ctx = document.getElementById(canvasId).getContext('2d');
const myDonutChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
label: 'Location Summary',
data: dataValues,
backgroundColor: [
'rgba(13, 110, 253, 0.6)',
'rgba(25, 135, 84, 0.6)',
'rgba(255, 193, 7, 0.6)',
'rgba(111, 66, 193, 0.6)'
],
borderColor: [
'rgba(13, 110, 253, 1)',
'rgba(25, 135, 84, 1)',
'rgba(255, 193, 7, 1)',
'rgba(111, 66, 193, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
cutout: '60%', // Lebih kecil = lebih tebal donat
plugins: {
layout: {
padding: {
top: 20, // Atur jarak atas
bottom: 20,
left: 20,
right: 20
}
},
legend: {
position: 'top',
labels: {
boxWidth: 12,
padding: 15,
font: { size: 12 },
usePointStyle: true, // Gunakan bentuk point style
pointStyle: 'circle' // Bentuk lingkaran
},
},
tooltip: { enabled: true },
datalabels: {
formatter: (value, ctx) => {
let sum = ctx.chart.data.datasets[0].data.reduce((a, b) => a + b, 0);
let percentage = (value * 100 / sum).toFixed(1) + '%';
return `${ctx.chart.data.labels[ctx.dataIndex]}\n${value} (${percentage})`;
},
color: '#000',
font: {
size: 12
},
backgroundColor: '#fbfbcb', // Background color putih
borderColor: '#ddd', // Warna border
borderWidth: 1, // Lebar border
borderRadius: 4, // Sudut border melengkung
padding: 8, // Padding di dalam background
textAlign: 'center'
}
}
},
plugins: [ChartDataLabels] // Mengaktifkan plugin datalabels
});
}
// Dynamically creating the donut charts for two datasets
var summaryLocationFirst = {
'Used': 1003,
'Held': 1,
'Free': 150,
};
var summaryLocationSecond = {
'Used': 2,
'Held': 0,
'Free': 1,
};
var summaryLocationThird = {
'Empty': 96,
'Surplus': 168,
'Critical': 161,
'Safety': 588,
};
// Create the charts using the function
createDonutChart('myDonutChartFirst', summaryLocationFirst);
createDonutChart('myDonutChartSecond', summaryLocationSecond);
createDonutChart('myDonutChartThird', summaryLocationThird);
</script>
<script src="static/js/main.js"></script>
<script src="static/vendor/bootstrap/bootstrap.bundle.min.js"></script>
</body>
</html>