parent
6a8b5c4d97
commit
76b0b02933
@ -0,0 +1,302 @@ |
|||||||
|
{% extends "admin/base_site.html" %} |
||||||
|
{% load static %} |
||||||
|
|
||||||
|
{% block extrahead %} |
||||||
|
{{ block.super }} |
||||||
|
<style> |
||||||
|
.dashboard-container { |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.filter-switch { |
||||||
|
margin-bottom: 20px; |
||||||
|
padding: 15px; |
||||||
|
background: #f8f8f8; |
||||||
|
border: 1px solid #ddd; |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.filter-switch label { |
||||||
|
font-weight: bold; |
||||||
|
margin-right: 10px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.filter-switch input[type="checkbox"] { |
||||||
|
cursor: pointer; |
||||||
|
width: 18px; |
||||||
|
height: 18px; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
|
||||||
|
.status-section { |
||||||
|
margin-bottom: 30px; |
||||||
|
background: white; |
||||||
|
border: 1px solid #ddd; |
||||||
|
border-radius: 4px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.status-header { |
||||||
|
background: #417690; |
||||||
|
color: white; |
||||||
|
padding: 12px 15px; |
||||||
|
font-weight: bold; |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
.status-header .status-name { |
||||||
|
font-size: 16px; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.status-header .count { |
||||||
|
font-size: 13px; |
||||||
|
opacity: 0.9; |
||||||
|
} |
||||||
|
|
||||||
|
.prospect-table { |
||||||
|
width: 100%; |
||||||
|
border-collapse: collapse; |
||||||
|
} |
||||||
|
|
||||||
|
.prospect-table thead { |
||||||
|
background: #f9f9f9; |
||||||
|
border-bottom: 2px solid #ddd; |
||||||
|
} |
||||||
|
|
||||||
|
.prospect-table thead th { |
||||||
|
padding: 10px 12px; |
||||||
|
text-align: left; |
||||||
|
font-weight: 600; |
||||||
|
font-size: 13px; |
||||||
|
color: #666; |
||||||
|
border-bottom: 1px solid #ddd; |
||||||
|
} |
||||||
|
|
||||||
|
.prospect-table tbody tr { |
||||||
|
border-bottom: 1px solid #eee; |
||||||
|
transition: background-color 0.2s; |
||||||
|
} |
||||||
|
|
||||||
|
.prospect-table tbody tr:hover { |
||||||
|
background: #f5f5f5; |
||||||
|
} |
||||||
|
|
||||||
|
.prospect-table tbody td { |
||||||
|
padding: 10px 12px; |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
.prospect-table tbody td a { |
||||||
|
color: #417690; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
|
||||||
|
.prospect-table tbody td a:hover { |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
|
||||||
|
.prospect-name { |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
.prospect-entity { |
||||||
|
color: #666; |
||||||
|
font-style: italic; |
||||||
|
} |
||||||
|
|
||||||
|
.prospect-date { |
||||||
|
color: #666; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
|
||||||
|
.prospect-status { |
||||||
|
display: inline-block; |
||||||
|
padding: 3px 8px; |
||||||
|
background: #e8f4f8; |
||||||
|
border-radius: 3px; |
||||||
|
font-size: 11px; |
||||||
|
color: #417690; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
.empty-state { |
||||||
|
padding: 40px 15px; |
||||||
|
text-align: center; |
||||||
|
color: #999; |
||||||
|
font-style: italic; |
||||||
|
} |
||||||
|
</style> |
||||||
|
{% endblock %} |
||||||
|
|
||||||
|
{% block content %} |
||||||
|
<div class="dashboard-container"> |
||||||
|
|
||||||
|
<div class="filter-switch"> |
||||||
|
<label for="my-prospects-toggle"> |
||||||
|
<input type="checkbox" id="my-prospects-toggle" {% if filter_my %}checked{% endif %}> |
||||||
|
Show only my prospects |
||||||
|
</label> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- SHOULD_TEST Section --> |
||||||
|
<div class="status-section"> |
||||||
|
<div class="status-header"> |
||||||
|
<span class="status-name">SHOULD TEST</span> |
||||||
|
<span class="count">({{ should_test_prospects.count }})</span> |
||||||
|
</div> |
||||||
|
{% if should_test_prospects %} |
||||||
|
<table class="prospect-table"> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th>Name</th> |
||||||
|
<th>Entity</th> |
||||||
|
<th>Phone</th> |
||||||
|
<th>Last Update</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
{% for prospect in should_test_prospects %} |
||||||
|
<tr> |
||||||
|
<td> |
||||||
|
<a href="{% url 'admin:biz_prospect_change' prospect.id %}" class="prospect-name"> |
||||||
|
{{ prospect.first_name|default:"" }} {{ prospect.last_name|default:"" }} |
||||||
|
</a> |
||||||
|
</td> |
||||||
|
<td class="prospect-entity">{{ prospect.entity_names }}</td> |
||||||
|
<td>{{ prospect.phone|default:"-" }}</td> |
||||||
|
<td class="prospect-date">{{ prospect.last_update|date:"d/m/Y H:i" }}</td> |
||||||
|
</tr> |
||||||
|
{% endfor %} |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
{% else %} |
||||||
|
<div class="empty-state">No prospects</div> |
||||||
|
{% endif %} |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- TESTING Section --> |
||||||
|
<div class="status-section"> |
||||||
|
<div class="status-header"> |
||||||
|
<span class="status-name">TESTING</span> |
||||||
|
<span class="count">({{ testing_prospects.count }})</span> |
||||||
|
</div> |
||||||
|
{% if testing_prospects %} |
||||||
|
<table class="prospect-table"> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th>Name</th> |
||||||
|
<th>Entity</th> |
||||||
|
<th>Phone</th> |
||||||
|
<th>Last Update</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
{% for prospect in testing_prospects %} |
||||||
|
<tr> |
||||||
|
<td> |
||||||
|
<a href="{% url 'admin:biz_prospect_change' prospect.id %}" class="prospect-name"> |
||||||
|
{{ prospect.first_name|default:"" }} {{ prospect.last_name|default:"" }} |
||||||
|
</a> |
||||||
|
</td> |
||||||
|
<td class="prospect-entity">{{ prospect.entity_names }}</td> |
||||||
|
<td>{{ prospect.phone|default:"-" }}</td> |
||||||
|
<td class="prospect-date">{{ prospect.last_update|date:"d/m/Y H:i" }}</td> |
||||||
|
</tr> |
||||||
|
{% endfor %} |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
{% else %} |
||||||
|
<div class="empty-state">No prospects</div> |
||||||
|
{% endif %} |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- OTHERS Section --> |
||||||
|
<div class="status-section"> |
||||||
|
<div class="status-header"> |
||||||
|
<span class="status-name">OTHERS</span> |
||||||
|
<span class="count">({{ others_prospects.count }})</span> |
||||||
|
</div> |
||||||
|
{% if others_prospects %} |
||||||
|
<table class="prospect-table"> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th>Name</th> |
||||||
|
<th>Entity</th> |
||||||
|
<th>Phone</th> |
||||||
|
<th>Last Update</th> |
||||||
|
<th>Status</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
{% for prospect in others_prospects %} |
||||||
|
<tr> |
||||||
|
<td> |
||||||
|
<a href="{% url 'admin:biz_prospect_change' prospect.id %}" class="prospect-name"> |
||||||
|
{{ prospect.first_name|default:"" }} {{ prospect.last_name|default:"" }} |
||||||
|
</a> |
||||||
|
</td> |
||||||
|
<td class="prospect-entity">{{ prospect.entity_names }}</td> |
||||||
|
<td>{{ prospect.phone|default:"-" }}</td> |
||||||
|
<td class="prospect-date">{{ prospect.last_update|date:"d/m/Y H:i" }}</td> |
||||||
|
<td><span class="prospect-status">{{ prospect.current_status }}</span></td> |
||||||
|
</tr> |
||||||
|
{% endfor %} |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
{% else %} |
||||||
|
<div class="empty-state">No prospects</div> |
||||||
|
{% endif %} |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- RESPONDED Section --> |
||||||
|
<div class="status-section"> |
||||||
|
<div class="status-header"> |
||||||
|
<span class="status-name">RESPONDED</span> |
||||||
|
<span class="count">({{ responded_prospects.count }})</span> |
||||||
|
</div> |
||||||
|
{% if responded_prospects %} |
||||||
|
<table class="prospect-table"> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th>Name</th> |
||||||
|
<th>Entity</th> |
||||||
|
<th>Phone</th> |
||||||
|
<th>Last Update</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
{% for prospect in responded_prospects %} |
||||||
|
<tr> |
||||||
|
<td> |
||||||
|
<a href="{% url 'admin:biz_prospect_change' prospect.id %}" class="prospect-name"> |
||||||
|
{{ prospect.first_name|default:"" }} {{ prospect.last_name|default:"" }} |
||||||
|
</a> |
||||||
|
</td> |
||||||
|
<td class="prospect-entity">{{ prospect.entity_names }}</td> |
||||||
|
<td>{{ prospect.phone|default:"-" }}</td> |
||||||
|
<td class="prospect-date">{{ prospect.last_update|date:"d/m/Y H:i" }}</td> |
||||||
|
</tr> |
||||||
|
{% endfor %} |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
{% else %} |
||||||
|
<div class="empty-state">No prospects</div> |
||||||
|
{% endif %} |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<script> |
||||||
|
document.getElementById('my-prospects-toggle').addEventListener('change', function(e) { |
||||||
|
const url = new URL(window.location); |
||||||
|
if (e.target.checked) { |
||||||
|
url.searchParams.set('my', 'true'); |
||||||
|
} else { |
||||||
|
url.searchParams.delete('my'); |
||||||
|
} |
||||||
|
window.location.href = url.toString(); |
||||||
|
}); |
||||||
|
</script> |
||||||
|
{% endblock %} |
||||||
Loading…
Reference in new issue