SRA Thane Dashboard
:root {
--primary-color: #2c3e50;
--secondary-color: #34495e;
--accent-color: #3498db;
--light-bg: #f5f6fa;
--card-bg: #ffffff;
--text-color: #2c3e50;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: var(--light-bg);
color: var(--text-color);
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
background-color: var(--primary-color);
color: white;
padding: 20px 0;
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
header h1 {
margin: 0;
text-align: center;
font-weight: 300;
}
.summary-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.card {
background: var(--card-bg);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
text-align: center;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.card h3 {
margin: 0 0 10px 0;
color: #7f8c8d;
font-size: 0.9em;
text-transform: uppercase;
}
.card .number {
font-size: 2.5em;
font-weight: bold;
color: var(--accent-color);
}
.charts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.chart-container {
background: var(--card-bg);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
height: 400px;
}
.chart-container h2 {
margin-top: 0;
font-size: 1.2em;
color: var(--secondary-color);
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
.data-table-container {
background: var(--card-bg);
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: var(--primary-color);
color: white;
font-weight: 500;
}
tr:hover {
background-color: #f1f1f1;
}
@media (max-width: 600px) {
.charts-grid {
grid-template-columns: 1fr;
}
}
Total Beneficiaries
25,615
Total PAP Tenements
4,192
Scheme Status Distribution
Schemes by Carpet Area (Sq. Ft.)
Beneficiaries by Status
Project Affected People (PAP)
Detailed Status Report
| Status |
Total Schemes |
225 Sq. Ft. |
269 Sq. Ft. |
300 Sq. Ft. |
Beneficiaries |
PAP Tenements |
| Completed & OC Given |
17 |
8 |
8 |
1 |
1,220 |
281 |
| Slum Bldg OC Given |
17 |
8 |
7 |
2 |
3,845 |
215 |
| Possession Given (No OC) |
13 |
13 |
0 |
0 |
1,299 |
51 |
| Work in Progress |
28 |
0 |
1 |
27 |
10,811 |
3,365 |
| Sanction in Process |
11 |
0 |
2 |
9 |
2,394 |
280 |
| Slum Rehab Area Declared (3C) |
20 |
0 |
0 |
20 |
6,046 |
0 |
| Cancelled |
2 |
0 |
2 |
0 |
768 |
27 |
// Data Configuration
const labels = ['Completed (OC)', 'Completed (Slum OC)', 'Possession (No OC)', 'Work in Progress', 'Sanction Process', 'Slum Rehab Declared', 'Cancelled'];
// Chart 1: Scheme Status
const ctxStatus = document.getElementById('statusChart').getContext('2d');
new Chart(ctxStatus, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Number of Schemes',
data: [17, 17, 13, 28, 11, 20, 2],
backgroundColor: '#3498db',
borderRadius: 4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false }
},
scales: {
y: { beginAtZero: true }
}
}
});
// Chart 2: Area Distribution (Stacked)
const ctxArea = document.getElementById('areaChart').getContext('2d');
new Chart(ctxArea, {
type: 'bar',
data: {
labels: labels,
datasets: [
{
label: '225 Sq. Ft.',
data: [8, 8, 13, 0, 0, 0, 0],
backgroundColor: '#e74c3c'
},
{
label: '269 Sq. Ft.',
data: [8, 7, 0, 1, 2, 0, 2],
backgroundColor: '#f1c40f'
},
{
label: '300 Sq. Ft.',
data: [1, 2, 0, 27, 9, 20, 0],
backgroundColor: '#2ecc71'
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { stacked: true },
y: { stacked: true, beginAtZero: true }
}
}
});
// Chart 3: Beneficiaries
const ctxBen = document.getElementById('beneficiaryChart').getContext('2d');
new Chart(ctxBen, {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
data: [1220, 3845, 1299, 10811, 2394, 6046, 768],
backgroundColor: [
'#3498db', '#2980b9', '#1abc9c', '#e67e22', '#9b59b6', '#34495e', '#e74c3c'
]
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'right' }
}
}
});
// Chart 4: PAP
const ctxPAP = document.getElementById('papChart').getContext('2d');
new Chart(ctxPAP, {
type: 'bar',
data: {
labels: ['Total PAP Tenements', 'Transferred PAP'],
datasets: [{
label: 'Count',
data: [4192, 526],
backgroundColor: ['#8e44ad', '#27ae60']
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { display: false }
}
}
});
