DigiTax.lk — VAT Compliance Dashboard
:root {
–bg: #0a0f0d;
–surface: #111814;
–surface2: #182019;
–border: #1e2b20;
–accent: #00e676;
–accent2: #69f0ae;
–accent-dim: rgba(0,230,118,0.12);
–warn: #ffb300;
–warn-dim: rgba(255,179,0,0.12);
–danger: #ff5252;
–danger-dim: rgba(255,82,82,0.1);
–text: #e8f5e9;
–text2: #81a882;
–text3: #4a6b4b;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family: ‘Instrument Sans’, sans-serif;
background: var(–bg);
color: var(–text);
min-height: 100vh;
display: flex;
overflow-x: hidden;
}
/* SIDEBAR */
.sidebar {
width: 240px;
min-height: 100vh;
background: var(–surface);
border-right: 1px solid var(–border);
display: flex;
flex-direction: column;
flex-shrink: 0;
position: fixed;
top: 0; left: 0; bottom: 0;
z-index: 100;
}
.logo {
padding: 28px 24px 20px;
border-bottom: 1px solid var(–border);
}
.logo-mark {
font-family: ‘Syne’, sans-serif;
font-weight: 800;
font-size: 22px;
color: var(–accent);
letter-spacing: -0.5px;
}
.logo-mark span { color: var(–text2); font-weight: 400; }
.logo-sub {
font-family: ‘DM Mono’, monospace;
font-size: 10px;
color: var(–text3);
margin-top: 4px;
letter-spacing: 1px;
text-transform: uppercase;
}
.nav { padding: 16px 12px; flex: 1; }
.nav-section {
font-family: ‘DM Mono’, monospace;
font-size: 9px;
color: var(–text3);
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 12px 12px 6px;
}
.nav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
color: var(–text2);
transition: all 0.15s;
margin-bottom: 2px;
font-weight: 500;
}
.nav-item:hover { background: var(–surface2); color: var(–text); }
.nav-item.active {
background: var(–accent-dim);
color: var(–accent);
border: 1px solid rgba(0,230,118,0.2);
}
.nav-icon { font-size: 16px; width: 20px; text-align: center; }
.badge {
margin-left: auto;
background: var(–danger);
color: white;
font-size: 10px;
font-family: ‘DM Mono’, monospace;
padding: 2px 6px;
border-radius: 10px;
font-weight: 500;
}
.badge.warn { background: var(–warn); color: #000; }
.badge.green { background: var(–accent); color: #000; }
.sidebar-footer {
padding: 16px;
border-top: 1px solid var(–border);
}
.company-badge {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(–surface2);
border-radius: 8px;
border: 1px solid var(–border);
}
.avatar {
width: 32px; height: 32px;
background: var(–accent-dim);
border: 1px solid var(–accent);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-family: ‘Syne’, sans-serif;
font-weight: 800;
font-size: 12px;
color: var(–accent);
flex-shrink: 0;
}
.company-name { font-size: 13px; font-weight: 600; }
.company-plan { font-size: 11px; color: var(–text2); font-family: ‘DM Mono’, monospace; }
/* MAIN */
.main {
margin-left: 240px;
flex: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* TOPBAR */
.topbar {
padding: 20px 32px;
border-bottom: 1px solid var(–border);
display: flex;
align-items: center;
justify-content: space-between;
background: var(–surface);
position: sticky;
top: 0;
z-index: 50;
}
.page-title {
font-family: ‘Syne’, sans-serif;
font-weight: 700;
font-size: 20px;
}
.topbar-right { display: flex; align-items: center; gap: 12px; }
.period-selector {
background: var(–surface2);
border: 1px solid var(–border);
color: var(–text2);
font-family: ‘DM Mono’, monospace;
font-size: 12px;
padding: 8px 14px;
border-radius: 8px;
cursor: pointer;
appearance: none;
outline: none;
}
.btn {
padding: 9px 18px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: none;
font-family: ‘Instrument Sans’, sans-serif;
transition: all 0.15s;
}
.btn-primary {
background: var(–accent);
color: #000;
}
.btn-primary:hover { background: var(–accent2); }
.btn-outline {
background: transparent;
border: 1px solid var(–border);
color: var(–text2);
}
/* CONTENT */
.content { padding: 32px; flex: 1; }
/* ALERT BANNER */
.alert-banner {
background: var(–warn-dim);
border: 1px solid rgba(255,179,0,0.3);
border-radius: 12px;
padding: 14px 20px;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
animation: fadeSlideDown 0.4s ease;
}
.alert-icon { font-size: 20px; flex-shrink: 0; }
.alert-text { font-size: 14px; color: var(–warn); }
.alert-text strong { color: #fff; }
.alert-close {
margin-left: auto;
color: var(–text3);
cursor: pointer;
font-size: 18px;
flex-shrink: 0;
background: none; border: none;
line-height: 1;
}
/* STATS GRID */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 28px;
}
.stat-card {
background: var(–surface);
border: 1px solid var(–border);
border-radius: 14px;
padding: 22px;
position: relative;
overflow: hidden;
transition: border-color 0.2s;
}
.stat-card:hover { border-color: var(–text3); }
.stat-card::before {
content: ”;
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(–accent);
opacity: 0;
transition: opacity 0.2s;
}
.stat-card:hover::before { opacity: 1; }
.stat-label {
font-family: ‘DM Mono’, monospace;
font-size: 10px;
color: var(–text3);
letter-spacing: 1.2px;
text-transform: uppercase;
margin-bottom: 10px;
}
.stat-value {
font-family: ‘Syne’, sans-serif;
font-weight: 800;
font-size: 28px;
letter-spacing: -1px;
line-height: 1;
margin-bottom: 8px;
}
.stat-value.green { color: var(–accent); }
.stat-value.warn { color: var(–warn); }
.stat-value.danger { color: var(–danger); }
.stat-change {
font-size: 12px;
color: var(–text3);
display: flex;
align-items: center;
gap: 4px;
}
.stat-change.up { color: var(–accent); }
.stat-change.down { color: var(–danger); }
.stat-icon {
position: absolute;
top: 20px; right: 20px;
font-size: 24px;
opacity: 0.25;
}
/* MAIN GRID */
.main-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 20px;
margin-bottom: 20px;
}
.card {
background: var(–surface);
border: 1px solid var(–border);
border-radius: 14px;
overflow: hidden;
}
.card-header {
padding: 20px 24px 16px;
border-bottom: 1px solid var(–border);
display: flex;
align-items: center;
justify-content: space-between;
}
.card-title {
font-family: ‘Syne’, sans-serif;
font-weight: 700;
font-size: 15px;
}
.card-subtitle {
font-size: 12px;
color: var(–text3);
font-family: ‘DM Mono’, monospace;
margin-top: 2px;
}
.card-body { padding: 24px; }
/* THRESHOLD METER */
.threshold-section { padding: 24px; }
.threshold-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 12px;
}
.threshold-label {
font-family: ‘DM Mono’, monospace;
font-size: 11px;
color: var(–text2);
text-transform: uppercase;
letter-spacing: 1px;
}
.threshold-values {
font-family: ‘Syne’, sans-serif;
font-weight: 700;
font-size: 22px;
}
.threshold-values span { font-size: 13px; color: var(–text3); font-weight: 400; font-family: ‘DM Mono’, monospace; }
.threshold-bar-bg {
height: 12px;
background: var(–surface2);
border-radius: 100px;
border: 1px solid var(–border);
overflow: hidden;
margin-bottom: 8px;
}
.threshold-bar {
height: 100%;
border-radius: 100px;
background: linear-gradient(90deg, var(–accent) 0%, var(–warn) 100%);
transition: width 1s cubic-bezier(.4,0,.2,1);
position: relative;
}
.threshold-bar::after {
content: ”;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(90deg, rgba(255,255,255,0.15) 0%, transparent 100%);
border-radius: inherit;
}
.threshold-meta {
display: flex;
justify-content: space-between;
font-family: ‘DM Mono’, monospace;
font-size: 11px;
color: var(–text3);
}
.threshold-meta .pct { color: var(–warn); font-weight: 500; }
/* QUARTERLY CHART */
.chart-area { padding: 0 24px 24px; }
.chart-bars {
display: flex;
align-items: flex-end;
gap: 10px;
height: 120px;
margin-top: 16px;
}
.bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bar {
width: 100%;
border-radius: 6px 6px 0 0;
background: var(–accent-dim);
border: 1px solid rgba(0,230,118,0.2);
transition: background 0.2s;
cursor: pointer;
position: relative;
}
.bar:hover { background: var(–accent); }
.bar.current { background: var(–accent); border-color: var(–accent); }
.bar-label {
font-family: ‘DM Mono’, monospace;
font-size: 10px;
color: var(–text3);
text-align: center;
}
.bar-val {
font-family: ‘DM Mono’, monospace;
font-size: 10px;
color: var(–text2);
text-align: center;
}
/* DEADLINE TIMELINE */
.timeline { padding: 0 24px 24px; }
.deadline-item {
display: flex;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(–border);
position: relative;
}
.deadline-item:last-child { border-bottom: none; }
.deadline-dot {
width: 10px; height: 10px;
border-radius: 50%;
margin-top: 4px;
flex-shrink: 0;
}
.deadline-dot.green { background: var(–accent); box-shadow: 0 0 6px var(–accent); }
.deadline-dot.warn { background: var(–warn); box-shadow: 0 0 6px var(–warn); }
.deadline-dot.danger { background: var(–danger); box-shadow: 0 0 6px var(–danger); }
.deadline-dot.muted { background: var(–text3); }
.deadline-info { flex: 1; }
.deadline-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.deadline-date {
font-family: ‘DM Mono’, monospace;
font-size: 11px;
color: var(–text3);
}
.deadline-status {
font-family: ‘DM Mono’, monospace;
font-size: 11px;
padding: 3px 8px;
border-radius: 6px;
align-self: center;
white-space: nowrap;
}
.deadline-status.done { background: var(–accent-dim); color: var(–accent); }
.deadline-status.upcoming { background: var(–warn-dim); color: var(–warn); }
.deadline-status.due { background: var(–danger-dim); color: var(–danger); }
/* BOTTOM GRID */
.bottom-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* FILINGS TABLE */
.table { width: 100%; border-collapse: collapse; }
.table th {
font-family: ‘DM Mono’, monospace;
font-size: 10px;
color: var(–text3);
text-transform: uppercase;
letter-spacing: 1px;
padding: 10px 16px;
text-align: left;
border-bottom: 1px solid var(–border);
}
.table td {
padding: 13px 16px;
font-size: 13px;
border-bottom: 1px solid rgba(30,43,32,0.5);
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: rgba(255,255,255,0.015); }
.pill {
display: inline-block;
padding: 3px 8px;
border-radius: 6px;
font-family: ‘DM Mono’, monospace;
font-size: 11px;
}
.pill.filed { background: var(–accent-dim); color: var(–accent); }
.pill.pending { background: var(–warn-dim); color: var(–warn); }
.pill.overdue { background: var(–danger-dim); color: var(–danger); }
.mono { font-family: ‘DM Mono’, monospace; font-size: 12px; color: var(–text2); }
/* VAT CALCULATOR */
.calc-body { padding: 24px; }
.form-group { margin-bottom: 18px; }
.form-label {
font-family: ‘DM Mono’, monospace;
font-size: 11px;
color: var(–text3);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 8px;
display: block;
}
.form-input {
width: 100%;
background: var(–surface2);
border: 1px solid var(–border);
color: var(–text);
font-family: ‘DM Mono’, monospace;
font-size: 14px;
padding: 10px 14px;
border-radius: 8px;
outline: none;
transition: border-color 0.15s;
}
.form-input:focus { border-color: var(–accent); }
.calc-result {
background: var(–accent-dim);
border: 1px solid rgba(0,230,118,0.25);
border-radius: 10px;
padding: 16px;
margin-top: 4px;
}
.calc-result-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
font-size: 13px;
}
.calc-result-row.total {
border-top: 1px solid rgba(0,230,118,0.2);
margin-top: 6px;
padding-top: 10px;
font-family: ‘Syne’, sans-serif;
font-weight: 700;
font-size: 16px;
color: var(–accent);
}
.calc-result-label { color: var(–text2); }
.calc-result-val { font-family: ‘DM Mono’, monospace; }
/* ANIMATIONS */
@keyframes fadeSlideDown {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.stats-grid .stat-card:nth-child(1) { animation: fadeIn 0.4s ease 0.05s both; }
.stats-grid .stat-card:nth-child(2) { animation: fadeIn 0.4s ease 0.1s both; }
.stats-grid .stat-card:nth-child(3) { animation: fadeIn 0.4s ease 0.15s both; }
.stats-grid .stat-card:nth-child(4) { animation: fadeIn 0.4s ease 0.2s both; }
.section-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 28px 0 20px;
}
.section-divider-title {
font-family: ‘Syne’, sans-serif;
font-weight: 700;
font-size: 13px;
color: var(–text3);
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 1px;
}
.section-divider-line { flex: 1; height: 1px; background: var(–border); }
/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(–bg); }
::-webkit-scrollbar-thumb { background: var(–border); border-radius: 10px; }
.tag {
display: inline-block;
font-family: ‘DM Mono’, monospace;
font-size: 10px;
padding: 2px 8px;
border-radius: 4px;
background: var(–surface2);
border: 1px solid var(–border);
color: var(–text3);
margin-left: 6px;
}
Q1 2026 (Jan–Mar)
Q4 2025 (Oct–Dec)
Q3 2025 (Jul–Sep)
⚠
Action Required: Q1 2026 VAT return is due in 28 days (30 Apr 2026). LKR 2,340,000 payable to IRD.
₹
LKR Revenue (Q1)
13.0M
↑ 18% vs Q4 2025
%
VAT Collected (Q1)
2.34M
LKR @ 18% rate
◷
Annual Threshold
78%
↑ LKR 46.8M / 60M
✓
Compliance Score
96%
All filings on time
LKR 0
LKR 13.2M remaining before mandatory registration
LKR 60M
LKR 0
LKR 2M from quarterly trigger!
LKR 15M
Q3 2025 VAT Return
Filed 28 Oct 2025
Filed
Q3 2025 Payment
Remitted 18 Nov 2025
Paid
Q4 2025 VAT Return
Filed 29 Jan 2026
Filed
Q1 2026 VAT Return
Due 30 Apr 2026
28 days
Q1 2026 Payment
Due 20 May 2026
48 days
Q2 2026 VAT Return
Due 31 Jul 2026
119 days
Revenue (USD)
Exchange Rate (USD → LKR)
Revenue in LKR
LKR 15,250,000
VAT Rate
18%
VAT Payable
LKR 2,745,000
| Period |
LKR Revenue |
VAT Amount |
Filed Date |
Payment Date |
Status |
Reference |
| Q1 2026 |
13,000,000 |
2,340,000 |
— |
— |
Pending |
— |
| Q4 2025 |
11,200,000 |
2,016,000 |
29 Jan 2026 |
18 Feb 2026 |
Filed & Paid |
IRD/2026/Q4/0041 |
| Q3 2025 |
11,000,000 |
1,980,000 |
28 Oct 2025 |
18 Nov 2025 |
Filed & Paid |
IRD/2025/Q3/0038 |
// Animate threshold bars on load
window.addEventListener(‘load’, () => {
setTimeout(() => {
document.getElementById(‘threshBar’).style.width = ‘78%’;
document.getElementById(‘threshBar2’).style.width = ‘87%’;
}, 300);
});
// VAT Calculator
function calcVAT() {
const usd = parseFloat(document.getElementById(‘usdInput’).value) || 0;
const rate = parseFloat(document.getElementById(‘rateInput’).value) || 305;
const lkr = usd * rate;
const vat = lkr * 0.18;
document.getElementById(‘lkrRev’).textContent = ‘LKR ‘ + lkr.toLocaleString(‘en-LK’, {maximumFractionDigits: 0});
document.getElementById(‘vatPayable’).textContent = ‘LKR ‘ + vat.toLocaleString(‘en-LK’, {maximumFractionDigits: 0});
}
calcVAT();
// Nav interaction
document.querySelectorAll(‘.nav-item’).forEach(item => {
item.addEventListener(‘click’, () => {
document.querySelectorAll(‘.nav-item’).forEach(i => i.classList.remove(‘active’));
item.classList.add(‘active’);
});
});
