Rev 35517 | Blame | Compare with Previous | Last modification | View Log | RSS feed
<meta charset="UTF-8"><link id="modal-bootstrap-css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"rel="stylesheet"/><style>.chart-wrapper {overflow: hidden;transition: all 0.3s ease;}.chart-content {display: flex;flex-wrap: nowrap;gap: 20px;align-items: flex-start;}.chart-container {flex: 0 0 550px;height: 320px;}.partner-income-container {flex: 1 1 auto;min-width: 300px;}.status-ok {color: #155724;font-weight: 700;}.brand-name {font-size: 1.5rem;font-weight: 700;margin-bottom: 15px;color: #2c3e50;}.quantity-value {font-weight: 600;color: #2c3e50;}.right-panel {background: white;border-radius: 8px;padding: 20px;border: 1px solid #e9ecef;}@keyframes shimmer {0% {left: -100%;}100% {left: 100%;}}.brand-logo {width: 80px;height: 80px;object-fit: contain;border-radius: 12px;background-color: #f8f9fa;padding: 2px;}.modal-backdrop.in {filter: alpha(opacity=50);opacity: 0.35;width: auto;height: auto;}.brandText {transform: rotate(270deg) !important;}.rounded-corner {border-top-left-radius: 30px !important;border-top-right-radius: 30px !important;}.bg-danger {background-color: #D3181F !important;}.fs-8 {font-size: 25px !important;}.table-bordered th {border: 1px solid rgba(255, 255, 255, 0.2);}.table-bordered td {border: 1px solid #dee2e6;vertical-align: middle;}.fs-5 {font-size: 1.2rem !important;}.brand-btn {background: #444;color: white;border: none;padding: 8px 16px;border-radius: 20px;cursor: pointer;transition: all 0.3s ease;margin: 2px;}.brand-btn:hover {background: #666;color: white;}.section-header {background: #7a7a7a;color: white;padding: 15px;margin: 20px 0 10px 0;border-radius: 8px;text-align: center;font-weight: bold;font-size: 1.6rem;}.table thead th {background: #555;color: white;border: none;font-weight: bold;text-align: center;vertical-align: middle;padding: 15px 8px;}.table tbody td {text-align: center;vertical-align: middle;padding: 12px 8px;border: 1px solid #dee2e6;}.status-order {color: #17a2b8 !important;font-weight: bold;}.no-data-row {background: #f8f9fa;color: #6c757d;font-style: italic;}.curve {padding-left: 100px !important;border-radius: 40px 0 0 40px !important;width: 250px !important;}.stock-ribbon {position: relative;padding: 5px 15px;color: white;clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);min-width: 220px;}.mandatory-ribbon {background-color: #D3181F !important;}.other-ribbon {background-color: #000;}.brand-item {display: flex;align-items: center;margin-bottom: 20px;}.category-header {font-size: 15px;font-weight: bold;margin: 20px 0;padding-left: 15px;}.mandatory-header {color: #d32f2f;}.other-header {color: #333;}.bg-dark-light {background-color: #3e3e3e !important;color: white;}.table-bordered td, .table-bordered th {border: 1px solid #dee2e6;}.brand-circle {width: 60px;height: 60px;object-fit: cover;border: 5px solid rgb(122, 116, 116);}/*.currency::before {content: "\20B9";}*/.fs-3, .fs-5 {font-weight: normal;}.fw-bold {font-weight: bold !important;}.btn {font-weight: normal;}.payment-circle {width: 200px;height: 200px;border: 25px solid #e0dcdc;border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: transform 0.3s ease;}.payment-amount {font-size: 18px;font-weight: 700;margin-bottom: 10px;text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);color: white;}.payment-label {font-size: 18px;line-height: 1.3;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}.table-border td {border: 1px solid black !important;}.table-border thead {border: 1px solid black;}.p-0 {padding: 0 !important;}</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">PendingTasks</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><th class="fs-5 fw-bold text-uppercase bg-danger text-white text-center"style="padding: 10px !important;">QUANTITY</th><th class="pe-4 fs-5 fw-bold text-uppercase bg-danger text-white text-center"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"><img src="$brandLogos.getOrDefault($brand,'https://static.vecteezy.com/system/resources/thumbnails/025/213/042/small_2x/mobile-phone-icon-in-black-circle-png.png')"alt="$brand logo"class="brand-logo rounded-circle"style="width:35px;height:35px"></div><div class="col text-start"><span class="fw-bold fs-5">$brand</span></div></div></div></td><td class="text-center align-middle fs-5 fw-semibold p-0">$details.quantity</td><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><th class="fs-5 fw-bold text-uppercase bg-danger text-white text-center p-0"style="padding: 10px !important;">QUANTITY</th><th class="pe-4 fs-5 fw-bold text-uppercase bg-danger text-white text-center p-0"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"><img src="$brandLogos.getOrDefault($brand,'https://static.vecteezy.com/system/resources/thumbnails/025/213/042/small_2x/mobile-phone-icon-in-black-circle-png.png')"alt="$brand logo"class="brand-logo rounded-circle"style="width:35px;height:35px"></div><div class="col text-start"><span class="fw-bold fs-5">$brand</span></div></div></div></td><td class="text-center align-middle fs-5 fw-semibold p-0">$details.quantity</td><td class="pe-4 text-center align-middle p-0 currency fw-semibold fs-5">$nf.format( $details.mtd)</td></tr>#end</tbody></table></div>#end</div>##-----------------------------------------------Loan Amount -----------------------------------------------------#if( $totalDefaultAmount != 0 || $totalOverdueAmount != 0 || $totalDueAmount != 0 || $totalLoan != 0 )<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></div><h1 class="payment-label fw-bold mt-4" style="font-weight: 400 !important;">DefaultPayment<br>(Above30 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></div><h1 class="payment-label fw-bold mt-4"style="font-size: 20px !important; font-weight: 400 !important;">Due Payment<br>(Above15Days)</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></div><h1 class="payment-label fw-bold mt-4"style="font-size: 20px !important; font-weight: 400 !important;">Other Loan<br>(Within15Days)</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;">TotalLoan Value :<span class="currency fw-bold"> $nf.format( $totalLoan )</span></h1></div></div></div>#end</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 BusinessAnalysis</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 "><div class="chart-container"><canvas id="sixMonthChart"></canvas></div><div id="partner-income" class="partner-income-container"></div></div></div></div></div>## ----------------------------------------anyalysis---------------------------=//#set($marketShareData = [{"Brand": "Vivo", "MarketShare": "18.5%", "Quarter": "Q1 2026", "BgColor": "#2196F3", "Rank": "1"},{"Brand": "Samsung", "MarketShare": "11.54%", "Quarter": "Q1 2026", "BgColor": "#1428A0", "Rank": "5"},{"Brand": "Xiaomi", "MarketShare": "16.54%", "Quarter": "Q1 2026", "BgColor": "#FF6900", "Rank": "2"},{"Brand": "OPPO", "MarketShare": "12.06%", "Quarter": "Q1 2026", "BgColor": "#006B33", "Rank": "4"},{"Brand": "realme", "MarketShare": "12.89%", "Quarter": "Q1 2026", "BgColor": "#FFC915", "Rank": "3"},{"Brand": "Others", "MarketShare": "28.37%", "Quarter": "Q1 2026", "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></div><img src="https://images.smartdukaan.com/uploads/campaigns/image2025-10-03/brand-analysis-note-11759485977860.png"class="w-75 p-2 d-block mx-auto"alt="note">## ----------------------------------------stagged chart ------------------------------------------<div class="container d-flex "><div class="p-5" style=" height: 350px !important;width: 650px !important;"><div class="chart-title fs-2 text-center fw-bold">Brands Share Analysis (QTY)</div><canvas id="combinedStackedChart"></canvas></div><div class="" style="width: 400px!important;"><div class="right-panel"><h4 class="mb-4">Quantity Analysis</h4><div class="brand-analysis-container"><div class="table-responsive"><table class="table table-striped table-hover"><thead class="table-light table-bordered"><tr><th scope="col">Brand Name</th><th scope="col">Available Models</th><th scope="col">Required Models</th><th scope="col" class="text-center">Status</th></tr></thead><tbody class="table-bordered">#foreach($brandName in $targetBrands)#set($analysis = $brandAnalysisData.get($brandName))<tr><td><strong class="brand-name">${brandName}</strong></td><td><span class="quantity-value">${analysis.get('availableQuantity')}</span></td><td><span class="quantity-value">${analysis.get('requiredQuantity')}</span></td><td class="text-center"><span class="badge #if($analysis.get('isOK'))bg-success#else bg-danger#end">${analysis.get('status')}</span></td></tr>#end</tbody></table></div></div></div></div></div>## -----------------------------------------------Fast Selling & HID model ------------------------------------------------<div id="brand-table-section"><div class="container-fluid py-3"><div class="card mb-4 p-4"><!-- Main Header --><div class="row justify-content-center"><div class="col-10"><div class="bg-dark-light rounded-3 p-3 shadow rounded-corner"><h3 class="text-white text-center mb-0 fw-bold py-2 fs-8">Fast Selling Models &HID </h3></div></div></div><div class="card-body"><!-- Brand Filter Buttons --><div class="d-flex flex-wrap justify-content-center gap-2 p-3 border-bottom mb-4"><!-- Velocity Template Loop for Brands -->#foreach($brand in $brands)<button class="brand-btn" data-brand="$brand.toLowerCase()">$brand</button>#end</div><!-- HID Section --><div class="section-header">HID</div><div class="table-responsive"><table class="table "><thead><tr><th class="w-25">Model</th><th class=" w-25">Suggested Qty</th><th class="w-25">My Stock + Pending Indent</th><th class="w-25">Remarks</th></tr></thead><tbody><!-- Velocity Template Loop for HID Data -->#foreach($brand in $brands)#if($hidAllocationModelBrandMap.containsKey($brand) && !$hidAllocationModelBrandMap.get($brand).isEmpty())#foreach($model in $hidAllocationModelBrandMap.get($brand))<tr class="brand-data" data-brand="$brand.toLowerCase()"><td><strong>$model.getModelNumber()</strong></td><td class="w-25"><strong>$model.getHidAllocation()</strong></td><td><strong>$model.getAvailableStock()</strong></td><td class="w-25">#if($model.getAvailableStock() == 0)<span class="text-danger fw-bold">Urgently Required</span>#elseif($model.getAvailableStock() < $model.getHidAllocation())<span class="status-order">Need to Order</span>#else<span class="status-ok fw-bold">Stock OK</span>#end</td></tr>#end#else<tr class="brand-data no-data-row" data-brand="$brand.toLowerCase()"><td colspan="4">No Data Available</td></tr>#end#end</tbody></table></div><!-- Fast Selling Models Section --><div class="section-header">Fast Selling Model</div><div class="table-responsive"><table class="table "><tbody><!-- Velocity Template Loop for Fast Selling Data -->#if($brandwiseFastmoving && $brandwiseFastmoving.entrySet().size() > 0)#foreach($brandEntry in $brandwiseFastmoving.entrySet())#foreach($model in $brandEntry.value)#set($processingQty = $processingOrderCatalogQtyMap.get($model.getCatalogId()))#if(!$processingQty)#set($processingQty = 0)#end#set($totalQty = $model.partnerCurrentQty + $processingQty)#set($suggestedQty = 2)<tr class="brand-data" data-brand="$brandEntry.key.toLowerCase()"><td class="w-25"><strong>$model.modelNumber</strong></td><td class="suggested-qty-col w-25"><strong>$suggestedQty</strong></td><td class="w-25"><strong>$model.partnerCurrentQty#if($processingOrderCatalogQtyMap.get($model.getCatalogId()))+ $processingOrderCatalogQtyMap.get($model.getCatalogId())#end</strong></td><td class="remarks-col w-25">#if($totalQty == 0)<span class="text-danger fw-bold">Urgently Required</span>#elseif($totalQty < 2)<span class="status-order">Need to Order</span>#else<span class="status-ok fw-bold">Stock OK</span>#end</td></tr>#end#end#else<tr class="brand-data no-data-row"><td colspan="4">No Data Available</td></tr>#end</tbody></table></div><div class="section-header">Running Model</div><div class="table-responsive"><table class="table "><tbody><!-- Velocity Template Loop for Fast Selling Data -->#if($brandwiseRunningmoving && $brandwiseRunningmoving.entrySet().size() > 0)#foreach($brandEntry in $brandwiseRunningmoving.entrySet())#foreach($model in $brandEntry.value)#set($processingQty = $processingOrderCatalogQtyMap.get($model.getCatalogId()))#if(!$processingQty)#set($processingQty = 0)#end#set($totalQty = $model.partnerCurrentQty + $processingQty)#set($suggestedQty = 2)<tr class="brand-data" data-brand="$brandEntry.key.toLowerCase()"><td class="w-25"><strong>$model.modelNumber</strong></td><td class="suggested-qty-col w-25"><strong>$suggestedQty</strong></td><td class="w-25"><strong>$model.partnerCurrentQty#if($processingOrderCatalogQtyMap.get($model.getCatalogId()))+ $processingOrderCatalogQtyMap.get($model.getCatalogId())#end</strong></td><td class="remarks-col w-25">#if($totalQty == 0)<span class="text-danger fw-bold">Urgently Required</span>#elseif($totalQty < 2)<span class="status-order">Need to Order</span>#else<span class="status-ok fw-bold">Stock OK</span>#end</td></tr>#end#end#else<tr class="brand-data no-data-row"><td colspan="4">No Data Available</td></tr>#end</tbody></table></div></div></div></div></div>## -----------------------------------------------My Stock ------------------------------------------------<div class="row mb-1 my-4 justify-content-center"><div class="col-10"><div class=" bg-dark-light rounded-3 p-3 shadow rounded-corner"><h1 class="text-center mb-0 fw-bold py-2 text-white fs-8">My Stock</h1></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 class="d-flex "><span class="fw-bold text-start fs-5">Value: </span><span class="currency fw-bold text-start fs-5"> $nf.format( $brandStockPrice.getTotalValue())</span></div>#if($brandStockPrice.getAgedValue() > 0)<div class="aged-stock mt-2 pt-2 border-top border-light border-opacity-25"><div class="d-flex justify-content-between"><span>Focus Stock:</span><span><span class="currency"> $nf.format($brandStockPrice.getAgedValue()) </span>/$brandStockPrice.getAgedQty()</span></div></div>#end</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><div class="d-flex "><span class="fw-bold text-start fs-5">Value: </span><span class="currency fw-bold text-start fs-5"> $nf.format($brandStockPrice.getTotalValue())</span></div>#if($brandStockPrice.getAgedValue() > 0)<div class="aged-stock mt-2 pt-2 border-top border-light border-opacity-25"><div class="d-flex justify-content-between"><span>Focus Stock:</span><span><span class="currency"> $nf.format($brandStockPrice.getAgedValue())</span>/$brandStockPrice.getAgedQty()</span></div></div>#end</div></div>#end#end</div></div>## ------------------------------------my stock ageing---------------------------------<div class="card shadow-lg rounded-3"><div class="row mb-1 my-4 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 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><button type="button" class="btn btn-danger rounded-pill px-4 fs-5" id="btnValue">Value</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><th class="align-middle text-white fs-5 fw-bold" style="width: 180px;">Brands</th>#set($intervals = ["Less Than 15 Days", "16 - 30 Days", "31 - 45 Days","More Than 45 Days"])#foreach($interval in $intervals)<th class="align-middle fs-5 fw-bold text-wrap"style="width: 180px;height: 55px !important; word-wrap: break-word; white-space: normal;"><span class="text-white text-wrap ">$interval</span></th>#end</tr></thead><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></tr>#foreach($brandKey in $mandatoryBrands)#set($found = false)#foreach($entry in $inventoryGroupedByBrand.entrySet())#if($entry.getKey().toLowerCase() == $brandKey)#set($found = true)<tr><td class="brand-cell text-start p-0"><div class="p-3 bg-white #getBrandBgColor($entry.getKey())"style="height: 40px; display: flex; align-items: center; justify-content: start;"><span class="text-black fw-bold fs-5"><imgsrc="$brandLogos.getOrDefault($entry.getKey(),'https://static.vecteezy.com/system/resources/thumbnails/025/213/042/small_2x/mobile-phone-icon-in-black-circle-png.png')"alt="$entry.getKey() logo"class="brand-logo rounded-circle me-3"style="width:35px;height:35px">$entry.getKey()</span></div></td>#foreach($i in [0..3])<td class="align-middle text-center $bgColors.get($i)"style="opacity: 0.9;">#set($qty = 0)#set($value = 0)#foreach($item in $entry.getValue())#if($i < $item.getValues().size() && $item.getValues().get($i))#set($qty = $math.add($qty, $item.getValues().get($i).getQuantity()))#set($itemValue = $math.mul($item.getValues().get($i).getPrice(), $item.getValues().get($i).getQuantity()))#set($value = $math.add($value, $itemValue))#end#end<div class="volume-view fs-5 fw-bold text-black ">$qty</div><div class="value-view currency fs-5 fw-bold text-black"style="display: none;"> $nf.format( $value)</div></td>#end</tr>#end#end#if(!$found)<tr><td class="brand-cell text-center p-0"><div class="p-3 bg-white"style="height: 40px; display: flex; align-items: center; justify-content: center;"><span class="text-black fw-bold">$brandKey</span></div></td>#foreach($i in [0..3])<td class="text-center align-middle $bgColors.get($i)"style="opacity: 0.9;"><div class="volume-view fs-5 fw-bold text-black">0</div><div class="value-view currency fs-5 fw-bold text-black"style="display: none;">0.00</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></td></tr>#foreach($entry in $inventoryGroupedByBrand.entrySet())#set($isOtherBrand = true)#foreach($mandatoryBrand in $mandatoryBrands)#if($entry.getKey().toLowerCase() == $mandatoryBrand)#set($isOtherBrand = false)#break#end#end#if($isOtherBrand)<tr><td class="brand-cell text-start p-0"><div class="p-3 text-black"style="height: 40px; display: flex; align-items: center; justify-content: start;"><span class="text-black fw-bold fs-5 "><imgsrc="$brandLogos.getOrDefault($entry.getKey(),'https://static.vecteezy.com/system/resources/thumbnails/025/213/042/small_2x/mobile-phone-icon-in-black-circle-png.png')"alt="$entry.getKey() logo"class="brand-logo rounded-circle me-3"style="width:35px;height:35px">$entry.getKey()</span></div></td>#foreach($i in [0..3])<td class="text-center align-middle pb-4 $bgColors.get($i)"style="opacity: 0.9;">#set($qty = 0)#set($value = 0)#foreach($item in $entry.getValue())#if($i < $item.getValues().size() && $item.getValues().get($i))#set($qty = $math.add($qty, $item.getValues().get($i).getQuantity()))#set($itemValue = $math.mul($item.getValues().get($i).getPrice(), $item.getValues().get($i).getQuantity()))#set($value = $math.add($value, $itemValue))#end#end<div class="volume-view fs-5 fw-bold text-black">$qty</div><div class="value-view currency fs-5 fw-bold text-black"style="display: none;"> $nf.format($value)</div></td>#end</tr>#end#end#else<tr><td colspan="6" class="text-center">No inventory data available</td></tr>#end</tbody></table></div><div class="d-flex justify-content-center mt-5 "><button type="button" class="btn-sm btn-danger fs-2 fw-bold px-4" data-dismiss="modal">X CLOSE</button></div></div></div></section></div></body><script>var chart;var brandColors = {'vivo': '#2196F3','oppo': '#006b35','samsung': '#1428A0','realme': '#FFC107','xiaomi': '#FF5722','apple': '#666666','poco': '#FFD403','tecno': '#0064FE','lava': '#ED0F53'};function loadMonthDetails(monthIndex) {console.log(`Loading details for month: ${monthIndex}`);doGetAjaxRequestHandler(`${context}/monthWisePartnerIncome/${monthIndex}?partnerTask=true`, function (response) {$('.bootbox.modal .modal-body .bootbox-body').empty();$('#partner-income').html(response);const $section = $('#ajaxSection');});}$(document).on("click", ".pending-income", function () {lastMonthCreditIncome("main-content");});function doGetAjaxRequestHandler(url, successCallback) {$.ajax({url: url,type: 'GET',success: successCallback,error: function (xhr, status, error) {console.error("AJAX request failed:", error);}});}$(function () {$('#reportrange').daterangepicker(getRangedDatePicker());});$(document).ready(function () {$("#btnVolume").addClass("active");$("#btnVolume").click(function () {$(this).addClass("active");$("#btnValue").removeClass("active");$(".volume-view").show();$(".value-view").hide();});$("#btnValue").click(function () {$(this).addClass("active");$("#btnVolume").removeClass("active");$(".volume-view").hide();$(".value-view").show();});});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 ? 'table-row' : 'none';});});});document.querySelector('.brand-btn')?.click();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 => {btn.style.backgroundColor = '#fff';btn.style.color = '#666';});this.style.backgroundColor = brandColors[selectedBrand] || '#666';this.style.color = '#fff';document.querySelectorAll('.brand-data').forEach(row => {row.style.display = row.dataset.brand === selectedBrand ? 'inline-masonry' : 'none';});});});brandButtons[0]?.click();}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 ? 'inline-masonry' : 'none';});});});document.querySelector('.brand-btn')?.click();</script>##-------------------------------------------------------------------My Earning chart -----------------------------------------<script>$(document).ready(function () {// loadMonthDetails(0);const monthData = [#foreach( $item in $summaryList ){month: "$!item.monthValueMap[$item.monthIndex]",monthIndex: "$item.monthIndex",total: $item.get('totalIncome'),credited: $item.get('creditedIncome'),pending: $item.get('pendingIncome')}#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',borderWidth: 1,barThickness: 30,hitRadius: 30,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)',borderWidth: 1,barThickness: 30,order: 2,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)',borderWidth: 4,type: 'line',order: 3,pointRadius: 6,pointHoverRadius: 0,pointHitRadius: 0,pointBackgroundColor: '#4bc0c0',pointBorderColor: '#ffffff',pointBorderWidth: 2,yAxisID: 'y',tension: 0.3}]},options: {responsive: true,maintainAspectRatio: true,interaction: {mode: 'point',intersect: true,},plugins: {datalabels: {formatter: function (value) {return Math.round(value).toLocaleString('en-IN');},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)',titleColor: '#ffffff',bodyColor: '#ffffff',borderColor: '#4bc0c0',borderWidth: 2,displayColors: true,padding: 12,boxWidth: 15,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`;}return '';},labelColor: function (context) {return {borderColor: 'transparent',backgroundColor: context.dataset.borderColor,borderRadius: 4,borderWidth: 2};},labelTextColor: function (context) {return '#ffffff';}}},legend: {display: true,position: 'top',labels: {usePointStyle: true,padding: 20,font: {size: 14,weight: 'bold'},color: '#333',boxWidth: 15,boxHeight: 15}}},scales: {x: {ticks: {autoSkip: false,font: {size: 12,weight: 'bold'},color: '#333',padding: 10}},y: {type: 'linear',display: true,position: 'left',stacked: false,beginAtZero: true,grid: {color: 'rgba(0, 0, 0, 0.1)',lineWidth: 1},ticks: {callback: function (value) {// Round the value first, then formatconst roundedValue = Math.round(value);return roundedValue.toLocaleString('en-IN');},font: {size: 12,weight: 'bold'},color: '#333'}}},elements: {bar: {borderRadius: 4,categoryPercentage: 0.8,barPercentage: 0.9},line: {borderJoinStyle: 'round'},point: {hoverBorderWidth: 1}},onHover: function (event, elements) {event.native.target.style.cursor = elements.length > 0 ? 'pointer' : 'default';},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'});event.chart.canvas.style.cursor = 'pointer';}, 300);}}}});})</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,marketShare: ${entry.MarketShare.replace('%', '')},color: '$entry.BgColor'});} 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,quantity: $brandStockPrice.getTotalQty(),value: $brandStockPrice.getTotalValue()});} else {otherStockData.quantity += $brandStockPrice.getTotalQty();otherStockData.value += $brandStockPrice.getTotalValue();}#endif (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)])];allBrands.forEach(brand => {const marketInfo = marketSegments.find(m => m.brand === brand) || {};const stockInfo = stockSegments.find(s => s.brand === brand) || {};combinedSegments.push({brand: brand.charAt(0).toUpperCase() + brand.slice(1),marketShare: marketInfo.marketShare || 0,stockQuantity: stockInfo.quantity || 0,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),datasets: [{label: 'Brand Market Share Percentage',data: combinedSegments.map(item => item.marketShare),backgroundColor: combinedSegments.map(item => item.color + '80'),borderColor: combinedSegments.map(item => item.color),borderWidth: 2},{label: 'Brand Share Percentage in your outlet',data: combinedSegments.map(item => ((item.stockQuantity / totalStockQuantity) * 100).toFixed(1)),backgroundColor: combinedSegments.map(item => item.color + '40'),borderColor: combinedSegments.map(item => item.color),borderWidth: 1}]},options: {responsive: true,scales: {x: {stacked: true},y: {stacked: true,beginAtZero: true,title: {display: true,text: 'Percentage (%)'}}},plugins: {tooltip: {callbacks: {label: function (context) {const segment = combinedSegments[context.dataIndex];if (context.datasetIndex === 0) {return `Market Share: ${segment.marketShare}%`;} else {return [`Stock Quantity: ${segment.stockQuantity}`,`Percentage: ${((segment.stockQuantity / totalStockQuantity) * 100).toFixed(1)}%`];}}}}}}});});</script>