535 lines
29 KiB
Plaintext
535 lines
29 KiB
Plaintext
<!-- Modal viewPRTracking -->
|
||
<div class="modal fade custom-modal-backdrop" id="viewPRTracking"
|
||
tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true" data-bs-backdrop="static">
|
||
<div class="modal-dialog custom-modal-tracker">
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="modal-content">
|
||
<div class="modal-header" style="display: flex; flex-direction: column; align-items: center;">
|
||
<h2 class="modal-title" id="ModalLabel">PR Status</h2>
|
||
</div>
|
||
<br />
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
<!-- First Column -->
|
||
<div class="col-md-4">
|
||
<div class="form-group">
|
||
<div class="row">
|
||
<div class="col-6">
|
||
<label for="prNo">PR No</label>
|
||
<input readonly type="text" class="form-control" id="prNo">
|
||
</div>
|
||
<div class="col-6">
|
||
<label for="t-dateNeeded">Date Needed</label>
|
||
<input readonly type="text" class="form-control" id="t-dateNeeded">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="row">
|
||
<div class="col-6">
|
||
<label for="poNumber">PO No</label>
|
||
<input readonly type="text" class="form-control" id="poNumber">
|
||
</div>
|
||
<div class="col-6">
|
||
<label for="poTypeName">PO Type</label>
|
||
<input readonly type="text" class="form-control" id="poTypeName">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label id="itemNameLabel" for="t-itemName">ItemName</label>
|
||
<textarea readonly id="t-itemName"></textarea>
|
||
</div>
|
||
</div>
|
||
<!-- Second Column -->
|
||
<div class="col-md-4">
|
||
<div class="form-group">
|
||
<div class="row">
|
||
<div class="col-6">
|
||
<label for="t-itemNo">ItemNo</label>
|
||
<input readonly type="text" class="form-control" id="t-itemNo">
|
||
</div>
|
||
<div class="col-6">
|
||
<label for="requestedBy">Requested By</label>
|
||
<input readonly type="text" class="form-control" id="requestedBy">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="row">
|
||
<div class="col-6">
|
||
<label for="quantity">Quantity</label>
|
||
<input readonly type="text" class="form-control" id="quantity">
|
||
</div>
|
||
<div class="col-6">
|
||
<label for="t-uomName">UOM</label>
|
||
<input readonly type="text" class="form-control" id="t-uomName">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="form-group">
|
||
<label id="itemCategoryNameLabel" for="t-itemCategoryName">itemCategoryName:</label>
|
||
<textarea readonly id="t-itemCategoryName"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
<div class="form-group">
|
||
<img id="t-itemPictureImage" alt="t-itemPictureImage" width="150" class="img-fluid" style="margin-bottom:5px; border-radius:15px; box-shadow:15px;">
|
||
<input type="file" id="t-itemPictureImageInput" accept="image/*" style="display: none; margin-bottom:5px; border-radius:15px; box-shadow:15px;">
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="form-group">
|
||
<label id="itemDescriptionLabel" for="t-itemDescription">Specification:</label>
|
||
<textarea readonly id="t-itemDescription"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<br />
|
||
<hr />
|
||
<div class="progress-container">
|
||
<div class="step" id="step-prCreatedDate">
|
||
<div class="icon-container">
|
||
<i id="icon-prCreatedDate" class="fa fa-cart-plus"></i>
|
||
</div>
|
||
<p class="date"><label id="prCreatedDate-Label"></label></p>
|
||
<p class="label">PR Created</p>
|
||
</div>
|
||
<div class="line-container"><div class="line"></div></div>
|
||
<div class="step" id="step-prApprover1">
|
||
<div class="icon-container">
|
||
<i id="icon-prApprover1" class="fa fa-boxes-stacked"></i>
|
||
</div>
|
||
<p class="date"><label id="prApprover1-Label"></label></p>
|
||
<p class="label">Approver1</p>
|
||
</div>
|
||
<div class="line-container"><div class="line"></div></div>
|
||
<div class="step" id="step-prApprover2">
|
||
<div class="icon-container">
|
||
<i id="icon-prApprover2" class="fa fa-forward-step"></i>
|
||
</div>
|
||
<p class="date"><label id="prApprover2-Label"></label></p>
|
||
<p class="label">Approver2</p>
|
||
</div>
|
||
<div class="line-container"><div class="line"></div></div>
|
||
<div class="step" id="step-canvassSubmitedDate">
|
||
<div class="icon-container">
|
||
<i id="icon-canvassSubmitedDate" class="fa fa-magnifying-glass-dollar"></i>
|
||
</div>
|
||
<p class="date"><label id="canvassSubmitedDate-Label"></label></p>
|
||
<p class="label">Canvass</p>
|
||
</div>
|
||
<div class="line-container"><div class="line"></div></div>
|
||
<div class="step" id="step-suppBidDate">
|
||
<div class="icon-container">
|
||
<i id="icon-suppBidDate" class="fa fa-hand-holding-dollar"></i>
|
||
</div>
|
||
<p class="date"><label id="suppBidDate-Label"></label></p>
|
||
<p class="label">Bidding</p>
|
||
</div>
|
||
<div class="line-container"><div class="line"></div></div>
|
||
<div class="step" id="step-canvassApprovedDate">
|
||
<div class="icon-container">
|
||
<i id="icon-canvassApprovedDate" class="fa fa-handshake-simple"></i>
|
||
</div>
|
||
<p class="date"><label id="canvassApprovedDate-Label"></label></p>
|
||
<p class="label">Offer Approved</p>
|
||
</div>
|
||
<div class="line-container"><div class="line"></div></div>
|
||
<div class="step" id="step-poPreparationDate">
|
||
<div class="icon-container">
|
||
<i id="icon-poPreparationDate" class="fa fa-forward-step"></i>
|
||
</div>
|
||
<p class="date"><label id="poPreparationDate-Label"></label></p>
|
||
<p class="label">P.O. Prepared</p>
|
||
</div>
|
||
<div class="line-container"><div class="line"></div></div>
|
||
<div class="step" id="step-poApprovedDate">
|
||
<div class="icon-container">
|
||
<i id="icon-poApprovedDate" class="fa fa-thumbs-up"></i>
|
||
</div>
|
||
<p class="date"><label id="poApprovedDate-Label"></label></p>
|
||
<p class="label">P.O. Approved</p>
|
||
</div>
|
||
|
||
<div class="line-container"><div class="line"></div></div>
|
||
<div class="step" id="step-itemArrivedDate">
|
||
<div class="icon-container">
|
||
<i id="icon-itemArrivedDate" class="fa fa-map-marker"></i>
|
||
</div>
|
||
<p class="date"><label id="itemArrivedDate-Label"></label></p>
|
||
<p class="label">Order Arrived</p>
|
||
</div>
|
||
<div class="line-container"><div class="line"></div></div>
|
||
<div class="step" id="step-receivedDate">
|
||
<div class="icon-container">
|
||
<i id="icon-receivedDate" class="fa fa-map-marker"></i>
|
||
</div>
|
||
<p class="date"><label id="receivedDate-Label"></label></p>
|
||
<p class="label">Date Received</p>
|
||
</div>
|
||
<div class="truck-icon" id="icon-truck">
|
||
<i class="fa fa-truck-moving"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Back</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Modal viewPRItemDetails -->
|
||
<div class="modal fade custom-modal-backdrop" id="viewPRItemDetails"
|
||
tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true" data-bs-backdrop="static">
|
||
<div class="modal-dialog modal-xl">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="ModalLabel">Item Details</h5>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="form-floating mb-3">
|
||
<input hidden style="margin-bottom:5px;" class="form-control" id="itemCodeId">
|
||
<input readonly class="form-control" style="margin-bottom:5px;" id="itemNo" placeholder="Item No">
|
||
<label for="itemCodeId">Item Code</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="form-floating mb-3">
|
||
<select class="form-control" name="packagingTypeId" id="packagingTypeId"
|
||
style="margin-bottom:5px;">
|
||
<option disabled>-Select package type-</option>
|
||
<option value="1">Bundle</option>
|
||
<option value="2">Per pc</option>
|
||
</select>
|
||
<label for="packagingTypeId">Packaging Type</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="form-floating mb-3">
|
||
<textarea id="itemName" class="form-control" style="width: 100%; height: 100px;"></textarea>
|
||
<label for="itemName">Item Name</label>
|
||
</div>
|
||
<div class="form-floating mb-3">
|
||
<textarea id="itemDescription" class="form-control" style="width: 100%; height: 125px;"></textarea>
|
||
<label for="itemDescription">Item Specification</label>
|
||
</div>
|
||
<div class="form-floating mb-3">
|
||
<select id="itemCategorySelect" class="form-control">
|
||
<option value=""></option>
|
||
</select>
|
||
<input id="itemCategoryName" name="itemCategoryName" class="form-control" />
|
||
<label for="itemCategoryName">Category</label>
|
||
|
||
<input type="hidden" id="ItemCategory2Id" name="ItemCategory2Id" />
|
||
</div>
|
||
|
||
<input type="hidden" id="itemLocalId" name="itemLocalId" />
|
||
|
||
</div>
|
||
<div class="col-md-4">
|
||
<input hidden id="department" placeholder="Department">
|
||
<div class="form-floating mb-3">
|
||
<select class="form-control" name="requestTypeId" id="requestTypeId"
|
||
style="margin-bottom:5px;">
|
||
<option disabled>-Select Request Type-</option>
|
||
<option value="2">P.R. Request</option>
|
||
<option value="1">Internal Request</option>
|
||
<option value="3">Assisted Request</option>
|
||
</select>
|
||
<label for="requestTypeId">Request Type</label>
|
||
</div>
|
||
<input hidden id="itemClassId" />
|
||
|
||
<div class="form-floating mb-3">
|
||
<select class="form-control" name="prTypeId" id="prTypeId"
|
||
style="margin-bottom:5px;">
|
||
<option disabled>-Select P.R. type-</option>
|
||
<option value="1">Goods</option>
|
||
<option value="2">Service</option>
|
||
</select>
|
||
<label for="prTypeId">P.R. Type</label>
|
||
</div>
|
||
<div class="form-floating mb-3">
|
||
<input type="search" id="itemColorName" class="form-control" style="margin-bottom:5px;" name="itemColorName" />
|
||
<label for="itemColorName">Item Color</label>
|
||
</div>
|
||
|
||
<div class="form-floating mb-3">
|
||
<select class="form-control" name="isCommon" id="isCommon"
|
||
style="margin-bottom:5px;">
|
||
<option disabled>-Select Item Type-</option>
|
||
<option value="true">Common</option>
|
||
<option value="false">Exclusive</option>
|
||
</select>
|
||
<label for="isCommon">Item Type</label>
|
||
</div>
|
||
<div class="row">
|
||
<div class="form-floating mb-3">
|
||
<input type="search" id="itemLocalName" class="form-control" style="margin-bottom:5px;" name="itemLocalName" />
|
||
<label for="itemLocalName">Item Locality</label>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-6">
|
||
<div class="form-floating mb-3">
|
||
<input type="search" id="uomName" class="form-control" style="margin-bottom:5px;" name="uomName" />
|
||
<label for="uomName">UOM</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-6">
|
||
<div class="form-floating mb-3">
|
||
<input type="number" id="itemQty" class="form-control" style="margin-bottom:5px;" name="itemQty" />
|
||
<label for="itemQty">Item Qty</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<input type="hidden" id="uomId" name="uomId" />
|
||
<input type="hidden" id="itemColorId" name="itemColorId" />
|
||
|
||
</div>
|
||
<div class="col-md-4 d-flex justify-content-center align-items-center">
|
||
<div class="text-center">
|
||
<img id="itemPictureImage" alt="itemPictureImage" class="img-fluid">
|
||
<!-- Stylish status label -->
|
||
<span id="statusName" class="status-badge denied">Denied</span>
|
||
|
||
<input type="file" id="itemPictureImageInput"
|
||
accept="image/png, image/jpeg" style="display: none;">
|
||
<input type="hidden" id="itemAttachId" name="itemAttachId" />
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div class="form-floating mb-3">
|
||
<textarea id="itemRemarks" class="form-control" style="width: 100%; height: 50px;"></textarea>
|
||
<label for="itemRemarks">Remarks</label>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Back</button>
|
||
<button type="button" id="btnHold" onclick="showDeniedRemarks();" class="btn btn-danger">Deny</button>
|
||
<button type="button" id="btnUpdateItem" onclick="putItemDetails(1);" class="btn btn-warning">Update</button>
|
||
<button type="button" id="btnApprove" onclick="confirmPRApproveReject(1,'N/A');" class="btn btn-success">Approve</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modal viewPRDetails -->
|
||
<div class="modal fade custom-modal-backdrop" id="viewPRDetails"
|
||
tabindex="-1" aria-labelledby="ModalLabel" data-bs-backdrop="static">
|
||
<div class="modal-dialog modal-xl">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 class="modal-title" id="ModalLabel">List of Item by PRNo</h2>
|
||
</div>
|
||
<div id="printableRelatedItem">
|
||
<div class="modal-body">
|
||
<!-- PR SUMMARY CARD -->
|
||
<div class="card border-0 shadow-sm mb-4 pr-info-section">
|
||
<div class="card-body">
|
||
|
||
<div class="row g-3">
|
||
|
||
<div class="col-md-3">
|
||
<div class="text-muted small">P.R. No</div>
|
||
<div id="label-pr-prNo" class="fw-bold fs-6"></div>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<div class="text-muted small">Date Needed</div>
|
||
<div id="label-pr-dateNeeded" class="fw-semibold text-danger"></div>
|
||
</div>
|
||
|
||
|
||
<div class="col-md-3">
|
||
<div class="text-muted small">Department</div>
|
||
<div id="label-pr-Department" class="fw-semibold"></div>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<div class="text-muted small">Project Code</div>
|
||
<div id="label-pr-ProjectCode" class="fw-semibold"></div>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<div class="text-muted small">Requested By</div>
|
||
<div id="label-prby" class="fw-semibold"></div>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<div class="text-muted small">Attested By</div>
|
||
<div id="label-pr-attestedBy" class="fw-semibold"></div>
|
||
</div>
|
||
|
||
<div class="col-md-3">
|
||
<div class="text-muted small">Approved By</div>
|
||
<div id="label-pr-approvedBy" class="fw-semibold"></div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="text-muted small">Remarks</div>
|
||
<div id="label-pr-remarks"
|
||
class="bg-light rounded p-2 small"></div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="button"
|
||
id="btnAddNewItem"
|
||
onclick="viewItemList();"
|
||
class="btn btn-add">
|
||
➕ Add Item
|
||
</button>
|
||
|
||
<!-- SELECTION SUMMARY -->
|
||
<div class="d-flex align-items-center mb-3 gap-2">
|
||
<div>
|
||
<span class="fw-semibold">Selected Items:</span>
|
||
<span id="totalSelected" class="badge bg-danger ms-2">0</span>
|
||
</div>
|
||
<div>
|
||
<button id="btnDownloadAttachment"
|
||
class="btn btn-sm btn-outline-teal d-none"
|
||
onclick="downloadPRAttachment()">
|
||
📎Export
|
||
</button>
|
||
<input hidden id="fileName" />
|
||
<input hidden id="origFileName" />
|
||
<input hidden id="prId" />
|
||
</div>
|
||
|
||
<!-- File Attachment Section -->
|
||
<div class="d-flex align-items-center gap-2 flex-grow-1">
|
||
<!-- File Input -->
|
||
<div class="file-upload-wrapper position-relative">
|
||
<input type="file"
|
||
class="form-control"
|
||
id="fileAttachment"
|
||
name="fileAttachment"
|
||
accept=".csv,.xlsx,.xls,.pdf"
|
||
style="max-width: 300px;" />
|
||
</div>
|
||
|
||
<!-- File Info Badge (shows when file selected) -->
|
||
<div id="fileInfoBadge" class="d-none">
|
||
<span class="badge bg-success-subtle text-success border border-success px-3 py-2">
|
||
<i class="bi bi-file-earmark-check me-1"></i>
|
||
<span id="fileNameDisplay" class="me-2"></span>
|
||
<small class="text-muted">(<span id="fileSizeDisplay"></span>)</small>
|
||
<button type="button"
|
||
class="btn-close btn-close-sm ms-2"
|
||
onclick="clearFileAttachment()"
|
||
style="font-size: 0.7rem; vertical-align: middle;"
|
||
title="Remove file"></button>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Upload/Update Button (shows when file selected) -->
|
||
<div id="btnUploadContainer" class="d-none ms-auto">
|
||
<button type="button"
|
||
class="btn btn-success btn-sm"
|
||
onclick="uploadAttachment()">
|
||
<i class="bi bi-cloud-upload me-1"></i>
|
||
<span id="btnUploadText">Upload Attachment</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<table id="PRdataTable"
|
||
class="row-border" style="width: 100%;">
|
||
<colgroup>
|
||
<col style="width:4%;text-align:left;" />
|
||
<col style="width:8%" />
|
||
<col style="width:28%" />
|
||
<col style="width:32%" />
|
||
<col style="width:8%" />
|
||
<col style="width:8%" />
|
||
<col style="width:12%" />
|
||
</colgroup>
|
||
<thead>
|
||
<tr>
|
||
<th style="text-align:left;width:4%;">
|
||
All
|
||
<input id="selectAllCheckboxItem" type="checkbox"
|
||
class="selectAllCheckboxItem" />
|
||
</th>
|
||
<th>ItemNo</th>
|
||
<th>ItemName</th>
|
||
<th>Specification</th>
|
||
<th>Qty</th>
|
||
<th>Status</th>
|
||
<th>Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer pr-modal-footer">
|
||
<button type="button"
|
||
class="btn btn-outline-secondary"
|
||
onclick="resetIsApproval()"
|
||
data-bs-dismiss="modal">
|
||
Back
|
||
</button>
|
||
|
||
<button type="button"
|
||
id="btnPrintPR"
|
||
onclick="printPRItem();"
|
||
class="btn btn-teal-warning">
|
||
🖨 Print
|
||
</button>
|
||
|
||
<button id="btnSubmitItem"
|
||
type="button"
|
||
class="btn btn-teal-primary"
|
||
onclick="approvedSelectedPRItem();">
|
||
✔ Approve Selected
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<style>
|
||
.btn-add {
|
||
background: linear-gradient(135deg, #009688, #00bfa5);
|
||
color: #fff;
|
||
font-weight: 600;
|
||
border: none;
|
||
border-radius: 8px;
|
||
padding: 10px 20px;
|
||
margin-bottom:10px;
|
||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn-add:hover {
|
||
background: linear-gradient(135deg, #00bfa5, #00796b);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.btn-add:active {
|
||
transform: scale(0.97);
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||
}
|
||
</style>
|
||
|
||
<input hidden id="roleRights" value="@ViewBag.UserRoles" /> |