- Improvement of Entitlements Domain
- Introduction of LicensePeriod - Introduction of Payments - Introduction of Invoices - Services definitions for Entitlements Domain
This commit is contained in:
Josako
398
eveai_app/templates/entitlements/license_periods.html
Normal file
398
eveai_app/templates/entitlements/license_periods.html
Normal file
@@ -0,0 +1,398 @@
|
||||
{% extends 'base.html' %}
|
||||
{% from "macros.html" import render_selectable_table %}
|
||||
|
||||
{% block title %}License Periods - {{ license.id }}{% endblock %}
|
||||
|
||||
{% block content_title %}License Periods{% endblock %}
|
||||
{% block content_description %}License: {{ license.id }} | Tier: {{ license.license_tier.name }} | Periods: {{ periods|length }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container-fluid">
|
||||
<!-- License Summary Card -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<strong>License ID:</strong> {{ license.id }}
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<strong>Start Date:</strong> {{ license.start_date }}
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<strong>Total Periods:</strong> {{ license.nr_of_periods }}
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<strong>Currency:</strong> {{ license.currency }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Periods Table -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5>License Periods</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Period</th>
|
||||
<th>Start Date</th>
|
||||
<th>End Date</th>
|
||||
<th>Status</th>
|
||||
<th>Usage</th>
|
||||
<th>Payments</th>
|
||||
<th>Invoices</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for period in periods %}
|
||||
<tr class="period-row" data-period-id="{{ period.id }}">
|
||||
<td>{{ period.period_number }}</td>
|
||||
<td>{{ period.period_start }}</td>
|
||||
<td>{{ period.period_end }}</td>
|
||||
<td>
|
||||
<span class="badge badge-{{ period.status.name|status_color }}">
|
||||
{{ period.status.name }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{% set usage = usage_by_period.get(period.id) %}
|
||||
{% if usage %}
|
||||
<small>
|
||||
S: {{ "%.1f"|format(usage.storage_mb_used or 0) }}MB<br>
|
||||
E: {{ "%.1f"|format(usage.embedding_mb_used or 0) }}MB<br>
|
||||
I: {{ "{:,}"|format(usage.interaction_total_tokens_used or 0) }}
|
||||
</small>
|
||||
{% else %}
|
||||
<span class="text-muted">No usage</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% set payments = payments_by_period.get(period.id, []) %}
|
||||
<small>{{ payments|length }} payment(s)</small>
|
||||
</td>
|
||||
<td>
|
||||
{% set invoices = invoices_by_period.get(period.id, []) %}
|
||||
<small>{{ invoices|length }} invoice(s)</small>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-info" onclick="showPeriodDetails({{ period.id }})">
|
||||
Details
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Period Details Modal -->
|
||||
<div class="modal fade" id="periodDetailsModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog modal-lg" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="periodModalTitle">Period Details</h5>
|
||||
<button type="button" class="close" data-dismiss="modal">
|
||||
<span>×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<!-- Nav Tabs -->
|
||||
<ul class="nav nav-tabs" id="periodTabs" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" id="status-tab" data-toggle="tab" href="#status" role="tab">
|
||||
Status & Timeline
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="usage-tab" data-toggle="tab" href="#usage" role="tab">
|
||||
Usage
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" id="financial-tab" data-toggle="tab" href="#financial" role="tab">
|
||||
Financial
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="tab-content mt-3">
|
||||
<!-- Status Tab -->
|
||||
<div class="tab-pane fade show active" id="status" role="tabpanel">
|
||||
<div id="statusContent"></div>
|
||||
</div>
|
||||
|
||||
<!-- Usage Tab -->
|
||||
<div class="tab-pane fade" id="usage" role="tabpanel">
|
||||
<div id="usageContent"></div>
|
||||
</div>
|
||||
|
||||
<!-- Financial Tab -->
|
||||
<div class="tab-pane fade" id="financial" role="tabpanel">
|
||||
<div id="financialContent"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
// Period data for JavaScript access
|
||||
const periodsData = {
|
||||
{% for period in periods %}
|
||||
{{ period.id }}: {
|
||||
period_number: {{ period.period_number }},
|
||||
period_start: "{{ period.period_start }}",
|
||||
period_end: "{{ period.period_end }}",
|
||||
status: "{{ period.status.name }}",
|
||||
upcoming_at: "{{ period.upcoming_at or '' }}",
|
||||
pending_at: "{{ period.pending_at or '' }}",
|
||||
active_at: "{{ period.active_at or '' }}",
|
||||
completed_at: "{{ period.completed_at or '' }}",
|
||||
invoiced_at: "{{ period.invoiced_at or '' }}",
|
||||
closed_at: "{{ period.closed_at or '' }}",
|
||||
usage: {{ usage_by_period.get(period.id).to_dict() if usage_by_period.get(period.id) else 'null' }},
|
||||
payments: [
|
||||
{% for payment in payments_by_period.get(period.id, []) %}
|
||||
{
|
||||
id: {{ payment.id }},
|
||||
type: "{{ payment.payment_type.name }}",
|
||||
amount: {{ payment.amount }},
|
||||
currency: "{{ payment.currency }}",
|
||||
status: "{{ payment.status.name }}",
|
||||
paid_at: "{{ payment.paid_at or '' }}"
|
||||
}{% if not loop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
],
|
||||
invoices: [
|
||||
{% for invoice in invoices_by_period.get(period.id, []) %}
|
||||
{
|
||||
id: {{ invoice.id }},
|
||||
type: "{{ invoice.invoice_type.name }}",
|
||||
number: "{{ invoice.invoice_number }}",
|
||||
amount: {{ invoice.amount }},
|
||||
currency: "{{ invoice.currency }}",
|
||||
status: "{{ invoice.status.name }}",
|
||||
due_date: "{{ invoice.due_date }}"
|
||||
}{% if not loop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
]
|
||||
}{% if not loop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
};
|
||||
|
||||
function showPeriodDetails(periodId) {
|
||||
const period = periodsData[periodId];
|
||||
if (!period) return;
|
||||
|
||||
// Update modal title
|
||||
document.getElementById('periodModalTitle').textContent = `Period ${period.period_number} Details`;
|
||||
|
||||
// Update status content
|
||||
updateStatusContent(period);
|
||||
updateUsageContent(period);
|
||||
updateFinancialContent(period);
|
||||
|
||||
// Show modal
|
||||
$('#periodDetailsModal').modal('show');
|
||||
}
|
||||
|
||||
function updateStatusContent(period) {
|
||||
const statusContent = document.getElementById('statusContent');
|
||||
const statusDates = [
|
||||
{ label: 'Upcoming', date: period.upcoming_at },
|
||||
{ label: 'Pending', date: period.pending_at },
|
||||
{ label: 'Active', date: period.active_at },
|
||||
{ label: 'Completed', date: period.completed_at },
|
||||
{ label: 'Invoiced', date: period.invoiced_at },
|
||||
{ label: 'Closed', date: period.closed_at }
|
||||
];
|
||||
|
||||
let html = `
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6>Current Status</h6>
|
||||
<span class="badge badge-${getStatusColor(period.status)} badge-lg">${period.status}</span>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6>Period Dates</h6>
|
||||
<p><strong>Start:</strong> ${period.period_start}<br>
|
||||
<strong>End:</strong> ${period.period_end}</p>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<h6>Status Timeline</h6>
|
||||
<div class="timeline">
|
||||
`;
|
||||
|
||||
statusDates.forEach(item => {
|
||||
if (item.date) {
|
||||
html += `
|
||||
<div class="timeline-item">
|
||||
<strong>${item.label}:</strong> ${item.date}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
statusContent.innerHTML = html;
|
||||
}
|
||||
|
||||
function updateUsageContent(period) {
|
||||
const usageContent = document.getElementById('usageContent');
|
||||
|
||||
if (!period.usage) {
|
||||
usageContent.innerHTML = '<p class="text-muted">No usage data available</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const usage = period.usage;
|
||||
usageContent.innerHTML = `
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<h5>Storage</h5>
|
||||
<h3>${(usage.storage_mb_used || 0).toFixed(1)} MB</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<h5>Embedding</h5>
|
||||
<h3>${(usage.embedding_mb_used || 0).toFixed(1)} MB</h3>
|
||||
<small>Tokens: ${(usage.embedding_total_tokens_used || 0).toLocaleString()}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body text-center">
|
||||
<h5>Interaction</h5>
|
||||
<h3>${(usage.interaction_total_tokens_used || 0).toLocaleString()}</h3>
|
||||
<small>Prompt: ${(usage.interaction_prompt_tokens_used || 0).toLocaleString()}<br>
|
||||
Completion: ${(usage.interaction_completion_tokens_used || 0).toLocaleString()}</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function updateFinancialContent(period) {
|
||||
const financialContent = document.getElementById('financialContent');
|
||||
|
||||
let html = '<div class="row">';
|
||||
|
||||
// Payments section
|
||||
html += '<div class="col-md-6"><h6>Payments</h6>';
|
||||
if (period.payments.length === 0) {
|
||||
html += '<p class="text-muted">No payments</p>';
|
||||
} else {
|
||||
html += '<div class="table-responsive"><table class="table table-sm">';
|
||||
html += '<thead><tr><th>Type</th><th>Amount</th><th>Status</th><th>Date</th></tr></thead><tbody>';
|
||||
period.payments.forEach(payment => {
|
||||
html += `
|
||||
<tr>
|
||||
<td>${payment.type}</td>
|
||||
<td>${payment.amount} ${payment.currency}</td>
|
||||
<td><span class="badge badge-${getPaymentStatusColor(payment.status)}">${payment.status}</span></td>
|
||||
<td>${payment.paid_at || '-'}</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
html += '</tbody></table></div>';
|
||||
}
|
||||
html += '</div>';
|
||||
|
||||
// Invoices section
|
||||
html += '<div class="col-md-6"><h6>Invoices</h6>';
|
||||
if (period.invoices.length === 0) {
|
||||
html += '<p class="text-muted">No invoices</p>';
|
||||
} else {
|
||||
html += '<div class="table-responsive"><table class="table table-sm">';
|
||||
html += '<thead><tr><th>Type</th><th>Number</th><th>Amount</th><th>Status</th><th>Due</th></tr></thead><tbody>';
|
||||
period.invoices.forEach(invoice => {
|
||||
html += `
|
||||
<tr>
|
||||
<td>${invoice.type}</td>
|
||||
<td>${invoice.number}</td>
|
||||
<td>${invoice.amount} ${invoice.currency}</td>
|
||||
<td><span class="badge badge-${getInvoiceStatusColor(invoice.status)}">${invoice.status}</span></td>
|
||||
<td>${invoice.due_date}</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
html += '</tbody></table></div>';
|
||||
}
|
||||
html += '</div></div>';
|
||||
|
||||
financialContent.innerHTML = html;
|
||||
}
|
||||
|
||||
function getStatusColor(status) {
|
||||
const colors = {
|
||||
'UPCOMING': 'secondary',
|
||||
'PENDING': 'warning',
|
||||
'ACTIVE': 'success',
|
||||
'COMPLETED': 'info',
|
||||
'INVOICED': 'primary',
|
||||
'CLOSED': 'dark'
|
||||
};
|
||||
return colors[status] || 'secondary';
|
||||
}
|
||||
|
||||
function getPaymentStatusColor(status) {
|
||||
const colors = {
|
||||
'PENDING': 'warning',
|
||||
'PAID': 'success',
|
||||
'FAILED': 'danger',
|
||||
'CANCELLED': 'secondary'
|
||||
};
|
||||
return colors[status] || 'secondary';
|
||||
}
|
||||
|
||||
function getInvoiceStatusColor(status) {
|
||||
const colors = {
|
||||
'DRAFT': 'secondary',
|
||||
'SENT': 'info',
|
||||
'PAID': 'success',
|
||||
'OVERDUE': 'danger',
|
||||
'CANCELLED': 'secondary'
|
||||
};
|
||||
return colors[status] || 'secondary';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.timeline-item {
|
||||
padding: 5px 0;
|
||||
border-left: 2px solid #e9ecef;
|
||||
padding-left: 15px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.period-row:hover {
|
||||
background-color: #f8f9fa;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.badge-lg {
|
||||
font-size: 0.9em;
|
||||
padding: 0.5em 0.75em;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user