Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Tracking Raw Material</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="icon" type="image/x-icon" href="favicon.ico?v=2"> | |
| <link href="https://cdn.jsdelivr.net/npm/@coreui/coreui@5.0.0/dist/css/coreui.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="bg-body-tertiary"> | |
| <div id="login-view" class="container d-flex align-items-center justify-content-center min-vh-100"> | |
| <div class="card p-4 shadow-sm" style="width: 350px;"> | |
| <h4 class="text-center mb-4">Login</h4> | |
| <input type="text" id="username" class="form-control mb-3" placeholder="Username"> | |
| <input type="password" id="password" class="form-control mb-4" placeholder="Password"> | |
| <button class="btn btn-warning w-100 text-white fw-bold" onclick="login()">Login</button> | |
| <div id="login-error" class="text-danger mt-2 text-center d-none small">Invalid credentials</div> | |
| </div> | |
| </div> | |
| <div id="app-view" class="d-none"> | |
| <header class="header p-3 shadow-sm bg-warning text-white d-flex justify-content-between align-items-center"> | |
| <h5 class="mb-0">Logistik Page</h5> | |
| <div class="dropdown"> | |
| <a class="text-white text-decoration-none dropdown-toggle d-flex align-items-center" href="#" role="button" data-coreui-toggle="dropdown" aria-expanded="false"> | |
| <i class="bi bi-person-circle fs-4 me-2"></i> <span id="nav-username" class="fw-bold">User</span> | |
| </a> | |
| <ul class="dropdown-menu dropdown-menu-end border-0 shadow-lg p-0 mt-2" style="min-width: 240px; border-radius: 8px; overflow: hidden;"> | |
| <div style="background-color: #5519e6; padding: 20px; text-align: center;"> | |
| <!-- Version Pill --> | |
| <div class="bg-white text-dark rounded-pill px-2 py-1 mb-3 mx-auto d-inline-block shadow-sm" style="font-size: 0.75rem; font-weight: bold;"> | |
| <span class="text-danger border border-danger rounded-circle px-1 me-1">B</span> 1.0~CoreUI | |
| </div> | |
| <!-- Avatar & Info --> | |
| <div><i class="bi bi-person-circle text-white mb-2" style="font-size: 4.5rem; opacity: 0.9;"></i></div> | |
| <h4 class="text-white fw-bold mb-0 mt-1" id="drop-username">Admin</h4> | |
| <div class="text-white opacity-75 mb-3" id="drop-role">Supervisor</div> | |
| <!-- Sign out button --> | |
| <button class="btn btn-secondary w-100 fw-bold" style="background-color: #646c75; border-color: #646c75;" onclick="logout()">Sign out</button> | |
| </div> | |
| </ul> | |
| </div> | |
| </header> | |
| <div class="container-fluid px-4 py-3"> | |
| <div class="card card-outline shadow-sm"> | |
| <div class="card-header bg-white d-flex justify-content-between align-items-center"> | |
| <h6 class="mb-0"><i class="bi bi-file-earmark-text me-2"></i>Dokumen STG belum diproses</h6> | |
| </div> | |
| <div class="card-body"> | |
| <div class="d-flex justify-content-between align-items-center mb-3"> | |
| <div class="d-flex gap-2"> | |
| <button id="btn-add-new" class="btn btn-warning text-white fw-bold d-none" onclick="openAddModal()"> | |
| <i class="bi bi-plus-lg me-1"></i> Baru | |
| </button> | |
| <input type="text" id="searchInput" class="form-control" style="width: 250px;" placeholder="Search data..." oninput="resetPageAndRender()"> | |
| </div> | |
| <!-- Refresh Button --> | |
| <button class="btn btn-outline-secondary" onclick="loadInitialData()" title="Refresh Data manually"> | |
| <i class="bi bi-arrow-clockwise"></i> | |
| </button> | |
| </div> | |
| <div class="table-responsive"> | |
| <table class="table table-striped table-hover table-sm table-bordered border-secondary-subtle" id="dataTable"> | |
| <thead class="table-light" id="tableHead" style="white-space: nowrap;"></thead> | |
| <tbody id="tableBody" style="white-space: nowrap;"> | |
| <tr><td colspan="17" class="text-center py-4 text-muted">Please log in to view data...</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Pagination Footer --> | |
| <div class="d-flex justify-content-between align-items-center mt-3 small text-muted"> | |
| <div> | |
| Showing <span id="pageStart">0</span> to <span id="pageEnd">0</span> of <span id="totalRows">0</span> rows | |
| <select id="rowsPerPage" class="form-select form-select-sm d-inline-block w-auto ms-2" onchange="resetPageAndRender()"> | |
| <option value="10">10</option> | |
| <option value="25">25</option> | |
| <option value="50">50</option> | |
| <option value="100">100</option> | |
| </select> rows per page | |
| </div> | |
| <nav> | |
| <ul class="pagination pagination-sm mb-0" id="paginationNav"></ul> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal fade" id="dataModal" tabindex="-1" data-coreui-backdrop="static"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| <div class="modal-header bg-light"> | |
| <h5 class="modal-title" id="modalTitle">Form</h5> | |
| <button type="button" class="btn-close" onclick="closeModal('dataModal')"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <form id="recordForm" oninput="checkFormValidity()"> | |
| <div id="section-add"> | |
| <div class="row mb-2"> | |
| <div class="col-md-6"> | |
| <label class="form-label small">Nama Supplier</label> | |
| <input type="search" id="f_supplier" list="dl_supplier" class="form-control form-control-sm req-add" placeholder="Cari Supplier..." autocomplete="off"> | |
| <datalist id="dl_supplier"></datalist> | |
| </div> | |
| <div class="col-md-6"> | |
| <label class="form-label small">Tgl Kedatangan Barang</label> | |
| <input type="date" id="f_tglDatang" class="form-control form-control-sm req-add"> | |
| </div> | |
| </div> | |
| <div class="row mb-2"> | |
| <div class="col-md-6"> | |
| <label class="form-label small">No. SJ Supplier</label> | |
| <input type="text" id="f_noSj" class="form-control form-control-sm req-add" maxlength="50"> | |
| </div> | |
| <div class="col-md-6"> | |
| <label class="form-label small">Item</label> | |
| <input type="search" id="f_item" list="dl_item" class="form-control form-control-sm req-add" placeholder="Cari Item..." autocomplete="off" oninput="updateUOM()"> | |
| <datalist id="dl_item"></datalist> | |
| </div> | |
| </div> | |
| <div class="row mb-2"> | |
| <div class="col-md-4"> | |
| <label class="form-label small">Quantity Awal</label> | |
| <input type="number" id="f_qtyAwal" class="form-control form-control-sm req-add req-edit"> | |
| </div> | |
| <div class="col-md-4"> | |
| <label class="form-label small">Quantity Reject</label> | |
| <input type="number" id="f_qtyReject" class="form-control form-control-sm req-add req-edit"> | |
| </div> | |
| <div class="col-md-4"> | |
| <label class="form-label small">Quantity Nett</label> | |
| <input type="number" id="f_qtyNett" class="form-control form-control-sm req-add req-edit"> | |
| </div> | |
| </div> | |
| <div class="row mb-2"> | |
| <div class="col-md-4"> | |
| <label class="form-label small">UOM</label> | |
| <input type="text" id="f_uom" class="form-control form-control-sm" readonly> | |
| </div> | |
| <div class="col-md-4"> | |
| <label class="form-label small">Sub Inv</label> | |
| <select id="f_subInv" class="form-select form-select-sm req-add req-edit"></select> | |
| </div> | |
| <div class="col-md-4"> | |
| <label class="form-label small">No. STG Manual</label> | |
| <input type="text" id="f_stgManual" class="form-control form-control-sm req-add req-edit" style="text-transform:uppercase"> | |
| </div> | |
| </div> | |
| <div class="row mb-2"> | |
| <div class="col-md-6"> | |
| <label class="form-label small">Ekspedisi ke PIC Prc</label> | |
| <input type="date" id="f_ekspedisi" class="form-control form-control-sm req-add req-edit"> | |
| </div> | |
| <div class="col-md-6"> | |
| <label class="form-label small">Notes</label> | |
| <input type="text" id="f_notes" class="form-control form-control-sm" maxlength="150"> | |
| </div> | |
| </div> | |
| </div> | |
| <hr class="my-3 d-none" id="divider-edit"> | |
| <div id="section-edit" class="d-none bg-light p-2 rounded border"> | |
| <h6 class="small text-muted mb-3">Update Information (Required for 'OK' Status)</h6> | |
| <div class="row mb-2"> | |
| <div class="col-md-4"> | |
| <label class="form-label small">Nomer PO</label> | |
| <div class="input-group input-group-sm"> | |
| <span class="input-group-text">PO/SKL/</span> | |
| <input type="text" id="f_noPo" class="form-control" maxlength="50"> | |
| </div> | |
| </div> | |
| <div class="col-md-4"> | |
| <label class="form-label small">Tanggal PO</label> | |
| <input type="date" id="f_tglPo" class="form-control form-control-sm"> | |
| </div> | |
| <div class="col-md-4"> | |
| <label class="form-label small">No. Receive</label> | |
| <input type="text" id="f_noReceive" class="form-control form-control-sm" maxlength="50"> | |
| </div> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary btn-sm" onclick="closeModal('dataModal')">Batal</button> | |
| <button type="button" class="btn btn-primary btn-sm" id="btnActionSave" disabled onclick="submitData()">Simpan</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/@coreui/coreui@5.0.0/dist/js/coreui.bundle.min.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |