Subversion Repositories SmartDukaan

Rev

Rev 35631 | Blame | Compare with Previous | Last modification | View Log | RSS feed

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.1.0/daterangepicker.min.css"/>

<style>
    table th {
        text-align: center;
    }

    #rbm-arr-table td, #rbm-arr-table th {
        padding: 0.35rem;
        font-size: 18px;
    }

    .text-bold {
        font-weight: bold !important;
    }

    .text-bold span {
        font-weight: bold;
    }

    .rb-name {
        font-size: 16px;
        font-weight: bold;
    }

    #rbm-arr-table td {
        text-align: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #000; /* Ensure text remains visible */
        font-weight: 400;
    }

    #rbm-aging-table td {
        text-align: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #000; /* Ensure text remains visible */
        font-weight: 400;
    }

    .border-top-bottom {
        border-top: 2px solid #000 !important;
        border-bottom: 2px solid #000 !important;
    }

    #rbm-aging-table td, #rbm-aging-table th {
        padding: 0.35rem;
        font-size: 18px;
    }

</style>

<section class="wrapper">
    <div class="row" style="margin: 0">
        #if($isGtEqL3)
            <div class="col-md-12 text-right">
                <h4>RBM Wise Today's ARR (Basis Product Movement)</h4>
                <table style="float:right;margin-bottom: 10px;">
                    <tr>
                        <td>
                            <input placeholder="Set Duration" name="rbmArrPeriod"
                                   id="rbmArrPeriod"
                                   type="text" value="" class="form-control input-sm" style="height: 34px;">
                        </td>
                        <td>
                            <input class="btn btn-primary btn-sm rbm-target-achievement"
                                   type="button"
                                   value="View">
                        </td>
                        <td>
                            <input class="btn btn-primary btn-sm sold-catalog-report"
                                   type="button"
                                   value="Download row data">
                        </td>
                    </tr>
                </table>
            </div>
        #end
        <div class="col-lg-12">
            <table id="rbm-arr-table" class="table table-border table-condensed table-bordered" style="width:100%">
                <tr>
                    <th>RBM</th>
                    <th>Total (ACH/TGT)</th>
                    <th>%</th>
                    <th>HID (ACH/TGT)</th>
                    <th>%</th>
                    <th>FAST (ACH/TGT)</th>
                    <th>%</th>
                    <th>RUN (ACH/TGT)</th>
                    <th>%</th>
                    <th>SLOW (ACH/TGT)</th>
                    <th>%</th>
                    <th>Other (ACH/TGT)</th>
                    <th>%</th>
                </tr>
                #foreach($target in $rbmArrViewModels)
                    <tr>
                        <td>$target.getRbmName()- $target.getWarehouseName()</td>

                        <td><span class="achieved-cell">$target.getTotalAchievedTarget()</span> / <span
                                class="target-cell">$target.getTodayTarget()</span></td>
                        <td class="total-percent"></td>

                        <td><span class="achieved-cell">$target.getTodayAchievedHidTarget()</span> / <span
                                class="target-cell">$target.getTodayHidTarget()</span></td>
                        <td class="hid-percent"></td>

                        <td><span class="achieved-cell">$target.getTodayAchievedFastMovingTarget()</span> / <span
                                class="target-cell">$target.getTodayFastMovingTarget()</span></td>
                        <td class="fast-percent"></td>

                        <td><span class="achieved-cell">$target.getTodayAchievedRunningTarget()</span> / <span
                                class="target-cell">$target.getTodayRunningTarget()</span></td>
                        <td class="run-percent"></td>

                        <td><span class="achieved-cell">$target.getTodayAchievedSlowMovingTarget()</span> / <span
                                class="target-cell">$target.getTodaySlowMovingTarget()</span></td>
                        <td class="slow-percent"></td>

                        <td><span class="achieved-cell">$target.getTodayAchievedOtherMovingTarget()</span> / <span
                                class="target-cell">$target.getTodayOtherMovingTarget()</span></td>
                        <td class="other-percent"></td>
                    </tr>
                #end
                <!-- Add a row for totals -->
                <tr>
                    <td><strong>Total</strong></td>
                    <td class="text-bold"><span class="achieved-cell">$totalAchieved </span> / <span
                            class="target-cell">$totalTargetSum</span></td>
                    <td class="total-percent text-bold"></td>

                    <td class="text-bold"><span class="achieved-cell">$totalHidAchievedSum</span> / <span
                            class="target-cell">$totalHidSum</span></td>
                    <td class="hid-percent text-bold"></td>

                    <td class="text-bold"><span class="achieved-cell">$totalFastAchievedSum</span> / <span
                            class="target-cell">$totalFastSum</span></td>
                    <td class="fast-percent text-bold"></td>

                    <td class="text-bold"><span class="achieved-cell">$totalRunningAchievedSum</span> / <span
                            class="target-cell">$totalRunningSum</span></td>
                    <td class="run-percent text-bold"></td>

                    <td class="text-bold"><span class="achieved-cell">$totalSlowAchievedSum</span> / <span
                            class="target-cell">$totalSlowSum</span></td>
                    <td class="slow-percent text-bold"></td>

                    <td class="text-bold"><span class="achieved-cell">$totalOtherAchievedSum</span> / <span
                            class="target-cell">$totalOtherSum</span></td>
                    <td class="other-percent text-bold"></td>
                </tr>

            </table>
        </div>
    </div>

    <div class="row" style="margin: 0">
        <div class="col-md-12">
            <br>
            <h4> > 15 Days Aging Sold </h4>
            <table id="rbm-aging-table" class="table table-border table-condensed table-bordered"
                   style="width:100%">
                <thead>
                <tr>
                    <th>RBM</th>
                    <th>HID</th>
                    <th>FASTMOVING</th>
                    <th>RUNNING</th>
                    <th>SLOWMOVING</th>
                    <th>OTHER</th>
                    <th>TOTAL</th>
                </tr>
                </thead>
                <tbody>
                    #foreach($model in $sold15daysOldAgingModels)
                    <tr>
                        <th>$model.getRbmName()</th>
                        <td class="format-indian">$model.getHidBilled()</td>
                        <td class="format-indian">$model.getFastmovingBilled()</td>
                        <td class="format-indian">$model.getRunningBilled()</td>
                        <td class="format-indian">$model.getSlowmovingBilled()</td>
                        <td class="format-indian">$model.getOthersBilled()</td>
                        <td class="format-indian">$model.getTotalBilled()</td>
                    </tr>
                    #end
                <tr>
                    <th class="border-top-bottom"> Total</th>
                    <td class="border-top-bottom format-indian">$totalSoldHid</td>
                    <td class="border-top-bottom format-indian">$totalSoldFast</td>
                    <td class="border-top-bottom format-indian">$totalSoldRun</td>
                    <td class="border-top-bottom format-indian">$totalSoldSlow</td>
                    <td class="border-top-bottom format-indian">$totalSoldOther</td>
                    <td class="border-top-bottom format-indian">$totalSoldAging</td>
                </tr>
                    #foreach($aging in $our15DaysOldAgingStocks)
                    <tr>
                        <th class="border-top-bottom"> 15 days Balance Value</th>
                        <td class="border-top-bottom format-indian">$aging.getHidAgingStock()</td>
                        <td class="border-top-bottom format-indian">$aging.getFastmovingAgingStock()</td>
                        <td class="border-top-bottom format-indian">$aging.getRunningAgingStock()</td>
                        <td class="border-top-bottom format-indian">$aging.getSlomovingAgingStock()</td>
                        <td class="border-top-bottom format-indian">$aging.getOtherAgingStock()</td>
                        <td class="border-top-bottom format-indian">$aging.getTotal()</td>
                    </tr>
                    #end
                </tbody>
            </table>
        </div>
    </div>

    <div class="row" style="margin: 0">
        <div class="col-md-12">
            <br>
            <h4>Partner Billing Count (Target: >1L, Non-Target: >20K)</h4>
            <table id="rbm-aging-table" class="table table-border table-condensed table-bordered"
                   style="width:100%">
                <thead>
                <tr>
                    <th>RBM</th>
                    <th>Targeted Partner</th>
                    <th>First Week Billed <br> (1-7)</th>
                    <th>Second Week Billed <br>(8-15)</th>
                    <th>Third Week Billed <br>(16-22)</th>
                    <th>Fourth Week Billed <br> (23-month end)</th>
                    <th>MTD Billed</th>
                    <th>Zero Billed <br>(Target: &lt;1L, Non-Target: &lt;20K)</th>
                </tr>
                </thead>
                <tbody>
                    #foreach($model in $sold15daysOldAgingModels)
                    <tr>
                        <th>
                            $model.getRbmName()
                            #if($rbmNameToRatingMap.get($model.getRbmName()).getRating())
                                #set($rating =$rbmNameToRatingMap.get($model.getRbmName()).getRating())
                                #if($rating && $rating > 0 and $rating <= 1)
                                    <b style="color: goldenrod;font-size: 9px;"> &#9733;</b>

                                #elseif($rating && $rating > 1 and $rating <= 2)
                                    <b style="color: goldenrod;font-size: 9px;"> &#9733; &#9733;</b>

                                #elseif($rating && $rating > 2 and $rating <= 3)
                                    <b style="color: goldenrod;font-size: 9px;"> &#9733; &#9733; &#9733;</b>

                                #elseif($rating && $rating > 3 and $rating <= 4)
                                    <b style="color: goldenrod;font-size: 9px;"> &#9733; &#9733; &#9733; &#9733;</b>

                                #elseif($rating && $rating > 4 and $rating <= 5)
                                    <b style="color: goldenrod;font-size: 9px;"> &#9733; &#9733; &#9733; &#9733;
                                        &#9733; </b>

                                #end
                            #end

                        </th>
                        <td>
                            #if($rbmTargetedFofoIdCountMap.get($model.getRbmName()))
                                $rbmTargetedFofoIdCountMap.get($model.getRbmName())
                            #else
                                0
                            #end
                        </td>
                        <td>
                            #if($rbmBilledCountMapFirstWeek.get($model.getRbmName()))
                                $rbmBilledCountMapFirstWeek.get($model.getRbmName())
                            #else
                                0
                            #end
                        </td>
                        <td>
                            #if($rbmBilledCountMapSecondWeek.get($model.getRbmName()))
                                $rbmBilledCountMapSecondWeek.get($model.getRbmName())
                            #else
                                0
                            #end
                        </td>
                        <td>
                            #if($rbmBilledCountMapThirdWeek.get($model.getRbmName()))
                                $rbmBilledCountMapThirdWeek.get($model.getRbmName())
                            #else
                                0
                            #end
                        </td>
                        <td>
                            #if($rbmBilledCountMapFourthWeek.get($model.getRbmName()))
                                $rbmBilledCountMapFourthWeek.get($model.getRbmName())
                            #else
                                0
                            #end
                        </td>
                        <td>
                            #if($rbmBilledCountMapMtd.get($model.getRbmName()))
                                $rbmBilledCountMapMtd.get($model.getRbmName())
                            #else
                                0
                            #end
                        </td>
                        <td>
                            #if($zeroBilledCountMap.get($model.getRbmName()))
                                $zeroBilledCountMap.get($model.getRbmName())
                            #else
                                0
                            #end
                        </td>
                    </tr>
                    #end
                <tr>
                    <th class="border-top-bottom">Total</th>
                    <th class="border-top-bottom">$totalTargetedCount</th>
                    <th class="border-top-bottom">$totalFirstWeekCount</th>
                    <th class="border-top-bottom">$totalSecondWeekCount</th>
                    <th class="border-top-bottom">$totalThirdWeekCount</th>
                    <th class="border-top-bottom">$totalFourthWeekCount</th>
                    <th class="border-top-bottom">$totalMtdCount</th>
                    <th class="border-top-bottom">$totalZeroBilledCount</th>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<script>
    function formatNumberIndian(num) {
        x = num.toString();
        var lastThree = x.substring(x.length - 3);
        var otherNumbers = x.substring(0, x.length - 3);
        if (otherNumbers != '')
            lastThree = ',' + lastThree;
        var res = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree;
        return res;
    }

    document.addEventListener("DOMContentLoaded", function () {
        document.querySelectorAll(".format-indian").forEach(function (el) {
            el.textContent = formatNumberIndian(el.textContent.trim());
        });
    });
</script>


<script>
    function formatValueInLakh(value) {
        return (value / 100000).toFixed(1) + 'L';
    }

    function formatTargets() {
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');
        let totalAchieved = 0, totalTarget = 0;
        let totalAchievedHid = 0, totalTargetHid = 0;
        let totalAchievedFast = 0, totalTargetFast = 0;
        let totalAchievedRunning = 0, totalTargetRunning = 0;
        let totalAchievedSlow = 0, totalTargetSlow = 0;
        let totalAchievedOther = 0, totalTargetOther = 0;

        rows.forEach(row => {
            const cells = row.querySelectorAll('td');
            cells.forEach((cell, index) => {
                const achievedSpan = cell.querySelector('.achieved-cell');
                const targetSpan = cell.querySelector('.target-cell');
                if (achievedSpan && targetSpan) {
                    const achievedValue = parseFloat(achievedSpan.textContent.replace(/[^\d.-]/g, ''));
                    const targetValue = parseFloat(targetSpan.textContent.replace(/[^\d.-]/g, ''));

                    // Add to totals
                    if (index === 1) {
                        totalAchieved += achievedValue || 0;
                        totalTarget += targetValue || 0;
                    } else if (index === 3) {
                        totalAchievedHid += achievedValue || 0;
                        totalTargetHid += targetValue || 0;
                    } else if (index === 5) {
                        totalAchievedFast += achievedValue || 0;
                        totalTargetFast += targetValue || 0;
                    } else if (index === 7) {
                        totalAchievedRunning += achievedValue || 0;
                        totalTargetRunning += targetValue || 0;
                    } else if (index === 9) {
                        totalAchievedSlow += achievedValue || 0;
                        totalTargetSlow += targetValue || 0;
                    } else if (index === 11) {
                        totalAchievedOther += achievedValue || 0;
                        totalTargetOther += targetValue || 0;
                    }

                    // Format values in lakh
                    if (!isNaN(achievedValue)) achievedSpan.textContent = formatValueInLakh(achievedValue);
                    if (!isNaN(targetValue)) targetSpan.textContent = formatValueInLakh(targetValue);

                    const percentCell = cell.nextElementSibling;
                    if (percentCell && targetValue > 0) {
                        const percentage = ((achievedValue / targetValue) * 100).toFixed(1);
                        percentCell.textContent = percentage + '%';

                        // Determine background color based on percentage
                        let color;
                        if (percentage <= 1) {
                            percentCell.style.color = `red`
                        }
                        if (percentage <= 40) {
                            color = '#F56983FF'; // Orange for <= 40%
                        } else if (percentage > 40 && percentage <= 95) {
                            color = '#f2c947e8'; // Yellow for 41% - 95%
                        } else {
                            color = '#82ef8299'; // Green for > 95%
                        }

                        // Apply gradient background with the color
                        percentCell.style.background = `linear-gradient(to right, ${color} ${percentage}%, transparent ${percentage}%)`;
                    } else if (percentCell) {
                        percentCell.textContent = "-";
                        percentCell.style.background = 'none';
                    }
                }
            });
        });

    }

    function groupRowsByRbm() {
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');
        let currentRbm = null;
        let rbmGroup = [];

        rows.forEach((row, index) => {
            const rbmCell = row.cells[0];
            if (!rbmCell) return;

            const rbmName = rbmCell.textContent.split('-')[0].trim(); // Extract RBM name

            if (rbmName !== currentRbm) {
                // Apply border to the previous group
                if (rbmGroup.length > 0) {
                    applyBorderToGroup(rbmGroup);
                }

                // Reset for new RBM
                currentRbm = rbmName;
                rbmGroup = [];
            }

            // Add the row to the current group
            rbmGroup.push(row);

            // Apply border to the last group
            if (index === rows.length - 1 && rbmGroup.length > 0) {
                applyBorderToGroup(rbmGroup);
            }
        });
    }

    function applyBorderToGroup(group) {
        if (group.length === 0) return;

        // Add border styles to the first and last rows in the group
        //group[0].style.borderTop = '2px solid #000'; // Black border for start
        group[group.length - 1].style.borderBottom = '2px solid #000'; // Black border for end
    }

    window.onload = function () {
        formatTargets(); // Format targets first
        groupRowsByRbm(); // Group rows by RBM
    };


</script>