1038 lines
60 KiB
HTML
1038 lines
60 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 | DataTables</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">
|
|
<!-- DataTables Bootstrap 5 & Responsive CSS -->
|
|
<link rel="stylesheet" href="static/vendor/datatables/dataTables.bootstrap5.min.css">
|
|
<link rel="stylesheet" href="static/vendor/datatables/responsive.bootstrap5.min.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">
|
|
<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" 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 active"
|
|
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 show" id="menuTables">
|
|
<ul class="nav flex-column">
|
|
<li class="nav-item">
|
|
<a href="table1.html" class="nav-link active">
|
|
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">
|
|
Menu
|
|
</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">DataTables</h5>
|
|
</div>
|
|
</div>
|
|
<!-- main-content -->
|
|
<div class="main-content">
|
|
<div class="container-fluid py-4">
|
|
<div class="row mt-2">
|
|
<div class="col-12 mb-4">
|
|
<div class="card shadow-lg border-0">
|
|
<div class="card-body p-5">
|
|
<div class="d-flex justify-content-between align-items-center border-bottom pb-2 mb-4">
|
|
<h6 class="fmb-0">
|
|
Data View
|
|
</h6>
|
|
</div>
|
|
<small class="text-muted d-block mb-4">
|
|
This table is generated using the <strong>DataTables</strong> library
|
|
</small>
|
|
<table class="table table-striped table-hover table-bordered w-100 tableDatatables">
|
|
<thead>
|
|
<tr>
|
|
<th>Item ID</th>
|
|
<th>Item Description</th>
|
|
<th>Category</th>
|
|
<th>Supplier</th>
|
|
<th>Rack Location</th>
|
|
<th>Unit</th>
|
|
<th>Weight (kg)</th>
|
|
<th>Dimensions (cm)</th>
|
|
<th>Min Stock</th>
|
|
<th>Max Stock</th>
|
|
<th>On Hand Qty</th>
|
|
<th>Unit Price</th>
|
|
<th>Last Movement</th>
|
|
<th>Status</th>
|
|
<th>Notes</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>001</td>
|
|
<td>Mouse Wireless</td>
|
|
<td>Electronics</td>
|
|
<td>Supplier A</td>
|
|
<td>Rack 12</td>
|
|
<td>Piece</td>
|
|
<td>0.2</td>
|
|
<td>10 x 5 x 3</td>
|
|
<td>10</td>
|
|
<td>100</td>
|
|
<td>50</td>
|
|
<td>100,000</td>
|
|
<td>2023-12-01</td>
|
|
<td>Available</td>
|
|
<td>Top quality wireless mouse</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>002</td>
|
|
<td>Keyboard Mechanical</td>
|
|
<td>Electronics</td>
|
|
<td>Supplier B</td>
|
|
<td>Rack 8</td>
|
|
<td>Piece</td>
|
|
<td>1.0</td>
|
|
<td>35 x 15 x 5</td>
|
|
<td>5</td>
|
|
<td>50</td>
|
|
<td>25</td>
|
|
<td>250,000</td>
|
|
<td>2023-11-20</td>
|
|
<td>Low Stock</td>
|
|
<td>Mechanical keyboard with RGB</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>003</td>
|
|
<td>USB Flash Drive 32GB</td>
|
|
<td>Accessories</td>
|
|
<td>Supplier C</td>
|
|
<td>Rack 5</td>
|
|
<td>Piece</td>
|
|
<td>0.05</td>
|
|
<td>8 x 2 x 0.5</td>
|
|
<td>20</td>
|
|
<td>200</td>
|
|
<td>150</td>
|
|
<td>50,000</td>
|
|
<td>2023-12-10</td>
|
|
<td>Available</td>
|
|
<td>Fast data transfer</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>004</td>
|
|
<td>Monitor LED 24 Inch</td>
|
|
<td>Electronics</td>
|
|
<td>Supplier D</td>
|
|
<td>Rack 1</td>
|
|
<td>Unit</td>
|
|
<td>4.5</td>
|
|
<td>55 x 40 x 12</td>
|
|
<td>2</td>
|
|
<td>30</td>
|
|
<td>15</td>
|
|
<td>1,500,000</td>
|
|
<td>2023-12-15</td>
|
|
<td>Available</td>
|
|
<td>Full HD Resolution</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>005</td>
|
|
<td>Headset Gaming</td>
|
|
<td>Accessories</td>
|
|
<td>Supplier A</td>
|
|
<td>Rack 7</td>
|
|
<td>Piece</td>
|
|
<td>0.8</td>
|
|
<td>20 x 18 x 10</td>
|
|
<td>8</td>
|
|
<td>80</td>
|
|
<td>30</td>
|
|
<td>450,000</td>
|
|
<td>2023-12-05</td>
|
|
<td>Available</td>
|
|
<td>Surround sound 7.1</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>006</td>
|
|
<td>Webcam 1080p</td>
|
|
<td>Electronics</td>
|
|
<td>Supplier E</td>
|
|
<td>Rack 3</td>
|
|
<td>Piece</td>
|
|
<td>0.3</td>
|
|
<td>12 x 8 x 6</td>
|
|
<td>5</td>
|
|
<td>40</td>
|
|
<td>10</td>
|
|
<td>350,000</td>
|
|
<td>2023-11-28</td>
|
|
<td>Low Stock</td>
|
|
<td>Clear video quality</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>007</td>
|
|
<td>HDMI Cable 3m</td>
|
|
<td>Cables</td>
|
|
<td>Supplier C</td>
|
|
<td>Rack 15</td>
|
|
<td>Piece</td>
|
|
<td>0.15</td>
|
|
<td>15 x 15 x 3</td>
|
|
<td>15</td>
|
|
<td>150</td>
|
|
<td>100</td>
|
|
<td>75,000</td>
|
|
<td>2023-12-12</td>
|
|
<td>Available</td>
|
|
<td>4K support</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>008</td>
|
|
<td>Laptop Stand Aluminum</td>
|
|
<td>Furniture</td>
|
|
<td>Supplier F</td>
|
|
<td>Rack 20</td>
|
|
<td>Piece</td>
|
|
<td>1.2</td>
|
|
<td>25 x 20 x 5</td>
|
|
<td>5</td>
|
|
<td>25</td>
|
|
<td>12</td>
|
|
<td>180,000</td>
|
|
<td>2023-12-08</td>
|
|
<td>Available</td>
|
|
<td>Ergonomic design</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>009</td>
|
|
<td>External Hard Drive 1TB</td>
|
|
<td>Storage</td>
|
|
<td>Supplier B</td>
|
|
<td>Rack 5</td>
|
|
<td>Unit</td>
|
|
<td>0.4</td>
|
|
<td>12 x 8 x 2</td>
|
|
<td>10</td>
|
|
<td>60</td>
|
|
<td>45</td>
|
|
<td>850,000</td>
|
|
<td>2023-12-20</td>
|
|
<td>Available</td>
|
|
<td>Portable storage</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>010</td>
|
|
<td>Power Bank 20000mAh</td>
|
|
<td>Accessories</td>
|
|
<td>Supplier A</td>
|
|
<td>Rack 9</td>
|
|
<td>Piece</td>
|
|
<td>0.5</td>
|
|
<td>15 x 7 x 3</td>
|
|
<td>12</td>
|
|
<td>100</td>
|
|
<td>20</td>
|
|
<td>300,000</td>
|
|
<td>2023-12-02</td>
|
|
<td>Low Stock</td>
|
|
<td>Fast charging PD</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>011</td>
|
|
<td>Router Wi-Fi 6</td>
|
|
<td>Networking</td>
|
|
<td>Supplier G</td>
|
|
<td>Rack 2</td>
|
|
<td>Unit</td>
|
|
<td>0.9</td>
|
|
<td>25 x 15 x 5</td>
|
|
<td>3</td>
|
|
<td>20</td>
|
|
<td>8</td>
|
|
<td>1,200,000</td>
|
|
<td>2023-11-15</td>
|
|
<td>Available</td>
|
|
<td>High speed connection</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>012</td>
|
|
<td>TP-Link Switch 8-Port</td>
|
|
<td>Networking</td>
|
|
<td>Supplier G</td>
|
|
<td>Rack 2</td>
|
|
<td>Unit</td>
|
|
<td>0.6</td>
|
|
<td>18 x 10 x 3</td>
|
|
<td>5</td>
|
|
<td>30</td>
|
|
<td>15</td>
|
|
<td>250,000</td>
|
|
<td>2023-12-18</td>
|
|
<td>Available</td>
|
|
<td>Gigabit ports</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>013</td>
|
|
<td>Office Chair</td>
|
|
<td>Furniture</td>
|
|
<td>Supplier F</td>
|
|
<td>Warehouse</td>
|
|
<td>Unit</td>
|
|
<td>12.0</td>
|
|
<td>60 x 60 x 120</td>
|
|
<td>2</td>
|
|
<td>10</td>
|
|
<td>3</td>
|
|
<td>1,800,000</td>
|
|
<td>2023-11-10</td>
|
|
<td>Low Stock</td>
|
|
<td>Ergonomic mesh chair</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>014</td>
|
|
<td>Toner Cartridge Black</td>
|
|
<td>Stationery</td>
|
|
<td>Supplier H</td>
|
|
<td>Rack 18</td>
|
|
<td>Piece</td>
|
|
<td>0.7</td>
|
|
<td>30 x 10 x 10</td>
|
|
<td>10</td>
|
|
<td>50</td>
|
|
<td>40</td>
|
|
<td>550,000</td>
|
|
<td>2023-12-22</td>
|
|
<td>Available</td>
|
|
<td>For Laser Printers</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>015</td>
|
|
<td>Paper A4 80gsm</td>
|
|
<td>Stationery</td>
|
|
<td>Supplier H</td>
|
|
<td>Rack 17</td>
|
|
<td>Rim</td>
|
|
<td>2.3</td>
|
|
<td>21 x 30 x 5</td>
|
|
<td>50</td>
|
|
<td>500</td>
|
|
<td>300</td>
|
|
<td>55,000</td>
|
|
<td>2023-12-25</td>
|
|
<td>Available</td>
|
|
<td>High white paper</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>016</td>
|
|
<td>UPS 650VA</td>
|
|
<td>Electronics</td>
|
|
<td>Supplier D</td>
|
|
<td>Rack 4</td>
|
|
<td>Unit</td>
|
|
<td>5.5</td>
|
|
<td>35 x 15 x 20</td>
|
|
<td>4</td>
|
|
<td>15</td>
|
|
<td>5</td>
|
|
<td>750,000</td>
|
|
<td>2023-12-05</td>
|
|
<td>Low Stock</td>
|
|
<td>Battery backup</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>017</td>
|
|
<td>Smartphone Case</td>
|
|
<td>Accessories</td>
|
|
<td>Supplier I</td>
|
|
<td>Rack 11</td>
|
|
<td>Piece</td>
|
|
<td>0.03</td>
|
|
<td>16 x 8 x 1</td>
|
|
<td>30</td>
|
|
<td>300</td>
|
|
<td>250</td>
|
|
<td>25,000</td>
|
|
<td>2023-12-28</td>
|
|
<td>Available</td>
|
|
<td>Silicon transparent</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>018</td>
|
|
<td>Bluetooth Speaker</td>
|
|
<td>Electronics</td>
|
|
<td>Supplier A</td>
|
|
<td>Rack 7</td>
|
|
<td>Piece</td>
|
|
<td>0.6</td>
|
|
<td>15 x 10 x 10</td>
|
|
<td>8</td>
|
|
<td>40</td>
|
|
<td>22</td>
|
|
<td>350,000</td>
|
|
<td>2023-12-14</td>
|
|
<td>Available</td>
|
|
<td>Water resistant IPX5</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>019</td>
|
|
<td>Graphic Tablet</td>
|
|
<td>Electronics</td>
|
|
<td>Supplier J</td>
|
|
<td>Rack 6</td>
|
|
<td>Unit</td>
|
|
<td>1.5</td>
|
|
<td>30 x 20 x 1</td>
|
|
<td>2</td>
|
|
<td>12</td>
|
|
<td>4</td>
|
|
<td>2,100,000</td>
|
|
<td>2023-11-30</td>
|
|
<td>Low Stock</td>
|
|
<td>Pressure sensitivity 8k</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>020</td>
|
|
<td>Cleaning Kit PC</td>
|
|
<td>Maintenance</td>
|
|
<td>Supplier I</td>
|
|
<td>Rack 14</td>
|
|
<td>Set</td>
|
|
<td>0.2</td>
|
|
<td>10 x 10 x 15</td>
|
|
<td>20</td>
|
|
<td>100</td>
|
|
<td>85</td>
|
|
<td>45,000</td>
|
|
<td>2023-12-29</td>
|
|
<td>Available</td>
|
|
<td>Brush and liquid cleaner</td>
|
|
<td>
|
|
<button class="btn btn-primary btn-sm">Edit</button>
|
|
<button class="btn btn-danger btn-sm">Delete</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</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">
|
|
© 2025-2026 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 src="static/js/main.js"></script>
|
|
<script src="static/vendor/bootstrap/bootstrap.bundle.min.js"></script>
|
|
<!-- DataTables JS -->
|
|
<script src="static/vendor/datatables/jquery.dataTables.min.js"></script>
|
|
<script src="static/vendor/datatables/dataTables.bootstrap5.min.js"></script>
|
|
<script src="static/vendor/datatables/dataTables.responsive.min.js"></script>
|
|
<script src="static/vendor/datatables/responsive.bootstrap5.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('.tableDatatables').DataTable({
|
|
responsive: true,
|
|
language: {
|
|
search: "",
|
|
searchPlaceholder: "Search...",
|
|
paginate: {
|
|
previous: '<i class="bi bi-chevron-left"></i>',
|
|
next: '<i class="bi bi-chevron-right"></i>'
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |