Subversion Repositories SmartDukaan

Rev

Rev 34071 | Rev 34075 | 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) {
210 
        return num.toString().replace(/\B(?=(\d{2})+(?!\d))/g, ",").replace(/,(\d{3})$/, "$1");
211 
    }
212 
 
213 
    document.addEventListener("DOMContentLoaded", function () {
214 
        document.querySelectorAll(".format-indian").forEach(function (el) {
215 
            el.textContent = formatNumberIndian(el.textContent.trim());
216 
        });
217 
    });
218 
</script>
219 
 
220 
 
221 
<script>
33933 ranu 222 
    function formatValueInLakh(value) {
33939 ranu 223 
        return (value / 100000).toFixed(1) + 'L';
33930 ranu 224 
    }
225 
 
226 
    function formatTargets() {
227 
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');
33942 ranu 228 
        let totalAchieved = 0, totalTarget = 0;
229 
        let totalAchievedHid = 0, totalTargetHid = 0;
230 
        let totalAchievedRun = 0, totalTargetRun = 0;
231 
        let totalAchievedSlow = 0, totalTargetSlow = 0;
232 
        let totalAchievedEol = 0, totalTargetEol = 0;
233 
        let totalAchievedOther = 0, totalTargetOther = 0;
33930 ranu 234 
 
235 
        rows.forEach(row => {
33931 ranu 236 
            const cells = row.querySelectorAll('td');
33946 ranu 237 
            cells.forEach((cell, index) => {
238 
                const achievedSpan = cell.querySelector('.achieved-cell');
239 
                const targetSpan = cell.querySelector('.target-cell');
240 
                if (achievedSpan && targetSpan) {
241 
                    const achievedValue = parseFloat(achievedSpan.textContent.replace(/[^\d.-]/g, ''));
242 
                    const targetValue = parseFloat(targetSpan.textContent.replace(/[^\d.-]/g, ''));
33944 ranu 243 
 
33946 ranu 244 
                    // Add to totals
245 
                    if (index === 1) {
246 
                        totalAchieved += achievedValue || 0;
247 
                        totalTarget += targetValue || 0;
248 
                    } else if (index === 3) {
249 
                        totalAchievedHid += achievedValue || 0;
250 
                        totalTargetHid += targetValue || 0;
251 
                    } else if (index === 5) {
252 
                        totalAchievedRun += achievedValue || 0;
253 
                        totalTargetRun += targetValue || 0;
254 
                    } else if (index === 7) {
255 
                        totalAchievedSlow += achievedValue || 0;
256 
                        totalTargetSlow += targetValue || 0;
257 
                    } else if (index === 9) {
258 
                        totalAchievedEol += achievedValue || 0;
259 
                        totalTargetEol += targetValue || 0;
260 
                    } else if (index === 11) {
261 
                        totalAchievedOther += achievedValue || 0;
262 
                        totalTargetOther += targetValue || 0;
263 
                    }
33930 ranu 264 
 
33946 ranu 265 
                    // Format values in lakh
266 
                    if (!isNaN(achievedValue)) achievedSpan.textContent = formatValueInLakh(achievedValue);
267 
                    if (!isNaN(targetValue)) targetSpan.textContent = formatValueInLakh(targetValue);
33942 ranu 268 
 
33946 ranu 269 
                    const percentCell = cell.nextElementSibling;
270 
                    if (percentCell && targetValue > 0) {
271 
                        const percentage = ((achievedValue / targetValue) * 100).toFixed(1);
272 
                        percentCell.textContent = percentage + '%';
33931 ranu 273 
 
33946 ranu 274 
                        // Determine background color based on percentage
275 
                        let color;
33962 ranu 276 
                        if (percentage <= 1) {
277 
                            percentCell.style.color = `red`
278 
                        }
33946 ranu 279 
                        if (percentage <= 40) {
280 
                            color = '#F56983FF'; // Orange for <= 40%
281 
                        } else if (percentage > 40 && percentage <= 75) {
282 
                            color = '#f2c947e8'; // Yellow for 41% - 75%
283 
                        } else {
284 
                            color = '#82ef8299'; // Green for > 75%
285 
                        }
33945 ranu 286 
 
33946 ranu 287 
                        // Apply gradient background with the color
288 
                        percentCell.style.background = `linear-gradient(to right, ${color} ${percentage}%, transparent ${percentage}%)`;
289 
                    } else if (percentCell) {
33953 ranu 290 
                        percentCell.textContent = "-";
33946 ranu 291 
                        percentCell.style.background = 'none';
33931 ranu 292 
                    }
33946 ranu 293 
                }
33930 ranu 294 
            });
33946 ranu 295 
        });
33942 ranu 296 
 
33946 ranu 297 
    }
33944 ranu 298 
 
33958 ranu 299 
    function groupRowsByRbm() {
300 
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');
301 
        let currentRbm = null;
302 
        let rbmGroup = [];
303 
 
304 
        rows.forEach((row, index) => {
305 
            const rbmCell = row.cells[0];
306 
            if (!rbmCell) return;
307 
 
308 
            const rbmName = rbmCell.textContent.split('-')[0].trim(); // Extract RBM name
309 
 
310 
            if (rbmName !== currentRbm) {
311 
                // Apply border to the previous group
312 
                if (rbmGroup.length > 0) {
313 
                    applyBorderToGroup(rbmGroup);
314 
                }
315 
 
316 
                // Reset for new RBM
317 
                currentRbm = rbmName;
318 
                rbmGroup = [];
319 
            }
320 
 
321 
            // Add the row to the current group
322 
            rbmGroup.push(row);
323 
 
324 
            // Apply border to the last group
325 
            if (index === rows.length - 1 && rbmGroup.length > 0) {
326 
                applyBorderToGroup(rbmGroup);
327 
            }
328 
        });
329 
    }
330 
 
331 
    function applyBorderToGroup(group) {
332 
        if (group.length === 0) return;
333 
 
334 
        // Add border styles to the first and last rows in the group
335 
        //group[0].style.borderTop = '2px solid #000'; // Black border for start
336 
        group[group.length - 1].style.borderBottom = '2px solid #000'; // Black border for end
337 
    }
338 
 
339 
    window.onload = function () {
340 
        formatTargets(); // Format targets first
341 
        groupRowsByRbm(); // Group rows by RBM
342 
    };
343 
 
344 
 
33945 ranu 345 
</script>