Subversion Repositories SmartDukaan

<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_document_alt"></i>Pending Approval</h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
                <li><i class="icon_document_alt"></i>Approval</li>
            </ol>
        </div>
    </div>
    <div class="col-lg-12">
        #foreach( $transactionApprovalModel in $approvalModelList)
            <div class="approval-card">
                ## Card Header
                <div class="approval-header">
                    <div class="approval-header-left">
                        #if($transactionApprovalModel.isFirstPo())
                            <span class="badge badge-first-po">First PO Approval</span>
                        #else
                            <span class="badge badge-price">Price Approval</span>
                        #end
                        <span class="txn-id">TXN #<span
                                class="mk-transactionId">$transactionApprovalModel.getTransactionId()</span></span>
                    </div>
                    <div class="approval-header-right">
                        <span class="header-meta">$transactionApprovalModel.getCreatedOn().format($dateTimeFormatter)</span>
                    </div>
                </div>

                ## Card Info Row
                <div class="approval-info-row">
                    <div class="info-item">
                        <span class="info-label">Retailer</span>
                        <span class="info-value">$transactionApprovalModel.getRetailerName()</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Created By</span>
                        <span class="info-value">$transactionApprovalModel.getCreatedBy()</span>
                    </div>
                    <div class="info-item">
                        <span class="info-label">Items</span>
                        <span class="info-value">$transactionApprovalModel.getLineItemModels().size()</span>
                    </div>
                </div>

                ## Items Table
                <div class="approval-table-wrap">
                    <table class="approval-table">
                        <thead>
                        <tr>
                            <th class="text-right">Item Id</th>
                            <th>Item Name</th>
                            <th class="text-center">Qty</th>
                            <th class="text-right">Total DP</th>
                            <th class="text-right">Total SP</th>
                            <th class="text-right">Difference</th>
                            <th class="text-center">Stock</th>
                        </tr>
                        </thead>
                        <tbody>
                            #foreach($orderDetail in $transactionApprovalModel.getLineItemModels())
                            <tr>
                                <td class="text-center">$orderDetail.getItemId()</td>
                                <td>
                                    <div class="item-name">$orderDetail.getItemName()</div>
                                </td>
                                <td class="text-center">$orderDetail.getItemQuantity()</td>
                                <td class="text-right">$orderDetail.getFormattedTotalDp()</td>
                                <td class="text-right">$orderDetail.getFormattedTotalSellingPrice()</td>
                                <td class="text-right">$orderDetail.getFormattedDifference()</td>
                                <td class="text-center">
                                    #if($orderDetail.getAvailableStock() >= $orderDetail.getItemQuantity())
                                        <span class="stock-badge stock-ok">$orderDetail.getAvailableStock()</span>
                                    #elseif($orderDetail.getAvailableStock() > 0)
                                        <span class="stock-badge stock-low">$orderDetail.getAvailableStock()</span>
                                    #else
                                        <span class="stock-badge stock-out">$orderDetail.getAvailableStock()</span>
                                    #end
                                </td>
                            </tr>
                            #end
                        </tbody>
                        <tfoot>
                        <tr class="totals-row">
                            <td></td>
                            <td class="text-right"><strong>Total</strong></td>
                            <td class="text-center"><strong>$transactionApprovalModel.getTotalPcs()</strong></td>
                            <td class="text-right"><strong>$transactionApprovalModel.getFormattedTotalDpValue()</strong>
                            </td>
                            <td class="text-right">
                                <strong>$transactionApprovalModel.getFormattedTotalSellingPriceValue()</strong></td>
                            <td class="text-right">
                                <strong>$transactionApprovalModel.getFormattedTotalDifferenceValue()</strong></td>
                            <td></td>
                        </tr>
                        </tfoot>
                    </table>
                </div>

                ## Action Row
                <div class="approval-actions approvalTransactionId">
                    <textarea placeholder="Add remark..." class="remark-box form-control approval-remark"></textarea>
                    <div class="action-buttons">
                        <button class="transactionApprovalRejected btn-reject" data-approval="REJECTED">
                            <i class="fa fa-times"></i> Reject
                        </button>
                        <button class="transactionApprovalApproved btn-approve" data-approval="APPROVED">
                            <i class="fa fa-check"></i> Approve
                        </button>
                    </div>
                </div>
            </div>
        #end

        #if($approvalModelList.isEmpty())
            <div class="empty-state">
                <i class="fa fa-check-circle"></i>
                <p>No pending approvals</p>
            </div>
        #end
    </div>
</section>

<style>
    .approval-card {
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
        overflow: hidden;
    }

    .approval-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 20px;
        background: #f8f9fa;
        border-bottom: 1px solid #e0e0e0;
    }

    .approval-header-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .badge-first-po {
        background: #ff9800;
        color: #fff;
        padding: 4px 12px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .badge-price {
        background: #2196F3;
        color: #fff;
        padding: 4px 12px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .txn-id {
        font-size: 15px;
        font-weight: 600;
        color: #333;
    }

    .header-meta {
        font-size: 13px;
        color: #888;
    }

    .approval-info-row {
        display: flex;
        gap: 40px;
        padding: 12px 20px;
        border-bottom: 1px solid #f0f0f0;
    }

    .info-item {
        display: flex;
        flex-direction: column;
    }

    .info-label {
        font-size: 11px;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }

    .info-value {
        font-size: 14px;
        font-weight: 600;
        color: #333;
    }

    .approval-table-wrap {
        padding: 0;
        overflow-x: auto;
    }

    .approval-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    .approval-table thead th {
        background: #f8f9fa;
        padding: 10px 14px;
        font-weight: 600;
        color: #555;
        border-bottom: 2px solid #e0e0e0;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }

    .approval-table tbody td {
        padding: 10px 14px;
        border-bottom: 1px solid #f0f0f0;
        color: #333;
    }

    .approval-table tbody tr:last-child td {
        border-bottom: none;
    }

    .approval-table tfoot .totals-row td {
        padding: 10px 14px;
        background: #f0f4f8;
        border-top: 2px solid #ccc;
        font-size: 13px;
    }

    .approval-table tbody tr:hover {
        background: #fafbfc;
    }

    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: right;
    }

    .item-name {
        font-weight: 500;
        color: #333;
    }

    .item-id {
        font-size: 11px;
        color: #999;
        margin-top: 2px;
    }

    .stock-badge {
        display: inline-block;
        min-width: 32px;
        padding: 3px 8px;
        border-radius: 4px;
        font-weight: 700;
        font-size: 13px;
        text-align: center;
    }

    .stock-ok {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .stock-low {
        background: #fff3e0;
        color: #e65100;
    }

    .stock-out {
        background: #ffebee;
        color: #c62828;
    }

    .approval-actions {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 14px 20px;
        background: #f8f9fa;
        border-top: 1px solid #e0e0e0;
    }

    .approval-remark {
        flex: 1;
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 8px 12px;
        font-size: 13px;
        resize: none;
        height: 40px;
    }

    .approval-remark:focus {
        border-color: #2196F3;
        outline: none;
        box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.15);
    }

    .action-buttons {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
    }

    .btn-approve, .btn-reject {
        padding: 8px 20px;
        border: none;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-approve {
        background: #4caf50;
        color: #fff;
    }

    .btn-approve:hover {
        background: #388e3c;
    }

    .btn-reject {
        background: #fff;
        color: #e53935;
        border: 1px solid #e53935;
    }

    .btn-reject:hover {
        background: #ffebee;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #999;
    }

    .empty-state i {
        font-size: 48px;
        color: #4caf50;
        margin-bottom: 12px;
    }

    .empty-state p {
        font-size: 16px;
    }
</style>