Gokuldevx/civic-fix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Gokuldevx
2026-02-02 10:52:20 +05:30
parent 2767fdf674
commit ab7373fc34
73 changed files with 2 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/templates/dashboard/citizen_dashboard.html
+289
View File
@@ -0,0 +1,289 @@
{% extends "core/base.html" %}
{% block title %}Citizen Dashboard - CivixFix{% endblock %}
{% block extra_css %}
<style>
.dashboard-card {
transition: transform 0.2s;
}
.dashboard-card:hover {
transform: translateY(-2px);
}
.map-container {
height: 300px;
border-radius: 8px;
overflow: hidden;
border: 2px dashed #dee2e6;
}
.issue-status {
font-size: 0.8rem;
}
</style>
{% endblock %}
{% block content %}
<div class="container-fluid py-4">
<div class="row">
<!-- Sidebar - Quick Actions -->
<div class="col-md-3">
<div class="card shadow-sm dashboard-card">
<div class="card-body text-center">
<h5 class="card-title">Welcome, {{ user.username }}</h5>
<p class="text-muted">Citizen Dashboard</p>
<div class="d-grid gap-2 mb-3">
<button class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#reportIssueModal">
<i class="fas fa-plus me-2"></i>Report New Issue
</button>
</div>
<hr>
<h6>Quick Stats</h6>
<div class="row text-center">
<div class="col-6">
<div class="bg-light p-2 rounded">
<h4 class="mb-0 text-primary">{{ user_issues.count }}</h4>
<small>My Reports</small>
</div>
</div>
<div class="col-6">
<div class="bg-light p-2 rounded">
<h4 class="mb-0 text-success">
{{ resolved_count }}
</h4>
<small>Resolved</small>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Content - Recent Issues -->
<div class="col-md-9">
<!-- Welcome Message -->
<div class="card shadow-sm dashboard-card mb-4">
<div class="card-body">
<h4>Welcome to CivixFix!</h4>
<p class="text-muted mb-0">
Report community issues, track their progress, and help make your neighborhood better.
Start by reporting an issue using the button on the left.
</p>
</div>
</div>
<!-- My Recent Issues -->
<div class="card shadow-sm dashboard-card">
<div class="card-header">
<h5 class="mb-0">My Recent Reports</h5>
</div>
<div class="card-body">
{% for issue in user_issues %}
<div class="card mb-3">
<div class="card-body">
<div class="d-flex justify-content-between align-items-start">
<div class="flex-grow-1">
<h6 class="card-title mb-1">{{ issue.title }}</h6>
<p class="card-text text-muted mb-2 small">
{{ issue.description|truncatewords:15 }}
</p>
<div class="d-flex gap-2 align-items-center">
<span class="badge
{% if issue.department.name == 'Roads & Transportation' %} bg-primary
{% elif issue.department.name == 'Sanitation & Waste Management' %} bg-success
{% elif issue.department.name == 'Public Safety' %} bg-danger
{% elif issue.department.name == 'Water & Sewage' %} bg-info text-dark
{% elif issue.department.name == 'Parks & Recreation' %} bg-warning text-dark
{% elif issue.department.name == 'Electricity & Utilities' %} bg-dark
{% elif issue.department.name == 'Environmental Services' %} bg-secondary
{% elif issue.department.name == 'Public Works' %} bg-teal text-white
{% else %} bg-light text-dark
{% endif %}">
{{ issue.department.name|default:"No Department" }}
</span>
<!-- 🔹 Status badge -->
<span class="badge bg-{% if issue.status == 'resolved' %}success
{% elif issue.status == 'in_progress' %}warning
{% else %}primary{% endif %} issue-status">
{{ issue.get_status_display }}
</span>
<small class="text-muted">{{ issue.created_at|date:"M d, Y" }}</small>
</div>
</div>
{% if issue.photo %}
<div class="ms-3">
<img src="{{ issue.photo.url }}" alt="Issue photo" class="img-fluid rounded"
style="max-height: 60px; max-width: 80px;">
</div>
{% endif %}
</div>
</div>
</div>
{% empty %}
<div class="text-center py-4">
<i class="fas fa-inbox fa-3x text-muted mb-3"></i>
<h5>No issues reported yet</h5>
<p class="text-muted">Click "Report New Issue" to get started!</p>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<!-- Report Issue Modal -->
<div class="modal fade" id="reportIssueModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Report New Issue</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="issueForm" method="post" enctype="multipart/form-data" action="{% url 'report_issue' %}">
{% csrf_token %}
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show mb-3">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
{% endif %}
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Issue Title*</label>
{{ issue_form.title }}
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Description*</label>
{{ issue_form.description }}
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Location*</label>
{{ issue_form.location }}
<small class="text-muted">Click on the map to select location</small>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Photo</label>
{{ issue_form.photo }}
</div>
</div>
</div>
<!-- Hidden latitude/longitude fields -->
{{ issue_form.latitude }}
{{ issue_form.longitude }}
<div class="map-container mb-3">
<div id="map" style="height: 100%;"></div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" form="issueForm" class="btn btn-primary">
<i class="fas fa-paper-plane me-2"></i>Report Issue
</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
document.addEventListener("DOMContentLoaded", () => {
let map = null, marker = null;
// Lazy load Leaflet only when modal opens
const ensureLeafletLoaded = () => {
return new Promise((resolve) => {
if (window.L) return resolve();
const css = document.createElement("link");
css.rel = "stylesheet";
css.href = "https://unpkg.com/leaflet@1.9.3/dist/leaflet.css";
document.head.appendChild(css);
const js = document.createElement("script");
js.src = "https://unpkg.com/leaflet@1.9.3/dist/leaflet.js";
js.onload = resolve;
document.body.appendChild(js);
});
};
const initMap = () => {
if (map) return;
map = L.map("map", {
center: [12.9716, 77.5946],
zoom: 13
});
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "&copy; OpenStreetMap contributors",
maxZoom: 19
}).addTo(map);
map.on("click", (e) => {
if (!marker) {
marker = L.marker(e.latlng).addTo(map);
} else {
marker.setLatLng(e.latlng);
}
marker.bindPopup("Selected location").openPopup();
// update hidden fields immediately
document.getElementById("id_latitude").value = e.latlng.lat.toFixed(6);
document.getElementById("id_longitude").value = e.latlng.lng.toFixed(6);
// defer reverse geocode
requestIdleCallback(() => {
fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${e.latlng.lat}&lon=${e.latlng.lng}`)
.then(r => r.json())
.then(data => {
document.getElementById("id_location").value =
data?.display_name ||
`Lat: ${e.latlng.lat.toFixed(6)}, Lng: ${e.latlng.lng.toFixed(6)}`;
})
.catch(() => {
document.getElementById("id_location").value =
`Lat: ${e.latlng.lat.toFixed(6)}, Lng: ${e.latlng.lng.toFixed(6)}`;
});
});
});
};
const modal = document.getElementById("reportIssueModal");
modal.addEventListener("shown.bs.modal", async () => {
await ensureLeafletLoaded();
initMap();
// fix resize/centering after animation
setTimeout(() => {
map.invalidateSize();
if (marker) map.setView(marker.getLatLng(), 15);
}, 200);
});
});
</script>
{% endblock %}
core/templates/dashboard/department_dashboard.html
+80
View File
@@ -0,0 +1,80 @@
{% extends "core/base.html" %}
{% block content %}
<div class="container my-5">
<div class="card shadow-lg">
<div class="card-header bg-primary text-white">
<h3>Department Dashboard</h3>
<p>
Welcome, {{ request.user.username }}. Department:
{% for dept in departments %}
<span class="badge bg-light text-dark">{{ dept.name }}</span>
{% empty %}
<span class="text-muted">No department assigned.</span>
{% endfor %}
</p>
</div>
<div class="card-body">
{% if issues %}
<table class="table table-bordered table-hover">
<thead class="table-light">
<tr>
<th>#</th>
<th>Title</th>
<th>Reported By</th>
<th>Location</th>
<th>Status</th>
<th>Created At</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for issue in issues %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ issue.title }}</td>
<td>{{ issue.reporter.username }}</td>
<td>{{ issue.location }}</td>
<td>
{% if issue.status == "reported" %}
<span class="badge bg-danger">Reported</span>
{% elif issue.status == "acknowledged" %}
<span class="badge bg-info text-dark">Acknowledged</span>
{% elif issue.status == "in_progress" %}
<span class="badge bg-warning text-dark">In Progress</span>
{% elif issue.status == "resolved" %}
<span class="badge bg-success">Resolved</span>
{% else %}
<span class="badge bg-secondary">Unknown</span>
{% endif %}
</td>
<td>{{ issue.created_at|date:"M d, Y H:i" }}</td>
<td>
{% if issue.status in "reported,acknowledged" %}
<form method="post" action="{% url 'update_issue_status' issue.id %}">
{% csrf_token %}
<input type="hidden" name="status" value="in_progress">
<button type="submit" class="btn btn-sm btn-warning">In Progress</button>
</form>
{% elif issue.status == "in_progress" %}
<form method="post" action="{% url 'update_issue_status' issue.id %}">
{% csrf_token %}
<input type="hidden" name="status" value="resolved">
<button type="submit" class="btn btn-sm btn-success">Resolved</button>
</form>
{% else %}
<span class="text-muted">No actions</span>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p class="text-muted">No issues assigned to your departments yet.</p>
{% endif %}
</div>
</div>
</div>
{% endblock %}
core/templates/dashboard/superadmin_dashboard.html
+34
View File
@@ -0,0 +1,34 @@
{% extends "core/base.html" %}
{% block content %}
<div class="container my-5">
<div class="card shadow-lg">
<div class="card-header bg-dark text-white">
<h3>Super Admin Dashboard</h3>
</div>
<div class="card-body">
<p>Welcome, {{ request.user.username }} <i class="fas fa-crown text-warning fw-bold"></i></p>
<ul class="list-group">
<li class="list-group-item">
<i class="fas fa-users me-2 text-primary"></i>
<a href="{% url 'manage_users' %}">Manage Users</a>
</li>
<li class="list-group-item">
<i class="fas fa-building me-2 text-success"></i>
<a href="{% url 'manage_departments' %}">Manage Departments</a>
</li>
<li class="list-group-item">
<i class="fas fa-exclamation-circle me-2 text-danger"></i>
<a href="{% url 'manage_issues' %}">Manage Issues</a>
</li>
<li class="list-group-item">
<i class="fas fa-chart-line me-2 text-warning"></i>
<a href="{% url 'superadmin_reports' %}">View Analytics & Reports</a>
</li>
</ul>
</div>
</div>
</div>
{% endblock %}