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