auto-claude: subtask-5-2 - Add company table with columns: name, overall score, security score, collaboration score, maturity level, tech icons, actions

This commit is contained in:
Maciej Pienczyn 2026-01-09 09:02:50 +01:00
parent e57af8bd78
commit b9ba00fae9
2 changed files with 589 additions and 5 deletions

View File

@ -3,7 +3,7 @@
"spec": "001-audyt-it",
"state": "building",
"subtasks": {
"completed": 16,
"completed": 17,
"total": 28,
"in_progress": 1,
"failed": 0
@ -18,8 +18,8 @@
"max": 1
},
"session": {
"number": 17,
"number": 18,
"started_at": "2026-01-09T08:11:54.054044"
},
"last_update": "2026-01-09T08:56:34.232396"
"last_update": "2026-01-09T09:00:29.741214"
}

View File

@ -266,7 +266,288 @@
margin-bottom: var(--spacing-sm);
}
/* Filters */
.filters-bar {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
flex-wrap: wrap;
align-items: center;
background: white;
padding: var(--spacing-md);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.filter-group {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.filter-group label {
font-size: var(--font-size-sm);
color: var(--text-secondary);
font-weight: 500;
}
.filter-group select,
.filter-group input {
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: var(--font-size-sm);
min-width: 150px;
}
.filter-group select:focus,
.filter-group input:focus {
outline: none;
border-color: var(--primary);
}
/* Table Container */
.table-container {
background: var(--surface);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
overflow: hidden;
}
.audit-table {
width: 100%;
border-collapse: collapse;
}
.audit-table th,
.audit-table td {
padding: var(--spacing-md);
text-align: left;
border-bottom: 1px solid var(--border);
}
.audit-table th {
background: var(--background);
font-weight: 600;
color: var(--text-secondary);
font-size: var(--font-size-sm);
text-transform: uppercase;
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.audit-table th:hover {
background: #e9ecef;
}
.audit-table th .sort-icon {
display: inline-block;
margin-left: var(--spacing-xs);
opacity: 0.3;
}
.audit-table th.sorted .sort-icon {
opacity: 1;
}
.audit-table th.sorted-asc .sort-icon::after {
content: '\2191';
}
.audit-table th.sorted-desc .sort-icon::after {
content: '\2193';
}
.audit-table tbody tr:hover {
background: var(--background);
}
.company-name-cell {
font-weight: 500;
max-width: 250px;
}
.company-name-cell a {
color: var(--text-primary);
text-decoration: none;
}
.company-name-cell a:hover {
color: var(--primary);
}
/* Score Cells */
.score-cell {
text-align: center;
font-weight: 600;
font-size: var(--font-size-base);
}
.score-badge {
display: inline-block;
padding: 4px 12px;
border-radius: var(--radius-sm);
min-width: 45px;
}
.score-good {
background: #dcfce7;
color: #166534;
}
.score-medium {
background: #fef3c7;
color: #92400e;
}
.score-poor {
background: #fee2e2;
color: #991b1b;
}
.score-na {
background: var(--border);
color: var(--text-secondary);
font-style: italic;
font-weight: normal;
}
/* Overall Score - larger */
.overall-score {
font-size: var(--font-size-lg);
font-weight: 700;
}
/* Maturity Badge */
.maturity-badge {
display: inline-block;
padding: 4px 10px;
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-weight: 500;
}
.maturity-badge.basic {
background: #fee2e2;
color: #991b1b;
}
.maturity-badge.developing {
background: #fef3c7;
color: #92400e;
}
.maturity-badge.established {
background: #dbeafe;
color: #1e40af;
}
.maturity-badge.advanced {
background: #dcfce7;
color: #166534;
}
/* Tech Icons */
.tech-icons {
display: flex;
gap: var(--spacing-xs);
flex-wrap: wrap;
}
.tech-icon {
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
}
.tech-icon.azure { background: #e8f4fc; color: #0078d4; }
.tech-icon.m365 { background: #fff3e0; color: #d83b01; }
.tech-icon.pbs { background: #e8f5e9; color: #2e7d32; }
.tech-icon.zabbix { background: #fee2e2; color: #dc2626; }
.tech-icon.edr { background: #e0f2fe; color: #0284c7; }
.tech-icon.dr { background: #f3e8ff; color: #7c3aed; }
.tech-icon.inactive { background: var(--border); color: var(--text-secondary); opacity: 0.4; }
/* Action buttons */
.action-buttons {
display: flex;
gap: var(--spacing-xs);
}
.btn-icon {
width: 32px;
height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--surface);
cursor: pointer;
transition: var(--transition);
text-decoration: none;
color: var(--text-primary);
}
.btn-icon:hover {
background: var(--background);
border-color: var(--primary);
color: var(--primary);
}
.btn-icon.edit {
color: var(--primary);
}
.btn-icon.edit:hover {
background: #e0f2fe;
border-color: var(--primary);
}
/* Legend */
.legend {
display: flex;
gap: var(--spacing-lg);
margin-bottom: var(--spacing-md);
font-size: var(--font-size-sm);
color: var(--text-secondary);
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.legend-dot {
width: 12px;
height: 12px;
border-radius: 2px;
}
.legend-dot.good { background: #dcfce7; border: 1px solid #166534; }
.legend-dot.medium { background: #fef3c7; border: 1px solid #92400e; }
.legend-dot.poor { background: #fee2e2; border: 1px solid #991b1b; }
/* Responsive */
@media (max-width: 1200px) {
.audit-table {
font-size: var(--font-size-sm);
}
.hide-mobile {
display: none;
}
}
@media (max-width: 768px) {
.maturity-grid {
grid-template-columns: repeat(2, 1fr);
@ -275,6 +556,21 @@
.stats-grid {
grid-template-columns: 1fr 1fr;
}
.filters-bar {
flex-direction: column;
align-items: stretch;
}
.filter-group {
flex-direction: column;
align-items: stretch;
}
.filter-group select,
.filter-group input {
min-width: 100%;
}
}
@media (max-width: 480px) {
@ -559,9 +855,297 @@
</div>
{% endif %}
</div>
<!-- Company Audit Table -->
<div class="section">
<h2>Lista firm</h2>
<!-- Filters -->
<div class="filters-bar">
<div class="filter-group">
<label for="filterMaturity">Poziom dojrzalosci:</label>
<select id="filterMaturity" onchange="applyFilters()">
<option value="">Wszystkie</option>
<option value="basic">Podstawowy</option>
<option value="developing">Rozwijajacy sie</option>
<option value="established">Ugruntowany</option>
<option value="advanced">Zaawansowany</option>
</select>
</div>
<div class="filter-group">
<label for="filterScore">Wynik ogolny:</label>
<select id="filterScore" onchange="applyFilters()">
<option value="">Wszystkie</option>
<option value="good">Dobry (80-100)</option>
<option value="medium">Sredni (40-79)</option>
<option value="poor">Slaby (0-39)</option>
<option value="none">Bez audytu</option>
</select>
</div>
<div class="filter-group">
<label for="filterSearch">Szukaj:</label>
<input type="text" id="filterSearch" placeholder="Nazwa firmy..." oninput="applyFilters()">
</div>
<div class="filter-group" style="margin-left: auto;">
<button class="btn btn-sm btn-outline" onclick="resetFilters()">Resetuj filtry</button>
</div>
</div>
<!-- Legend -->
<div class="legend">
<div class="legend-item">
<div class="legend-dot good"></div>
<span>80-100 (dobry)</span>
</div>
<div class="legend-item">
<div class="legend-dot medium"></div>
<span>40-79 (sredni)</span>
</div>
<div class="legend-item">
<div class="legend-dot poor"></div>
<span>0-39 (slaby)</span>
</div>
</div>
<!-- Table -->
{% if companies %}
<div class="table-container">
<table class="audit-table" id="auditTable">
<thead>
<tr>
<th data-sort="name">
Firma <span class="sort-icon"></span>
</th>
<th data-sort="overall" class="sorted sorted-desc">
Wynik ogolny <span class="sort-icon"></span>
</th>
<th data-sort="security" class="hide-mobile">
Bezpieczenstwo <span class="sort-icon"></span>
</th>
<th data-sort="collaboration" class="hide-mobile">
Wspolpraca <span class="sort-icon"></span>
</th>
<th data-sort="maturity">
Dojrzalosc <span class="sort-icon"></span>
</th>
<th class="hide-mobile">
Technologie
</th>
<th>Akcje</th>
</tr>
</thead>
<tbody id="auditTableBody">
{% for company in companies %}
{% set audit = company.it_audit %}
{% set maturity_level = 'none' %}
{% if audit %}
{% if audit.overall_score < 40 %}
{% set maturity_level = 'basic' %}
{% elif audit.overall_score < 60 %}
{% set maturity_level = 'developing' %}
{% elif audit.overall_score < 80 %}
{% set maturity_level = 'established' %}
{% else %}
{% set maturity_level = 'advanced' %}
{% endif %}
{% endif %}
<tr data-name="{{ company.name|lower }}"
data-overall="{{ audit.overall_score if audit else -1 }}"
data-security="{{ audit.security_score if audit else -1 }}"
data-collaboration="{{ audit.collaboration_score if audit else -1 }}"
data-maturity="{{ maturity_level }}">
<td class="company-name-cell">
<a href="{{ url_for('company_detail', company_id=company.id) }}">{{ company.name }}</a>
</td>
<td class="score-cell">
{% if audit %}
<span class="score-badge overall-score {{ 'score-good' if audit.overall_score >= 80 else ('score-medium' if audit.overall_score >= 40 else 'score-poor') }}">
{{ audit.overall_score }}
</span>
{% else %}
<span class="score-badge score-na">-</span>
{% endif %}
</td>
<td class="score-cell hide-mobile">
{% if audit %}
<span class="score-badge {{ 'score-good' if audit.security_score >= 80 else ('score-medium' if audit.security_score >= 40 else 'score-poor') }}">
{{ audit.security_score }}
</span>
{% else %}
<span class="score-badge score-na">-</span>
{% endif %}
</td>
<td class="score-cell hide-mobile">
{% if audit %}
<span class="score-badge {{ 'score-good' if audit.collaboration_score >= 80 else ('score-medium' if audit.collaboration_score >= 40 else 'score-poor') }}">
{{ audit.collaboration_score }}
</span>
{% else %}
<span class="score-badge score-na">-</span>
{% endif %}
</td>
<td>
{% if audit %}
<span class="maturity-badge {{ maturity_level }}">
{% if maturity_level == 'basic' %}Podstawowy
{% elif maturity_level == 'developing' %}Rozwijajacy
{% elif maturity_level == 'established' %}Ugruntowany
{% elif maturity_level == 'advanced' %}Zaawansowany
{% endif %}
</span>
{% else %}
<span class="maturity-badge" style="background: var(--border); color: var(--text-secondary);">Brak</span>
{% endif %}
</td>
<td class="hide-mobile">
{% if audit %}
<div class="tech-icons">
<span class="tech-icon {{ 'azure' if audit.has_azure_ad else 'inactive' }}" title="Azure AD / Entra ID">Az</span>
<span class="tech-icon {{ 'm365' if audit.has_m365 else 'inactive' }}" title="Microsoft 365">M3</span>
<span class="tech-icon {{ 'pbs' if audit.has_proxmox_pbs else 'inactive' }}" title="Proxmox Backup Server">PB</span>
<span class="tech-icon {{ 'zabbix' if audit.has_zabbix else 'inactive' }}" title="Zabbix Monitoring">Zb</span>
<span class="tech-icon {{ 'edr' if audit.has_edr else 'inactive' }}" title="EDR / XDR">ED</span>
<span class="tech-icon {{ 'dr' if audit.has_dr_plan else 'inactive' }}" title="Plan DR">DR</span>
</div>
{% else %}
<span class="text-muted">-</span>
{% endif %}
</td>
<td>
<div class="action-buttons">
<a href="{{ url_for('company_detail', company_id=company.id) }}" class="btn-icon" title="Zobacz profil">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
</svg>
</a>
{% if current_user.is_admin %}
<a href="{{ url_for('it_audit_form', company_id=company.id) }}" class="btn-icon edit" title="Edytuj audyt">
<svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
</svg>
</a>
{% endif %}
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% else %}
<div class="empty-state">
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" opacity="0.3">
<circle cx="40" cy="40" r="30" stroke="currentColor" stroke-width="3"/>
<path d="M30 40h20M40 30v20" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
</svg>
<h3>Brak firm do wyswietlenia</h3>
<p>Nie znaleziono firm z danymi audytu IT.</p>
</div>
{% endif %}
</div>
{% endblock %}
{% block extra_js %}
// IT Audit Dashboard JavaScript
// Currently placeholder - will be expanded in subtask 5-2
// Sorting state
let currentSort = { column: 'overall', direction: 'desc' };
// Sort table
function sortTable(column) {
const tbody = document.getElementById('auditTableBody');
if (!tbody) return;
const rows = Array.from(tbody.querySelectorAll('tr'));
const headers = document.querySelectorAll('.audit-table th[data-sort]');
// Toggle direction if same column
if (currentSort.column === column) {
currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
} else {
currentSort.column = column;
currentSort.direction = 'desc';
}
// Update header classes
headers.forEach(h => {
h.classList.remove('sorted', 'sorted-asc', 'sorted-desc');
if (h.dataset.sort === column) {
h.classList.add('sorted', 'sorted-' + currentSort.direction);
}
});
// Maturity order for sorting
const maturityOrder = { 'none': 0, 'basic': 1, 'developing': 2, 'established': 3, 'advanced': 4 };
// Sort rows
rows.sort((a, b) => {
let aVal, bVal;
if (column === 'name') {
aVal = a.dataset.name || '';
bVal = b.dataset.name || '';
} else if (column === 'maturity') {
aVal = maturityOrder[a.dataset.maturity] || 0;
bVal = maturityOrder[b.dataset.maturity] || 0;
} else {
aVal = parseFloat(a.dataset[column]) || -1;
bVal = parseFloat(b.dataset[column]) || -1;
}
if (aVal < bVal) return currentSort.direction === 'asc' ? -1 : 1;
if (aVal > bVal) return currentSort.direction === 'asc' ? 1 : -1;
return 0;
});
// Re-append rows
rows.forEach(row => tbody.appendChild(row));
}
// Setup sorting click handlers
document.querySelectorAll('.audit-table th[data-sort]').forEach(th => {
th.addEventListener('click', () => sortTable(th.dataset.sort));
});
// Filtering
function applyFilters() {
const maturity = document.getElementById('filterMaturity').value;
const score = document.getElementById('filterScore').value;
const search = document.getElementById('filterSearch').value.toLowerCase();
const rows = document.querySelectorAll('#auditTableBody tr');
rows.forEach(row => {
let show = true;
// Maturity filter
if (maturity && row.dataset.maturity !== maturity) {
show = false;
}
// Score filter
if (score && show) {
const overallScore = parseFloat(row.dataset.overall);
if (score === 'good' && (overallScore < 80 || overallScore < 0)) show = false;
else if (score === 'medium' && (overallScore < 40 || overallScore >= 80)) show = false;
else if (score === 'poor' && (overallScore < 0 || overallScore >= 40)) show = false;
else if (score === 'none' && overallScore >= 0) show = false;
}
// Search filter
if (search && show) {
if (!row.dataset.name.includes(search)) {
show = false;
}
}
row.style.display = show ? '' : 'none';
});
}
function resetFilters() {
document.getElementById('filterMaturity').value = '';
document.getElementById('filterScore').value = '';
document.getElementById('filterSearch').value = '';
applyFilters();
}
{% endblock %}