Subversion Repositories SmartDukaan

Rev

Rev 34143 | Rev 36002 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 34143 Rev 35995
Line 8... Line 8...
8 
            </ol>
 8 
            </ol>
9 
        </div>
 9 
        </div>
10 
    </div>
 10 
    </div>
11 
    <div class="col-lg-12">
 11 
    <div class="col-lg-12">
12 
        #foreach( $transactionApprovalModel in $approvalModelList)
 12 
        #foreach( $transactionApprovalModel in $approvalModelList)
- 
 
 13 
            <div class="approval-card">
13 
            <div>
 14 
                ## Card Header
14 
                <table class="table table-border table-condensed table-bordered " id="transactionApproval"
 15 
                <div class="approval-header">
15 
                       style="width:100%">
 16 
                    <div class="approval-header-left">
- 
 
 17 
                        #if($transactionApprovalModel.isFirstPo())
16 
                    <thead class="row htable" style="background:#F5F5F5;">
 18 
                            <span class="badge badge-first-po">First PO Approval</span>
17 
 
 - 
 
18 
                    <tr style="color:black;">
 19 
                        #else
- 
 
 20 
                            <span class="badge badge-price">Price Approval</span>
19 
                        <th>Transaction Details</th>
 21 
                        #end
20 
                        <th style="text-align: center">Order Details</th>
 22 
                        <span class="txn-id">TXN #<span
21 
                        <th style="width: 20%; text-align: center">Remarks</th>
 23 
                                class="mk-transactionId">$transactionApprovalModel.getTransactionId()</span></span>
22 
                    </tr>
 24 
                    </div>
- 
 
 25 
                    <div class="approval-header-right">
- 
 
 26 
                        <span class="header-meta">$transactionApprovalModel.getCreatedOn().format($dateTimeFormatter)</span>
23 
                    </thead>
 27 
                    </div>
24 
                    <tbody>
 28 
                </div>
- 
 
 29 
 
25 
                    <tr>
 30 
                ## Card Info Row
26 
                        <td class="approvalTransactionId">
 31 
                <div class="approval-info-row">
- 
 
 32 
                    <div class="info-item">
27 
                            <b>Transaction Id :-</b><br><span
 33 
                        <span class="info-label">Retailer</span>
28 
                                class="mk-transactionId">$transactionApprovalModel.getTransactionId()</span>
 34 
                        <span class="info-value">$transactionApprovalModel.getRetailerName()</span>
29 
                            <br><br>
 35 
                    </div>
30 
                            <b>Created By :- </b><br>$transactionApprovalModel.getCreatedBy()<br><br>
 36 
                    <div class="info-item">
31 
                            <b> Created On
 37 
                        <span class="info-label">Created By</span>
32 
                                :- </b><br>$transactionApprovalModel.getCreatedOn().format($dateTimeFormatter)
 38 
                        <span class="info-value">$transactionApprovalModel.getCreatedBy()</span>
33 
                            <br><br>
 39 
                    </div>
- 
 
 40 
                    <div class="info-item">
- 
 
 41 
                        <span class="info-label">Items</span>
34 
                            <b> Retailer Name :- </b><br>$transactionApprovalModel.getRetailerName()</td>
 42 
                        <span class="info-value">$transactionApprovalModel.getLineItemModels().size()</span>
35 
                        <td>
 43 
                    </div>
- 
 
 44 
                </div>
- 
 
 45 
 
- 
 
 46 
                ## Items Table
36 
                            <table class="table table-bordered table-advance">
 47 
                <div class="approval-table-wrap">
37 
                                <thead style="background:#F5F5F5;">
 48 
                    <table class="approval-table">
38 
                                <tr>
 49 
                        <thead>
39 
                                    <th>Item Id</th>
 50 
                        <tr>
40 
                                    <th> Item Name</th>
 51 
                            <th>Item Name</th>
41 
                                    <th> Quantity</th>
 52 
                            <th class="text-center">Qty</th>
42 
                                    <th> DP</th>
 53 
                            <th class="text-right">DP</th>
43 
                                    <th>Total Dp</th>
 54 
                            <th class="text-right">Total DP</th>
44 
                                    <th> Selling Price</th>
 55 
                            <th class="text-right">Selling Price</th>
45 
                                    <th>Total Selling Price</th>
 56 
                            <th class="text-right">Total SP</th>
46 
                                    <th>Diffrence</th>
 57 
                            <th class="text-right">Difference</th>
- 
 
 58 
                            <th class="text-center">Stock</th>
47 
                                </tr>
 59 
                        </tr>
48 
                                </thead>
 60 
                        </thead>
49 
                                <tbody>
 61 
                        <tbody>
50 
                                    #foreach($orderDetail in $transactionApprovalModel.getLineItemModels())
 62 
                            #foreach($orderDetail in $transactionApprovalModel.getLineItemModels())
- 
 
 63 
                            <tr>
51 
                                    <tr>
 64 
                                <td>
52 
                                        <td>$orderDetail.getItemId()</td>
 65 
                                    <div class="item-name">$orderDetail.getItemName()</div>
53 
                                        <td>$orderDetail.getItemName()</td>
 66 
                                    <div class="item-id">ID: $orderDetail.getItemId()</div>
- 
 
 67 
                                </td>
54 
                                        <td>$orderDetail.getItemQuantity()</td>
 68 
                                <td class="text-center">$orderDetail.getItemQuantity()</td>
55 
                                        <td>$orderDetail.getDp()</td>
 69 
                                <td class="text-right">$orderDetail.getFormattedDp()</td>
56 
                                        <td>$orderDetail.getFormattedTotalDp()</td>
 70 
                                <td class="text-right">$orderDetail.getFormattedTotalDp()</td>
57 
                                        <td>$orderDetail.getSellingPrice()</td>
 71 
                                <td class="text-right">$orderDetail.getFormattedSellingPrice()</td>
58 
                                        <td>$orderDetail.getFormattedTotalSellingPrice()</td>
 72 
                                <td class="text-right">$orderDetail.getFormattedTotalSellingPrice()</td>
59 
                                        <td>$orderDetail.getFormattedDifference()</td>
 73 
                                <td class="text-right">$orderDetail.getFormattedDifference()</td>
- 
 
 74 
                                <td class="text-center">
- 
 
 75 
                                    #if($orderDetail.getAvailableStock() >= $orderDetail.getItemQuantity())
- 
 
 76 
                                        <span class="stock-badge stock-ok">$orderDetail.getAvailableStock()</span>
- 
 
 77 
                                    #elseif($orderDetail.getAvailableStock() > 0)
- 
 
 78 
                                        <span class="stock-badge stock-low">$orderDetail.getAvailableStock()</span>
60 
                                    </tr>
 79 
                                    #else
- 
 
 80 
                                        <span class="stock-badge stock-out">$orderDetail.getAvailableStock()</span>
61 
                                    #end
 81 
                                    #end
62 
                                </tbody>
 82 
                                </td>
63 
                            </table>
 83 
                            </tr>
- 
 
 84 
                            #end
64 
                        </td>
 85 
                        </tbody>
- 
 
 86 
                    </table>
- 
 
 87 
                </div>
- 
 
 88 
 
- 
 
 89 
                ## Action Row
65 
                        <td style="vertical-align: middle;">
 90 
                <div class="approval-actions approvalTransactionId">
66 
                            <textarea placeholder="Add Remark" rows="3" class="remark-box form-control"></textarea>
 91 
                    <textarea placeholder="Add remark..." class="remark-box form-control approval-remark"></textarea>
67 
                            <div class="clearfix"></div>
 92 
                    <div class="action-buttons">
68 
                            <br>
 - 
 
69 
                            <button class="transactionApprovalApproved btn btn-success"
 93 
                        <button class="transactionApprovalRejected btn-reject" data-approval="REJECTED">
70 
                                    data-approval="APPROVED">Approve
 94 
                            <i class="fa fa-times"></i> Reject
71 
                            </button>
 95 
                        </button>
72 
                            <button class="transactionApprovalRejected btn btn-danger"
 96 
                        <button class="transactionApprovalApproved btn-approve" data-approval="APPROVED">
73 
                                    data-approval="REJECTED">Reject
 97 
                            <i class="fa fa-check"></i> Approve
74 
                            </button>
 98 
                        </button>
75 
                        </td>
 99 
                    </div>
76 
                    </tr>
 100 
                </div>
77 
                    </tbody>
 101 
            </div>
- 
 
 102 
        #end
- 
 
 103 
 
- 
 
 104 
        #if($approvalModelList.isEmpty())
78 
                </table>
 105 
            <div class="empty-state">
- 
 
 106 
                <i class="fa fa-check-circle"></i>
- 
 
 107 
                <p>No pending approvals</p>
79 
            </div>
 108 
            </div>
80 
        #end
 109 
        #end
81 
    </div>
 110 
    </div>
82 
</section>
 111 
</section>
- 
 
 112 
 
83 
<style>
 113 
<style>
84 
    b {
 114 
    .approval-card {
- 
 
 115 
        background: #fff;
- 
 
 116 
        border: 1px solid #e0e0e0;
- 
 
 117 
        border-radius: 8px;
- 
 
 118 
        margin-bottom: 20px;
- 
 
 119 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
85 
        color: #688a7e;
 120 
        overflow: hidden;
- 
 
 121 
    }
86 
 
 122 
 
- 
 
 123 
    .approval-header {
- 
 
 124 
        display: flex;
- 
 
 125 
        justify-content: space-between;
- 
 
 126 
        align-items: center;
- 
 
 127 
        padding: 14px 20px;
- 
 
 128 
        background: #f8f9fa;
- 
 
 129 
        border-bottom: 1px solid #e0e0e0;
- 
 
 130 
    }
- 
 
 131 
 
- 
 
 132 
    .approval-header-left {
- 
 
 133 
        display: flex;
- 
 
 134 
        align-items: center;
- 
 
 135 
        gap: 12px;
- 
 
 136 
    }
- 
 
 137 
 
- 
 
 138 
    .badge-first-po {
- 
 
 139 
        background: #ff9800;
- 
 
 140 
        color: #fff;
- 
 
 141 
        padding: 4px 12px;
- 
 
 142 
        border-radius: 4px;
- 
 
 143 
        font-size: 12px;
- 
 
 144 
        font-weight: 600;
- 
 
 145 
        text-transform: uppercase;
- 
 
 146 
        letter-spacing: 0.5px;
- 
 
 147 
    }
- 
 
 148 
 
- 
 
 149 
    .badge-price {
- 
 
 150 
        background: #2196F3;
- 
 
 151 
        color: #fff;
- 
 
 152 
        padding: 4px 12px;
- 
 
 153 
        border-radius: 4px;
- 
 
 154 
        font-size: 12px;
- 
 
 155 
        font-weight: 600;
- 
 
 156 
        text-transform: uppercase;
- 
 
 157 
        letter-spacing: 0.5px;
- 
 
 158 
    }
- 
 
 159 
 
- 
 
 160 
    .txn-id {
- 
 
 161 
        font-size: 15px;
- 
 
 162 
        font-weight: 600;
- 
 
 163 
        color: #333;
- 
 
 164 
    }
- 
 
 165 
 
- 
 
 166 
    .header-meta {
- 
 
 167 
        font-size: 13px;
- 
 
 168 
        color: #888;
- 
 
 169 
    }
- 
 
 170 
 
- 
 
 171 
    .approval-info-row {
- 
 
 172 
        display: flex;
- 
 
 173 
        gap: 40px;
- 
 
 174 
        padding: 12px 20px;
- 
 
 175 
        border-bottom: 1px solid #f0f0f0;
- 
 
 176 
    }
- 
 
 177 
 
- 
 
 178 
    .info-item {
- 
 
 179 
        display: flex;
- 
 
 180 
        flex-direction: column;
- 
 
 181 
    }
- 
 
 182 
 
- 
 
 183 
    .info-label {
- 
 
 184 
        font-size: 11px;
- 
 
 185 
        color: #999;
- 
 
 186 
        text-transform: uppercase;
- 
 
 187 
        letter-spacing: 0.5px;
- 
 
 188 
        margin-bottom: 2px;
- 
 
 189 
    }
- 
 
 190 
 
- 
 
 191 
    .info-value {
- 
 
 192 
        font-size: 14px;
- 
 
 193 
        font-weight: 600;
- 
 
 194 
        color: #333;
- 
 
 195 
    }
- 
 
 196 
 
- 
 
 197 
    .approval-table-wrap {
- 
 
 198 
        padding: 0;
- 
 
 199 
        overflow-x: auto;
- 
 
 200 
    }
- 
 
 201 
 
- 
 
 202 
    .approval-table {
- 
 
 203 
        width: 100%;
- 
 
 204 
        border-collapse: collapse;
- 
 
 205 
        font-size: 13px;
- 
 
 206 
    }
- 
 
 207 
 
- 
 
 208 
    .approval-table thead th {
- 
 
 209 
        background: #f8f9fa;
- 
 
 210 
        padding: 10px 14px;
- 
 
 211 
        font-weight: 600;
- 
 
 212 
        color: #555;
- 
 
 213 
        border-bottom: 2px solid #e0e0e0;
- 
 
 214 
        font-size: 12px;
- 
 
 215 
        text-transform: uppercase;
- 
 
 216 
        letter-spacing: 0.3px;
- 
 
 217 
        white-space: nowrap;
- 
 
 218 
    }
- 
 
 219 
 
- 
 
 220 
    .approval-table tbody td {
- 
 
 221 
        padding: 10px 14px;
- 
 
 222 
        border-bottom: 1px solid #f0f0f0;
- 
 
 223 
        color: #333;
87 
    }
 224 
    }
88 
</style>
 - 
 
89 
 
 225 
 
- 
 
 226 
    .approval-table tbody tr:last-child td {
- 
 
 227 
        border-bottom: none;
- 
 
 228 
    }
- 
 
 229 
 
- 
 
 230 
    .approval-table tbody tr:hover {
- 
 
 231 
        background: #fafbfc;
- 
 
 232 
    }
- 
 
 233 
 
- 
 
 234 
    .text-center {
- 
 
 235 
        text-align: center;
- 
 
 236 
    }
- 
 
 237 
 
- 
 
 238 
    .text-right {
- 
 
 239 
        text-align: right;
- 
 
 240 
    }
- 
 
 241 
 
- 
 
 242 
    .item-name {
- 
 
 243 
        font-weight: 500;
- 
 
 244 
        color: #333;
- 
 
 245 
    }
- 
 
 246 
 
- 
 
 247 
    .item-id {
- 
 
 248 
        font-size: 11px;
- 
 
 249 
        color: #999;
- 
 
 250 
        margin-top: 2px;
- 
 
 251 
    }
- 
 
 252 
 
- 
 
 253 
    .stock-badge {
- 
 
 254 
        display: inline-block;
- 
 
 255 
        min-width: 32px;
- 
 
 256 
        padding: 3px 8px;
- 
 
 257 
        border-radius: 4px;
- 
 
 258 
        font-weight: 700;
- 
 
 259 
        font-size: 13px;
- 
 
 260 
        text-align: center;
- 
 
 261 
    }
- 
 
 262 
 
- 
 
 263 
    .stock-ok {
- 
 
 264 
        background: #e8f5e9;
- 
 
 265 
        color: #2e7d32;
- 
 
 266 
    }
- 
 
 267 
 
- 
 
 268 
    .stock-low {
- 
 
 269 
        background: #fff3e0;
- 
 
 270 
        color: #e65100;
- 
 
 271 
    }
- 
 
 272 
 
- 
 
 273 
    .stock-out {
- 
 
 274 
        background: #ffebee;
- 
 
 275 
        color: #c62828;
- 
 
 276 
    }
- 
 
 277 
 
- 
 
 278 
    .approval-actions {
- 
 
 279 
        display: flex;
- 
 
 280 
        align-items: center;
- 
 
 281 
        gap: 16px;
- 
 
 282 
        padding: 14px 20px;
- 
 
 283 
        background: #f8f9fa;
- 
 
 284 
        border-top: 1px solid #e0e0e0;
- 
 
 285 
    }
- 
 
 286 
 
- 
 
 287 
    .approval-remark {
- 
 
 288 
        flex: 1;
- 
 
 289 
        border: 1px solid #ddd;
- 
 
 290 
        border-radius: 6px;
- 
 
 291 
        padding: 8px 12px;
- 
 
 292 
        font-size: 13px;
- 
 
 293 
        resize: none;
- 
 
 294 
        height: 40px;
- 
 
 295 
    }
- 
 
 296 
 
- 
 
 297 
    .approval-remark:focus {
- 
 
 298 
        border-color: #2196F3;
- 
 
 299 
        outline: none;
- 
 
 300 
        box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.15);
- 
 
 301 
    }
- 
 
 302 
 
- 
 
 303 
    .action-buttons {
- 
 
 304 
        display: flex;
- 
 
 305 
        gap: 8px;
- 
 
 306 
        flex-shrink: 0;
- 
 
 307 
    }
- 
 
 308 
 
- 
 
 309 
    .btn-approve, .btn-reject {
- 
 
 310 
        padding: 8px 20px;
- 
 
 311 
        border: none;
- 
 
 312 
        border-radius: 6px;
- 
 
 313 
        font-size: 13px;
- 
 
 314 
        font-weight: 600;
- 
 
 315 
        cursor: pointer;
- 
 
 316 
        transition: all 0.2s;
- 
 
 317 
    }
- 
 
 318 
 
- 
 
 319 
    .btn-approve {
- 
 
 320 
        background: #4caf50;
- 
 
 321 
        color: #fff;
- 
 
 322 
    }
- 
 
 323 
 
- 
 
 324 
    .btn-approve:hover {
- 
 
 325 
        background: #388e3c;
- 
 
 326 
    }
- 
 
 327 
 
- 
 
 328 
    .btn-reject {
- 
 
 329 
        background: #fff;
- 
 
 330 
        color: #e53935;
- 
 
 331 
        border: 1px solid #e53935;
- 
 
 332 
    }
- 
 
 333 
 
- 
 
 334 
    .btn-reject:hover {
- 
 
 335 
        background: #ffebee;
- 
 
 336 
    }
- 
 
 337 
 
- 
 
 338 
    .empty-state {
- 
 
 339 
        text-align: center;
- 
 
 340 
        padding: 60px 20px;
- 
 
 341 
        color: #999;
- 
 
 342 
    }
- 
 
 343 
 
- 
 
 344 
    .empty-state i {
- 
 
 345 
        font-size: 48px;
- 
 
 346 
        color: #4caf50;
- 
 
 347 
        margin-bottom: 12px;
- 
 
 348 
    }
- 
 
 349 
 
- 
 
 350 
    .empty-state p {
- 
 
 351 
        font-size: 16px;
- 
 
 352 
    }
- 
 
 353 
</style>