93 lines
2.5 KiB
HTML
93 lines
2.5 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}Dashboard - Manufacturing App{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
|
|
<h1 class="h2">Dashboard</h1>
|
|
<div class="btn-toolbar mb-2 mb-md-0">
|
|
<button type="button" class="btn btn-sm btn-outline-secondary me-2"
|
|
onclick="window.print()">
|
|
<i class="fas fa-print"></i> Print Dashboard
|
|
</button>
|
|
<a href="{% url 'dashboard:configure_widgets' %}" class="btn btn-sm btn-outline-secondary">
|
|
<i class="fas fa-cog"></i> Customize
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard Grid -->
|
|
<div class="dashboard-grid" id="dashboard-grid">
|
|
{% for widget_data in widgets_data %}
|
|
<div class="dashboard-widget"
|
|
data-widget-id="{{ widget_data.widget.id }}"
|
|
data-position="{{ widget_data.position|json_script }}">
|
|
{% include widget_data.widget.template_name with data=widget_data.data config=widget_data.config %}
|
|
</div>
|
|
{% empty %}
|
|
<div class="col-12">
|
|
<div class="alert alert-info">
|
|
<h4>No widgets configured</h4>
|
|
<p>You don't have any dashboard widgets configured yet.</p>
|
|
<a href="{% url 'dashboard:configure_widgets' %}" class="btn btn-primary">Configure Widgets</a>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.dashboard-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.dashboard-widget {
|
|
background: white;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 0.375rem;
|
|
padding: 1rem;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
|
}
|
|
|
|
.widget-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1rem;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 1px solid #dee2e6;
|
|
}
|
|
|
|
.widget-title {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.widget-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.widget-content {
|
|
min-height: 150px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Dashboard customization functionality
|
|
document.getElementById('customize-dashboard').addEventListener('click', function() {
|
|
window.location.href = "{% url 'dashboard:configure_widgets' %}";
|
|
});
|
|
|
|
// Make widgets sortable
|
|
// This would require a JavaScript library like SortableJS
|
|
// Implementation details would go here
|
|
</script>
|
|
{% endblock %} |