pporto/opportunities-extension
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

Implemented the Plan Detail view to display consumption overages or forfeitures

Browse Source
This commit is contained in:
Paulo Porto
2026-09-22 19:17:53 -03:00
parent ea164cdcd6
commit 9ac5ffb11d
22 changed files with 1221 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/features/consumption/plan-detail.css Normal file
View File

@@ -0,0 +1,47 @@
.opportunities-extension-plan-detail-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.opportunities-extension-consumption-trend-header { align-items: center; justify-content: space-between; gap: 12px; }
.opportunities-extension-consumption-trend-header > .opportunities-extension-plan-detail-badges { min-width: 0; }
.opportunities-extension-plan-detail-skeleton { width: 64px; height: 20px; }
.opportunities-extension-projection-badge {
display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent;
padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.3;
color: #5f5a55; background: #eceae8; white-space: nowrap;
}
button.opportunities-extension-projection-badge { cursor: pointer; }
.opportunities-extension-projection-badge[data-status="forfeit"] { color: #a12424; background: #fbe5e5; }
.opportunities-extension-projection-badge[data-status="overage"] { color: #185a9d; background: #e0edfc; }
.opportunities-extension-projection-badge:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.opportunities-extension-projection-popover {
position: fixed; z-index: 8; box-sizing: border-box; padding: 14px; overflow: auto; overscroll-behavior: contain;
border: 1px solid #b9b4ae; border-radius: 4px; background: #ffffff; color: #312d2a;
box-shadow: 0 4px 16px #0003; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere;
}
.opportunities-extension-projection-popover[hidden] { display: none; }
.opportunities-extension-projection-popover .opportunities-extension-projection-dismiss {
display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; margin-bottom: 8px; padding: 4px; border: 1px solid #b9b4ae;
border-radius: 4px; background: transparent; color: inherit; cursor: pointer; font-size: 12px;
}
.opportunities-extension-projection-dismiss svg { width: 14px; height: 14px; }
.opportunities-extension-projection-line h3 { margin: 0 0 8px; font-size: 12px; }
.opportunities-extension-projection-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.opportunities-extension-projection-fields > div { min-width: 0; }
.opportunities-extension-projection-fields dt { font-weight: 600; color: #5f5a55; font-size: 11px; }
.opportunities-extension-projection-fields dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.opportunities-extension-projection-fields a { color: #006d7a; text-decoration: underline; }
.opportunities-extension-projection-children { margin-top: 14px; padding-left: 12px; border-left: 2px solid #dedbd7; }
.opportunities-extension-projection-children > section + section { margin-top: 16px; }
.opportunities-extension-plan-detail-error { color: #a12424; font-size: 12px; }
.opportunities-extension-projection-empty { color: #5f5a55; font-size: 12px; }
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-popover { color: #f1efec; background: #302e2b; border-color: #716b64; }
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-badge { color: #dedbd7; background: #484541; }
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-badge[data-status="forfeit"] { color: #ffb9b9; background: #682e32; }
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-badge[data-status="overage"] { color: #c5dfff; background: #224b76; }
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-fields dt,
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-empty { color: #cec9c2; }
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-projection-fields a { color: #76dbea; }
.opportunities-extension-modal[data-theme="dark"] .opportunities-extension-plan-detail-error { color: #ffb9b9; }
@media (max-width: 480px) { .opportunities-extension-projection-fields { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
.opportunities-extension-consumption-trend-header > .opportunities-extension-consumption-periods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .opportunities-extension-plan-detail-skeleton { animation: none; } }