Subversion Repositories SmartDukaan

Rev

Rev 34075 | Rev 34103 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
33991 ranu 1 
<link rel="stylesheet"
2 
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.1.0/daterangepicker.min.css"/>
3 
 
33951 ranu 4 
<style>
5 
    table th {
6 
        text-align: center;
7 
    }
8 
 
9 
    #rbm-arr-table td, #rbm-arr-table th {
10 
        padding: 0.35rem;
33997 ranu 11 
        font-size: 18px;
33951 ranu 12 
    }
13 
 
33953 ranu 14 
    .text-bold {
15 
        font-weight: bold !important;
16 
    }
17 
 
18 
    .text-bold span {
19 
        font-weight: bold;
20 
    }
21 
 
33951 ranu 22 
    .rb-name {
33997 ranu 23 
        font-size: 16px;
33951 ranu 24 
        font-weight: bold;
25 
    }
26 
 
27 
    #rbm-arr-table td {
28 
        text-align: center;
29 
        background-size: 100% 100%;
30 
        background-repeat: no-repeat;
31 
        color: #000; /* Ensure text remains visible */
32 
        font-weight: 400;
33 
    }
34 
 
34055 ranu 35 
    #rbm-aging-table td {
36 
        text-align: center;
37 
        background-size: 100% 100%;
38 
        background-repeat: no-repeat;
39 
        color: #000; /* Ensure text remains visible */
40 
        font-weight: 400;
41 
    }
42 
 
43 
    .border-top-bottom {
44 
        border-top: 2px solid #000 !important;
45 
        border-bottom: 2px solid #000 !important;
46 
    }
47 
 
48 
    #rbm-aging-table td, #rbm-aging-table th {
49 
        padding: 0.35rem;
50 
        font-size: 18px;
51 
    }
52 
 
33951 ranu 53 
</style>
54 
 
33917 ranu 55 
<section class="wrapper">
34055 ranu 56 
    <div class="row" style="margin: 0">
33992 ranu 57 
        #if($isGtEqL3)
34098 ranu 58 
            <div class="col-md-12 text-right">
59 
                <h4>RBM Wise Today's ARR (Basis Product Movement)</h4>
60 
                <table style="float:right;margin-bottom: 10px;">
61 
                    <tr>
62 
                        <td>
63 
                            <input placeholder="Set Duration" name="rbmArrPeriod"
64 
                                   id="rbmArrPeriod"
65 
                                   type="text" value="" class="form-control input-sm" style="height: 34px;">
66 
                        </td>
67 
                        <td>
68 
                            <input class="btn btn-primary btn-sm rbm-target-achievement"
69 
                                   type="button"
70 
                                   value="View">
71 
                        </td>
72 
                        <td>
73 
                            <input class="btn btn-primary btn-sm sold-catalog-report"
74 
                                   type="button"
75 
                                   value="Download row data">
76 
                        </td>
77 
                    </tr>
78 
                </table>
79 
            </div>
33992 ranu 80 
        #end
33917 ranu 81 
        <div class="col-lg-12">
82 
            <table id="rbm-arr-table" class="table table-border table-condensed table-bordered" style="width:100%">
83 
                <tr>
33939 ranu 84 
                    <th>RBM</th>
85 
                    <th>Total (ACH/TGT)</th>
86 
                    <th>%</th>
87 
                    <th>HID (ACH/TGT)</th>
88 
                    <th>%</th>
33956 ranu 89 
                    <th>FAST (ACH/TGT)</th>
90 
                    <th>%</th>
33939 ranu 91 
                    <th>RUN (ACH/TGT)</th>
92 
                    <th>%</th>
34098 ranu 93 
                    <th>SLOW (ACH/TGT)</th>
33939 ranu 94 
                    <th>%</th>
95 
                    <th>Other (ACH/TGT)</th>
96 
                    <th>%</th>
33917 ranu 97 
                </tr>
34098 ranu 98 
                #foreach($target in $rbmArrViewModels)
33917 ranu 99 
                    <tr>
33933 ranu 100 
                        <td>$target.getRbmName()- $target.getWarehouseName()</td>
34098 ranu 101 
 
33939 ranu 102 
                        <td><span class="achieved-cell">$target.getTotalAchievedTarget()</span> / <span
103 
                                class="target-cell">$target.getTodayTarget()</span></td>
104 
                        <td class="total-percent"></td>
34098 ranu 105 
 
33939 ranu 106 
                        <td><span class="achieved-cell">$target.getTodayAchievedHidTarget()</span> / <span
107 
                                class="target-cell">$target.getTodayHidTarget()</span></td>
108 
                        <td class="hid-percent"></td>
34098 ranu 109 
 
33939 ranu 110 
                        <td><span class="achieved-cell">$target.getTodayAchievedFastMovingTarget()</span> / <span
111 
                                class="target-cell">$target.getTodayFastMovingTarget()</span></td>
34098 ranu 112 
                        <td class="fast-percent"></td>
113 
 
114 
                        <td><span class="achieved-cell">$target.getTodayAchievedRunningTarget()</span> / <span
115 
                                class="target-cell">$target.getTodayRunningTarget()</span></td>
33939 ranu 116 
                        <td class="run-percent"></td>
34098 ranu 117 
 
33939 ranu 118 
                        <td><span class="achieved-cell">$target.getTodayAchievedSlowMovingTarget()</span> / <span
119 
                                class="target-cell">$target.getTodaySlowMovingTarget()</span></td>
120 
                        <td class="slow-percent"></td>
34098 ranu 121 
 
33939 ranu 122 
                        <td><span class="achieved-cell">$target.getTodayAchievedOtherMovingTarget()</span> / <span
123 
                                class="target-cell">$target.getTodayOtherMovingTarget()</span></td>
124 
                        <td class="other-percent"></td>
33917 ranu 125 
                    </tr>
34098 ranu 126 
                #end
33946 ranu 127 
                <!-- Add a row for totals -->
33942 ranu 128 
                <tr>
129 
                    <td><strong>Total</strong></td>
33953 ranu 130 
                    <td class="text-bold"><span class="achieved-cell">$totalAchieved </span> / <span
131 
                            class="target-cell">$totalTargetSum</span></td>
132 
                    <td class="total-percent text-bold"></td>
33951 ranu 133 
 
33953 ranu 134 
                    <td class="text-bold"><span class="achieved-cell">$totalHidAchievedSum</span> / <span
135 
                            class="target-cell">$totalHidSum</span></td>
136 
                    <td class="hid-percent text-bold"></td>
33951 ranu 137 
 
33953 ranu 138 
                    <td class="text-bold"><span class="achieved-cell">$totalFastAchievedSum</span> / <span
139 
                            class="target-cell">$totalFastSum</span></td>
34098 ranu 140 
                    <td class="fast-percent text-bold"></td>
141 
 
142 
                    <td class="text-bold"><span class="achieved-cell">$totalRunningAchievedSum</span> / <span
143 
                            class="target-cell">$totalRunningSum</span></td>
33953 ranu 144 
                    <td class="run-percent text-bold"></td>
33951 ranu 145 
 
33953 ranu 146 
                    <td class="text-bold"><span class="achieved-cell">$totalSlowAchievedSum</span> / <span
147 
                            class="target-cell">$totalSlowSum</span></td>
148 
                    <td class="slow-percent text-bold"></td>
33951 ranu 149 
 
33953 ranu 150 
                    <td class="text-bold"><span class="achieved-cell">$totalOtherAchievedSum</span> / <span
151 
                            class="target-cell">$totalOtherSum</span></td>
152 
                    <td class="other-percent text-bold"></td>
33942 ranu 153 
                </tr>
33951 ranu 154 
 
33917 ranu 155 
            </table>
156 
        </div>
157 
    </div>
34055 ranu 158 
 
159 
    <div class="row" style="margin: 0">
34098 ranu 160 
        <div class="col-md-12">
161 
            <br>
162 
            <h4> > 15 Days Aging Sold </h4>
163 
            <table id="rbm-aging-table" class="table table-border table-condensed table-bordered"
164 
                   style="width:100%">
165 
                <thead>
166 
                <tr>
167 
                    <th>RBM</th>
168 
                    <th>HID</th>
169 
                    <th>FASTMOVING</th>
170 
                    <th>RUNNING</th>
171 
                    <th>SLOWMOVING</th>
172 
                    <th>OTHER</th>
173 
                    <th>TOTAL</th>
174 
                </tr>
175 
                </thead>
176 
                <tbody>
177 
                    #foreach($model in $sold15daysOldAgingModels)
34055 ranu 178 
                    <tr>
34098 ranu 179 
                        <th>$model.getRbmName()</th>
180 
                        <td class="format-indian">$model.getHidBilled()</td>
181 
                        <td class="format-indian">$model.getFastmovingBilled()</td>
182 
                        <td class="format-indian">$model.getRunningBilled()</td>
183 
                        <td class="format-indian">$model.getSlowmovingBilled()</td>
184 
                        <td class="format-indian">$model.getOthersBilled()</td>
185 
                        <td class="format-indian">$model.getTotalBilled()</td>
34055 ranu 186 
                    </tr>
34098 ranu 187 
                    #end
188 
                <tr>
189 
                    <th class="border-top-bottom"> Total</th>
190 
                    <td class="border-top-bottom format-indian">$totalSoldHid</td>
191 
                    <td class="border-top-bottom format-indian">$totalSoldFast</td>
192 
                    <td class="border-top-bottom format-indian">$totalSoldRun</td>
193 
                    <td class="border-top-bottom format-indian">$totalSoldSlow</td>
194 
                    <td class="border-top-bottom format-indian">$totalSoldOther</td>
195 
                    <td class="border-top-bottom format-indian">$totalSoldAging</td>
196 
                </tr>
197 
                    #foreach($aging in $our15DaysOldAgingStocks)
34055 ranu 198 
                    <tr>
34098 ranu 199 
                        <th class="border-top-bottom"> 15 days Balance Value</th>
200 
                        <td class="border-top-bottom format-indian">$aging.getHidAgingStock()</td>
201 
                        <td class="border-top-bottom format-indian">$aging.getFastmovingAgingStock()</td>
202 
                        <td class="border-top-bottom format-indian">$aging.getRunningAgingStock()</td>
203 
                        <td class="border-top-bottom format-indian">$aging.getSlomovingAgingStock()</td>
204 
                        <td class="border-top-bottom format-indian">$aging.getOtherAgingStock()</td>
205 
                        <td class="border-top-bottom format-indian">$aging.getTotal()</td>
34055 ranu 206 
                    </tr>
34098 ranu 207 
                    #end
208 
                </tbody>
209 
            </table>
210 
        </div>
34055 ranu 211 
    </div>
33930 ranu 212 
</section>
33945 ranu 213 
 
33930 ranu 214 
<script>
34074 ranu 215 
    function formatNumberIndian(num) {
34075 ranu 216 
        x = num.toString();
217 
        var lastThree = x.substring(x.length - 3);
218 
        var otherNumbers = x.substring(0, x.length - 3);
219 
        if (otherNumbers != '')
220 
            lastThree = ',' + lastThree;
221 
        var res = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree;
222 
        return res;
34074 ranu 223 
    }
224 
 
225 
    document.addEventListener("DOMContentLoaded", function () {
226 
        document.querySelectorAll(".format-indian").forEach(function (el) {
227 
            el.textContent = formatNumberIndian(el.textContent.trim());
228 
        });
229 
    });
230 
</script>
231 
 
232 
 
233 
<script>
33933 ranu 234 
    function formatValueInLakh(value) {
33939 ranu 235 
        return (value / 100000).toFixed(1) + 'L';
33930 ranu 236 
    }
237 
 
238 
    function formatTargets() {
239 
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');
33942 ranu 240 
        let totalAchieved = 0, totalTarget = 0;
241 
        let totalAchievedHid = 0, totalTargetHid = 0;
34098 ranu 242 
        let totalAchievedFast = 0, totalTargetFast = 0;
243 
        let totalAchievedRunning = 0, totalTargetRunning = 0;
33942 ranu 244 
        let totalAchievedSlow = 0, totalTargetSlow = 0;
245 
        let totalAchievedOther = 0, totalTargetOther = 0;
33930 ranu 246 
 
247 
        rows.forEach(row => {
33931 ranu 248 
            const cells = row.querySelectorAll('td');
33946 ranu 249 
            cells.forEach((cell, index) => {
250 
                const achievedSpan = cell.querySelector('.achieved-cell');
251 
                const targetSpan = cell.querySelector('.target-cell');
252 
                if (achievedSpan && targetSpan) {
253 
                    const achievedValue = parseFloat(achievedSpan.textContent.replace(/[^\d.-]/g, ''));
254 
                    const targetValue = parseFloat(targetSpan.textContent.replace(/[^\d.-]/g, ''));
33944 ranu 255 
 
33946 ranu 256 
                    // Add to totals
257 
                    if (index === 1) {
258 
                        totalAchieved += achievedValue || 0;
259 
                        totalTarget += targetValue || 0;
260 
                    } else if (index === 3) {
261 
                        totalAchievedHid += achievedValue || 0;
262 
                        totalTargetHid += targetValue || 0;
263 
                    } else if (index === 5) {
34098 ranu 264 
                        totalAchievedFast += achievedValue || 0;
265 
                        totalTargetFast += targetValue || 0;
33946 ranu 266 
                    } else if (index === 7) {
34098 ranu 267 
                        totalAchievedRunning += achievedValue || 0;
268 
                        totalTargetRunning += targetValue || 0;
269 
                    } else if (index === 9) {
33946 ranu 270 
                        totalAchievedSlow += achievedValue || 0;
271 
                        totalTargetSlow += targetValue || 0;
272 
                    } else if (index === 11) {
273 
                        totalAchievedOther += achievedValue || 0;
274 
                        totalTargetOther += targetValue || 0;
275 
                    }
33930 ranu 276 
 
33946 ranu 277 
                    // Format values in lakh
278 
                    if (!isNaN(achievedValue)) achievedSpan.textContent = formatValueInLakh(achievedValue);
279 
                    if (!isNaN(targetValue)) targetSpan.textContent = formatValueInLakh(targetValue);
33942 ranu 280 
 
33946 ranu 281 
                    const percentCell = cell.nextElementSibling;
282 
                    if (percentCell && targetValue > 0) {
283 
                        const percentage = ((achievedValue / targetValue) * 100).toFixed(1);
284 
                        percentCell.textContent = percentage + '%';
33931 ranu 285 
 
33946 ranu 286 
                        // Determine background color based on percentage
287 
                        let color;
33962 ranu 288 
                        if (percentage <= 1) {
289 
                            percentCell.style.color = `red`
290 
                        }
33946 ranu 291 
                        if (percentage <= 40) {
292 
                            color = '#F56983FF'; // Orange for <= 40%
293 
                        } else if (percentage > 40 && percentage <= 75) {
294 
                            color = '#f2c947e8'; // Yellow for 41% - 75%
295 
                        } else {
296 
                            color = '#82ef8299'; // Green for > 75%
297 
                        }
33945 ranu 298 
 
33946 ranu 299 
                        // Apply gradient background with the color
300 
                        percentCell.style.background = `linear-gradient(to right, ${color} ${percentage}%, transparent ${percentage}%)`;
301 
                    } else if (percentCell) {
33953 ranu 302 
                        percentCell.textContent = "-";
33946 ranu 303 
                        percentCell.style.background = 'none';
33931 ranu 304 
                    }
33946 ranu 305 
                }
33930 ranu 306 
            });
33946 ranu 307 
        });
33942 ranu 308 
 
33946 ranu 309 
    }
33944 ranu 310 
 
33958 ranu 311 
    function groupRowsByRbm() {
312 
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');
313 
        let currentRbm = null;
314 
        let rbmGroup = [];
315 
 
316 
        rows.forEach((row, index) => {
317 
            const rbmCell = row.cells[0];
318 
            if (!rbmCell) return;
319 
 
320 
            const rbmName = rbmCell.textContent.split('-')[0].trim(); // Extract RBM name
321 
 
322 
            if (rbmName !== currentRbm) {
323 
                // Apply border to the previous group
324 
                if (rbmGroup.length > 0) {
325 
                    applyBorderToGroup(rbmGroup);
326 
                }
327 
 
328 
                // Reset for new RBM
329 
                currentRbm = rbmName;
330 
                rbmGroup = [];
331 
            }
332 
 
333 
            // Add the row to the current group
334 
            rbmGroup.push(row);
335 
 
336 
            // Apply border to the last group
337 
            if (index === rows.length - 1 && rbmGroup.length > 0) {
338 
                applyBorderToGroup(rbmGroup);
339 
            }
340 
        });
341 
    }
342 
 
343 
    function applyBorderToGroup(group) {
344 
        if (group.length === 0) return;
345 
 
346 
        // Add border styles to the first and last rows in the group
347 
        //group[0].style.borderTop = '2px solid #000'; // Black border for start
348 
        group[group.length - 1].style.borderBottom = '2px solid #000'; // Black border for end
349 
    }
350 
 
351 
    window.onload = function () {
352 
        formatTargets(); // Format targets first
353 
        groupRowsByRbm(); // Group rows by RBM
354 
    };
355 
 
356 
 
33945 ranu 357 
</script>