64 lines
2.3 KiB
HTML
64 lines
2.3 KiB
HTML
{% extends "base.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}Analytics Dashboard{% endblock %}
|
|
|
|
{% block head %}
|
|
<meta name="description" content="Analytics Dashboard for Invoice and Vendor Data.">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid dashboard-container">
|
|
<header class="d-flex justify-content-between align-items-center p-3 mb-4">
|
|
<h1 class="dashboard-title">Analytics Overview</h1>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="row">
|
|
<!-- Total Spend YTD -->
|
|
<div class="col-md-3 mb-4">
|
|
<div class="card metric-card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Total Spend (YTD)</h5>
|
|
<p class="card-text">${{ total_spend_ytd|floatformat:2 }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Invoices Processed -->
|
|
<div class="col-md-3 mb-4">
|
|
<div class="card metric-card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Total Invoices Processed</h5>
|
|
<p class="card-text">{{ total_invoices }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Documents Uploaded -->
|
|
<div class="col-md-3 mb-4">
|
|
<div class="card metric-card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Documents Uploaded</h5>
|
|
<p class="card-text">{{ documents_uploaded }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Average Invoice Value -->
|
|
<div class="col-md-3 mb-4">
|
|
<div class="card metric-card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Average Invoice Value</h5>
|
|
<p class="card-text">${{ avg_invoice_value|floatformat:2 }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Charts and tables will go here in the next iteration -->
|
|
</main>
|
|
</div>
|
|
{% endblock %}
|