77 lines
2.8 KiB
HTML
Executable File
77 lines
2.8 KiB
HTML
Executable File
<!-- Responsive Container -->
|
|
<div class="middle-section-container" [ngStyle]="{ height: containerHeight }">
|
|
<!-- Transaction Summary -->
|
|
<div class="transaction-summary">
|
|
<div
|
|
class="p-3 rounded text-white h-100 d-flex flex-column"
|
|
style="background-color: #546c98"
|
|
>
|
|
<h5 class="text-center mb-3">Transaction Summary</h5>
|
|
<div
|
|
class="rounded flex-grow-1"
|
|
style="background-color: #f1f1f1df; padding: 1rem; overflow: hidden"
|
|
>
|
|
<table
|
|
class="table borderless-custom w-100 text-dark mb-0 transaction_tb"
|
|
>
|
|
<colgroup>
|
|
<col style="width: 20%" />
|
|
<col style="width: 15%" />
|
|
<col style="width: 65%" />
|
|
</colgroup>
|
|
<tbody>
|
|
<tr>
|
|
<td class="custom-cell pure-white">Sales</td>
|
|
<td class="custom-cell pure-white"></td>
|
|
<td class="custom-cell pure-white"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="custom-cell pure-white">Cancel</td>
|
|
<td class="custom-cell pure-white"></td>
|
|
<td class="custom-cell pure-white"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="custom-cell pure-white">Payout</td>
|
|
<td class="custom-cell pure-white"></td>
|
|
<td class="custom-cell pure-white"></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="custom-cell pure-white">Receive</td>
|
|
<td class="custom-cell pure-white"></td>
|
|
<td class="custom-cell pure-white"></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Table -->
|
|
<div class="main-table">
|
|
<div
|
|
class="p-2 rounded h-100 d-flex flex-column justify-content-between"
|
|
style="background-color: #f1f1f1df"
|
|
>
|
|
<table class="table borderless-custom w-100 mb-2 table-main">
|
|
<colgroup>
|
|
<col style="width: 12%" /> <!-- Label column -->
|
|
<col style="width: 60%" /> <!-- Numbers column -->
|
|
<col style="width: 10%" /> <!-- Value column -->
|
|
<col style="width: 18%" /> <!-- Total column -->
|
|
</colgroup>
|
|
<tbody>
|
|
<tr *ngFor="let row of filledRows">
|
|
<td class="custom-cell-new-1">{{ row.label }}</td>
|
|
<td class="custom-cell-new">{{ row.isBoxed ? '# ' : '' }}{{ row.numbers.join(', ') }}</td>
|
|
<td class="custom-cell-new-2">{{ row.value || '' }}</td>
|
|
<td class="custom-cell-new-3">{{ row.total || '' }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="buttons-custom d-flex justify-content-between align-items-center">
|
|
<button class="btn btn-dark">Repeat</button>
|
|
<div class="fw-bold fs-5">Amount : ₹ {{ grandTotal }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |