audrix/dashboard-cpsp
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance ReportPreviewOverlay to display DOC weight and improve KPI row styling. Update dashboard report payload to include docWeight, and adjust report summary to incorporate it. Add tests for docWeight functionality.

Browse Source
This commit is contained in:
Alberto-Audrix committed 2026-09-07 14:18:32 +07:00
1 parent 75eb218558
commit 3ba6fed189
7 files changed
+123 -18
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/dashboard/ReportPreviewOverlay.tsx
+47 -12
View File
@@ -251,6 +251,12 @@ const ReportPreviewOverlay: React.FC<Props> = ({ open, reportType, onClose }) =>
<div style={{ fontSize: 12, color: '#6b7280', marginTop: 2 }}>
<strong>Siklus:</strong> {cycleRange}
</div>
<div style={{ fontSize: 12, color: '#6b7280', marginTop: 2 }}>
<strong>Berat DOC:</strong>{' '}
{payload.docWeight == null || !Number.isFinite(payload.docWeight)
? '—'
: `${formatNumber(payload.docWeight, 1, 0, true)} gram`}
</div>
<div style={{ fontSize: 12, color: '#6b7280', marginTop: 2 }}>
Dicetak: {printedDate}
</div>
@@ -268,26 +274,55 @@ const ReportPreviewOverlay: React.FC<Props> = ({ open, reportType, onClose }) =>
>
{summary.metrics.map((metric) => {
const formattedValue = formatSummaryValue(metric);
const isHighlight = metric.key === 'fcr' || metric.key === 'eef';
const columnPlacement = isHighlight
? ({
gridColumn: metric.key === 'fcr' ? 2 : 3,
marginTop: 12,
} as const)
: {};
return (
<div
key={metric.key}
style={{
border: '1px solid #e9d5ff',
borderTop: '3px solid #7e22ce',
borderRadius: 8,
padding: '8px 10px',
background: '#faf5ff',
}}
style={
isHighlight
? {
border: '2px solid #5b21b6',
borderRadius: 10,
padding: '12px 12px 14px',
background: 'linear-gradient(180deg, #6d28d0 0%, #5b21b6 100%)',
textAlign: 'center',
boxShadow: '0 2px 0 #4c1d95',
...columnPlacement,
}
: {
border: '1px solid #e9d5ff',
borderTop: '3px solid #7e22ce',
borderRadius: 8,
padding: '8px 10px',
background: '#faf5ff',
...columnPlacement,
}
}
>
<div style={{ fontSize: 10, color: '#6b7280', fontWeight: 600 }}>
<div
style={{
fontSize: isHighlight ? 11 : 10,
color: isHighlight ? '#e9d5ff' : '#6b7280',
fontWeight: 700,
letterSpacing: isHighlight ? 0.6 : 0,
textTransform: isHighlight ? 'uppercase' : 'none',
}}
>
{metric.label}
</div>
<div
style={{
fontSize: 16,
color: '#111827',
fontWeight: 700,
marginTop: 2,
fontSize: isHighlight ? 26 : 16,
color: isHighlight ? '#ffffff' : '#111827',
fontWeight: 800,
marginTop: isHighlight ? 6 : 2,
lineHeight: 1.1,
}}
>
{formattedValue}