Subversion Repositories SmartDukaan

Rev

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