account changes
This commit is contained in:
Utkarsh Khedkar
@@ -29,7 +29,7 @@ tr:hover td { background-color:#f9fafc;}
|
||||
.status-dispatched { background-color:#20c5c7; }
|
||||
.pending-badge-red { background-color:#ef4f4f; }
|
||||
.pending-badge-green { background-color:#34c86c; }
|
||||
.entry-link { color:#3769d7; text-decoration:underline; font-weight:600;}
|
||||
.entry-link { color:#3769d7; text-decoration:underline; font-weight:600; cursor: pointer;}
|
||||
.toggle-switch-btn {
|
||||
appearance: none; -webkit-appearance: none;
|
||||
width: 48px; height: 22px;
|
||||
@@ -47,9 +47,9 @@ tr:hover td { background-color:#f9fafc;}
|
||||
/* Modal */
|
||||
.modal-fade1 { position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(38,38,38,0.12); display:none; justify-content:center; align-items:center; z-index:999; }
|
||||
.modal-fade1.modal-open { display:flex; }
|
||||
.modal-fade {position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(38,38,38,0.12); display:none; justify-content:center; align-items:center; z-index:999; }
|
||||
.modal-fade{position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(38,38,38,0.12); display:none; justify-content:center; align-items:center; z-index:999; }
|
||||
.modal-fade.modal-open { display:flex; }
|
||||
.modal-box1 { background:#fff; border-radius:16px; box-shadow:0 8px 44px #33487129; padding:0 34px 30px 34px; min-width:590px; max: width 100%;;}
|
||||
.modal-box1 { background:#fff; border-radius:16px; box-shadow:0 8px 44px #33487129; padding:0 34px 30px 34px; min-width:590px; max-width:100%;;}
|
||||
.modal-box { background:#fff; border-radius:16px; box-shadow:0 8px 44px #33487129; padding:0 34px 30px 34px; min-width:590px; max: width 100%;;}
|
||||
.modal-head, .modal-title-main { font-size: 25px; font-weight:700; margin-bottom:5px;}
|
||||
.modal-desc, .modal-sub { font-size:16px; color:#6a7a8c; margin-bottom:13px;}
|
||||
@@ -62,7 +62,6 @@ tr:hover td { background-color:#f9fafc;}
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
z-index:999;
|
||||
/* keep default */
|
||||
}
|
||||
|
||||
.modal-fade1.modal-open {
|
||||
@@ -70,7 +69,7 @@ tr:hover td { background-color:#f9fafc;}
|
||||
}
|
||||
|
||||
.modal-box1 {
|
||||
max-width: 550px;
|
||||
max-width: 680px;
|
||||
min-width: 370px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
@@ -112,7 +111,19 @@ tr:hover td { background-color:#f9fafc;}
|
||||
.inst-blue { color:#509cf8; }
|
||||
.inst-purple { color:#7d57d2; }
|
||||
|
||||
<!-- Add to your CSS section: -->
|
||||
/* Entry Details Modal */
|
||||
.entry-details-modal { max-width: 800px; min-width: 700px; }
|
||||
.entry-details-header { background: linear-gradient(90deg, #1a2951, #243a72); color: white; padding: 20px 25px; border-radius: 12px 12px 0 0; margin: 0 -34px 20px -34px; }
|
||||
.entry-details-title { font-size: 24px; font-weight: 700; margin: 0; }
|
||||
.entry-details-subtitle { font-size: 14px; opacity: 0.9; margin: 5px 0 0 0; }
|
||||
.entry-summary-cards { display: flex; gap: 15px; margin-bottom: 20px; }
|
||||
.entry-summary-card { flex: 1; background: #f8fafc; border-radius: 10px; padding: 15px; border-left: 4px solid #1a2951; }
|
||||
.entry-summary-label { font-size: 13px; color: #6a7a8c; margin-bottom: 5px; }
|
||||
.entry-summary-value { font-size: 20px; font-weight: 700; color: #1a2951; }
|
||||
.entry-installments-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
|
||||
.entry-installments-table th { background: #f3f6fb; padding: 12px 15px; text-align: left; font-weight: 600; color: #4a5570; border-bottom: 2px solid #e5e9f2; }
|
||||
.entry-installments-table td { padding: 12px 15px; border-bottom: 1px solid #e5e9f2; }
|
||||
.entry-installments-table tr:hover td { background: #f9fafc; }
|
||||
|
||||
/* Modern Installment card style */
|
||||
.installment-card { background: #fff; border-radius: 10px; margin-bottom: 11px; padding: 10px 16px 10px 10px; display: flex; align-items: center; box-shadow: 0 2.5px 7px 0 rgba(60,90,170,0.09);}
|
||||
@@ -214,7 +225,173 @@ tr:hover td { background-color:#f9fafc;}
|
||||
.isum-green { color:#27ca58; }
|
||||
.isum-red { color:#e58211; }
|
||||
.isum-purple { color:#9856e6; }
|
||||
/* Consolidated Orders Details - k44 style */
|
||||
#consolidatedOrderDetailsModal .modal-box1 {
|
||||
max-width: 800px;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 8px 44px #33487129;
|
||||
background: #fff;
|
||||
padding: 0 26px 28px 26px;
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
}
|
||||
#consolidatedOrderDetailsModal .cod-header {
|
||||
padding: 18px 0 6px 0;
|
||||
border-radius: 16px 16px 0 0;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
color: #233063;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#consolidatedOrderDetailsModal .cod-header .cod-x {
|
||||
font-size: 26px;
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
font-weight: 600;
|
||||
}
|
||||
#consolidatedOrderDetailsModal .cod-header .cod-x:hover {
|
||||
color: #dd4343;
|
||||
}
|
||||
|
||||
#consolidatedOrderDetailsModal .cod-detail-row {
|
||||
display: flex;
|
||||
gap: 35px;
|
||||
align-items: center;
|
||||
font-size: 14.2px;
|
||||
margin: 9px 0 8px 0;
|
||||
color: #535770;
|
||||
}
|
||||
#consolidatedOrderDetailsModal .cod-detail-row span {
|
||||
margin-right: 18px;
|
||||
}
|
||||
#consolidatedOrderDetailsModal .cod-detail-row .cod-shipid {
|
||||
color: #2469d6;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-right: 18px;
|
||||
}
|
||||
#consolidatedOrderDetailsModal .cod-detail-row .cod-badge {
|
||||
background: #ffb366;
|
||||
color: #fff;
|
||||
padding: 3.4px 14px;
|
||||
border-radius: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin: 0 8px 0 0;
|
||||
vertical-align:middle;
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
#consolidatedOrderDetailsModal .cod-detail-row .cod-light {
|
||||
color: #9ba5bb;
|
||||
font-weight: 500;
|
||||
}
|
||||
#consolidatedOrderDetailsModal .cod-table {
|
||||
width: 100%;
|
||||
background: #f8f3e4;
|
||||
border-collapse: collapse;
|
||||
border-radius: 11px;
|
||||
box-shadow: 0 1px 8px #eeeae5;
|
||||
margin-bottom: 13px;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#consolidatedOrderDetailsModal .cod-table th,
|
||||
#consolidatedOrderDetailsModal .cod-table td {
|
||||
padding: 9px 9px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #efe6d1;
|
||||
color: #233063;
|
||||
white-space: nowrap;
|
||||
background: #faf8f1;
|
||||
}
|
||||
#consolidatedOrderDetailsModal .cod-table th {
|
||||
background: #ffe0a7;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
color: #3b4060;
|
||||
}
|
||||
#consolidatedOrderDetailsModal .cod-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
#consolidatedOrderDetailsModal .cod-table .cod-link {
|
||||
color: #2469d6;
|
||||
font-weight: 600;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
#consolidatedOrderDetailsModal .cod-summary-row {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
|
||||
align-items: center;
|
||||
margin-top: 13px;
|
||||
margin-bottom: 2px;
|
||||
padding: 8px 0 2px 0;
|
||||
background: none;
|
||||
}
|
||||
#consolidatedOrderDetailsModal .cod-sum-val {
|
||||
font-size: 23px;
|
||||
font-weight: 700;
|
||||
}
|
||||
#consolidatedOrderDetailsModal .cod-sum-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
margin-top: 3px;
|
||||
color: #858fa2;
|
||||
letter-spacing:0.2px;
|
||||
}
|
||||
#consolidatedOrderDetailsModal .cod-blue { color: #276dea;}
|
||||
#consolidatedOrderDetailsModal .cod-green { color: #22b963;}
|
||||
#consolidatedOrderDetailsModal .cod-red { color: #da2479; }
|
||||
#consolidatedOrderDetailsModal .cod-closebtn {
|
||||
background: #ebeffa;
|
||||
color: #37436c;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
padding: 10px 42px;
|
||||
cursor: pointer;
|
||||
margin-top: 13px;
|
||||
transition: background 0.18s;
|
||||
}
|
||||
#consolidatedOrderDetailsModal .cod-closebtn:hover {
|
||||
background: #dae1fa;
|
||||
}
|
||||
.shipment-container {
|
||||
background: #f4f4f6; /* हलका gray background */
|
||||
border-radius: 10px; /* कोपरे गोल */
|
||||
padding: 14px 18px; /* आतील space */
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* हलकी सावली */
|
||||
margin: 10px 0; /* थोडं बाहेरचं space */
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
transition: transform 0.25s ease, box-shadow 0.25s ease;
|
||||
}
|
||||
|
||||
/* Hover effect - थोडा उठून दिसतो */
|
||||
.shipment-container:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
/* आतल्या headings साठी consistency */
|
||||
.shipment-container span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Status badge look सुधारण्यासाठी */
|
||||
#modalShipmentStatus {
|
||||
background: #ffb366;
|
||||
color: #fff;
|
||||
padding: 4px 14px;
|
||||
border-radius: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -277,7 +454,7 @@ tr:hover td { background-color:#f9fafc;}
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><a href="#" class="entry-link">PAY-2023-042</a></td>
|
||||
<td><a class="entry-link" onclick="openEntryDetailsModal('PAY-2023-042')">PAY-2023-042</a></td>
|
||||
<td>2024-07-19</td>
|
||||
<td>Electronic Cams</td>
|
||||
<td>China</td>
|
||||
@@ -287,7 +464,7 @@ tr:hover td { background-color:#f9fafc;}
|
||||
<td><button class="plus-btn" title="Add" onclick="openInstallmentModal('PAY-2023-042', 'Electronic Cams', 'China', 8000)"><span style="font-size:21px;">+</span></button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a href="#" class="entry-link">PAY-2023-041</a></td>
|
||||
<td><a class="entry-link" onclick="openEntryDetailsModal('PAY-2023-041')">PAY-2023-041</a></td>
|
||||
<td>2024-07-19</td>
|
||||
<td>Electronic Cams</td>
|
||||
<td>China</td>
|
||||
@@ -302,7 +479,7 @@ tr:hover td { background-color:#f9fafc;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CREATE NEW ORDER MODAL (matches your images, all layout/fields horizontal) -->
|
||||
<!-- CREATE NEW ORDER MODAL -->
|
||||
<div class="modal-fade" id="orderModal">
|
||||
<div class="modal-box">
|
||||
<div class="modal-head" style="margin-top:18px;">Create New Order Entry</div>
|
||||
@@ -363,7 +540,7 @@ tr:hover td { background-color:#f9fafc;}
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><input type="checkbox" checked></td>
|
||||
<td><a href="#" class="order-link">KNT-2024-003</a></td>
|
||||
<td><a href="#" class="order-link" onclick="openConsolidatedOrderDetailsModal('KNT-2024-003')">KNT-2024-003</a></td>
|
||||
<td>ITEM03</td>
|
||||
<td>Electronic Components...</td>
|
||||
<td>1</td><td>6</td><td>6</td>
|
||||
@@ -372,7 +549,7 @@ tr:hover td { background-color:#f9fafc;}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td><a href="#" class="order-link">KNT-2024-003</a></td>
|
||||
<td><a href="#" class="order-link" onclick="openConsolidatedOrderDetailsModal('KNT-2024-003')">KNT-2024-003</a></td>
|
||||
<td>ITEM03</td>
|
||||
<td>Electronic Components...</td>
|
||||
<td>1</td><td>6</td><td>6</td>
|
||||
@@ -381,7 +558,7 @@ tr:hover td { background-color:#f9fafc;}
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="checkbox"></td>
|
||||
<td><a href="#" class="order-link">KNT-2024-003</a></td>
|
||||
<td><a href="#" class="order-link" onclick="openConsolidatedOrderDetailsModal('KNT-2024-003')">KNT-2024-003</a></td>
|
||||
<td>ITEM03</td>
|
||||
<td>Electronic Components...</td>
|
||||
<td>1</td><td>6</td><td>6</td>
|
||||
@@ -399,6 +576,84 @@ tr:hover td { background-color:#f9fafc;}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ENTRY DETAILS MODAL (k40.PNG style) -->
|
||||
<div class="modal-fade1" id="entryDetailsModal">
|
||||
<div class="modal-box1 entry-details-modal">
|
||||
<div class="entry-details-header">
|
||||
<h2 class="entry-details-title">Entry Details - <span id="entryDetailsId">PAY-2024-001</span></h2>
|
||||
<p class="entry-details-subtitle">Complete view of all installments for this entry.</p>
|
||||
</div>
|
||||
|
||||
<div class="entry-summary-cards">
|
||||
<div class="entry-summary-card">
|
||||
<div class="entry-summary-label">Original Amount</div>
|
||||
<div class="entry-summary-value" id="originalAmount">$5,000</div>
|
||||
</div>
|
||||
<div class="entry-summary-card">
|
||||
<div class="entry-summary-label">Total Processed</div>
|
||||
<div class="entry-summary-value" id="totalProcessed">$2,000</div>
|
||||
</div>
|
||||
<div class="entry-summary-card">
|
||||
<div class="entry-summary-label">Pending Balance</div>
|
||||
<div class="entry-summary-value" id="pendingBalance">$2,667</div>
|
||||
</div>
|
||||
<div class="entry-summary-card">
|
||||
<div class="entry-summary-label">Total Installments</div>
|
||||
<div class="entry-summary-value" id="totalInstallments">3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="entry-installments-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Installment</th>
|
||||
<th>Date</th>
|
||||
<th>Description</th>
|
||||
<th>Region</th>
|
||||
<th>Amount</th>
|
||||
<th>Status</th>
|
||||
<th>Pending</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="installmentsTableBody">
|
||||
<tr>
|
||||
<td>Original Entry</td>
|
||||
<td>2024-01-15</td>
|
||||
<td>Electronics Comp</td>
|
||||
<td>China</td>
|
||||
<td>$2,000</td>
|
||||
<td><span class="status-badge status-loading">Loading</span></td>
|
||||
<td>$1,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Installment 2</td>
|
||||
<td>2024-01-15</td>
|
||||
<td>Electronics Comp</td>
|
||||
<td>China</td>
|
||||
<td>$1,000</td>
|
||||
<td><span class="status-badge status-dispatched">Dispatched</span></td>
|
||||
<td>$1,500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Installment 3</td>
|
||||
<td>2024-01-15</td>
|
||||
<td>Electronics Comp</td>
|
||||
<td>China</td>
|
||||
<td>$500</td>
|
||||
<td><span class="status-badge status-dispatched">Dispatched</span></td>
|
||||
<td>$1,500</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div style="display:flex; justify-content: flex-end; gap:16px; margin-top:20px;">
|
||||
<button type="button" class="modal-btn cancel" onclick="closeEntryDetailsModal()">Close</button>
|
||||
<button type="button" class="modal-btn" onclick="openInstallmentModalFromDetails()">+ Add New Installment</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Installment Modal (Wide Card Style) -->
|
||||
<div class="modal-fade1" id="installmentModal">
|
||||
<div class="modal-box1" style="max: width 90%;; min-width:500px;">
|
||||
@@ -485,11 +740,142 @@ tr:hover td { background-color:#f9fafc;}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Consolidated Orders Details Modal (k44 style, heading+values+details) -->
|
||||
<div class="modal-fade1" id="consolidatedOrderDetailsModal">
|
||||
<div class="modal-box1" style="max-width:800px; border-radius:16px; box-shadow:0 8px 44px #33487129; background:#fff; padding:0 26px 28px 26px; font-family:'Segoe UI', Arial, sans-serif;">
|
||||
|
||||
<!-- Modal heading with close -->
|
||||
<div style="padding:18px 0 6px 0; font-weight:700; font-size:20px; color:#233063; display:flex;align-items:center; justify-content:space-between;">
|
||||
Consolidated Orders Details
|
||||
<span style="font-size:26px;color:#aaa;cursor:pointer;transition:color 0.2s;font-weight:600;" onclick="document.getElementById('consolidatedOrderDetailsModal').classList.remove('modal-open')">×</span>
|
||||
</div>
|
||||
|
||||
<!-- Headings and values - separate rows, centered -->
|
||||
<div class="shipment-container">
|
||||
<div style="margin:3px 0 12px 0;">
|
||||
<!-- Headings -->
|
||||
<div style="display:flex;justify-content:space-between;">
|
||||
<span style="flex:1;text-align:center;color:#9ba5bb;font-weight:500;">Shipment ID</span>
|
||||
<span style="flex:1;text-align:center;color:#9ba5bb;font-weight:500;">Total Orders</span>
|
||||
<span style="flex:1;text-align:center;color:#9ba5bb;font-weight:500;">Status</span>
|
||||
</div>
|
||||
<!-- Values row -->
|
||||
<div style="display:flex;justify-content:space-between;align-items:center;margin-top:2px;">
|
||||
<span style="flex:1;text-align:center;color:#2469d6;font-size:18px;font-weight:700;" id="modalShipmentId">KNT-SHIP-2024-001</span>
|
||||
<span style="flex:1;text-align:center;font-weight:600;font-size:17px;" id="modalTotalOrders">1</span>
|
||||
<span style="flex:1;text-align:center;" id="modalShipmentStatus">In Transit</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Sub-description -->
|
||||
|
||||
<!-- Table of orders -->
|
||||
<table style="width:100%;background:#f8f3e4;border-collapse:collapse;border-radius:11px;box-shadow:0 1px 8px #eeeae5;margin-bottom:13px;font-size:14px;overflow:hidden;">
|
||||
<thead>
|
||||
<tr style="background:#ffe0a7;">
|
||||
<th style="padding:9px 9px;text-align:left;font-weight:600;font-size:13px;color:#3b4060;">Order ID</th>
|
||||
<th style="padding:9px 9px;text-align:left;font-weight:600;font-size:13px;color:#3b4060;">Item No</th>
|
||||
<th style="padding:9px 9px;text-align:left;font-weight:600;font-size:13px;color:#3b4060;">Description</th>
|
||||
<th style="padding:9px 9px;text-align:left;font-weight:600;font-size:13px;color:#3b4060;">CTN</th>
|
||||
<th style="padding:9px 9px;text-align:left;font-weight:600;font-size:13px;color:#3b4060;">QTY</th>
|
||||
<th style="padding:9px 9px;text-align:left;font-weight:600;font-size:13px;color:#3b4060;">TTL/QTY</th>
|
||||
<th style="padding:9px 9px;text-align:left;font-weight:600;font-size:13px;color:#3b4060;">Unit</th>
|
||||
<th style="padding:9px 9px;text-align:left;font-weight:600;font-size:13px;color:#3b4060;">Amount (₹)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="modalOrdersBody">
|
||||
<!-- Example rows -->
|
||||
<tr>
|
||||
<td><a style="color:#2469d6;font-weight:600;text-decoration:underline;cursor:pointer;">KNT-2024-001</a></td>
|
||||
<td>ITEM001</td>
|
||||
<td>Manufacturing Equipment...</td>
|
||||
<td>4</td>
|
||||
<td>100</td>
|
||||
<td>500</td>
|
||||
<td>PCS</td>
|
||||
<td>₹4800.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a style="color:#2469d6;font-weight:600;text-decoration:underline;cursor:pointer;">KNT-2024-001</a></td>
|
||||
<td>ITEM001</td>
|
||||
<td>Manufacturing Equipment...</td>
|
||||
<td>4</td>
|
||||
<td>100</td>
|
||||
<td>500</td>
|
||||
<td>PCS</td>
|
||||
<td>₹4800.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Summary row -->
|
||||
<div style="display:flex;gap:20px; justify-content: space-around;align-items:center;margin-top:13px;margin-bottom:2px;padding:11px 0 2px 0;">
|
||||
<div>
|
||||
<div style="font-size:23px;font-weight:700;color:#276dea;" id="modalTotalTtlQty">500</div>
|
||||
<div style="font-size:13px;font-weight:500;margin-top:3px;color:#858fa2;letter-spacing:0.2px;">Total TTL/QTY</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:23px;font-weight:700;color:#22b963;" id="modalTotalTtlKg">10</div>
|
||||
<div style="font-size:13px;font-weight:500;margin-top:3px;color:#858fa2;letter-spacing:0.2px;">Total TTL KG</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size:23px;font-weight:700;color:#da2479;" id="modalTotalAmount">₹9600.00</div>
|
||||
<div style="font-size:13px;font-weight:500;margin-top:3px;color:#858fa2;letter-spacing:0.2px;">Total Amount</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;justify-content:flex-end;">
|
||||
<button type="button" style="background:#ebeffa;color:#37436c;border:none;border-radius:10px;font-size:16px;font-weight:600;padding:10px 42px;cursor:pointer;margin-top:13px;transition:background 0.18s;" onclick="document.getElementById('consolidatedOrderDetailsModal').classList.remove('modal-open')">Close</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
const installmentHistory = [
|
||||
{ ref: 'PAY-2023-042', desc: 'Electronic Cams', date: '2024-07-19', amt: 2000, status: 'Dispatched' },
|
||||
{ ref: 'PAY-2023-042', desc: 'Electronic Cams', date: '2024-08-01', amt: 2000, status: 'Dispatched' }
|
||||
];
|
||||
|
||||
// Entry Details Modal
|
||||
let currentEntryId = '';
|
||||
|
||||
function openEntryDetailsModal(entryId) {
|
||||
currentEntryId = entryId;
|
||||
document.getElementById('entryDetailsId').textContent = entryId;
|
||||
|
||||
// Set sample data based on entry ID
|
||||
if(entryId === 'PAY-2023-042') {
|
||||
document.getElementById('originalAmount').textContent = '$5,000';
|
||||
document.getElementById('totalProcessed').textContent = '$2,000';
|
||||
document.getElementById('pendingBalance').textContent = '$2,667';
|
||||
document.getElementById('totalInstallments').textContent = '3';
|
||||
} else if(entryId === 'PAY-2023-041') {
|
||||
document.getElementById('originalAmount').textContent = '$3,000';
|
||||
document.getElementById('totalProcessed').textContent = '$2,000';
|
||||
document.getElementById('pendingBalance').textContent = '$1,000';
|
||||
document.getElementById('totalInstallments').textContent = '2';
|
||||
}
|
||||
|
||||
document.getElementById('entryDetailsModal').classList.add('modal-open');
|
||||
}
|
||||
|
||||
function closeEntryDetailsModal() {
|
||||
document.getElementById('entryDetailsModal').classList.remove('modal-open');
|
||||
}
|
||||
|
||||
function openInstallmentModalFromDetails() {
|
||||
closeEntryDetailsModal();
|
||||
// Get the pending balance from the details modal
|
||||
const pendingBalance = document.getElementById('pendingBalance').textContent;
|
||||
const pendingAmount = parseInt(pendingBalance.replace(/[$,]/g, ''));
|
||||
|
||||
// Use the current entry ID and sample data
|
||||
openInstallmentModal(currentEntryId, 'Electronic Cams', 'China', pendingAmount);
|
||||
}
|
||||
|
||||
// Installment Modal
|
||||
function openInstallmentModal(ref, desc, region, pending) {
|
||||
document.getElementById('installmentModal').classList.add('modal-open');
|
||||
@@ -521,13 +907,48 @@ function openInstallmentModal(ref, desc, region, pending) {
|
||||
</div>`;
|
||||
document.getElementById('installmentHistory').innerHTML = instHtml;
|
||||
}
|
||||
|
||||
function closeInstallmentModal() {
|
||||
document.getElementById('installmentModal').classList.remove('modal-open');
|
||||
}
|
||||
|
||||
// Consolidated Orders Details Modal
|
||||
function openConsolidatedOrderDetailsModal(orderId) {
|
||||
document.getElementById('modalShipmentId').textContent = "KNT-SHIP-2024-001";
|
||||
document.getElementById('modalShipmentStatus').textContent = "In Transit";
|
||||
document.getElementById('modalOrdersBody').innerHTML = `
|
||||
<tr>
|
||||
<td><a style="color:#307fde;font-weight:600;text-decoration:underline;" href="#">KNT-2024-001</a></td>
|
||||
<td>ITEM001</td>
|
||||
<td>Manufacturing Equipment...</td>
|
||||
<td>4</td>
|
||||
<td>100</td>
|
||||
<td>500</td>
|
||||
<td>PCS</td>
|
||||
<td>₹4800.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><a style="color:#307fde;font-weight:600;text-decoration:underline;" href="#">KNT-2024-001</a></td>
|
||||
<td>ITEM001</td>
|
||||
<td>Manufacturing Equipment...</td>
|
||||
<td>4</td>
|
||||
<td>100</td>
|
||||
<td>500</td>
|
||||
<td>PCS</td>
|
||||
<td>₹4800.00</td>
|
||||
</tr>
|
||||
`;
|
||||
document.getElementById('modalTotalTtlQty').textContent = "500";
|
||||
document.getElementById('modalTotalTtlKg').textContent = "10";
|
||||
document.getElementById('modalTotalAmount').textContent = "₹9600.00";
|
||||
document.getElementById('consolidatedOrderDetailsModal').classList.add('modal-open');
|
||||
}
|
||||
|
||||
document.getElementById('openOrderModal').onclick = function(){
|
||||
document.getElementById('orderModal').classList.add('modal-open');
|
||||
};
|
||||
// Tab-style Consolidated Orders: only one (for appearance - can extend for more tabs if needed)
|
||||
|
||||
// Tab-style Consolidated Orders
|
||||
const toggleBtn = document.getElementById('toggleConsolidatedBtn');
|
||||
const consolOrdersList = document.getElementById('consolidateOrdersList');
|
||||
const toggleText = document.getElementById('toggleConsolidatedText');
|
||||
@@ -538,12 +959,15 @@ toggleBtn.onclick = function(){
|
||||
consolOrdersList.style.display="none"; toggleText.textContent="Show Orders"; toggleBtn.classList.remove('active');
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('cancelOrderModal').onclick = function(){
|
||||
document.getElementById('orderModal').classList.remove('modal-open');
|
||||
};
|
||||
|
||||
document.getElementById('orderModal').onclick = function(e){
|
||||
if(e.target === this) this.classList.remove('modal-open');
|
||||
};
|
||||
|
||||
// Create Order logic
|
||||
document.getElementById('createOrderForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
@@ -566,7 +990,7 @@ document.getElementById('createOrderForm').addEventListener('submit', function(e
|
||||
`);
|
||||
document.querySelector('#main-order-table tbody').insertAdjacentHTML('beforeend', `
|
||||
<tr>
|
||||
<td><a href="#" class="entry-link">${entryNo}</a></td>
|
||||
<td><a class="entry-link" onclick="openEntryDetailsModal('${entryNo}')">${entryNo}</a></td>
|
||||
<td>${date}</td>
|
||||
<td>${desc}</td>
|
||||
<td>${region}</td>
|
||||
@@ -584,4 +1008,4 @@ document.getElementById('createOrderForm').addEventListener('submit', function(e
|
||||
this.reset();
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
@endsection
|
||||
Reference in New Issue
Block a user