Subversion Repositories SmartDukaan

Rev

Rev 36002 | Go to most recent revision | 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">
49 
                        <thead>
50 
                        <tr>
36008 aman 51 
                            <th class="text-right">Item Id</th>
35995 aman 52 
                            <th>Item Name</th>
53 
                            <th class="text-center">Qty</th>
54 
                            <th class="text-right">Total DP</th>
55 
                            <th class="text-right">Total SP</th>
56 
                            <th class="text-right">Difference</th>
57 
                            <th class="text-center">Stock</th>
58 
                        </tr>
59 
                        </thead>
60 
                        <tbody>
61 
                            #foreach($orderDetail in $transactionApprovalModel.getLineItemModels())
62 
                            <tr>
36008 aman 63 
                                <td class="text-center">$orderDetail.getItemId()</td>
35995 aman 64 
                                <td>
65 
                                    <div class="item-name">$orderDetail.getItemName()</div>
66 
                                </td>
67 
                                <td class="text-center">$orderDetail.getItemQuantity()</td>
68 
                                <td class="text-right">$orderDetail.getFormattedTotalDp()</td>
69 
                                <td class="text-right">$orderDetail.getFormattedTotalSellingPrice()</td>
70 
                                <td class="text-right">$orderDetail.getFormattedDifference()</td>
71 
                                <td class="text-center">
72 
                                    #if($orderDetail.getAvailableStock() >= $orderDetail.getItemQuantity())
73 
                                        <span class="stock-badge stock-ok">$orderDetail.getAvailableStock()</span>
74 
                                    #elseif($orderDetail.getAvailableStock() > 0)
75 
                                        <span class="stock-badge stock-low">$orderDetail.getAvailableStock()</span>
76 
                                    #else
77 
                                        <span class="stock-badge stock-out">$orderDetail.getAvailableStock()</span>
33213 tejus.loha 78 
                                    #end
35995 aman 79 
                                </td>
80 
                            </tr>
81 
                            #end
82 
                        </tbody>
36008 aman 83 
                        <tfoot>
84 
                        <tr class="totals-row">
85 
                            <td></td>
86 
                            <td class="text-right"><strong>Total</strong></td>
87 
                            <td class="text-center"><strong>$transactionApprovalModel.getTotalPcs()</strong></td>
88 
                            <td class="text-right"><strong>$transactionApprovalModel.getFormattedTotalDpValue()</strong>
89 
                            </td>
90 
                            <td class="text-right">
91 
                                <strong>$transactionApprovalModel.getFormattedTotalSellingPriceValue()</strong></td>
92 
                            <td class="text-right">
93 
                                <strong>$transactionApprovalModel.getFormattedTotalDifferenceValue()</strong></td>
94 
                            <td></td>
95 
                        </tr>
96 
                        </tfoot>
35995 aman 97 
                    </table>
98 
                </div>
99 
 
100 
                ## Action Row
101 
                <div class="approval-actions approvalTransactionId">
102 
                    <textarea placeholder="Add remark..." class="remark-box form-control approval-remark"></textarea>
103 
                    <div class="action-buttons">
104 
                        <button class="transactionApprovalRejected btn-reject" data-approval="REJECTED">
105 
                            <i class="fa fa-times"></i> Reject
106 
                        </button>
107 
                        <button class="transactionApprovalApproved btn-approve" data-approval="APPROVED">
108 
                            <i class="fa fa-check"></i> Approve
109 
                        </button>
110 
                    </div>
111 
                </div>
33213 tejus.loha 112 
            </div>
113 
        #end
35995 aman 114 
 
115 
        #if($approvalModelList.isEmpty())
116 
            <div class="empty-state">
117 
                <i class="fa fa-check-circle"></i>
118 
                <p>No pending approvals</p>
119 
            </div>
120 
        #end
33213 tejus.loha 121 
    </div>
122 
</section>
35995 aman 123 
 
33213 tejus.loha 124 
<style>
35995 aman 125 
    .approval-card {
126 
        background: #fff;
127 
        border: 1px solid #e0e0e0;
128 
        border-radius: 8px;
129 
        margin-bottom: 20px;
130 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
131 
        overflow: hidden;
132 
    }
33213 tejus.loha 133 
 
35995 aman 134 
    .approval-header {
135 
        display: flex;
136 
        justify-content: space-between;
137 
        align-items: center;
138 
        padding: 14px 20px;
139 
        background: #f8f9fa;
140 
        border-bottom: 1px solid #e0e0e0;
33213 tejus.loha 141 
    }
35995 aman 142 
 
143 
    .approval-header-left {
144 
        display: flex;
145 
        align-items: center;
146 
        gap: 12px;
147 
    }
148 
 
149 
    .badge-first-po {
150 
        background: #ff9800;
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 
    .badge-price {
161 
        background: #2196F3;
162 
        color: #fff;
163 
        padding: 4px 12px;
164 
        border-radius: 4px;
165 
        font-size: 12px;
166 
        font-weight: 600;
167 
        text-transform: uppercase;
168 
        letter-spacing: 0.5px;
169 
    }
170 
 
171 
    .txn-id {
172 
        font-size: 15px;
173 
        font-weight: 600;
174 
        color: #333;
175 
    }
176 
 
177 
    .header-meta {
178 
        font-size: 13px;
179 
        color: #888;
180 
    }
181 
 
182 
    .approval-info-row {
183 
        display: flex;
184 
        gap: 40px;
185 
        padding: 12px 20px;
186 
        border-bottom: 1px solid #f0f0f0;
187 
    }
188 
 
189 
    .info-item {
190 
        display: flex;
191 
        flex-direction: column;
192 
    }
193 
 
194 
    .info-label {
195 
        font-size: 11px;
196 
        color: #999;
197 
        text-transform: uppercase;
198 
        letter-spacing: 0.5px;
199 
        margin-bottom: 2px;
200 
    }
201 
 
202 
    .info-value {
203 
        font-size: 14px;
204 
        font-weight: 600;
205 
        color: #333;
206 
    }
207 
 
208 
    .approval-table-wrap {
209 
        padding: 0;
210 
        overflow-x: auto;
211 
    }
212 
 
213 
    .approval-table {
214 
        width: 100%;
215 
        border-collapse: collapse;
216 
        font-size: 13px;
217 
    }
218 
 
219 
    .approval-table thead th {
220 
        background: #f8f9fa;
221 
        padding: 10px 14px;
222 
        font-weight: 600;
223 
        color: #555;
224 
        border-bottom: 2px solid #e0e0e0;
225 
        font-size: 12px;
226 
        text-transform: uppercase;
227 
        letter-spacing: 0.3px;
228 
        white-space: nowrap;
229 
    }
230 
 
231 
    .approval-table tbody td {
232 
        padding: 10px 14px;
233 
        border-bottom: 1px solid #f0f0f0;
234 
        color: #333;
235 
    }
236 
 
237 
    .approval-table tbody tr:last-child td {
238 
        border-bottom: none;
239 
    }
240 
 
36008 aman 241 
    .approval-table tfoot .totals-row td {
242 
        padding: 10px 14px;
243 
        background: #f0f4f8;
244 
        border-top: 2px solid #ccc;
245 
        font-size: 13px;
246 
    }
247 
 
35995 aman 248 
    .approval-table tbody tr:hover {
249 
        background: #fafbfc;
250 
    }
251 
 
252 
    .text-center {
253 
        text-align: center;
254 
    }
255 
 
256 
    .text-right {
257 
        text-align: right;
258 
    }
259 
 
260 
    .item-name {
261 
        font-weight: 500;
262 
        color: #333;
263 
    }
264 
 
265 
    .item-id {
266 
        font-size: 11px;
267 
        color: #999;
268 
        margin-top: 2px;
269 
    }
270 
 
271 
    .stock-badge {
272 
        display: inline-block;
273 
        min-width: 32px;
274 
        padding: 3px 8px;
275 
        border-radius: 4px;
276 
        font-weight: 700;
277 
        font-size: 13px;
278 
        text-align: center;
279 
    }
280 
 
281 
    .stock-ok {
282 
        background: #e8f5e9;
283 
        color: #2e7d32;
284 
    }
285 
 
286 
    .stock-low {
287 
        background: #fff3e0;
288 
        color: #e65100;
289 
    }
290 
 
291 
    .stock-out {
292 
        background: #ffebee;
293 
        color: #c62828;
294 
    }
295 
 
296 
    .approval-actions {
297 
        display: flex;
298 
        align-items: center;
299 
        gap: 16px;
300 
        padding: 14px 20px;
301 
        background: #f8f9fa;
302 
        border-top: 1px solid #e0e0e0;
303 
    }
304 
 
305 
    .approval-remark {
306 
        flex: 1;
307 
        border: 1px solid #ddd;
308 
        border-radius: 6px;
309 
        padding: 8px 12px;
310 
        font-size: 13px;
311 
        resize: none;
312 
        height: 40px;
313 
    }
314 
 
315 
    .approval-remark:focus {
316 
        border-color: #2196F3;
317 
        outline: none;
318 
        box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.15);
319 
    }
320 
 
321 
    .action-buttons {
322 
        display: flex;
323 
        gap: 8px;
324 
        flex-shrink: 0;
325 
    }
326 
 
327 
    .btn-approve, .btn-reject {
328 
        padding: 8px 20px;
329 
        border: none;
330 
        border-radius: 6px;
331 
        font-size: 13px;
332 
        font-weight: 600;
333 
        cursor: pointer;
334 
        transition: all 0.2s;
335 
    }
336 
 
337 
    .btn-approve {
338 
        background: #4caf50;
339 
        color: #fff;
340 
    }
341 
 
342 
    .btn-approve:hover {
343 
        background: #388e3c;
344 
    }
345 
 
346 
    .btn-reject {
347 
        background: #fff;
348 
        color: #e53935;
349 
        border: 1px solid #e53935;
350 
    }
351 
 
352 
    .btn-reject:hover {
353 
        background: #ffebee;
354 
    }
355 
 
356 
    .empty-state {
357 
        text-align: center;
358 
        padding: 60px 20px;
359 
        color: #999;
360 
    }
361 
 
362 
    .empty-state i {
363 
        font-size: 48px;
364 
        color: #4caf50;
365 
        margin-bottom: 12px;
366 
    }
367 
 
368 
    .empty-state p {
369 
        font-size: 16px;
370 
    }
33213 tejus.loha 371 
</style>