Subversion Repositories SmartDukaan

Rev

Rev 34143 | 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>
51 
                            <th>Item Name</th>
52 
                            <th class="text-center">Qty</th>
53 
                            <th class="text-right">DP</th>
54 
                            <th class="text-right">Total DP</th>
55 
                            <th class="text-right">Selling Price</th>
56 
                            <th class="text-right">Total SP</th>
57 
                            <th class="text-right">Difference</th>
58 
                            <th class="text-center">Stock</th>
59 
                        </tr>
60 
                        </thead>
61 
                        <tbody>
62 
                            #foreach($orderDetail in $transactionApprovalModel.getLineItemModels())
63 
                            <tr>
64 
                                <td>
65 
                                    <div class="item-name">$orderDetail.getItemName()</div>
66 
                                    <div class="item-id">ID: $orderDetail.getItemId()</div>
67 
                                </td>
68 
                                <td class="text-center">$orderDetail.getItemQuantity()</td>
69 
                                <td class="text-right">$orderDetail.getFormattedDp()</td>
70 
                                <td class="text-right">$orderDetail.getFormattedTotalDp()</td>
71 
                                <td class="text-right">$orderDetail.getFormattedSellingPrice()</td>
72 
                                <td class="text-right">$orderDetail.getFormattedTotalSellingPrice()</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>
79 
                                    #else
80 
                                        <span class="stock-badge stock-out">$orderDetail.getAvailableStock()</span>
33213 tejus.loha 81 
                                    #end
35995 aman 82 
                                </td>
83 
                            </tr>
84 
                            #end
85 
                        </tbody>
86 
                    </table>
87 
                </div>
88 
 
89 
                ## Action Row
90 
                <div class="approval-actions approvalTransactionId">
91 
                    <textarea placeholder="Add remark..." class="remark-box form-control approval-remark"></textarea>
92 
                    <div class="action-buttons">
93 
                        <button class="transactionApprovalRejected btn-reject" data-approval="REJECTED">
94 
                            <i class="fa fa-times"></i> Reject
95 
                        </button>
96 
                        <button class="transactionApprovalApproved btn-approve" data-approval="APPROVED">
97 
                            <i class="fa fa-check"></i> Approve
98 
                        </button>
99 
                    </div>
100 
                </div>
33213 tejus.loha 101 
            </div>
102 
        #end
35995 aman 103 
 
104 
        #if($approvalModelList.isEmpty())
105 
            <div class="empty-state">
106 
                <i class="fa fa-check-circle"></i>
107 
                <p>No pending approvals</p>
108 
            </div>
109 
        #end
33213 tejus.loha 110 
    </div>
111 
</section>
35995 aman 112 
 
33213 tejus.loha 113 
<style>
35995 aman 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);
120 
        overflow: hidden;
121 
    }
33213 tejus.loha 122 
 
35995 aman 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;
33213 tejus.loha 130 
    }
35995 aman 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;
224 
    }
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 
    }
33213 tejus.loha 353 
</style>