WebSVN – SmartDukaan – Diff – /trunk/profitmandi-fofo/src/main/webapp/WEB-INF/views/ftl/dashboard-modal.vm



        margin-bottom: 10px;
 
    }
 
    .legend-item:hover {
        transform: translateX(5px) scale(1.02);
        z-index: 10;
    }
 
 
    .legend-color {
        width: 20px;

 
    .fs-3, .fs-5 {
        font-weight: normal;
    }
 
 
    .fw-bold {
        font-weight: bold !important;
    }
 
    .btn {

</style>
<body style="background-color: rgb(247, 247, 247);zoom: 100%!important;">
<div style="overflow-y:auto;max-height: 120vh; ">
    <section id="ajaxSection" class="rounded"
             style="max-height: 120vh; overflow-y: auto;">
 
        <div class="w-full bg-danger h-25 py-3 mb-4">
            <h1 class="text-center text-white " style="font-size: 30px !important; font-weight: 800">Pending
                Tasks</h1>
        </div>
        <div class="container">
            ##-----------------------------------------------GRN Pending -----------------------------------------------------
            <div class="container-fluid p-4">
                #if($grnPendingOrders.entrySet().size()>0)
 
                    <div class="row justify-content-center">
                        <div class="col-10">
                            <div class="bg-dark-light rounded-3 p-3 shadow rounded-corner">
                                <h1 class="text-white text-center mb-0 fw-bold py-2 fs-8">GRN Pending</h1>
                            </div>
                        </div>
                    </div>
 
 
                    <div class="table-responsive rounded-3 shadow p-5">
                        <table id="grnTable" class="table table-bordered mb-0 table-border" style="width:100%">
 
 
                            <thead>
                            <tr class="bg-danger text-white">
                                <th class="ps-4 fs-5 fw-bold text-uppercase bg-danger text-white text-center"
                                    style="padding: 10px !important;">BRANDS
                                </th>

                                    style="padding: 10px !important;">VALUE
                                </th>
                            </tr>
                            </thead>
                            <tbody>
 
                                #set($mandatoryBrands = ["Vivo", "Oppo", "Samsung", "Realme"])
 
 
                                #foreach($entry in $grnPendingOrders.entrySet())
                                    #set($brand = $entry.key)
                                    #set($details = $entry.value)
 
                                <tr class="">
                                    <td class="ps-4 text-center p-0">
                                        <div class="d-flex align-items-center justify-content-center">
                                            <div class="row align-items-center" style="width: 200px;">
                                                <div class="col-auto">

                                    <td class="pe-4 text-center align-middle fs-5 fw-semibold currency p-0 ">
                                        $nf.format($details.mrp)
                                    </td>
                                </tr>
                                #end
 
                            </tbody>
 
 
                        </table>
                    </div>
                #end
            </div>
 
            ##-----------------------------------------------Unbilled Activated -----------------------------------------------------
 
            <div class="container-fluid p-4">
                #if($unbilledActivated.entrySet().size()>0)
 
                    <div class="row justify-content-center">
                        <div class="col-10">
                            <div class="bg-dark-light rounded-3 p-3 shadow rounded-corner">
                                <h1 class="text-white text-center mb-0 py-2 fw-bold fs-8">Pending Billing</h1>
                            </div>
                        </div>
                    </div>
 
 
                    <div class="table-responsive rounded-3 shadow p-5">
                        <table id="unbilledTable" class="table table-bordered mb-0 table-border" style="width:100%">
 
 
                            <thead>
                            <tr class="bg-danger text-white">
                                <th class="ps-4 fs-5 fw-bold text-uppercase bg-danger text-white text-center p-0"
                                    style="padding: 10px !important;">BRANDS
                                </th>

                                    style="padding: 10px !important;">VALUE
                                </th>
                            </tr>
                            </thead>
                            <tbody>
 
                                #set($mandatoryBrands = ["Vivo", "Realme", "Oppo", "Samsung"])
 
 
                                #foreach($entry in $unbilledActivated.entrySet())
                                    #set($brand = $entry.key)
                                    #set($details = $entry.value)
 
                                <tr>
                                    <td class="ps-4 text-center p-0">
                                        <div class="d-flex align-items-center justify-content-center">
                                            <div class="row align-items-center" style="width: 200px;">
                                                <div class="col-auto">

 
 
            ##-----------------------------------------------Loan Amount -----------------------------------------------------
 
            <div class="container-fluid p-4">
 
                <div class="row mb-5 justify-content-center">
                    <div class="col-10">
                        <div class="bg-dark-light rounded-3 p-3 shadow rounded-corner">
                            <h1 class="text-white text-center mb-0  fw-bold py-2 fs-8">Loan </h1>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
 
                    <div class="col-12 col-md-4 text-center ">
                        <div class="payment-circle shadow-lg shadow-dark mx-auto "
                             style="background-color: #cc0000 !important;">
                            <div class="payment-content">
                                <div class="payment-amount currency"> $nf.format( $totalDefaultAmount) </div>

                        </div>
                        <h1 class="payment-label fw-bold mt-4" style="font-weight: 400 !important;">Default Payment<br>(Above
                            30 days)</h1>
                    </div>
 
 
                    <div class="col-12 col-md-4 text-center">
                        <div class="payment-circle shadow-lg mx-auto" style="background-color: #FF9433 !important;">
                            <div class="payment-content">
                                <div class="payment-amount currency">  $nf.format($totalOverdueAmount) </div>
                            </div>

                        <h1 class="payment-label fw-bold mt-4"
                            style="font-size: 20px !important;  font-weight: 400 !important;">Due Payment<br>(Above 15
                            Days)</h1>
 
                    </div>
 
                    <div class="col-12 col-md-4 text-center">
                        <div class="payment-circle shadow-lg mx-auto " style="background-color: #00B050 !important;">
                            <div class="payment-content">
                                <div class="payment-amount currency">  $nf.format($totalDueAmount) </div>
                            </div>

                            style="font-size: 20px !important; font-weight: 400 !important;">Other Loan<br>(Within 15
                            Days)</h1>
                    </div>
 
 
 
                    <div class="mt-4 mx-5 " style="margin-top: 6rem !important;">
                        <h1 class="text-center " style="font-size:30px !important;font-weight:300 !important;">Total
                            Loan Value :
                            <span class="currency fw-bold"> $nf.format( $totalLoan )</span>
                        </h1>
                    </div>
                </div>
            </div>
        </div>
 
 
        <div class="w-full bg-danger h-25 py-3 my-4">
            <h1 class="text-center text-white fw-bold" style="font-size: 30px !important; font-weight: 800">My Business
                Analysis</h1>
        </div>
        <div class="container-fluid p-5 mt-5">
 
 
            <div class="row mb-1 my-4 mx-3 justify-content-center">
                <div class="col-10">
                    <div class="bg-dark-light rounded-3 p-3 shadow rounded-corner">
                        <h1 class="text-white text-center mb-0 fw-bold py-2 fs-8">My Earning </h1>
                    </div>
                </div>
            </div>
 
 
            <div class="container mt-4">
                <div class="chart-wrapper card shadow-lg rounded-5 p-2">
                    <span class="text-danger fs-3 fw-bold text-end">** Click on the bar to see the details</span>
 
                    <div class="chart-content ">

        {"Brand": "realme", "MarketShare": "11%", "Quarter": "Q1 2025", "BgColor": "#FFC915", "Rank": "5"},
        {"Brand": "Others", "MarketShare": "26%", "Quarter": "Q1 2025", "BgColor": "#6b7280", "Rank": "-"}
        ])
 
        <div class="container-fluid p-5">
 
            <div class="row mb-1 my-4 mx-3 justify-content-center">
                <div class="col-10">
                    <div class="bg-dark-light rounded-3 p-3 shadow rounded-corner">
                        <h1 class="text-white text-center mb-0 fw-bold py-2 fs-8">Brand Analysis </h1>
                    </div>

                        <div class="card-header text-center fw-bold ">
                            <h4>HID</h4>
                        </div>
 
 
 
 
                        <div class="row mx-0 mt-4">
                            <div class="col-3 text-center">
                                <div class="p-1 py-3 rounded-top" style="background: #555; color: white;">
                                    <strong class="fs-4  fw-bold">Model </strong>

                    </div>
                </div>
            </div>
 
            <div class="row px-5" style="margin-left: 10rem !important;">
 
                <div class="col-md-6">
                    <div class="category-header mandatory-header">MANDATORY BRANDS</div>
 
                    #foreach($brandStockPrice in $brandStockPrices)
                        #set($mandatoryBrands = ["Vivo", "Oppo", "Samsung", "Realme"])
                        #if($mandatoryBrands.contains($brandStockPrice.getBrand()))
                            <div class="brand-item">
 
                                <div class="position-relative" style="z-index: 10">
                                    <img src="${brandStockPrice.getBrandUrl()}"
                                         class="brand-circle img-fluid rounded-circle shadow border border-danger"
                                         data-stockbrand="$brandStockPrice.getBrand()"
                                         alt="$brandStockPrice.getBrand()">
                                </div>
 
 
                                <div class="stock-ribbon mandatory-ribbon ms-n3  position-absolute curve ">
                                    <div class="d-flex d-flex  mb-1">
                                        <span class="fw-bold text-start fs-5">QTY:  </span>
                                        <span class="fw-bold text-start fs-5">$brandStockPrice.getTotalQty()</span>
                                    </div>

                            </div>
                        #end
                    #end
                </div>
 
 
                <div class="col-md-6">
                    <div class="category-header other-header">OTHER BRANDS</div>
                    #set($mandatoryBrands = ["Vivo", "Oppo", "Samsung", "Realme"])
 
                    #foreach($brandStockPrice in $brandStockPrices)
                        #if(!$mandatoryBrands.contains($brandStockPrice.getBrand()))
                            <div class="brand-item">
 
                                <div class="position-relative " style="z-index: 10">
                                    <img src="${brandStockPrice.getBrandUrl()}"
                                         class="brand-circle img-fluid rounded-circle shadow border border-dark"
                                         data-stockbrand="$brandStockPrice.getBrand()"
                                         alt="$brandStockPrice.getBrand()">
                                </div>
 
 
                                <div class="stock-ribbon other-ribbon ms-n3 position-absolute  curve">
                                    <div class="d-flex d-flex  mb-1">
                                        <span class="fw-bold text-start fs-5">QTY:  </span>
                                        <span class="fw-bold text-start fs-5">$brandStockPrice.getTotalQty()</span>
                                    </div>

                            <h1 class="text-white text-center mb-0 fw-bold py-2 fs-8">My Stock Ageing</h1>
                        </div>
                    </div>
                </div>
                <div class="card-body">
 
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <div class="btn-group" role="group">
                                <button type="button" class="btn btn-danger rounded-pill px-4 me-2 fs-5" id="btnVolume">
                                    Volume

                                </button>
                            </div>
                        </div>
                    </div>
 
 
                    <div class="table-responsive rounded-5 p-5">
                        <table class="table table-bordered rounded-4" id="stockAgingTable">
                            <thead>
                            <tr class="text-center">
                                <th></th>

                            <tbody>
                                #if(!$inventoryGroupedByBrand.isEmpty())
                                    #set($mandatoryBrands = ["vivo", "oppo", "samsung", "realme"])
                                    #set($otherBrands = [])
 
 
                                <tr>
                                    <td class="align-middle bg-secondary text-center text-white fw-bold " rowspan="5"
                                        style="width: 60px !important; font-size: 10px !important;">
                                        <div class="brandText">MANDATORY BRANDS</div>
                                    </td>

                                            #end
                                        </tr>
                                        #end
                                    #end
 
 
                                <tr>
                                    <td class="align-middle bg-dark-light text-center text-white fw-bold "
                                        rowspan="$inventoryGroupedByBrand.size()"
                                        style="width: 60px !important; font-size: 10px !important;">
                                        <div class="brandText">OTHER BRANDS</div>

        'xiaomi': '#FF5722',
        'apple': '#666666',
        'poco': '#FFD403',
        'tecno': '#0064FE',
        'lava': '#ED0F53'
 
    };
 
 
    function loadMonthDetails(monthIndex) {
        console.log(`Loading details for month: ${monthIndex}`);

 
    $(document).on("click", ".pending-income", function () {
        lastMonthCreditIncome("main-content");
    });
 
 
    function doGetAjaxRequestHandler(url, successCallback) {
        $.ajax({
            url: url,
            type: 'GET',
            success: successCallback,

 
    function initializeBrandButtons() {
        const brandButtons = document.querySelectorAll('.brand-btn');
 
        brandButtons.forEach(button => {
            const brand = button.dataset.brand;
            const color = brandColors[brand] || '#666';
 
 
            button.style.border = `2px solid ${color}`;
            button.style.color = color;
            button.style.backgroundColor = '#fff';
        });
 
 
        brandButtons.forEach(button => {
            button.addEventListener('click', function () {
                const selectedBrand = this.dataset.brand;
 
 
                brandButtons.forEach(btn => {
                    const brandColor = brandColors[btn.dataset.brand] || '#666';
                    btn.style.backgroundColor = '#fff';
                    btn.style.color = brandColor;
                });
 
 
                this.style.backgroundColor = brandColors[selectedBrand] || '#666';
                this.style.color = '#fff';
 
 
                document.querySelectorAll('.brand-data').forEach(row => {
                    row.style.display = row.dataset.brand === selectedBrand ? 'block' : 'none';
                });
            });
        });

 
    initializeBrandButtons();
 
</script>
<script>
 
    document.querySelectorAll('.brand-btn').forEach(button => {
        button.addEventListener('click', function () {
            const brand = this.getAttribute('data-brand');
 
 
            document.querySelectorAll('.brand-btn').forEach(btn => {
                btn.style.backgroundColor = '';
                btn.style.color = '';
            });
            this.style.backgroundColor = '#006b35';
            this.style.color = 'white';
 
 
            document.querySelectorAll('.brand-data').forEach(item => {
                item.style.display = item.getAttribute('data-brand') === brand ? 'block' : 'none';
            });
        });
    });
 
    document.querySelector('.brand-btn')?.click();
</script>
 
##-------------------------------------------------------------------My Earning  chart -----------------------------------------
<script>

                }
                #if($foreach.hasNext),#end
            #end
        ].reverse();
 
 
        const formatIndianCurrency = (amount) => {
            const rounded = Math.round(amount);
            return rounded.toLocaleString('en-IN');
        };
 
 
        monthData.forEach(item => {
            item.totalFormatted = formatIndianCurrency(item.total);
            item.creditedFormatted = formatIndianCurrency(item.credited);
            item.pendingFormatted = formatIndianCurrency(item.pending);
        });
        chart = new Chart(document.getElementById('sixMonthChart'), {
            type: 'bar',
            data: {
                labels: monthData.map(d => d.month),
                datasets: [
 
                    {
                        label: 'Credited Income',
                        data: monthData.map(d => Math.round(d.credited)),
                        backgroundColor: '#aadcb4',
                        borderColor: '#aadcb4',

                        order: 1,
                        yAxisID: 'y',
                        hoverBorderWidth: 3,
                        hoverBorderColor: '#aadcb4'
                    },
 
                    {
                        label: 'Pending Income',
                        data: monthData.map(d => Math.round(d.pending)),
                        backgroundColor: 'rgba(255,0,0,0.7)',
                        borderColor: 'rgba(255,0,0,1)',

                        hitRadius: 0,
                        yAxisID: 'y',
                        hoverBorderWidth: 3,
                        hoverBorderColor: '#ff0000'
                    },
 
                    {
                        label: 'Total Income',
                        data: monthData.map(d => Math.round(d.total)),
                        borderColor: '#4bc0c0',
                        backgroundColor: 'rgba(75, 192, 192, 0.1)',

                        },
                        color: '#fff',
                        backgroundColor: '#333',
                        borderRadius: 4,
                        padding: 4,
 
                        font: {weight: 'bold'},
 
                        display: function (context) {
                            const datasetLabel = context.dataset.label;
                            const rawValue = context.dataset.data[context.dataIndex];
                            if (!rawValue || rawValue === 0) return false;
                            if (datasetLabel === 'Credited Income') {
                                const total = context.chart.data.datasets
                                        .find(d => d.label === 'Total Income')
                                        .data[context.dataIndex];
                                if (Math.round(total) === Math.round(rawValue)) return false;
                            }
                            return true;
                        }
 
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: 'rgba(0, 0, 0, 0.9)',

                        boxHeight: 15,
                        cornerRadius: 8,
                        usePointStyle: true,
                        bodyFont: {
                            size: 14,
                            weight: 'bold'
                        },
                        titleFont: {
                            size: 16,
                            weight: 'bold'
                        },
                        footerFont: {
                            size: 12,
                            weight: 'bold'
                        },
                        callbacks: {
                            title: function (context) {
                                return `Month: ${context[0].label}`;
                            },
                            label: function (context) {
                                const value = context.parsed.y;
 
                                const roundedValue = Math.round(value);
                                const formattedValue = roundedValue.toLocaleString('en-IN');
 
 
                                const label = context.dataset.label;
                                return `${label}: ${formattedValue}`;
                            },
                            footer: function (tooltipItems) {
 
                                const credited = tooltipItems.find(item => item.dataset.label === 'Credited Income')?.parsed.y || 0;
                                const total = tooltipItems.find(item => item.dataset.label === 'Total Income')?.parsed.y || 0;
                                if (total > 0) {
                                    const percentage = ((credited / total) * 100).toFixed(1);
                                    return `Credited: ${percentage}% of total income`;

                                    borderRadius: 4,
                                    borderWidth: 2
                                };
                            },
                            labelTextColor: function (context) {
                                return '#ffffff';
                            }
                        }
                    },
                    legend: {
                        display: true,

                onClick: function (event, elements) {
                    if (elements && elements.length > 0) {
                        const clickedIndex = elements[0].index;
                        const clickedData = monthData[clickedIndex];
 
 
                        event.chart.canvas.style.cursor = 'wait';
 
                        console.log(`Loading details for month: ${clickedData.monthIndex} (${clickedData.month})`);
 
                        loadMonthDetails(clickedData.monthIndex);
 
 
                        setTimeout(() => {
                            document.getElementById('partner-income').scrollIntoView({
                                behavior: 'smooth',
                                block: 'start'
                            });

    })
</script>
##-----------------------------------------------------------------------Stagged CHart ---------------------------------
<script>
    $(document).ready(function () {
 
        const MAJOR_BRANDS = ['vivo', 'samsung', 'oppo', 'realme', 'xiaomi'];
 
 
        const marketSegments = [];
        const otherMarketData = {
            brand: "Others",
            marketShare: 0,
            color: '#6b7280'
        };
 
 
        const stockSegments = [];
        const otherStockData = {
            brand: "Others",
            quantity: 0,
            value: 0
        };
 
 
        #foreach($entry in $marketShareData)
            var marketBrandName = '$entry.Brand'.toLowerCase();
            if (MAJOR_BRANDS.includes(marketBrandName)) {
                marketSegments.push({
                    brand: marketBrandName,

            } else {
                otherMarketData.marketShare += ${entry.MarketShare.replace('%', '')};
            }
        #end
 
 
        #foreach($brandStockPrice in $brandStockPrices)
            var stockBrandName = "$brandStockPrice.getBrand()".toLowerCase();
            if (MAJOR_BRANDS.includes(stockBrandName)) {
                stockSegments.push({
                    brand: stockBrandName,

                otherStockData.quantity += $brandStockPrice.getTotalQty();
                otherStockData.value += $brandStockPrice.getTotalValue();
            }
        #end
 
 
        if (otherMarketData.marketShare > 0) {
            marketSegments.push(otherMarketData);
        }
        if (otherStockData.quantity > 0) {
            stockSegments.push(otherStockData);
        }
 
 
        const combinedSegments = [];
        const allBrands = [...new Set([
            ...marketSegments.map(d => d.brand),
            ...stockSegments.map(d => d.brand)
        ])];

                stockValue: stockInfo.value || 0,
                color: marketInfo.color || brandColors[brand] || '#95a5a6'
            });
        });
 
 
        const totalStockQuantity = stockSegments.reduce((sum, b) => sum + b.quantity, 0);
 
 
        const ctx4 = document.getElementById('combinedStackedChart').getContext('2d');
        const staggedChart = new Chart(ctx4, {
            type: 'bar',
            data: {
                labels: combinedSegments.map(item => item.brand),

Rev 34813	Rev 34898
Line 122...	Line 122...
122	`margin-bottom: 10px;`	122	`margin-bottom: 10px;`
123		123
124	`}`	124	`}`
125		125
126	`.legend-item:hover {`	126	`.legend-item:hover {`
127	`transform: translateX(5px) scale(1.02); /* Scale instead of shift */`	127	`transform: translateX(5px) scale(1.02);`
128	`z-index: 10; /* Bring hovered items to front */`	128	`z-index: 10;`
129	`}`	129	`}`
130		130
131		131
132	`.legend-color {`	132	`.legend-color {`
133	`width: 20px;`	133	`width: 20px;`
Line 341...	Line 341...
341		341
342	`.fs-3, .fs-5 {`	342	`.fs-3, .fs-5 {`
343	`font-weight: normal;`	343	`font-weight: normal;`
344	`}`	344	`}`
345		345
346	`/* Only make specific elements bold when needed */`	-
347	`.fw-bold {`	346	`.fw-bold {`
348	`font-weight: bold !important;`	347	`font-weight: bold !important;`
349	`}`	348	`}`
350		349
351	`.btn {`	350	`.btn {`
Line 397...	Line 396...
397	`</style>`	396	`</style>`
398	`<body style="background-color: rgb(247, 247, 247);zoom: 100%!important;">`	397	`<body style="background-color: rgb(247, 247, 247);zoom: 100%!important;">`
399	`<div style="overflow-y:auto;max-height: 120vh; ">`	398	`<div style="overflow-y:auto;max-height: 120vh; ">`
400	`<section id="ajaxSection" class="rounded"`	399	`<section id="ajaxSection" class="rounded"`
401	`style="max-height: 120vh; overflow-y: auto;">`	400	`style="max-height: 120vh; overflow-y: auto;">`
402	`<!-- Header Section -->`	-
403	`<div class="w-full bg-danger h-25 py-3 mb-4">`	401	`<div class="w-full bg-danger h-25 py-3 mb-4">`
404	`<h1 class="text-center text-white " style="font-size: 30px !important; font-weight: 800">Pending`	402	`<h1 class="text-center text-white " style="font-size: 30px !important; font-weight: 800">Pending`
405	`Tasks</h1>`	403	`Tasks</h1>`
406	`</div>`	404	`</div>`
407	`<div class="container">`	405	`<div class="container">`
408	`##-----------------------------------------------GRN Pending -----------------------------------------------------`	406	`##-----------------------------------------------GRN Pending -----------------------------------------------------`
409	`<div class="container-fluid p-4">`	407	`<div class="container-fluid p-4">`
410	`#if($grnPendingOrders.entrySet().size()>0)`	408	`#if($grnPendingOrders.entrySet().size()>0)`
411	`<!-- Section Header -->`	-
412	`<div class="row justify-content-center">`	409	`<div class="row justify-content-center">`
413	`<div class="col-10">`	410	`<div class="col-10">`
414	`<div class="bg-dark-light rounded-3 p-3 shadow rounded-corner">`	411	`<div class="bg-dark-light rounded-3 p-3 shadow rounded-corner">`
415	`<h1 class="text-white text-center mb-0 fw-bold py-2 fs-8">GRN Pending</h1>`	412	`<h1 class="text-white text-center mb-0 fw-bold py-2 fs-8">GRN Pending</h1>`
416	`</div>`	413	`</div>`
417	`</div>`	414	`</div>`
418	`</div>`	415	`</div>`
419		416
420	`<!-- Responsive Table -->`	-
421	`<div class="table-responsive rounded-3 shadow p-5">`	417	`<div class="table-responsive rounded-3 shadow p-5">`
422	`<table id="grnTable" class="table table-bordered mb-0 table-border" style="width:100%">`	418	`<table id="grnTable" class="table table-bordered mb-0 table-border" style="width:100%">`
423		-
424	`<!-- MANDATORY BRANDS SECTION -->`	-
425	`<thead>`	419	`<thead>`
426	`<tr class="bg-danger text-white">`	420	`<tr class="bg-danger text-white">`
427	`<th class="ps-4 fs-5 fw-bold text-uppercase bg-danger text-white text-center"`	421	`<th class="ps-4 fs-5 fw-bold text-uppercase bg-danger text-white text-center"`
428	`style="padding: 10px !important;">BRANDS`	422	`style="padding: 10px !important;">BRANDS`
429	`</th>`	423	`</th>`
Line 434...	Line 428...
434	`style="padding: 10px !important;">VALUE`	428	`style="padding: 10px !important;">VALUE`
435	`</th>`	429	`</th>`
436	`</tr>`	430	`</tr>`
437	`</thead>`	431	`</thead>`
438	`<tbody>`	432	`<tbody>`
439	`## Define mandatory brands`	-
440	`#set($mandatoryBrands = ["Vivo", "Oppo", "Samsung", "Realme"])`	433	`#set($mandatoryBrands = ["Vivo", "Oppo", "Samsung", "Realme"])`
441		-
442	`## Process mandatory brands first`	-
443	`#foreach($entry in $grnPendingOrders.entrySet())`	434	`#foreach($entry in $grnPendingOrders.entrySet())`
444	`#set($brand = $entry.key)`	435	`#set($brand = $entry.key)`
445	`#set($details = $entry.value)`	436	`#set($details = $entry.value)`
446	`## #if($mandatoryBrands.contains($brand))`	-
447	`<tr class="">`	437	`<tr class="">`
448	`<td class="ps-4 text-center p-0">`	438	`<td class="ps-4 text-center p-0">`
449	`<div class="d-flex align-items-center justify-content-center">`	439	`<div class="d-flex align-items-center justify-content-center">`
450	`<div class="row align-items-center" style="width: 200px;">`	440	`<div class="row align-items-center" style="width: 200px;">`
451	`<div class="col-auto">`	441	`<div class="col-auto">`
Line 467...	Line 457...
467	`<td class="pe-4 text-center align-middle fs-5 fw-semibold currency p-0 ">`	457	`<td class="pe-4 text-center align-middle fs-5 fw-semibold currency p-0 ">`
468	`$nf.format($details.mrp)`	458	`$nf.format($details.mrp)`
469	`</td>`	459	`</td>`
470	`</tr>`	460	`</tr>`
471	`#end`	461	`#end`
472	`## #end`	-
473	`</tbody>`	462	`</tbody>`
474	`##`	-
475	`##`	-
476	`</table>`	463	`</table>`
477	`</div>`	464	`</div>`
478	`#end`	465	`#end`
479	`</div>`	466	`</div>`
480		467
481	`##-----------------------------------------------Unbilled Activated -----------------------------------------------------`	468	`##-----------------------------------------------Unbilled Activated -----------------------------------------------------`
482		469
483	`<div class="container-fluid p-4">`	470	`<div class="container-fluid p-4">`
484	`#if($unbilledActivated.entrySet().size()>0)`	471	`#if($unbilledActivated.entrySet().size()>0)`
485	`<!-- Section Header -->`	-
486	`<div class="row justify-content-center">`	472	`<div class="row justify-content-center">`
487	`<div class="col-10">`	473	`<div class="col-10">`
488	`<div class="bg-dark-light rounded-3 p-3 shadow rounded-corner">`	474	`<div class="bg-dark-light rounded-3 p-3 shadow rounded-corner">`
489	`<h1 class="text-white text-center mb-0 py-2 fw-bold fs-8">Pending Billing</h1>`	475	`<h1 class="text-white text-center mb-0 py-2 fw-bold fs-8">Pending Billing</h1>`
490	`</div>`	476	`</div>`
491	`</div>`	477	`</div>`
492	`</div>`	478	`</div>`
493		479
494	`<!-- Responsive Table -->`	-
495	`<div class="table-responsive rounded-3 shadow p-5">`	480	`<div class="table-responsive rounded-3 shadow p-5">`
496	`<table id="unbilledTable" class="table table-bordered mb-0 table-border" style="width:100%">`	481	`<table id="unbilledTable" class="table table-bordered mb-0 table-border" style="width:100%">`
497		482
498	`<!-- MANDATORY BRANDS SECTION -->`	-
499	`<thead>`	483	`<thead>`
500	`<tr class="bg-danger text-white">`	484	`<tr class="bg-danger text-white">`
501	`<th class="ps-4 fs-5 fw-bold text-uppercase bg-danger text-white text-center p-0"`	485	`<th class="ps-4 fs-5 fw-bold text-uppercase bg-danger text-white text-center p-0"`
502	`style="padding: 10px !important;">BRANDS`	486	`style="padding: 10px !important;">BRANDS`
503	`</th>`	487	`</th>`
Line 508...	Line 492...
508	`style="padding: 10px !important;">VALUE`	492	`style="padding: 10px !important;">VALUE`
509	`</th>`	493	`</th>`
510	`</tr>`	494	`</tr>`
511	`</thead>`	495	`</thead>`
512	`<tbody>`	496	`<tbody>`
513	`## Define mandatory brands`	-
514	`#set($mandatoryBrands = ["Vivo", "Realme", "Oppo", "Samsung"])`	497	`#set($mandatoryBrands = ["Vivo", "Realme", "Oppo", "Samsung"])`
515		498
516	`## Process mandatory brands first`	-
517	`#foreach($entry in $unbilledActivated.entrySet())`	499	`#foreach($entry in $unbilledActivated.entrySet())`
518	`#set($brand = $entry.key)`	500	`#set($brand = $entry.key)`
519	`#set($details = $entry.value)`	501	`#set($details = $entry.value)`
520	`## #if($mandatoryBrands.contains($brand))`	-
521	`<tr>`	502	`<tr>`
522	`<td class="ps-4 text-center p-0">`	503	`<td class="ps-4 text-center p-0">`
523	`<div class="d-flex align-items-center justify-content-center">`	504	`<div class="d-flex align-items-center justify-content-center">`
524	`<div class="row align-items-center" style="width: 200px;">`	505	`<div class="row align-items-center" style="width: 200px;">`
525	`<div class="col-auto">`	506	`<div class="col-auto">`
Line 551...	Line 532...
551		532
552		533
553	`##-----------------------------------------------Loan Amount -----------------------------------------------------`	534	`##-----------------------------------------------Loan Amount -----------------------------------------------------`
554		535
555	`<div class="container-fluid p-4">`	536	`<div class="container-fluid p-4">`
556	`<!-- Section Header -->`	-
557	`<div class="row mb-5 justify-content-center">`	537	`<div class="row mb-5 justify-content-center">`
558	`<div class="col-10">`	538	`<div class="col-10">`
559	`<div class="bg-dark-light rounded-3 p-3 shadow rounded-corner">`	539	`<div class="bg-dark-light rounded-3 p-3 shadow rounded-corner">`
560	`<h1 class="text-white text-center mb-0 fw-bold py-2 fs-8">Loan </h1>`	540	`<h1 class="text-white text-center mb-0 fw-bold py-2 fs-8">Loan </h1>`
561	`</div>`	541	`</div>`
562	`</div>`	542	`</div>`
563	`</div>`	543	`</div>`
564	`<div class="row justify-content-center">`	544	`<div class="row justify-content-center">`
565	`<!-- Default Payment -->`	-
566	`<div class="col-12 col-md-4 text-center ">`	545	`<div class="col-12 col-md-4 text-center ">`
567	`<div class="payment-circle shadow-lg shadow-dark mx-auto "`	546	`<div class="payment-circle shadow-lg shadow-dark mx-auto "`
568	`style="background-color: #cc0000 !important;">`	547	`style="background-color: #cc0000 !important;">`
569	`<div class="payment-content">`	548	`<div class="payment-content">`
570	`<div class="payment-amount currency"> $nf.format( $totalDefaultAmount) </div>`	549	`<div class="payment-amount currency"> $nf.format( $totalDefaultAmount) </div>`
Line 573...	Line 552...
573	`</div>`	552	`</div>`
574	`<h1 class="payment-label fw-bold mt-4" style="font-weight: 400 !important;">Default Payment<br>(Above`	553	`<h1 class="payment-label fw-bold mt-4" style="font-weight: 400 !important;">Default Payment<br>(Above`
575	`30 days)</h1>`	554	`30 days)</h1>`
576	`</div>`	555	`</div>`
577		556
578	`<!-- Due Payment -->`	-
579	`<div class="col-12 col-md-4 text-center">`	557	`<div class="col-12 col-md-4 text-center">`
580	`<div class="payment-circle shadow-lg mx-auto" style="background-color: #FF9433 !important;">`	558	`<div class="payment-circle shadow-lg mx-auto" style="background-color: #FF9433 !important;">`
581	`<div class="payment-content">`	559	`<div class="payment-content">`
582	`<div class="payment-amount currency"> $nf.format($totalOverdueAmount) </div>`	560	`<div class="payment-amount currency"> $nf.format($totalOverdueAmount) </div>`
583	`</div>`	561	`</div>`
Line 585...	Line 563...
585	`<h1 class="payment-label fw-bold mt-4"`	563	`<h1 class="payment-label fw-bold mt-4"`
586	`style="font-size: 20px !important; font-weight: 400 !important;">Due Payment<br>(Above 15`	564	`style="font-size: 20px !important; font-weight: 400 !important;">Due Payment<br>(Above 15`
587	`Days)</h1>`	565	`Days)</h1>`
588		566
589	`</div>`	567	`</div>`
590	`<!-- Other Payment -->`	-
591	`<div class="col-12 col-md-4 text-center">`	568	`<div class="col-12 col-md-4 text-center">`
592	`<div class="payment-circle shadow-lg mx-auto " style="background-color: #00B050 !important;">`	569	`<div class="payment-circle shadow-lg mx-auto " style="background-color: #00B050 !important;">`
593	`<div class="payment-content">`	570	`<div class="payment-content">`
594	`<div class="payment-amount currency"> $nf.format($totalDueAmount) </div>`	571	`<div class="payment-amount currency"> $nf.format($totalDueAmount) </div>`
595	`</div>`	572	`</div>`
Line 598...	Line 575...
598	`style="font-size: 20px !important; font-weight: 400 !important;">Other Loan<br>(Within 15`	575	`style="font-size: 20px !important; font-weight: 400 !important;">Other Loan<br>(Within 15`
599	`Days)</h1>`	576	`Days)</h1>`
600	`</div>`	577	`</div>`
601		578
602		579
603	`<!-- Total Loan Value -->`	-
604	`<div class="mt-4 mx-5 " style="margin-top: 6rem !important;">`	580	`<div class="mt-4 mx-5 " style="margin-top: 6rem !important;">`
605	`<h1 class="text-center " style="font-size:30px !important;font-weight:300 !important;">Total`	581	`<h1 class="text-center " style="font-size:30px !important;font-weight:300 !important;">Total`
606	`Loan Value :`	582	`Loan Value :`
607	`<span class="currency fw-bold"> $nf.format( $totalLoan )</span>`	583	`<span class="currency fw-bold"> $nf.format( $totalLoan )</span>`
608	`</h1>`	584	`</h1>`
609	`</div>`	585	`</div>`
610	`</div>`	586	`</div>`
611	`</div>`	587	`</div>`
612	`</div>`	588	`</div>`
613		589
614	`## Add this chart section after the loan circles`	-
615	`<div class="w-full bg-danger h-25 py-3 my-4">`	590	`<div class="w-full bg-danger h-25 py-3 my-4">`
616	`<h1 class="text-center text-white fw-bold" style="font-size: 30px !important; font-weight: 800">My Business`	591	`<h1 class="text-center text-white fw-bold" style="font-size: 30px !important; font-weight: 800">My Business`
617	`Analysis</h1>`	592	`Analysis</h1>`
618	`</div>`	593	`</div>`
619	`<div class="container-fluid p-5 mt-5">`	594	`<div class="container-fluid p-5 mt-5">`
620		595
621	`<!-- Chart Section Header -->`	-
622	`<div class="row mb-1 my-4 mx-3 justify-content-center">`	596	`<div class="row mb-1 my-4 mx-3 justify-content-center">`
623	`<div class="col-10">`	597	`<div class="col-10">`
624	`<div class="bg-dark-light rounded-3 p-3 shadow rounded-corner">`	598	`<div class="bg-dark-light rounded-3 p-3 shadow rounded-corner">`
625	`<h1 class="text-white text-center mb-0 fw-bold py-2 fs-8">My Earning </h1>`	599	`<h1 class="text-white text-center mb-0 fw-bold py-2 fs-8">My Earning </h1>`
626	`</div>`	600	`</div>`
627	`</div>`	601	`</div>`
628	`</div>`	602	`</div>`
629		603
630	`<!-- Chart Container -->`	-
631	`<div class="container mt-4">`	604	`<div class="container mt-4">`
632	`<div class="chart-wrapper card shadow-lg rounded-5 p-2">`	605	`<div class="chart-wrapper card shadow-lg rounded-5 p-2">`
633	`<span class="text-danger fs-3 fw-bold text-end">** Click on the bar to see the details</span>`	606	`<span class="text-danger fs-3 fw-bold text-end">** Click on the bar to see the details</span>`
634		607
635	`<div class="chart-content ">`	608	`<div class="chart-content ">`
Line 651...	Line 624...
651	`{"Brand": "realme", "MarketShare": "11%", "Quarter": "Q1 2025", "BgColor": "#FFC915", "Rank": "5"},`	624	`{"Brand": "realme", "MarketShare": "11%", "Quarter": "Q1 2025", "BgColor": "#FFC915", "Rank": "5"},`
652	`{"Brand": "Others", "MarketShare": "26%", "Quarter": "Q1 2025", "BgColor": "#6b7280", "Rank": "-"}`	625	`{"Brand": "Others", "MarketShare": "26%", "Quarter": "Q1 2025", "BgColor": "#6b7280", "Rank": "-"}`
653	`])`	626	`])`
654		627
655	`<div class="container-fluid p-5">`	628	`<div class="container-fluid p-5">`
656	`<!-- Chart Section Header -->`	-
657	`<div class="row mb-1 my-4 mx-3 justify-content-center">`	629	`<div class="row mb-1 my-4 mx-3 justify-content-center">`
658	`<div class="col-10">`	630	`<div class="col-10">`
659	`<div class="bg-dark-light rounded-3 p-3 shadow rounded-corner">`	631	`<div class="bg-dark-light rounded-3 p-3 shadow rounded-corner">`
660	`<h1 class="text-white text-center mb-0 fw-bold py-2 fs-8">Brand Analysis </h1>`	632	`<h1 class="text-white text-center mb-0 fw-bold py-2 fs-8">Brand Analysis </h1>`
661	`</div>`	633	`</div>`
Line 738...	Line 710...
738	`<div class="card-header text-center fw-bold ">`	710	`<div class="card-header text-center fw-bold ">`
739	`<h4>HID</h4>`	711	`<h4>HID</h4>`
740	`</div>`	712	`</div>`
741		713
742		714
743	`<!-- Table Header -->`	-
744		715
745	`<div class="row mx-0 mt-4">`	716	`<div class="row mx-0 mt-4">`
746	`<div class="col-3 text-center">`	717	`<div class="col-3 text-center">`
747	`<div class="p-1 py-3 rounded-top" style="background: #555; color: white;">`	718	`<div class="p-1 py-3 rounded-top" style="background: #555; color: white;">`
748	`<strong class="fs-4 fw-bold">Model </strong>`	719	`<strong class="fs-4 fw-bold">Model </strong>`
Line 902...	Line 873...
902	`</div>`	873	`</div>`
903	`</div>`	874	`</div>`
904	`</div>`	875	`</div>`
905		876
906	`<div class="row px-5" style="margin-left: 10rem !important;">`	877	`<div class="row px-5" style="margin-left: 10rem !important;">`
907	`<!-- MANDATORY BRANDS COLUMN -->`	-
908	`<div class="col-md-6">`	878	`<div class="col-md-6">`
909	`<div class="category-header mandatory-header">MANDATORY BRANDS</div>`	879	`<div class="category-header mandatory-header">MANDATORY BRANDS</div>`
910		880
911	`#foreach($brandStockPrice in $brandStockPrices)`	881	`#foreach($brandStockPrice in $brandStockPrices)`
912	`#set($mandatoryBrands = ["Vivo", "Oppo", "Samsung", "Realme"])`	882	`#set($mandatoryBrands = ["Vivo", "Oppo", "Samsung", "Realme"])`
913	`#if($mandatoryBrands.contains($brandStockPrice.getBrand()))`	883	`#if($mandatoryBrands.contains($brandStockPrice.getBrand()))`
914	`<div class="brand-item">`	884	`<div class="brand-item">`
915	`<!-- Brand Logo Circle -->`	-
916	`<div class="position-relative" style="z-index: 10">`	885	`<div class="position-relative" style="z-index: 10">`
917	`<img src="${brandStockPrice.getBrandUrl()}"`	886	`<img src="${brandStockPrice.getBrandUrl()}"`
918	`class="brand-circle img-fluid rounded-circle shadow border border-danger"`	887	`class="brand-circle img-fluid rounded-circle shadow border border-danger"`
919	`data-stockbrand="$brandStockPrice.getBrand()"`	888	`data-stockbrand="$brandStockPrice.getBrand()"`
920	`alt="$brandStockPrice.getBrand()">`	889	`alt="$brandStockPrice.getBrand()">`
921	`</div>`	890	`</div>`
922		891
923	`<!-- Ribbon with Stock Info -->`	-
924	`<div class="stock-ribbon mandatory-ribbon ms-n3 position-absolute curve ">`	892	`<div class="stock-ribbon mandatory-ribbon ms-n3 position-absolute curve ">`
925	`<div class="d-flex d-flex mb-1">`	893	`<div class="d-flex d-flex mb-1">`
926	`<span class="fw-bold text-start fs-5">QTY: </span>`	894	`<span class="fw-bold text-start fs-5">QTY: </span>`
927	`<span class="fw-bold text-start fs-5">$brandStockPrice.getTotalQty()</span>`	895	`<span class="fw-bold text-start fs-5">$brandStockPrice.getTotalQty()</span>`
928	`</div>`	896	`</div>`
Line 946...	Line 914...
946	`</div>`	914	`</div>`
947	`#end`	915	`#end`
948	`#end`	916	`#end`
949	`</div>`	917	`</div>`
950		918
951	`<!-- OTHER BRANDS COLUMN -->`	-
952	`<div class="col-md-6">`	919	`<div class="col-md-6">`
953	`<div class="category-header other-header">OTHER BRANDS</div>`	920	`<div class="category-header other-header">OTHER BRANDS</div>`
954	`#set($mandatoryBrands = ["Vivo", "Oppo", "Samsung", "Realme"])`	921	`#set($mandatoryBrands = ["Vivo", "Oppo", "Samsung", "Realme"])`
955		922
956	`#foreach($brandStockPrice in $brandStockPrices)`	923	`#foreach($brandStockPrice in $brandStockPrices)`
957	`#if(!$mandatoryBrands.contains($brandStockPrice.getBrand()))`	924	`#if(!$mandatoryBrands.contains($brandStockPrice.getBrand()))`
958	`<div class="brand-item">`	925	`<div class="brand-item">`
959	`<!-- Brand Logo Circle -->`	-
960	`<div class="position-relative " style="z-index: 10">`	926	`<div class="position-relative " style="z-index: 10">`
961	`<img src="${brandStockPrice.getBrandUrl()}"`	927	`<img src="${brandStockPrice.getBrandUrl()}"`
962	`class="brand-circle img-fluid rounded-circle shadow border border-dark"`	928	`class="brand-circle img-fluid rounded-circle shadow border border-dark"`
963	`data-stockbrand="$brandStockPrice.getBrand()"`	929	`data-stockbrand="$brandStockPrice.getBrand()"`
964	`alt="$brandStockPrice.getBrand()">`	930	`alt="$brandStockPrice.getBrand()">`
965	`</div>`	931	`</div>`
966		932
967	`<!-- Ribbon with Stock Info -->`	-
968	`<div class="stock-ribbon other-ribbon ms-n3 position-absolute curve">`	933	`<div class="stock-ribbon other-ribbon ms-n3 position-absolute curve">`
969	`<div class="d-flex d-flex mb-1">`	934	`<div class="d-flex d-flex mb-1">`
970	`<span class="fw-bold text-start fs-5">QTY: </span>`	935	`<span class="fw-bold text-start fs-5">QTY: </span>`
971	`<span class="fw-bold text-start fs-5">$brandStockPrice.getTotalQty()</span>`	936	`<span class="fw-bold text-start fs-5">$brandStockPrice.getTotalQty()</span>`
972	`</div>`	937	`</div>`
Line 1002...	Line 967...
1002	`<h1 class="text-white text-center mb-0 fw-bold py-2 fs-8">My Stock Ageing</h1>`	967	`<h1 class="text-white text-center mb-0 fw-bold py-2 fs-8">My Stock Ageing</h1>`
1003	`</div>`	968	`</div>`
1004	`</div>`	969	`</div>`
1005	`</div>`	970	`</div>`
1006	`<div class="card-body">`	971	`<div class="card-body">`
1007	`<!-- Controls for Volume/Value toggle -->`	-
1008	`<div class="row mb-4">`	972	`<div class="row mb-4">`
1009	`<div class="col-md-4">`	973	`<div class="col-md-4">`
1010	`<div class="btn-group" role="group">`	974	`<div class="btn-group" role="group">`
1011	`<button type="button" class="btn btn-danger rounded-pill px-4 me-2 fs-5" id="btnVolume">`	975	`<button type="button" class="btn btn-danger rounded-pill px-4 me-2 fs-5" id="btnVolume">`
1012	`Volume`	976	`Volume`
Line 1015...	Line 979...
1015	`</button>`	979	`</button>`
1016	`</div>`	980	`</div>`
1017	`</div>`	981	`</div>`
1018	`</div>`	982	`</div>`
1019		983
1020	`<!-- Main stock aging grid -->`	-
1021	`<div class="table-responsive rounded-5 p-5">`	984	`<div class="table-responsive rounded-5 p-5">`
1022	`<table class="table table-bordered rounded-4" id="stockAgingTable">`	985	`<table class="table table-bordered rounded-4" id="stockAgingTable">`
1023	`<thead>`	986	`<thead>`
1024	`<tr class="text-center">`	987	`<tr class="text-center">`
1025	`<th></th>`	988	`<th></th>`
Line 1042...	Line 1005...
1042	`<tbody>`	1005	`<tbody>`
1043	`#if(!$inventoryGroupedByBrand.isEmpty())`	1006	`#if(!$inventoryGroupedByBrand.isEmpty())`
1044	`#set($mandatoryBrands = ["vivo", "oppo", "samsung", "realme"])`	1007	`#set($mandatoryBrands = ["vivo", "oppo", "samsung", "realme"])`
1045	`#set($otherBrands = [])`	1008	`#set($otherBrands = [])`
1046		1009
1047	`## First process mandatory brands`	-
1048	`<tr>`	1010	`<tr>`
1049	`<td class="align-middle bg-secondary text-center text-white fw-bold " rowspan="5"`	1011	`<td class="align-middle bg-secondary text-center text-white fw-bold " rowspan="5"`
1050	`style="width: 60px !important; font-size: 10px !important;">`	1012	`style="width: 60px !important; font-size: 10px !important;">`
1051	`<div class="brandText">MANDATORY BRANDS</div>`	1013	`<div class="brandText">MANDATORY BRANDS</div>`
1052	`</td>`	1014	`</td>`
Line 1109...	Line 1071...
1109	`#end`	1071	`#end`
1110	`</tr>`	1072	`</tr>`
1111	`#end`	1073	`#end`
1112	`#end`	1074	`#end`
1113		1075
1114	`## Process other brands`	-
1115	`<tr>`	1076	`<tr>`
1116	`<td class="align-middle bg-dark-light text-center text-white fw-bold "`	1077	`<td class="align-middle bg-dark-light text-center text-white fw-bold "`
1117	`rowspan="$inventoryGroupedByBrand.size()"`	1078	`rowspan="$inventoryGroupedByBrand.size()"`
1118	`style="width: 60px !important; font-size: 10px !important;">`	1079	`style="width: 60px !important; font-size: 10px !important;">`
1119	`<div class="brandText">OTHER BRANDS</div>`	1080	`<div class="brandText">OTHER BRANDS</div>`
Line 1189...	Line 1150...
1189	`'xiaomi': '#FF5722',`	1150	`'xiaomi': '#FF5722',`
1190	`'apple': '#666666',`	1151	`'apple': '#666666',`
1191	`'poco': '#FFD403',`	1152	`'poco': '#FFD403',`
1192	`'tecno': '#0064FE',`	1153	`'tecno': '#0064FE',`
1193	`'lava': '#ED0F53'`	1154	`'lava': '#ED0F53'`
1194	`// Add other brands here...`	-
1195	`};`	1155	`};`
1196		1156
1197		1157
1198	`function loadMonthDetails(monthIndex) {`	1158	`function loadMonthDetails(monthIndex) {`
1199	console.log(`Loading details for month: ${monthIndex}`);	1159	console.log(`Loading details for month: ${monthIndex}`);
Line 1206...	Line 1166...
1206		1166
1207	`$(document).on("click", ".pending-income", function () {`	1167	`$(document).on("click", ".pending-income", function () {`
1208	`lastMonthCreditIncome("main-content");`	1168	`lastMonthCreditIncome("main-content");`
1209	`});`	1169	`});`
1210		1170
1211	`// Standard AJAX handler - assuming this already exists, but including for completeness`	-
1212	`function doGetAjaxRequestHandler(url, successCallback) {`	1171	`function doGetAjaxRequestHandler(url, successCallback) {`
1213	`$.ajax({`	1172	`$.ajax({`
1214	`url: url,`	1173	`url: url,`
1215	`type: 'GET',`	1174	`type: 'GET',`
1216	`success: successCallback,`	1175	`success: successCallback,`
Line 1252...	Line 1211...
1252		1211
1253	`function initializeBrandButtons() {`	1212	`function initializeBrandButtons() {`
1254	`const brandButtons = document.querySelectorAll('.brand-btn');`	1213	`const brandButtons = document.querySelectorAll('.brand-btn');`
1255		1214
1256	`brandButtons.forEach(button => {`	1215	`brandButtons.forEach(button => {`
1257	`const brand = button.dataset.brand; // Already lowercase from server`	1216	`const brand = button.dataset.brand;`
1258	`const color = brandColors[brand] \|\| '#666';`	1217	`const color = brandColors[brand] \|\| '#666';`
1259		1218
1260	`// Apply initial styles`	-
1261	button.style.border = `2px solid ${color}`;	1219	button.style.border = `2px solid ${color}`;
1262	`button.style.color = color;`	1220	`button.style.color = color;`
1263	`button.style.backgroundColor = '#fff';`	1221	`button.style.backgroundColor = '#fff';`
1264	`});`	1222	`});`
1265		1223
1266	`// Add click handlers`	-
1267	`brandButtons.forEach(button => {`	1224	`brandButtons.forEach(button => {`
1268	`button.addEventListener('click', function () {`	1225	`button.addEventListener('click', function () {`
1269	`const selectedBrand = this.dataset.brand;`	1226	`const selectedBrand = this.dataset.brand;`
1270		1227
1271	`// Reset all buttons`	-
1272	`brandButtons.forEach(btn => {`	1228	`brandButtons.forEach(btn => {`
1273	`const brandColor = brandColors[btn.dataset.brand] \|\| '#666';`	1229	`const brandColor = brandColors[btn.dataset.brand] \|\| '#666';`
1274	`btn.style.backgroundColor = '#fff';`	1230	`btn.style.backgroundColor = '#fff';`
1275	`btn.style.color = brandColor;`	1231	`btn.style.color = brandColor;`
1276	`});`	1232	`});`
1277		1233
1278	`// Activate clicked button`	-
1279	`this.style.backgroundColor = brandColors[selectedBrand] \|\| '#666';`	1234	`this.style.backgroundColor = brandColors[selectedBrand] \|\| '#666';`
1280	`this.style.color = '#fff';`	1235	`this.style.color = '#fff';`
1281		1236
1282	`// Filter rows`	-
1283	`document.querySelectorAll('.brand-data').forEach(row => {`	1237	`document.querySelectorAll('.brand-data').forEach(row => {`
1284	`row.style.display = row.dataset.brand === selectedBrand ? 'block' : 'none';`	1238	`row.style.display = row.dataset.brand === selectedBrand ? 'block' : 'none';`
1285	`});`	1239	`});`
1286	`});`	1240	`});`
1287	`});`	1241	`});`
Line 1290...	Line 1244...
1290		1244
1291	`initializeBrandButtons();`	1245	`initializeBrandButtons();`
1292		1246
1293	`</script>`	1247	`</script>`
1294	`<script>`	1248	`<script>`
1295	`// Brand filtering functionality`	-
1296	`document.querySelectorAll('.brand-btn').forEach(button => {`	1249	`document.querySelectorAll('.brand-btn').forEach(button => {`
1297	`button.addEventListener('click', function () {`	1250	`button.addEventListener('click', function () {`
1298	`const brand = this.getAttribute('data-brand');`	1251	`const brand = this.getAttribute('data-brand');`
1299		1252
1300	`// Update active button`	-
1301	`document.querySelectorAll('.brand-btn').forEach(btn => {`	1253	`document.querySelectorAll('.brand-btn').forEach(btn => {`
1302	`btn.style.backgroundColor = '';`	1254	`btn.style.backgroundColor = '';`
1303	`btn.style.color = '';`	1255	`btn.style.color = '';`
1304	`});`	1256	`});`
1305	`this.style.backgroundColor = '#006b35';`	1257	`this.style.backgroundColor = '#006b35';`
1306	`this.style.color = 'white';`	1258	`this.style.color = 'white';`
1307		1259
1308	`// Show selected brand data`	-
1309	`document.querySelectorAll('.brand-data').forEach(item => {`	1260	`document.querySelectorAll('.brand-data').forEach(item => {`
1310	`item.style.display = item.getAttribute('data-brand') === brand ? 'block' : 'none';`	1261	`item.style.display = item.getAttribute('data-brand') === brand ? 'block' : 'none';`
1311	`});`	1262	`});`
1312	`});`	1263	`});`
1313	`});`	1264	`});`
1314	`// Activate first brand by default`	-
1315	`document.querySelector('.brand-btn')?.click();`	1265	`document.querySelector('.brand-btn')?.click();`
1316	`</script>`	1266	`</script>`
1317		1267
1318	`##-------------------------------------------------------------------My Earning chart -----------------------------------------`	1268	`##-------------------------------------------------------------------My Earning chart -----------------------------------------`
1319	`<script>`	1269	`<script>`
Line 1330...	Line 1280...
1330	`}`	1280	`}`
1331	`#if($foreach.hasNext),#end`	1281	`#if($foreach.hasNext),#end`
1332	`#end`	1282	`#end`
1333	`].reverse();`	1283	`].reverse();`
1334		1284
1335	`// Simple formatting with rounding`	-
1336	`const formatIndianCurrency = (amount) => {`	1285	`const formatIndianCurrency = (amount) => {`
1337	`const rounded = Math.round(amount);`	1286	`const rounded = Math.round(amount);`
1338	`return rounded.toLocaleString('en-IN');`	1287	`return rounded.toLocaleString('en-IN');`
1339	`};`	1288	`};`
1340		1289
1341	`// Apply formatting when displaying`	-
1342	`monthData.forEach(item => {`	1290	`monthData.forEach(item => {`
1343	`item.totalFormatted = formatIndianCurrency(item.total);`	1291	`item.totalFormatted = formatIndianCurrency(item.total);`
1344	`item.creditedFormatted = formatIndianCurrency(item.credited);`	1292	`item.creditedFormatted = formatIndianCurrency(item.credited);`
1345	`item.pendingFormatted = formatIndianCurrency(item.pending);`	1293	`item.pendingFormatted = formatIndianCurrency(item.pending);`
1346	`});`	1294	`});`
1347	`chart = new Chart(document.getElementById('sixMonthChart'), {`	1295	`chart = new Chart(document.getElementById('sixMonthChart'), {`
1348	`type: 'bar',`	1296	`type: 'bar',`
1349	`data: {`	1297	`data: {`
1350	`labels: monthData.map(d => d.month),`	1298	`labels: monthData.map(d => d.month),`
1351	`datasets: [`	1299	`datasets: [`
1352	`// Bar: Credited Income`	-
1353	`{`	1300	`{`
1354	`label: 'Credited Income',`	1301	`label: 'Credited Income',`
1355	`data: monthData.map(d => Math.round(d.credited)),`	1302	`data: monthData.map(d => Math.round(d.credited)),`
1356	`backgroundColor: '#aadcb4',`	1303	`backgroundColor: '#aadcb4',`
1357	`borderColor: '#aadcb4',`	1304	`borderColor: '#aadcb4',`
Line 1361...	Line 1308...
1361	`order: 1,`	1308	`order: 1,`
1362	`yAxisID: 'y',`	1309	`yAxisID: 'y',`
1363	`hoverBorderWidth: 3,`	1310	`hoverBorderWidth: 3,`
1364	`hoverBorderColor: '#aadcb4'`	1311	`hoverBorderColor: '#aadcb4'`
1365	`},`	1312	`},`
1366	`// Bar: Pending Income`	-
1367	`{`	1313	`{`
1368	`label: 'Pending Income',`	1314	`label: 'Pending Income',`
1369	`data: monthData.map(d => Math.round(d.pending)),`	1315	`data: monthData.map(d => Math.round(d.pending)),`
1370	`backgroundColor: 'rgba(255,0,0,0.7)',`	1316	`backgroundColor: 'rgba(255,0,0,0.7)',`
1371	`borderColor: 'rgba(255,0,0,1)',`	1317	`borderColor: 'rgba(255,0,0,1)',`
Line 1375...	Line 1321...
1375	`hitRadius: 0,`	1321	`hitRadius: 0,`
1376	`yAxisID: 'y',`	1322	`yAxisID: 'y',`
1377	`hoverBorderWidth: 3,`	1323	`hoverBorderWidth: 3,`
1378	`hoverBorderColor: '#ff0000'`	1324	`hoverBorderColor: '#ff0000'`
1379	`},`	1325	`},`
1380	`// Line: Total Income`	-
1381	`{`	1326	`{`
1382	`label: 'Total Income',`	1327	`label: 'Total Income',`
1383	`data: monthData.map(d => Math.round(d.total)),`	1328	`data: monthData.map(d => Math.round(d.total)),`
1384	`borderColor: '#4bc0c0',`	1329	`borderColor: '#4bc0c0',`
1385	`backgroundColor: 'rgba(75, 192, 192, 0.1)',`	1330	`backgroundColor: 'rgba(75, 192, 192, 0.1)',`
Line 1412...	Line 1357...
1412	`},`	1357	`},`
1413	`color: '#fff',`	1358	`color: '#fff',`
1414	`backgroundColor: '#333',`	1359	`backgroundColor: '#333',`
1415	`borderRadius: 4,`	1360	`borderRadius: 4,`
1416	`padding: 4,`	1361	`padding: 4,`
1417	`font: {`	-
1418	`weight: 'bold'`	1362	`font: {weight: 'bold'},`

Subversion Repositories SmartDukaan

(root)/trunk/profitmandi-fofo/src/main/webapp/WEB-INF/views/ftl/dashboard-modal.vm – Rev 34813 → 34898