Subversion Repositories SmartDukaan

	/* Per-row "Delay" summary column on the matrix view.

	   Surfaces the worst-overdue event for each partner so users can spot the

	   biggest blockers without scanning across all 19 stage cells. */

	.tl-delay-cell {

		text-align: center;

		min-width: 110px;

		line-height: 1.3;

	}

	.tl-delay-chip {

		display: inline-block;

		padding: 2px 7px;

		border-radius: 10px;

		font-size: 10px;

		font-weight: 700;

		color: #fff;

	}

	.tl-delay-chip.high {

		background: #d9534f;

	}

	.tl-delay-chip.med {

		background: #f0ad4e;

	}

	.tl-delay-chip.low {

		background: #f7dc6f;

		color: #333;

	}

	.tl-delay-team {

		display: block;

		font-size: 10px;

		color: #555;

		margin-top: 2px;

		max-width: 110px;

		overflow: hidden;

		text-overflow: ellipsis;

		white-space: nowrap;

	}

	.tl-delay-none {

		color: #ccc;

	}

	/* "Show delayed only" filter toggle styling — sits next to the legend in

	   the DataTables top-controls flex row. */

	.tl-delay-filter {

		display: inline-flex;

		align-items: center;

		gap: 6px;

		font-size: 11px;

		font-weight: 600;

		color: #555;

		margin-left: 16px;

		cursor: pointer;

		user-select: none;

	}

	.tl-delay-filter input[type="checkbox"] {

		margin: 0;

		cursor: pointer;

	}

	.tl-delay-filter.active {

		color: #d9534f;

	}

	/* Tab strip — sits between the breadcrumb and the matrix table.

	   Three preset views over the same data: All / Delayed Only / By Team. */

	.tl-tab-strip {

		display: flex;

		align-items: center;

		gap: 4px;

		padding: 8px 0 12px;

		border-bottom: 1px solid #e0e0e0;

		margin-bottom: 10px;

	}

	.tl-tab {

		background: #fff;

		border: 1px solid #d0d7de;

		border-bottom: none;

		border-radius: 4px 4px 0 0;

		padding: 8px 16px;

		font-size: 12px;

		font-weight: 600;

		color: #555;

		cursor: pointer;

		position: relative;

		bottom: -1px;

		transition: background 0.15s, color 0.15s;

	}

	.tl-tab:hover {

		background: #f5f7fa;

		color: #2c3e50;

	}

	.tl-tab.active {

		background: #2c3e50;

		color: #fff;

		border-color: #2c3e50;

	}

	.tl-tab i {

		margin-right: 5px;

	}

	.tl-tab-count {

		display: inline-block;

		margin-left: 6px;

		padding: 1px 7px;

		background: #d9534f;

		color: #fff;

		border-radius: 10px;

		font-size: 10px;

		font-weight: 700;

	}

	.tl-tab.active .tl-tab-count {

		background: #fff;

		color: #d9534f;

	}

	.tl-team-picker {

		margin-left: auto;

		display: flex;

		align-items: center;

		gap: 8px;

	}

	.tl-team-picker select {

		height: 30px;

		font-size: 12px;

		min-width: 200px;

	}

	## Tab strip — three preset views over the same matrix.

	## "all" = no filter, "delayed" = only rows with active delays, "team" = delayed + team filter dropdown.

	## Each tab is a button that flips JS filter state and re-draws the DataTable.

	<div class="col-lg-12 tl-tab-strip">

		<button type="button" class="tl-tab active" data-tab="all">

			<i class="fa fa-list"></i> All Partners

		</button>

		<button type="button" class="tl-tab" data-tab="delayed">

			<i class="fa fa-exclamation-triangle"></i> Delayed Only

			#if($worstDelayMap && $worstDelayMap.size() > 0)

				<span class="tl-tab-count">$worstDelayMap.size()</span>

			#end

		</button>

		<button type="button" class="tl-tab" data-tab="team">

			<i class="fa fa-users"></i> By Team

		</button>

		<div class="tl-team-picker" id="tlTeamPicker" style="display:none;">

			<select id="tlTeamFilter" class="form-control input-sm">

				<option value="">All teams</option>

			</select>

		</div>

		<button type="button" class="btn btn-sm btn-info" id="btnShowSummary" style="margin-left:auto;">

			<i class="fa fa-bar-chart"></i> Show Summary

		</button>

	</div>

	<div class="col-lg-12" style="padding:8px 0 4px;">

		<div class="legend" style="justify-content:flex-start;">

			<div class="legend-item"><span class="tl-dot completed"></span> Done</div>

			<div class="legend-item"><span class="tl-dot completed" style="outline:3px solid #ffe0e0;"></span><span

					style="background:#fff0f0;padding:1px 5px;border-radius:3px;margin-left:2px;">Done (crossed TAT)</span>

			</div>

			<div class="legend-item"><span class="tl-dot delay"></span> Crossed TAT</div>

			<div class="legend-item"><span class="tl-dot wip"></span> On Time</div>

			<div class="legend-item"><span class="tl-dot not-started"></span> Not Started</div>

		</div>

	</div>

				<th rowspan="2" style="background:#c0392b;">Delay</th>

					## Lookup per-row delay metadata once. partnerDelayMap maps eventName -> DelayReportItem

					## (used for hover tooltips on DELAY cells). worstDelay is the single worst-overdue

					## item for this partner (drives the new "Delay" column and the row-level filter).

					#set($partnerDelayMap = $delayIndex.get($st.getOnboardingId()))

					#set($worstDelay = $worstDelayMap.get($st.getOnboardingId()))

					#if($worstDelay)

					<tr data-has-delay="true" data-delay-team="$!{worstDelay.getResponsibleTeam()}">

					#else

					<tr data-has-delay="false" data-delay-team="">

					## --- New "Delay" summary column ---

					## Renders the worst-overdue event with a severity-coloured chip + responsible team.

					## Sort key (data-order) is daysOverdue so DataTables sorts numerically, not lexically.

					#if($worstDelay)

						#if($worstDelay.getDaysOverdue() > 7)

							#set($delaySeverity = "high")

						#elseif($worstDelay.getDaysOverdue() > 3)

							#set($delaySeverity = "med")

						#else

							#set($delaySeverity = "low")

						#end

						<td class="tl-delay-cell" data-order="$worstDelay.getDaysOverdue()"

							title="$worstDelay.getEventName() - planned $worstDelay.getPlannedDate().format($dateFormatter), overdue $worstDelay.getDaysOverdue() day(s), team: $worstDelay.getResponsibleTeam()">

							<span class="tl-delay-chip $delaySeverity">$worstDelay.getDaysOverdue()d overdue</span>

							<span class="tl-delay-team">$worstDelay.getResponsibleTeam()</span>

						</td>

					#else

						<td class="tl-delay-cell tl-delay-none" data-order="-1">-</td>

					#end

					## Lookup late-completion metadata for this partner once.

					## latePartnerMap maps eventName -> DelayReportItem for events completed

					## after their TAT deadline (daysOverdue = how many days late).

					#set($latePartnerMap = false)

					#if($lateIndex)

						#set($latePartnerMap = $lateIndex.get($st.getOnboardingId()))

					#end

								## Check if this event was completed late (after TAT deadline)

								#set($cellLate = false)

								#if($latePartnerMap)

									#set($cellLate = $latePartnerMap.get($obtm.getTitle().name()))

								#end

								#if($cellLate)

									<td style="background:#fff0f0;"

										title="Completed $cellLate.getDaysOverdue() day(s) late (planned: $cellLate.getPlannedDate().format($dateFormatter), actual: $obtm.getCompletedTimestamp().format($dateFormatter))"><span

											class="tl-cell"><span

											class="tl-dot completed"></span>#if($obtm.getCompletedTimestamp())<span

											class="tl-date">$obtm.getCompletedTimestamp().format($dateFormatter)</span>#end</span>

									</td>

								#else

								#end

								## Look up the matching DelayReportItem to enrich this red cell with

								## planned date, days overdue, and responsible team in the title tooltip.

								## $obtm.getTitle() is a StoreTimeline enum; .name() gives the string key.

								#set($cellDelay = false)

								#if($partnerDelayMap)

									#set($cellDelay = $partnerDelayMap.get($obtm.getTitle().name()))

								#end

								#if($cellDelay)

										title="Planned: $cellDelay.getPlannedDate().format($dateFormatter) | Overdue: $cellDelay.getDaysOverdue() day(s) | Team: $cellDelay.getResponsibleTeam()"><span

											class="tl-cell"><span

											class="tl-dot delay"></span>#if($obtm.getCompletedTimestamp())<span

											class="tl-date">$obtm.getCompletedTimestamp().format($dateFormatter)</span>#end</span>

									</td>

								#else

									<td style="background:#fff0f0;"

										title="Delayed (planned $!{obtm.getCompletedTimestamp().format($dateFormatter)})"><span

											class="tl-cell"><span

								#end

		// Custom DataTables search filter — applies the active tab's filter rules.

		// Tab state lives on window so it survives the AJAX re-render of this panel:

		//   storeTimelineActiveTab: 'all' | 'delayed' | 'team'

		//   storeTimelineTeamFilter: string (only meaningful when tab === 'team')

		// Filter is registered once on window to stay idempotent across re-loads.

		window.storeTimelineActiveTab = window.storeTimelineActiveTab || 'all';

		window.storeTimelineTeamFilter = window.storeTimelineTeamFilter || '';

		if (!window.storeTimelineDelayFilterRegistered) {

			window.storeTimelineDelayFilterRegistered = true;

			$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {

				if (settings.nTable.id !== 'storeTimeline') return true;

				var tab = window.storeTimelineActiveTab;

				if (tab === 'all') return true;

				var rowNode = settings.aoData[dataIndex].nTr;

				// Both 'delayed' and 'team' tabs require an active delay

				if ($(rowNode).attr('data-has-delay') !== 'true') return false;

				if (tab === 'team' && window.storeTimelineTeamFilter) {

					return $(rowNode).attr('data-delay-team') === window.storeTimelineTeamFilter;

				}

				return true;

			});

		}

		// Legend is now rendered as static HTML above the table (not inside DataTables controls).

		// Only delayed rows have a team set, so this naturally excludes empty values.

		var teamSet = {};

		$('#storeTimeline tbody tr[data-has-delay="true"]').each(function () {

		});

		var teamSelect = $('#tlTeamFilter');

		Object.keys(teamSet).sort().forEach(function (team) {

		});

		// applyTab — single source of truth for switching tabs.

		// sort order, and triggers a DataTable redraw.

		function applyTab(tab) {

			window.storeTimelineActiveTab = tab;

			$('.tl-tab').removeClass('active');

			$('#tlTeamPicker').toggle(tab === 'team');

			if (tab !== 'team') {

				window.storeTimelineTeamFilter = '';

				teamSelect.val('');

			}

			dtable.order([0, 'desc']).draw();

		}

		// Tab click → apply the corresponding filter view

		$('.tl-tab').on('click', function () {

			applyTab($(this).data('tab'));

		});

		teamSelect.on('change', function () {

			window.storeTimelineTeamFilter = $(this).val();

		});

		// Honor an optional defaultTab model attribute set by the controller.

		// on the Delayed Only tab without an extra click.

		var initialTab = '$!{defaultTab}';

		if (initialTab === 'delayed' || initialTab === 'team') {

			applyTab(initialTab);

		}

		// Show Summary modal — renders Chart.js charts on first open

		var chartsRendered = false;

		$('#btnShowSummary').on('click', function () {

			$('#summaryModal').modal('show');

			if (chartsRendered) return;

			chartsRendered = true;

			// --- Chart 1: Delays by Stage (horizontal bar) ---

			var stageLabels = [#foreach($e in $delaysByStage.entrySet())'$e.getKey()'#if($foreach.hasNext),#end#end];

			var stageCounts = [#foreach($e in $delaysByStage.entrySet())$e.getValue()#if($foreach.hasNext),#end#end];

			new Chart(document.getElementById('chartDelaysByStage'), {

				type: 'bar',

				data: {

					labels: stageLabels,

					datasets: [{

						label: 'Delayed Partners',

						data: stageCounts,

						backgroundColor: '#e74c3c'

					}]

				},

				options: {

					indexAxis: 'y',

					responsive: true,

					maintainAspectRatio: false,

					plugins: {

						legend: {display: false},

						title: {display: true, text: 'Active Delays by Stage ($totalDelays total)', font: {size: 14}}

					},

					scales: {x: {beginAtZero: true, ticks: {stepSize: 1}}}

				}

			});

			// --- Chart 2: Delays by Team (donut) ---

			var teamLabels = [#foreach($e in $delaysByTeam.entrySet())'$e.getKey()'#if($foreach.hasNext),#end#end];

			var teamCounts = [#foreach($e in $delaysByTeam.entrySet())$e.getValue()#if($foreach.hasNext),#end#end];

			var teamColors = ['#e74c3c', '#3498db', '#2ecc71', '#f39c12', '#9b59b6', '#1abc9c', '#e67e22', '#34495e'];

			new Chart(document.getElementById('chartDelaysByTeam'), {

				type: 'doughnut',

				data: {

					labels: teamLabels,

					datasets: [{data: teamCounts, backgroundColor: teamColors.slice(0, teamLabels.length)}]

				},

				options: {

					responsive: true,

					maintainAspectRatio: false,

					plugins: {

						title: {display: true, text: 'Delays by Responsible Team', font: {size: 14}},

						legend: {position: 'right'}

					}

				}

			});

			// --- Chart 3: Delay Severity (donut) ---

			new Chart(document.getElementById('chartDelaySeverity'), {

				type: 'doughnut',

				data: {

					labels: ['Critical (>7 days)', 'Medium (3-7 days)', 'Low (\u22643 days)'],

					datasets: [{

						data: [$severityCritical, $severityMedium, $severityLow],

						backgroundColor: ['#d9534f', '#f0ad4e', '#f7dc6f']

					}]

				},

				options: {

					responsive: true,

					maintainAspectRatio: false,

					plugins: {

						title: {display: true, text: 'Delay Severity Breakdown', font: {size: 14}},

						legend: {position: 'right'}

					}

				}

			});

			// --- Chart 4: Late Completions by Stage (horizontal bar) ---

			var lateLabels = [#foreach($e in $lateByStage.entrySet())'$e.getKey()'#if($foreach.hasNext),#end#end];

			var lateCounts = [#foreach($e in $lateByStage.entrySet())$e.getValue()#if($foreach.hasNext),#end#end];

			new Chart(document.getElementById('chartLateByStage'), {

				type: 'bar',

				data: {

					labels: lateLabels,

					datasets: [{

						label: 'Late Completions',

						data: lateCounts,

						backgroundColor: '#e67e22'

					}]

				},

				options: {

					indexAxis: 'y',

					responsive: true,

					maintainAspectRatio: false,

					plugins: {

						legend: {display: false},

						title: {display: true, text: 'Late Completions by Stage ($totalLate total)', font: {size: 14}}

					},

					scales: {x: {beginAtZero: true, ticks: {stepSize: 1}}}

				}

			});

		});

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>

## Summary Modal

<div class="modal fade" id="summaryModal" tabindex="-1" role="dialog">

	<div class="modal-dialog" style="width:90%;max-width:1100px;">

		<div class="modal-content">

			<div class="modal-header" style="background:#2c3e50;color:#fff;">

				<button type="button" class="close" data-dismiss="modal" style="color:#fff;opacity:0.8;">&times;

				</button>

				<h4 class="modal-title"><i class="fa fa-bar-chart"></i> Onboarding Timeline Summary</h4>

			</div>

			<div class="modal-body" style="padding:20px;">

				<div class="row">

					<div class="col-md-6" style="height:320px;margin-bottom:20px;">

						<canvas id="chartDelaysByStage"></canvas>

					</div>

					<div class="col-md-6" style="height:320px;margin-bottom:20px;">

						<canvas id="chartDelaysByTeam"></canvas>

					</div>

				</div>

				<div class="row">

					<div class="col-md-6" style="height:320px;margin-bottom:20px;">

						<canvas id="chartDelaySeverity"></canvas>

					</div>

					<div class="col-md-6" style="height:320px;margin-bottom:20px;">

						<canvas id="chartLateByStage"></canvas>

					</div>

				</div>

			</div>

			<div class="modal-footer">

				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

			</div>

		</div>

	</div>

</div>