infinitx/fisierhtml / dashboard_buget_universitate.html
infinitx's picture
download
raw
22 kB
<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dashboard Buget Universitate Demo</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--bg: #f6f7fb;
--card: #ffffff;
--text: #111827;
--muted: #6b7280;
--line: #e5e7eb;
--blue: #0041dc;
--green: #16a34a;
--red: #dc2626;
--amber: #f59e0b;
--shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
--radius: 24px;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: radial-gradient(circle at top left, rgba(0, 65, 220, 0.10), transparent 34%), var(--bg);
color: var(--text);
}
.page {
width: min(1280px, calc(100% - 32px));
margin: 0 auto;
padding: 36px 0 48px;
}
.hero {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 28px;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border: 1px solid rgba(0, 65, 220, 0.14);
border-radius: 999px;
color: var(--blue);
background: rgba(0, 65, 220, 0.06);
font-size: 13px;
font-weight: 700;
margin-bottom: 14px;
}
h1 {
margin: 0;
font-size: clamp(34px, 5vw, 64px);
letter-spacing: -0.055em;
line-height: 0.94;
}
.subtitle {
margin: 14px 0 0;
color: var(--muted);
font-size: 16px;
max-width: 680px;
line-height: 1.65;
}
.meta-card {
background: rgba(255,255,255,0.72);
border: 1px solid rgba(229,231,235,0.86);
border-radius: 20px;
padding: 16px 18px;
min-width: 220px;
box-shadow: 0 12px 34px rgba(17, 24, 39, 0.05);
backdrop-filter: blur(10px);
}
.meta-card span { display: block; color: var(--muted); font-size: 13px; }
.meta-card strong { display: block; margin-top: 4px; font-size: 20px; }
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin-bottom: 18px;
}
.kpi {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px;
box-shadow: var(--shadow);
min-height: 144px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.kpi-label { color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.kpi-value { font-size: clamp(24px, 3vw, 36px); font-weight: 800; letter-spacing: -0.05em; margin-top: 12px; }
.kpi-note { color: var(--muted); font-size: 13px; margin-top: 10px; }
.positive { color: var(--green); }
.negative { color: var(--red); }
.blue { color: var(--blue); }
.dashboard-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 18px;
margin-top: 18px;
}
.panel {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 22px;
box-shadow: var(--shadow);
}
.panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 16px;
}
.panel h2 {
margin: 0;
font-size: 19px;
letter-spacing: -0.03em;
}
.panel small { color: var(--muted); font-weight: 600; }
.chart-wrap { height: 330px; }
.chart-wrap.small { height: 280px; }
.table-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; background: #fff; min-width: 850px; }
th, td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; background: #f9fafb; }
tr:last-child td { border-bottom: none; }
.pill { display:inline-flex; align-items:center; padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; }
.pill.in { background: rgba(22, 163, 74, 0.10); color: var(--green); }
.pill.out { background: rgba(220, 38, 38, 0.10); color: var(--red); }
.bar-list { display: grid; gap: 14px; }
.bar-row { display: grid; gap: 8px; }
.bar-top { display:flex; justify-content:space-between; gap:12px; font-size: 14px; font-weight: 700; }
.bar-track { height: 10px; background: #eef2ff; border-radius: 999px; overflow:hidden; }
.bar-fill { height: 100%; background: var(--blue); border-radius: 999px; }
.value-muted { color: var(--muted); font-weight: 600; }
@media (max-width: 980px) {
.hero { flex-direction: column; align-items: flex-start; }
.meta-card { width: 100%; }
.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
.page { width: min(100% - 20px, 1280px); padding-top: 22px; }
.kpi-grid { grid-template-columns: 1fr; }
.panel, .kpi { padding: 18px; border-radius: 20px; }
.chart-wrap, .chart-wrap.small { height: 260px; }
}
</style>
</head>
<body>
<main class="page">
<section class="hero">
<div>
<div class="eyebrow">Buget demo universitar · CSV static</div>
<h1>Dashboard buget universitate</h1>
<p class="subtitle">Vizualizare sintetică pentru 20 de intrări demo: venituri, cheltuieli, surse de finanțare, departamente și valori bugetare pentru perioada 2026.</p>
</div>
<div class="meta-card">
<span>Perioadă analizată</span>
<strong>2026 · MDL</strong>
</div>
</section>
<section class="kpi-grid">
<article class="kpi">
<div>
<div class="kpi-label">Total venituri</div>
<div class="kpi-value positive" id="kpi-venituri"></div>
</div>
<div class="kpi-note">Taxe, subvenții, granturi, cercetare și sponsorizări.</div>
</article>
<article class="kpi">
<div>
<div class="kpi-label">Total cheltuieli</div>
<div class="kpi-value negative" id="kpi-cheltuieli"></div>
</div>
<div class="kpi-note">Salarii, burse, utilități, IT, logistică și mentenanță.</div>
</article>
<article class="kpi">
<div>
<div class="kpi-label">Sold estimat</div>
<div class="kpi-value blue" id="kpi-sold"></div>
</div>
<div class="kpi-note">Diferența dintre venituri și cheltuieli.</div>
</article>
<article class="kpi">
<div>
<div class="kpi-label">Intrări CSV</div>
<div class="kpi-value" id="kpi-count"></div>
</div>
<div class="kpi-note">Set demo complet, pregătit pentru testare.</div>
</article>
</section>
<section class="dashboard-grid">
<article class="panel">
<div class="panel-head">
<div>
<h2>Venituri vs. cheltuieli</h2>
<small>Agregare pe categorie principală</small>
</div>
</div>
<div class="chart-wrap"><canvas id="categoryChart"></canvas></div>
</article>
<article class="panel">
<div class="panel-head">
<div>
<h2>Distribuție pe tip</h2>
<small>Ponderea fluxurilor bugetare</small>
</div>
</div>
<div class="chart-wrap small"><canvas id="typeChart"></canvas></div>
</article>
</section>
<section class="dashboard-grid">
<article class="panel">
<div class="panel-head">
<div>
<h2>Top subcategorii după valoare</h2>
<small>Cele mai mari linii bugetare din CSV</small>
</div>
</div>
<div class="chart-wrap"><canvas id="subChart"></canvas></div>
</article>
<article class="panel">
<div class="panel-head">
<div>
<h2>Departamente</h2>
<small>Valori cumulate pe departament</small>
</div>
</div>
<div class="bar-list" id="departmentBars"></div>
</article>
</section>
<section class="panel" style="margin-top:18px;">
<div class="panel-head">
<div>
<h2>Tabel detaliat</h2>
<small>Toate cele 20 de intrări din fișierul CSV</small>
</div>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>ID</th>
<th>Categorie</th>
<th>Subcategorie</th>
<th>Tip</th>
<th>Sursă finanțare</th>
<th>Valoare</th>
<th>Departament</th>
</tr>
</thead>
<tbody id="budgetRows"></tbody>
</table>
</div>
</section>
</main>
<script>
const records = [{"ID": 1, "Categorie": "Venituri", "Subcategorie": "Taxe de școlarizare", "Tip": "Venit", "Sursă_Finanțare": "Studenți", "Valoare": 2500000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Financiar"}, {"ID": 2, "Categorie": "Venituri", "Subcategorie": "Subvenții de la stat", "Tip": "Venit", "Sursă_Finanțare": "Buget de stat", "Valoare": 3200000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Financiar"}, {"ID": 3, "Categorie": "Venituri", "Subcategorie": "Proiecte europene", "Tip": "Venit", "Sursă_Finanțare": "Grant UE", "Valoare": 1800000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Cercetare"}, {"ID": 4, "Categorie": "Venituri", "Subcategorie": "Contracte cercetare", "Tip": "Venit", "Sursă_Finanțare": "Parteneriate", "Valoare": 900000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Cercetare"}, {"ID": 5, "Categorie": "Venituri", "Subcategorie": "Donații și sponsorizări", "Tip": "Venit", "Sursă_Finanțare": "Privat", "Valoare": 350000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Relații externe"}, {"ID": 6, "Categorie": "Cheltuieli", "Subcategorie": "Salarii cadre didactice", "Tip": "Cheltuială", "Sursă_Finanțare": "Fond salarial", "Valoare": 2800000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "HR"}, {"ID": 7, "Categorie": "Cheltuieli", "Subcategorie": "Salarii personal administrativ", "Tip": "Cheltuială", "Sursă_Finanțare": "Fond salarial", "Valoare": 1200000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "HR"}, {"ID": 8, "Categorie": "Cheltuieli", "Subcategorie": "Utilități", "Tip": "Cheltuială", "Sursă_Finanțare": "Electricitate/Gaz", "Valoare": 600000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 9, "Categorie": "Cheltuieli", "Subcategorie": "Întreținere clădiri", "Tip": "Cheltuială", "Sursă_Finanțare": "Mentenanță", "Valoare": 450000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 10, "Categorie": "Cheltuieli", "Subcategorie": "Echipamente IT", "Tip": "Cheltuială", "Sursă_Finanțare": "Investiții", "Valoare": 700000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "IT"}, {"ID": 11, "Categorie": "Cheltuieli", "Subcategorie": "Licențe software", "Tip": "Cheltuială", "Sursă_Finanțare": "IT", "Valoare": 300000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "IT"}, {"ID": 12, "Categorie": "Cheltuieli", "Subcategorie": "Burse studenți", "Tip": "Cheltuială", "Sursă_Finanțare": "Social", "Valoare": 950000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Studenți"}, {"ID": 13, "Categorie": "Cheltuieli", "Subcategorie": "Evenimente academice", "Tip": "Cheltuială", "Sursă_Finanțare": "Conferințe", "Valoare": 200000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Cercetare"}, {"ID": 14, "Categorie": "Cheltuieli", "Subcategorie": "Mobilitate internațională", "Tip": "Cheltuială", "Sursă_Finanțare": "Erasmus+", "Valoare": 400000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Relații externe"}, {"ID": 15, "Categorie": "Cheltuieli", "Subcategorie": "Marketing și promovare", "Tip": "Cheltuială", "Sursă_Finanțare": "Comunicare", "Valoare": 150000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Marketing"}, {"ID": 16, "Categorie": "Cheltuieli", "Subcategorie": "Servicii juridice", "Tip": "Cheltuială", "Sursă_Finanțare": "Consultanță", "Valoare": 120000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 17, "Categorie": "Cheltuieli", "Subcategorie": "Servicii externe", "Tip": "Cheltuială", "Sursă_Finanțare": "Outsourcing", "Valoare": 220000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 18, "Categorie": "Cheltuieli", "Subcategorie": "Materiale didactice", "Tip": "Cheltuială", "Sursă_Finanțare": "Consumabile", "Valoare": 180000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Academic"}, {"ID": 19, "Categorie": "Cheltuieli", "Subcategorie": "Transport și logistică", "Tip": "Cheltuială", "Sursă_Finanțare": "Operațional", "Valoare": 160000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 20, "Categorie": "Cheltuieli", "Subcategorie": "Fond de rezervă", "Tip": "Cheltuială", "Sursă_Finanțare": "Strategic", "Valoare": 300000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Financiar"}];
const byCategory = [{"Categorie": "Cheltuieli", "Valoare": 8730000}, {"Categorie": "Venituri", "Valoare": 8750000}];
const byDepartment = [{"Departament": "Financiar", "Valoare": 6000000}, {"Departament": "HR", "Valoare": 4000000}, {"Departament": "Cercetare", "Valoare": 2900000}, {"Departament": "Administrativ", "Valoare": 1550000}, {"Departament": "IT", "Valoare": 1000000}, {"Departament": "Studenți", "Valoare": 950000}, {"Departament": "Relații externe", "Valoare": 750000}, {"Departament": "Academic", "Valoare": 180000}, {"Departament": "Marketing", "Valoare": 150000}];
const bySubcategory = [{"ID": 2, "Categorie": "Venituri", "Subcategorie": "Subvenții de la stat", "Tip": "Venit", "Sursă_Finanțare": "Buget de stat", "Valoare": 3200000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Financiar"}, {"ID": 6, "Categorie": "Cheltuieli", "Subcategorie": "Salarii cadre didactice", "Tip": "Cheltuială", "Sursă_Finanțare": "Fond salarial", "Valoare": 2800000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "HR"}, {"ID": 1, "Categorie": "Venituri", "Subcategorie": "Taxe de școlarizare", "Tip": "Venit", "Sursă_Finanțare": "Studenți", "Valoare": 2500000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Financiar"}, {"ID": 3, "Categorie": "Venituri", "Subcategorie": "Proiecte europene", "Tip": "Venit", "Sursă_Finanțare": "Grant UE", "Valoare": 1800000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Cercetare"}, {"ID": 7, "Categorie": "Cheltuieli", "Subcategorie": "Salarii personal administrativ", "Tip": "Cheltuială", "Sursă_Finanțare": "Fond salarial", "Valoare": 1200000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "HR"}, {"ID": 12, "Categorie": "Cheltuieli", "Subcategorie": "Burse studenți", "Tip": "Cheltuială", "Sursă_Finanțare": "Social", "Valoare": 950000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Studenți"}, {"ID": 4, "Categorie": "Venituri", "Subcategorie": "Contracte cercetare", "Tip": "Venit", "Sursă_Finanțare": "Parteneriate", "Valoare": 900000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Cercetare"}, {"ID": 10, "Categorie": "Cheltuieli", "Subcategorie": "Echipamente IT", "Tip": "Cheltuială", "Sursă_Finanțare": "Investiții", "Valoare": 700000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "IT"}, {"ID": 8, "Categorie": "Cheltuieli", "Subcategorie": "Utilități", "Tip": "Cheltuială", "Sursă_Finanțare": "Electricitate/Gaz", "Valoare": 600000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 9, "Categorie": "Cheltuieli", "Subcategorie": "Întreținere clădiri", "Tip": "Cheltuială", "Sursă_Finanțare": "Mentenanță", "Valoare": 450000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 14, "Categorie": "Cheltuieli", "Subcategorie": "Mobilitate internațională", "Tip": "Cheltuială", "Sursă_Finanțare": "Erasmus+", "Valoare": 400000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Relații externe"}, {"ID": 5, "Categorie": "Venituri", "Subcategorie": "Donații și sponsorizări", "Tip": "Venit", "Sursă_Finanțare": "Privat", "Valoare": 350000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Relații externe"}, {"ID": 11, "Categorie": "Cheltuieli", "Subcategorie": "Licențe software", "Tip": "Cheltuială", "Sursă_Finanțare": "IT", "Valoare": 300000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "IT"}, {"ID": 20, "Categorie": "Cheltuieli", "Subcategorie": "Fond de rezervă", "Tip": "Cheltuială", "Sursă_Finanțare": "Strategic", "Valoare": 300000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Financiar"}, {"ID": 17, "Categorie": "Cheltuieli", "Subcategorie": "Servicii externe", "Tip": "Cheltuială", "Sursă_Finanțare": "Outsourcing", "Valoare": 220000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 13, "Categorie": "Cheltuieli", "Subcategorie": "Evenimente academice", "Tip": "Cheltuială", "Sursă_Finanțare": "Conferințe", "Valoare": 200000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Cercetare"}, {"ID": 18, "Categorie": "Cheltuieli", "Subcategorie": "Materiale didactice", "Tip": "Cheltuială", "Sursă_Finanțare": "Consumabile", "Valoare": 180000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Academic"}, {"ID": 19, "Categorie": "Cheltuieli", "Subcategorie": "Transport și logistică", "Tip": "Cheltuială", "Sursă_Finanțare": "Operațional", "Valoare": 160000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}, {"ID": 15, "Categorie": "Cheltuieli", "Subcategorie": "Marketing și promovare", "Tip": "Cheltuială", "Sursă_Finanțare": "Comunicare", "Valoare": 150000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Marketing"}, {"ID": 16, "Categorie": "Cheltuieli", "Subcategorie": "Servicii juridice", "Tip": "Cheltuială", "Sursă_Finanțare": "Consultanță", "Valoare": 120000, "Monedă": "MDL", "Perioadă": 2026, "Departament": "Administrativ"}];
const formatMDL = value => new Intl.NumberFormat('ro-MD', {
style: 'currency', currency: 'MDL', maximumFractionDigits: 0
}).format(value);
const venituri = records.filter(r => r.Tip === 'Venit').reduce((sum, r) => sum + r.Valoare, 0);
const cheltuieli = records.filter(r => r.Tip === 'Cheltuială').reduce((sum, r) => sum + r.Valoare, 0);
const sold = venituri - cheltuieli;
document.getElementById('kpi-venituri').textContent = formatMDL(venituri);
document.getElementById('kpi-cheltuieli').textContent = formatMDL(cheltuieli);
document.getElementById('kpi-sold').textContent = formatMDL(sold);
document.getElementById('kpi-count').textContent = records.length;
const chartDefaults = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { labels: { usePointStyle: true, boxWidth: 8, font: { family: 'Inter', weight: '600' } } },
tooltip: { callbacks: { label: context => `${context.label || context.dataset.label}: ${formatMDL(context.raw)}` } }
},
scales: {
y: { beginAtZero: true, ticks: { callback: value => new Intl.NumberFormat('ro-MD', { notation: 'compact' }).format(value) }, grid: { color: '#eef2f7' } },
x: { grid: { display: false } }
}
};
new Chart(document.getElementById('categoryChart'), {
type: 'bar',
data: {
labels: byCategory.map(item => item.Categorie),
datasets: [{ label: 'Valoare', data: byCategory.map(item => item.Valoare), borderRadius: 14, borderSkipped: false }]
},
options: chartDefaults
});
new Chart(document.getElementById('typeChart'), {
type: 'doughnut',
data: {
labels: ['Venituri', 'Cheltuieli'],
datasets: [{ data: [venituri, cheltuieli], borderWidth: 0 }]
},
options: { responsive: true, maintainAspectRatio: false, cutout: '72%', plugins: chartDefaults.plugins }
});
new Chart(document.getElementById('subChart'), {
type: 'bar',
data: {
labels: bySubcategory.slice(0, 8).map(item => item.Subcategorie),
datasets: [{ label: 'Valoare', data: bySubcategory.slice(0, 8).map(item => item.Valoare), borderRadius: 14, borderSkipped: false }]
},
options: { ...chartDefaults, indexAxis: 'y' }
});
const maxDepartmentValue = Math.max(...byDepartment.map(item => item.Valoare));
document.getElementById('departmentBars').innerHTML = byDepartment.map(item => `
<div class="bar-row">
<div class="bar-top"><span>${item.Departament}</span><span class="value-muted">${formatMDL(item.Valoare)}</span></div>
<div class="bar-track"><div class="bar-fill" style="width:${Math.round((item.Valoare / maxDepartmentValue) * 100)}%"></div></div>
</div>
`).join('');
document.getElementById('budgetRows').innerHTML = records.map(row => `
<tr>
<td>${row.ID}</td>
<td>${row.Categorie}</td>
<td><strong>${row.Subcategorie}</strong></td>
<td><span class="pill ${row.Tip === 'Venit' ? 'in' : 'out'}">${row.Tip}</span></td>
<td>${row.Sursă_Finanțare}</td>
<td><strong>${formatMDL(row.Valoare)}</strong></td>
<td>${row.Departament}</td>
</tr>
`).join('');
</script>
</body>
</html>

Xet Storage Details

Size:
22 kB
·
Xet hash:
4508347e2fe0b63bb0e3b1deedd695f9ddb0771a002b5008e245e996f73639c5

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.