Subversion Repositories SmartDukaan

Rev

Rev 34074 | Rev 34098 | 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)
33991 ranu 58 
        <div class="col-md-12 text-right">
34055 ranu 59 
            <h4>RBM Wise Today's ARR (Basis Product Movement)</h4>
33991 ranu 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>
34002 ranu 68 
                        <input class="btn btn-primary btn-sm rbm-target-achievement"
69 
                               type="button"
70 
                               value="View">
71 
                    </td>
72 
                    <td>
33991 ranu 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>
93 
                    <th>EOL (ACH/TGT)</th>
94 
                    <th>%</th>
95 
                    <th>Other (ACH/TGT)</th>
96 
                    <th>%</th>
33917 ranu 97 
                </tr>
33939 ranu 98 
                    #foreach($target in $rbmArrViewModels)
33917 ranu 99 
                    <tr>
33933 ranu 100 
                        <td>$target.getRbmName()- $target.getWarehouseName()</td>
33939 ranu 101 
                        <td><span class="achieved-cell">$target.getTotalAchievedTarget()</span> / <span
102 
                                class="target-cell">$target.getTodayTarget()</span></td>
103 
                        <td class="total-percent"></td>
104 
                        <td><span class="achieved-cell">$target.getTodayAchievedHidTarget()</span> / <span
105 
                                class="target-cell">$target.getTodayHidTarget()</span></td>
106 
                        <td class="hid-percent"></td>
107 
                        <td><span class="achieved-cell">$target.getTodayAchievedFastMovingTarget()</span> / <span
108 
                                class="target-cell">$target.getTodayFastMovingTarget()</span></td>
109 
                        <td class="run-percent"></td>
110 
                        <td><span class="achieved-cell">$target.getTodayAchievedSlowMovingTarget()</span> / <span
111 
                                class="target-cell">$target.getTodaySlowMovingTarget()</span></td>
112 
                        <td class="slow-percent"></td>
113 
                        <td><span class="achieved-cell">$target.getTodayAchievedEolTarget()</span> / <span
114 
                                class="target-cell">$target.getTodayEolTarget()</span></td>
115 
                        <td class="eol-percent"></td>
116 
                        <td><span class="achieved-cell">$target.getTodayAchievedOtherMovingTarget()</span> / <span
117 
                                class="target-cell">$target.getTodayOtherMovingTarget()</span></td>
118 
                        <td class="other-percent"></td>
33917 ranu 119 
                    </tr>
33939 ranu 120 
                    #end
33946 ranu 121 
                <!-- Add a row for totals -->
33942 ranu 122 
                <tr>
123 
                    <td><strong>Total</strong></td>
33953 ranu 124 
                    <td class="text-bold"><span class="achieved-cell">$totalAchieved </span> / <span
125 
                            class="target-cell">$totalTargetSum</span></td>
126 
                    <td class="total-percent text-bold"></td>
33951 ranu 127 
 
33953 ranu 128 
                    <td class="text-bold"><span class="achieved-cell">$totalHidAchievedSum</span> / <span
129 
                            class="target-cell">$totalHidSum</span></td>
130 
                    <td class="hid-percent text-bold"></td>
33951 ranu 131 
 
33953 ranu 132 
                    <td class="text-bold"><span class="achieved-cell">$totalFastAchievedSum</span> / <span
133 
                            class="target-cell">$totalFastSum</span></td>
134 
                    <td class="run-percent text-bold"></td>
33951 ranu 135 
 
33953 ranu 136 
                    <td class="text-bold"><span class="achieved-cell">$totalSlowAchievedSum</span> / <span
137 
                            class="target-cell">$totalSlowSum</span></td>
138 
                    <td class="slow-percent text-bold"></td>
33951 ranu 139 
 
33953 ranu 140 
                    <td class="text-bold"><span class="achieved-cell">$totalEolAchievedSum</span> / <span
141 
                            class="target-cell">$totalEolSum</span></td>
142 
                    <td class="eol-percent text-bold"></td>
33951 ranu 143 
 
33953 ranu 144 
                    <td class="text-bold"><span class="achieved-cell">$totalOtherAchievedSum</span> / <span
145 
                            class="target-cell">$totalOtherSum</span></td>
146 
                    <td class="other-percent text-bold"></td>
33942 ranu 147 
                </tr>
33951 ranu 148 
 
33917 ranu 149 
            </table>
150 
        </div>
151 
    </div>
34055 ranu 152 
 
153 
    <div class="row" style="margin: 0">
154 
            <div class="col-md-12">
155 
                <br>
156 
                <h4> > 15 Days Aging Sold </h4>
157 
                <table id="rbm-aging-table" class="table table-border table-condensed table-bordered"
158 
                       style="width:100%">
159 
                    <thead>
160 
                    <tr>
161 
                        <th>RBM</th>
34074 ranu 162 
                        <th>HID</th>
163 
                        <th>FASTMOVING</th>
164 
                        <th>RUNNING</th>
34055 ranu 165 
                        <th>EOL</th>
166 
                        <th>OTHER</th>
167 
                        <th>TOTAL</th>
168 
                    </tr>
169 
                    </thead>
170 
                    <tbody>
171 
                        #foreach($model in $sold15daysOldAgingModels)
172 
                        <tr>
173 
                            <th>$model.getRbmName()</th>
34074 ranu 174 
                            <td class="format-indian">$model.getHidBilled()</td>
175 
                            <td class="format-indian">$model.getFastmovingBilled()</td>
176 
                            <td class="format-indian">$model.getRunningBilled()</td>
177 
                            <td class="format-indian">$model.getEolBilled()</td>
178 
                            <td class="format-indian">$model.getOthersBilled()</td>
179 
                            <td class="format-indian">$model.getTotalBilled()</td>
34055 ranu 180 
                        </tr>
181 
                        #end
182 
                    <tr>
183 
                        <th class="border-top-bottom"> Total</th>
34074 ranu 184 
                        <td class="border-top-bottom format-indian">$totalSoldHid</td>
185 
                        <td class="border-top-bottom format-indian">$totalSoldFast</td>
186 
                        <td class="border-top-bottom format-indian">$totalSoldRun</td>
187 
                        <td class="border-top-bottom format-indian">$totalSoldEol</td>
188 
                        <td class="border-top-bottom format-indian">$totalSoldOther</td>
189 
                        <td class="border-top-bottom format-indian">$totalSoldAging</td>
34055 ranu 190 
                    </tr>
191 
                        #foreach($aging in $our15DaysOldAgingStocks)
192 
                        <tr>
193 
                            <th class="border-top-bottom"> 15 days Balance Value</th>
34074 ranu 194 
                            <td class="border-top-bottom format-indian">$aging.getHidAgingStock()</td>
195 
                            <td class="border-top-bottom format-indian">$aging.getFastmovingAgingStock()</td>
196 
                            <td class="border-top-bottom format-indian">$aging.getRunningAgingStock()</td>
197 
                            <td class="border-top-bottom format-indian">$aging.getEolAgingStock()</td>
198 
                            <td class="border-top-bottom format-indian">$aging.getOtherAgingStock()</td>
199 
                            <td class="border-top-bottom format-indian">$aging.getTotal()</td>
34055 ranu 200 
                        </tr>
201 
                        #end
202 
                    </tbody>
203 
                </table>
204 
            </div>
205 
    </div>
33930 ranu 206 
</section>
33945 ranu 207 
 
33930 ranu 208 
<script>
34074 ranu 209 
    function formatNumberIndian(num) {
34075 ranu 210 
        x = num.toString();
211 
        var lastThree = x.substring(x.length - 3);
212 
        var otherNumbers = x.substring(0, x.length - 3);
213 
        if (otherNumbers != '')
214 
            lastThree = ',' + lastThree;
215 
        var res = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree;
216 
        return res;
34074 ranu 217 
    }
218 
 
219 
    document.addEventListener("DOMContentLoaded", function () {
220 
        document.querySelectorAll(".format-indian").forEach(function (el) {
221 
            el.textContent = formatNumberIndian(el.textContent.trim());
222 
        });
223 
    });
224 
</script>
225 
 
226 
 
227 
<script>
33933 ranu 228 
    function formatValueInLakh(value) {
33939 ranu 229 
        return (value / 100000).toFixed(1) + 'L';
33930 ranu 230 
    }
231 
 
232 
    function formatTargets() {
233 
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');
33942 ranu 234 
        let totalAchieved = 0, totalTarget = 0;
235 
        let totalAchievedHid = 0, totalTargetHid = 0;
236 
        let totalAchievedRun = 0, totalTargetRun = 0;
237 
        let totalAchievedSlow = 0, totalTargetSlow = 0;
238 
        let totalAchievedEol = 0, totalTargetEol = 0;
239 
        let totalAchievedOther = 0, totalTargetOther = 0;
33930 ranu 240 
 
241 
        rows.forEach(row => {
33931 ranu 242 
            const cells = row.querySelectorAll('td');
33946 ranu 243 
            cells.forEach((cell, index) => {
244 
                const achievedSpan = cell.querySelector('.achieved-cell');
245 
                const targetSpan = cell.querySelector('.target-cell');
246 
                if (achievedSpan && targetSpan) {
247 
                    const achievedValue = parseFloat(achievedSpan.textContent.replace(/[^\d.-]/g, ''));
248 
                    const targetValue = parseFloat(targetSpan.textContent.replace(/[^\d.-]/g, ''));
33944 ranu 249 
 
33946 ranu 250 
                    // Add to totals
251 
                    if (index === 1) {
252 
                        totalAchieved += achievedValue || 0;
253 
                        totalTarget += targetValue || 0;
254 
                    } else if (index === 3) {
255 
                        totalAchievedHid += achievedValue || 0;
256 
                        totalTargetHid += targetValue || 0;
257 
                    } else if (index === 5) {
258 
                        totalAchievedRun += achievedValue || 0;
259 
                        totalTargetRun += targetValue || 0;
260 
                    } else if (index === 7) {
261 
                        totalAchievedSlow += achievedValue || 0;
262 
                        totalTargetSlow += targetValue || 0;
263 
                    } else if (index === 9) {
264 
                        totalAchievedEol += achievedValue || 0;
265 
                        totalTargetEol += targetValue || 0;
266 
                    } else if (index === 11) {
267 
                        totalAchievedOther += achievedValue || 0;
268 
                        totalTargetOther += targetValue || 0;
269 
                    }
33930 ranu 270 
 
33946 ranu 271 
                    // Format values in lakh
272 
                    if (!isNaN(achievedValue)) achievedSpan.textContent = formatValueInLakh(achievedValue);
273 
                    if (!isNaN(targetValue)) targetSpan.textContent = formatValueInLakh(targetValue);
33942 ranu 274 
 
33946 ranu 275 
                    const percentCell = cell.nextElementSibling;
276 
                    if (percentCell && targetValue > 0) {
277 
                        const percentage = ((achievedValue / targetValue) * 100).toFixed(1);
278 
                        percentCell.textContent = percentage + '%';
33931 ranu 279 
 
33946 ranu 280 
                        // Determine background color based on percentage
281 
                        let color;
33962 ranu 282 
                        if (percentage <= 1) {
283 
                            percentCell.style.color = `red`
284 
                        }
33946 ranu 285 
                        if (percentage <= 40) {
286 
                            color = '#F56983FF'; // Orange for <= 40%
287 
                        } else if (percentage > 40 && percentage <= 75) {
288 
                            color = '#f2c947e8'; // Yellow for 41% - 75%
289 
                        } else {
290 
                            color = '#82ef8299'; // Green for > 75%
291 
                        }
33945 ranu 292 
 
33946 ranu 293 
                        // Apply gradient background with the color
294 
                        percentCell.style.background = `linear-gradient(to right, ${color} ${percentage}%, transparent ${percentage}%)`;
295 
                    } else if (percentCell) {
33953 ranu 296 
                        percentCell.textContent = "-";
33946 ranu 297 
                        percentCell.style.background = 'none';
33931 ranu 298 
                    }
33946 ranu 299 
                }
33930 ranu 300 
            });
33946 ranu 301 
        });
33942 ranu 302 
 
33946 ranu 303 
    }
33944 ranu 304 
 
33958 ranu 305 
    function groupRowsByRbm() {
306 
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');
307 
        let currentRbm = null;
308 
        let rbmGroup = [];
309 
 
310 
        rows.forEach((row, index) => {
311 
            const rbmCell = row.cells[0];
312 
            if (!rbmCell) return;
313 
 
314 
            const rbmName = rbmCell.textContent.split('-')[0].trim(); // Extract RBM name
315 
 
316 
            if (rbmName !== currentRbm) {
317 
                // Apply border to the previous group
318 
                if (rbmGroup.length > 0) {
319 
                    applyBorderToGroup(rbmGroup);
320 
                }
321 
 
322 
                // Reset for new RBM
323 
                currentRbm = rbmName;
324 
                rbmGroup = [];
325 
            }
326 
 
327 
            // Add the row to the current group
328 
            rbmGroup.push(row);
329 
 
330 
            // Apply border to the last group
331 
            if (index === rows.length - 1 && rbmGroup.length > 0) {
332 
                applyBorderToGroup(rbmGroup);
333 
            }
334 
        });
335 
    }
336 
 
337 
    function applyBorderToGroup(group) {
338 
        if (group.length === 0) return;
339 
 
340 
        // Add border styles to the first and last rows in the group
341 
        //group[0].style.borderTop = '2px solid #000'; // Black border for start
342 
        group[group.length - 1].style.borderBottom = '2px solid #000'; // Black border for end
343 
    }
344 
 
345 
    window.onload = function () {
346 
        formatTargets(); // Format targets first
347 
        groupRowsByRbm(); // Group rows by RBM
348 
    };
349 
 
350 
 
33945 ranu 351 
</script>