feat(gbp-audit): Add data source tags to progress overlay

- Show "Google" badge next to each field in progress steps
- Blue badge indicates data comes from Google Places API
- Helps users understand where audit data originates

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-01-09 04:46:14 +01:00
parent 3b2dcc279b
commit b3885a06e8

View File

@ -557,6 +557,28 @@
color: var(--warning);
}
/* Source tag styling */
.source-tag {
display: inline-block;
font-size: 9px;
font-weight: 600;
padding: 1px 5px;
border-radius: 3px;
margin-left: 4px;
text-transform: uppercase;
vertical-align: middle;
}
.source-tag.google {
background: #4285f4;
color: white;
}
.source-tag.nordabiz {
background: var(--primary);
color: white;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@ -1015,14 +1037,14 @@
<span class="step-text in_progress">Szukam firmy w Google Maps...</span>
</div>
<!-- Phase 2: Fetch Details - individual data points -->
<!-- Phase 2: Fetch Details - individual data points from Google -->
<div class="loading-step step-detail" id="step-rating">
<div class="step-icon pending">
<svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10" stroke-width="2"/>
</svg>
</div>
<span class="step-text pending">Ocena (rating)</span>
<span class="step-text pending">Ocena <span class="source-tag google">Google</span></span>
</div>
<div class="loading-step step-detail" id="step-reviews">
<div class="step-icon pending">
@ -1030,7 +1052,7 @@
<circle cx="12" cy="12" r="10" stroke-width="2"/>
</svg>
</div>
<span class="step-text pending">Liczba opinii</span>
<span class="step-text pending">Liczba opinii <span class="source-tag google">Google</span></span>
</div>
<div class="loading-step step-detail" id="step-photos">
<div class="step-icon pending">
@ -1038,7 +1060,7 @@
<circle cx="12" cy="12" r="10" stroke-width="2"/>
</svg>
</div>
<span class="step-text pending">Zdjecia</span>
<span class="step-text pending">Zdjecia <span class="source-tag google">Google</span></span>
</div>
<div class="loading-step step-detail" id="step-hours">
<div class="step-icon pending">
@ -1046,7 +1068,7 @@
<circle cx="12" cy="12" r="10" stroke-width="2"/>
</svg>
</div>
<span class="step-text pending">Godziny otwarcia</span>
<span class="step-text pending">Godziny otwarcia <span class="source-tag google">Google</span></span>
</div>
<div class="loading-step step-detail" id="step-phone">
<div class="step-icon pending">
@ -1054,7 +1076,7 @@
<circle cx="12" cy="12" r="10" stroke-width="2"/>
</svg>
</div>
<span class="step-text pending">Numer telefonu</span>
<span class="step-text pending">Numer telefonu <span class="source-tag google">Google</span></span>
</div>
<div class="loading-step step-detail" id="step-website">
<div class="step-icon pending">
@ -1062,7 +1084,7 @@
<circle cx="12" cy="12" r="10" stroke-width="2"/>
</svg>
</div>
<span class="step-text pending">Strona WWW</span>
<span class="step-text pending">Strona WWW <span class="source-tag google">Google</span></span>
</div>
<div class="loading-step step-detail" id="step-status">
<div class="step-icon pending">
@ -1070,7 +1092,7 @@
<circle cx="12" cy="12" r="10" stroke-width="2"/>
</svg>
</div>
<span class="step-text pending">Status firmy</span>
<span class="step-text pending">Status firmy <span class="source-tag google">Google</span></span>
</div>
<!-- Phase 3: Save -->
@ -1129,15 +1151,15 @@ const allSteps = [
'step-save', 'step-audit'
];
// Detail step labels (defaults)
// Detail step labels (defaults) with source tags
const detailLabels = {
'step-rating': 'Ocena (rating)',
'step-reviews': 'Liczba opinii',
'step-photos': 'Zdjecia',
'step-hours': 'Godziny otwarcia',
'step-phone': 'Numer telefonu',
'step-website': 'Strona WWW',
'step-status': 'Status firmy'
'step-rating': 'Ocena <span class="source-tag google">Google</span>',
'step-reviews': 'Liczba opinii <span class="source-tag google">Google</span>',
'step-photos': 'Zdjecia <span class="source-tag google">Google</span>',
'step-hours': 'Godziny otwarcia <span class="source-tag google">Google</span>',
'step-phone': 'Numer telefonu <span class="source-tag google">Google</span>',
'step-website': 'Strona WWW <span class="source-tag google">Google</span>',
'step-status': 'Status firmy <span class="source-tag google">Google</span>'
};
// SVG icons for different states
@ -1159,9 +1181,9 @@ function resetSteps() {
const iconEl = stepEl.querySelector('.step-icon');
const textEl = stepEl.querySelector('.step-text');
// Reset label to default
// Reset label to default (use innerHTML to preserve source tags)
if (detailLabels[stepId]) {
textEl.textContent = detailLabels[stepId];
textEl.innerHTML = detailLabels[stepId];
}
if (index === 0) {