(() => {
function create(dependencies) {
const {
appState,
buildWorkloadStartCalendar,
hasRampForecastMismatch,
renderOpportunityLink,
renderWorkloadLink,
escapeHtml,
cleanString,
formatWholeNumber,
formatCurrency,
formatPercent,
formatProgressPercent,
formatDate,
} = dependencies;
function renderMainContent() {
if (appState.status === "loading") {
return `
Loading data
Building the workload dataset
${escapeHtml(appState.loadingMessage)}
Overall progress
${formatProgressPercent(appState.loadingProgress || 0)}
`;
}
if (appState.status === "error") {
return `
Request failed
Unable to assemble the dashboard
${escapeHtml(appState.errorMessage)}
`;
}
if (!appState.dataset) {
return `
Ready
Start the live data extraction
No cached snapshot is available yet. Use Refresh data to fetch the current user, customers, workloads, actions and service requests.
`;
}
const { user, summary } = appState.dataset;
return `
${renderMetricCard("Total clients", formatWholeNumber(summary.totalCustomers), "Loaded from listSummary")}
${renderMetricCard("Total workloads", formatWholeNumber(summary.totalWorkloads), "Excluding Won workloads")}
${renderMetricCard("Total (ACR)", formatCurrency(summary.totalEligibleAcr), "Across eligible workloads")}
${renderMetricCard("Pending SRs", formatWholeNumber(summary.pendingServiceRequests.length), "SVC_PENDING_DELIVERY")}
${summary.stageIndicators.map((indicator) => renderStageIndicator(indicator)).join("")}
${renderBooleanIndicator(
"Status de SRs",
"Workloads com SR",
summary.srStatus.trueCount,
"Workloads sem SR",
summary.srStatus.falseCount,
"sr"
)}
${renderBooleanIndicator(
"Status de Consumption Plan/action",
"Workloads com action",
summary.actionStatus.trueCount,
"Workloads sem action",
summary.actionStatus.falseCount,
"action"
)}
${renderSrHoursAndCalendarSection(summary)}
`;
}
function renderCurrentUserSidebar(user) {
const displayName = cleanString(user?.name || user?.userEmail);
const userEmail = cleanString(user?.userEmail);
const avatar = cleanString(user?.avatar);
const initials = getUserInitials(displayName || userEmail);
return `
${
avatar
? `
})
`
: `
${escapeHtml(initials)}`
}
${escapeHtml(label)}
${escapeHtml(value)}
${escapeHtml(detail)}
`;
}
function renderStageIndicator(indicator) {
return `
`;
}
function renderBooleanIndicator(
title,
trueLabel,
trueCount,
falseLabel,
falseCount,
scope
) {
const total = trueCount + falseCount;
const truePercent = total > 0 ? (trueCount / total) * 100 : 0;
const falsePercent = total > 0 ? (falseCount / total) * 100 : 0;
return `
${escapeHtml(trueLabel)}: ${formatPercent(truePercent)}
${escapeHtml(falseLabel)}: ${formatPercent(falsePercent)}
`;
}
function renderSrHoursAndCalendarSection(summary) {
const calendar = buildWorkloadStartCalendar(
summary.allWorkloads,
appState.calendarYear,
appState.calendarMonth,
appState.calendarView,
appState.calendarAnchorDateKey
);
return `
${renderSrHoursIndicatorCard(summary)}
${renderWorkloadStartCalendar(calendar)}
`;
}
function renderSrHoursIndicatorCard(summary) {
const zeroToFourCount = summary.srHours.betweenZeroAndFour.length;
const aboveFourCount = summary.srHours.aboveFour.length;
const total = zeroToFourCount + aboveFourCount;
const zeroToFourPercent = total > 0 ? (zeroToFourCount / total) * 100 : 0;
const aboveFourPercent = total > 0 ? (aboveFourCount / total) * 100 : 0;
return `
SRs 0-4h: ${formatPercent(zeroToFourPercent)}
SRs >4h: ${formatPercent(aboveFourPercent)}
${renderSrHoursIndicator(
"SRs 0-4h",
formatPercent(zeroToFourPercent),
zeroToFourCount,
"0-4"
)}
${renderSrHoursIndicator(
"SRs >4h",
formatPercent(aboveFourPercent),
aboveFourCount,
"above-4"
)}
`;
}
function renderSrHoursIndicator(label, detail, count, value) {
return `
`;
}
function renderWorkloadStartCalendar(calendar) {
return `
${["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
.map((day) => `${day}`)
.join("")}
${calendar.days
.map((day) => renderCalendarDay(day, calendar.view))
.join("")}
`;
}
function renderCalendarDay(day, view = "month") {
if (view === "week") {
return renderCalendarWeekDay(day);
}
const firstWorkload = day.workloads[0];
const calendarWorkloadLabel =
firstWorkload?.description || firstWorkload?.name || "Workload";
const className = [
"arch-panel-extension-calendar-day",
day.isCurrentMonth ? "" : "is-muted",
day.isToday ? "is-today" : "",
day.workloads.length ? "has-workload" : "",
]
.filter(Boolean)
.join(" ");
return `
`;
}
function renderCalendarWeekDay(day) {
const className = [
"arch-panel-extension-calendar-day",
"is-week-day",
day.isToday ? "is-today" : "",
day.workloads.length ? "has-workload" : "",
]
.filter(Boolean)
.join(" ");
const title = day.workloads
.map((workload) => workload.description || workload.name)
.filter(Boolean)
.join(" | ");
return `
`;
}
function renderCalendarWeekWorkload(workload) {
const label = workload.description || workload.name || "Workload";
const customer = workload.customerName || "";
return `
${escapeHtml(label)}
${
customer
? `${escapeHtml(
customer
)}`
: ""
}
`;
}
function renderWorkloadTable(workloads) {
return `
| Opportunity |
Customer |
Workload |
ACR |
Type |
Tem SR? |
Tem Action? |
${workloads.map((workload) => renderWorkloadTableRow(workload)).join("")}
`;
}
function renderWorkloadTableRow(
workload,
includeConsumptionStartDate = false,
includeRampMonths = false
) {
const hasRampMismatch =
includeRampMonths && hasRampForecastMismatch(workload);
return `
| ${renderOpportunityLink(workload)} |
${escapeHtml(workload.customerName || "")} |
${renderWorkloadLink(workload, hasRampMismatch)} |
${
includeConsumptionStartDate
? `${escapeHtml(formatDate(workload.consumptionStartDate) || "-")} | `
: ""
}
${
includeRampMonths
? `${renderRampMonthsButton(workload)} | `
: ""
}
${formatCurrency(workload.adjustedACR)} |
${escapeHtml(workload.opportunityForecastTypeGroup)} |
${renderBooleanBadge(workload.hasSR)} |
${renderHasActionCell(workload)} |
`;
}
function renderRampMonthsButton(workload) {
return `
`;
}
function renderBooleanBadge(value) {
const isTrue = Boolean(value);
const variantClass = isTrue ? "is-success" : "is-danger";
const label = isTrue ? "Sim" : "Não";
return `
${label}
`;
}
function renderHasActionCell(workload) {
if (workload.hasAction) {
return renderBooleanBadge(true);
}
return `
${renderBooleanBadge(false)}
`;
}
function renderInsightRow(label, value, detail) {
return `
${escapeHtml(label)}
${escapeHtml(detail)}
${escapeHtml(value)}
`;
}
return {
renderMainContent,
renderWorkloadTableRow,
};
}
globalThis.ArchPanelDashboardView = Object.freeze({
create,
});
})();