Subversion Repositories SmartDukaan

Rev

Rev 36008 | Details | Compare with Previous | Last modification | View Log | RSS feed

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