Subversion Repositories SmartDukaan

Rev

Rev 36008 | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 36008 Rev 36615
Line 44... Line 44...
44 
                </div>
 44 
                </div>
45 
 
 45 
 
46 
                ## Items Table
 46 
                ## Items Table
47 
                <div class="approval-table-wrap">
 47 
                <div class="approval-table-wrap">
48 
                    <table class="approval-table">
 48 
                    <table class="approval-table">
- 
 
 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>
49 
                        <thead>
 58 
                        <thead>
50 
                        <tr>
 59 
                        <tr>
51 
                            <th class="text-right">Item Id</th>
 60 
                            <th class="text-center">Item Id</th>
52 
                            <th>Item Name</th>
 61 
                            <th>Item Name</th>
53 
                            <th class="text-center">Qty</th>
 62 
                            <th class="text-center">Qty</th>
54 
                            <th class="text-right">Total DP</th>
 63 
                            <th class="text-right">Total DP</th>
55 
                            <th class="text-right">Total SP</th>
 64 
                            <th class="text-right">Total SP</th>
56 
                            <th class="text-right">Difference</th>
 65 
                            <th class="text-right">Difference</th>
Line 83... Line 92...
83 
                        <tfoot>
 92 
                        <tfoot>
84 
                        <tr class="totals-row">
 93 
                        <tr class="totals-row">
85 
                            <td></td>
 94 
                            <td></td>
86 
                            <td class="text-right"><strong>Total</strong></td>
 95 
                            <td class="text-right"><strong>Total</strong></td>
87 
                            <td class="text-center"><strong>$transactionApprovalModel.getTotalPcs()</strong></td>
 96 
                            <td class="text-center"><strong>$transactionApprovalModel.getTotalPcs()</strong></td>
88 
                            <td class="text-right"><strong>$transactionApprovalModel.getFormattedTotalDpValue()</strong>
 97 
                            <td class="text-right">
89 
                            </td>
 98 
                                <strong>$transactionApprovalModel.getFormattedTotalDpValue()</strong></td>
90 
                            <td class="text-right">
 99 
                            <td class="text-right">
91 
                                <strong>$transactionApprovalModel.getFormattedTotalSellingPriceValue()</strong></td>
 100 
                                <strong>$transactionApprovalModel.getFormattedTotalSellingPriceValue()</strong></td>
92 
                            <td class="text-right">
 101 
                            <td class="text-right">
93 
                                <strong>$transactionApprovalModel.getFormattedTotalDifferenceValue()</strong></td>
 102 
                                <strong>$transactionApprovalModel.getFormattedTotalDifferenceValue()</strong></td>
94 
                            <td></td>
 103 
                            <td></td>
Line 123... Line 132...
123 
 
 132 
 
124 
<style>
 133 
<style>
125 
    .approval-card {
 134 
    .approval-card {
126 
        background: #fff;
 135 
        background: #fff;
127 
        border: 1px solid #e0e0e0;
 136 
        border: 1px solid #e0e0e0;
128 
        border-radius: 8px;
 137 
        border-radius: 4px;
129 
        margin-bottom: 20px;
 138 
        margin-bottom: 10px;
130 
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
 139 
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
131 
        overflow: hidden;
 140 
        overflow: hidden;
132 
    }
 141 
    }
133 
 
 142 
 
134 
    .approval-header {
 143 
    .approval-header {
135 
        display: flex;
 144 
        display: flex;
136 
        justify-content: space-between;
 145 
        justify-content: space-between;
137 
        align-items: center;
 146 
        align-items: center;
138 
        padding: 14px 20px;
 147 
        padding: 6px 12px;
139 
        background: #f8f9fa;
 148 
        background: #f8f9fa;
140 
        border-bottom: 1px solid #e0e0e0;
 149 
        border-bottom: 1px solid #e0e0e0;
141 
    }
 150 
    }
142 
 
 151 
 
143 
    .approval-header-left {
 152 
    .approval-header-left {
144 
        display: flex;
 153 
        display: flex;
145 
        align-items: center;
 154 
        align-items: center;
146 
        gap: 12px;
 155 
        gap: 8px;
147 
    }
 156 
    }
148 
 
 157 
 
149 
    .badge-first-po {
 158 
    .badge-first-po {
150 
        background: #ff9800;
 159 
        background: #ff9800;
151 
        color: #fff;
 160 
        color: #fff;
152 
        padding: 4px 12px;
 161 
        padding: 1px 6px;
153 
        border-radius: 4px;
 162 
        border-radius: 3px;
154 
        font-size: 12px;
 163 
        font-size: 10px;
155 
        font-weight: 600;
 164 
        font-weight: 600;
156 
        text-transform: uppercase;
 165 
        text-transform: uppercase;
157 
        letter-spacing: 0.5px;
 166 
        letter-spacing: 0.3px;
158 
    }
 167 
    }
159 
 
 168 
 
160 
    .badge-price {
 169 
    .badge-price {
161 
        background: #2196F3;
 170 
        background: #2196F3;
162 
        color: #fff;
 171 
        color: #fff;
163 
        padding: 4px 12px;
 172 
        padding: 1px 6px;
164 
        border-radius: 4px;
 173 
        border-radius: 3px;
165 
        font-size: 12px;
 174 
        font-size: 10px;
166 
        font-weight: 600;
 175 
        font-weight: 600;
167 
        text-transform: uppercase;
 176 
        text-transform: uppercase;
168 
        letter-spacing: 0.5px;
 177 
        letter-spacing: 0.3px;
169 
    }
 178 
    }
170 
 
 179 
 
171 
    .txn-id {
 180 
    .txn-id {
172 
        font-size: 15px;
 181 
        font-size: 12px;
173 
        font-weight: 600;
 182 
        font-weight: 600;
174 
        color: #333;
 183 
        color: #333;
175 
    }
 184 
    }
176 
 
 185 
 
177 
    .header-meta {
 186 
    .header-meta {
178 
        font-size: 13px;
 187 
        font-size: 11px;
179 
        color: #888;
 188 
        color: #888;
180 
    }
 189 
    }
181 
 
 190 
 
182 
    .approval-info-row {
 191 
    .approval-info-row {
183 
        display: flex;
 192 
        display: flex;
184 
        gap: 40px;
 193 
        gap: 20px;
185 
        padding: 12px 20px;
 194 
        padding: 4px 12px;
186 
        border-bottom: 1px solid #f0f0f0;
 195 
        border-bottom: 1px solid #f0f0f0;
187 
    }
 196 
    }
188 
 
 197 
 
189 
    .info-item {
 198 
    .info-item {
190 
        display: flex;
 199 
        display: flex;
191 
        flex-direction: column;
 200 
        align-items: baseline;
- 
 
 201 
        gap: 4px;
192 
    }
 202 
    }
193 
 
 203 
 
194 
    .info-label {
 204 
    .info-label {
195 
        font-size: 11px;
 205 
        font-size: 10px;
196 
        color: #999;
 206 
        color: #999;
197 
        text-transform: uppercase;
 207 
        text-transform: uppercase;
198 
        letter-spacing: 0.5px;
 208 
        letter-spacing: 0.3px;
199 
        margin-bottom: 2px;
 - 
 
200 
    }
 209 
    }
201 
 
 210 
 
202 
    .info-value {
 211 
    .info-value {
203 
        font-size: 14px;
 212 
        font-size: 12px;
204 
        font-weight: 600;
 213 
        font-weight: 600;
205 
        color: #333;
 214 
        color: #333;
206 
    }
 215 
    }
207 
 
 216 
 
208 
    .approval-table-wrap {
 217 
    .approval-table-wrap {
Line 211... Line 220...
211 
    }
 220 
    }
212 
 
 221 
 
213 
    .approval-table {
 222 
    .approval-table {
214 
        width: 100%;
 223 
        width: 100%;
215 
        border-collapse: collapse;
 224 
        border-collapse: collapse;
216 
        font-size: 13px;
 225 
        font-size: 11px;
- 
 
 226 
        table-layout: fixed;
- 
 
 227 
    }
- 
 
 228 
 
- 
 
 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%;
217 
    }
 255 
    }
218 
 
 256 
 
219 
    .approval-table thead th {
 257 
    .approval-table thead th {
220 
        background: #f8f9fa;
 258 
        background: #f8f9fa;
221 
        padding: 10px 14px;
 259 
        padding: 3px 8px;
222 
        font-weight: 600;
 260 
        font-weight: 600;
223 
        color: #555;
 261 
        color: #555;
224 
        border-bottom: 2px solid #e0e0e0;
 262 
        border-bottom: 1px solid #e0e0e0;
225 
        font-size: 12px;
 263 
        font-size: 10px;
226 
        text-transform: uppercase;
 264 
        text-transform: uppercase;
227 
        letter-spacing: 0.3px;
 265 
        letter-spacing: 0.2px;
228 
        white-space: nowrap;
 266 
        white-space: nowrap;
229 
    }
 267 
    }
230 
 
 268 
 
231 
    .approval-table tbody td {
 269 
    .approval-table tbody td {
232 
        padding: 10px 14px;
 270 
        padding: 3px 8px;
233 
        border-bottom: 1px solid #f0f0f0;
 - 
 
234 
        color: #333;
 271 
        color: #333;
- 
 
 272 
        border-bottom: 1px solid #f0f0f0;
- 
 
 273 
        vertical-align: top;
- 
 
 274 
        word-wrap: break-word;
- 
 
 275 
        overflow-wrap: break-word;
235 
    }
 276 
    }
236 
 
 277 
 
237 
    .approval-table tbody tr:last-child td {
 278 
    .approval-table tbody tr:last-child td {
238 
        border-bottom: none;
 279 
        border-bottom: none;
239 
    }
 280 
    }
240 
 
 281 
 
241 
    .approval-table tfoot .totals-row td {
 282 
    .approval-table tbody tr:hover td {
242 
        padding: 10px 14px;
 - 
 
243 
        background: #f0f4f8;
 283 
        background: #fafbfc;
244 
        border-top: 2px solid #ccc;
 - 
 
245 
        font-size: 13px;
 - 
 
246 
    }
 284 
    }
247 
 
 285 
 
248 
    .approval-table tbody tr:hover {
 286 
    .approval-table tfoot .totals-row td {
- 
 
 287 
        padding: 4px 8px;
249 
        background: #fafbfc;
 288 
        background: #f0f4f8;
- 
 
 289 
        border-top: 1px solid #ccc;
- 
 
 290 
        font-size: 11px;
250 
    }
 291 
    }
251 
 
 292 
 
252 
    .text-center {
 293 
    .text-center {
253 
        text-align: center;
 294 
        text-align: center;
254 
    }
 295 
    }
Line 256... Line 297...
256 
    .text-right {
 297 
    .text-right {
257 
        text-align: right;
 298 
        text-align: right;
258 
    }
 299 
    }
259 
 
 300 
 
260 
    .item-name {
 301 
    .item-name {
261 
        font-weight: 500;
 302 
        font-weight: 600;
262 
        color: #333;
 303 
        color: #1a1a1a;
- 
 
 304 
        font-size: 12px;
- 
 
 305 
        line-height: 1.3;
263 
    }
 306 
    }
264 
 
 307 
 
265 
    .item-id {
 308 
    .item-id {
266 
        font-size: 11px;
 309 
        font-size: 10px;
267 
        color: #999;
 310 
        color: #999;
268 
        margin-top: 2px;
 - 
 
269 
    }
 311 
    }
270 
 
 312 
 
271 
    .stock-badge {
 313 
    .stock-badge {
272 
        display: inline-block;
 314 
        display: inline-block;
273 
        min-width: 32px;
 315 
        min-width: 24px;
274 
        padding: 3px 8px;
 316 
        padding: 0 5px;
275 
        border-radius: 4px;
 317 
        border-radius: 3px;
276 
        font-weight: 700;
 318 
        font-weight: 700;
277 
        font-size: 13px;
 319 
        font-size: 11px;
278 
        text-align: center;
 320 
        text-align: center;
279 
    }
 321 
    }
280 
 
 322 
 
281 
    .stock-ok {
 323 
    .stock-ok {
282 
        background: #e8f5e9;
 324 
        background: #e8f5e9;
Line 294... Line 336...
294 
    }
 336 
    }
295 
 
 337 
 
296 
    .approval-actions {
 338 
    .approval-actions {
297 
        display: flex;
 339 
        display: flex;
298 
        align-items: center;
 340 
        align-items: center;
299 
        gap: 16px;
 341 
        gap: 8px;
300 
        padding: 14px 20px;
 342 
        padding: 6px 12px;
301 
        background: #f8f9fa;
 343 
        background: #f8f9fa;
302 
        border-top: 1px solid #e0e0e0;
 344 
        border-top: 1px solid #e0e0e0;
303 
    }
 345 
    }
304 
 
 346 
 
305 
    .approval-remark {
 347 
    .approval-remark {
306 
        flex: 1;
 348 
        flex: 1;
307 
        border: 1px solid #ddd;
 349 
        border: 1px solid #ddd;
308 
        border-radius: 6px;
 350 
        border-radius: 4px;
309 
        padding: 8px 12px;
 351 
        padding: 4px 8px;
310 
        font-size: 13px;
 352 
        font-size: 11px;
311 
        resize: none;
 353 
        resize: none;
312 
        height: 40px;
 354 
        height: 26px;
- 
 
 355 
        min-height: 26px;
313 
    }
 356 
    }
314 
 
 357 
 
315 
    .approval-remark:focus {
 358 
    .approval-remark:focus {
316 
        border-color: #2196F3;
 359 
        border-color: #2196F3;
317 
        outline: none;
 360 
        outline: none;
318 
        box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.15);
 361 
        box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.15);
319 
    }
 362 
    }
320 
 
 363 
 
321 
    .action-buttons {
 364 
    .action-buttons {
322 
        display: flex;
 365 
        display: flex;
323 
        gap: 8px;
 366 
        gap: 6px;
324 
        flex-shrink: 0;
 367 
        flex-shrink: 0;
325 
    }
 368 
    }
326 
 
 369 
 
327 
    .btn-approve, .btn-reject {
 370 
    .btn-approve, .btn-reject {
328 
        padding: 8px 20px;
 371 
        padding: 4px 12px;
329 
        border: none;
 372 
        border: none;
330 
        border-radius: 6px;
 373 
        border-radius: 4px;
331 
        font-size: 13px;
 374 
        font-size: 11px;
332 
        font-weight: 600;
 375 
        font-weight: 600;
333 
        cursor: pointer;
 376 
        cursor: pointer;
334 
        transition: all 0.2s;
 377 
        transition: all 0.2s;
335 
    }
 378 
    }
336 
 
 379 
 
Line 353... Line 396...
353 
        background: #ffebee;
 396 
        background: #ffebee;
354 
    }
 397 
    }
355 
 
 398 
 
356 
    .empty-state {
 399 
    .empty-state {
357 
        text-align: center;
 400 
        text-align: center;
358 
        padding: 60px 20px;
 401 
        padding: 24px 16px;
359 
        color: #999;
 402 
        color: #999;
360 
    }
 403 
    }
361 
 
 404 
 
362 
    .empty-state i {
 405 
    .empty-state i {
363 
        font-size: 48px;
 406 
        font-size: 28px;
364 
        color: #4caf50;
 407 
        color: #4caf50;
365 
        margin-bottom: 12px;
 408 
        margin-bottom: 6px;
366 
    }
 409 
    }
367 
 
 410 
 
368 
    .empty-state p {
 411 
    .empty-state p {
369 
        font-size: 16px;
 412 
        font-size: 13px;
370 
    }
 413 
    }
371 
</style>
 414 
</style>