django phase 3 and 4

This commit is contained in:
IGNY8 VPS (Salman)
2025-12-15 00:08:18 +00:00
parent aa48a55504
commit cda56f15ba
14 changed files with 792 additions and 887 deletions

View File

@@ -0,0 +1,117 @@
{% extends "admin/base_site.html" %}
{% load static %}
{% block content %}
<div class="px-6 py-4">
<!-- Page Header -->
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Content Production Report</h1>
<p class="text-gray-600 dark:text-gray-400">Content creation metrics and task completion analytics</p>
</div>
<!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Total Content</h3>
<p class="text-3xl font-bold text-gray-900 dark:text-white">{{ total_content }}</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Total Tasks</h3>
<p class="text-3xl font-bold text-gray-900 dark:text-white">{{ total_tasks }}</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Completed</h3>
<p class="text-3xl font-bold text-green-600">{{ completed_tasks }}</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Completion Rate</h3>
<p class="text-3xl font-bold text-gray-900 dark:text-white">{{ completion_rate }}%</p>
</div>
</div>
<!-- Production Timeline -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Daily Production (Last 30 Days)</h2>
<canvas id="productionChart" height="80"></canvas>
</div>
<!-- Content by Type -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Content by Type</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead>
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Content Type</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Count</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
{% for content in content_by_type %}
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">{{ content.content_type|default:"Unknown" }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ content.count }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<!-- Average Word Count -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Average Word Count by Type</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead>
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Content Type</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Avg Words</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
{% for avg in avg_words %}
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">{{ avg.content_type|default:"Unknown" }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ avg.avg_words|floatformat:0 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const ctx = document.getElementById('productionChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: {{ days|safe }},
datasets: [{
label: 'Content Produced',
data: {{ daily_counts|safe }},
backgroundColor: '#0bbf87',
borderColor: '#0bbf87',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: {
display: true,
position: 'top',
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
{% endblock %}

View File

@@ -0,0 +1,91 @@
{% extends "admin/base_site.html" %}
{% load static %}
{% block content %}
<div class="px-6 py-4">
<!-- Page Header -->
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Data Quality Report</h1>
<p class="text-gray-600 dark:text-gray-400">System integrity and data quality checks</p>
</div>
<!-- Summary Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
<div class="flex items-center justify-between">
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Total Issues Found</h3>
<p class="text-4xl font-bold {% if total_issues == 0 %}text-green-600{% elif total_issues < 5 %}text-yellow-600{% else %}text-red-600{% endif %}">
{{ total_issues }}
</p>
</div>
{% if total_issues == 0 %}
<div class="text-green-600">
<svg class="w-16 h-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
{% endif %}
</div>
</div>
<!-- Issues List -->
{% if issues %}
<div class="space-y-4">
{% for issue in issues %}
<div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
<div class="p-6">
<div class="flex items-start justify-between mb-4">
<div class="flex items-center">
{% if issue.severity == 'error' %}
<div class="flex-shrink-0 w-12 h-12 bg-red-100 dark:bg-red-900 rounded-lg flex items-center justify-center mr-4">
<svg class="w-6 h-6 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
</div>
{% elif issue.severity == 'warning' %}
<div class="flex-shrink-0 w-12 h-12 bg-yellow-100 dark:bg-yellow-900 rounded-lg flex items-center justify-center mr-4">
<svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
</svg>
</div>
{% else %}
<div class="flex-shrink-0 w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mr-4">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
{% endif %}
<div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ issue.type }}</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">{{ issue.description }}</p>
</div>
</div>
<div class="flex items-center">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {% if issue.severity == 'error' %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200{% elif issue.severity == 'warning' %}bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200{% else %}bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200{% endif %}">
{{ issue.count }} issue{{ issue.count|pluralize }}
</span>
</div>
</div>
<div class="flex justify-end">
<a href="{{ issue.action_url }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Review & Fix
<svg class="ml-2 -mr-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 rounded-lg p-8 text-center">
<svg class="mx-auto w-16 h-16 text-green-600 dark:text-green-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<h3 class="text-xl font-semibold text-green-900 dark:text-green-100 mb-2">All Clear!</h3>
<p class="text-green-700 dark:text-green-300">No data quality issues found. Your system is healthy.</p>
</div>
{% endif %}
</div>
{% endblock %}

View File

@@ -0,0 +1,115 @@
{% extends "admin/base_site.html" %}
{% load static %}
{% block content %}
<div class="px-6 py-4">
<!-- Page Header -->
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Revenue Report</h1>
<p class="text-gray-600 dark:text-gray-400">Financial performance and billing analytics</p>
</div>
<!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Total Revenue</h3>
<p class="text-3xl font-bold text-gray-900 dark:text-white">${{ total_revenue|floatformat:2 }}</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Payment Methods</h3>
<p class="text-3xl font-bold text-gray-900 dark:text-white">{{ payment_methods|length }}</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Active Plans</h3>
<p class="text-3xl font-bold text-gray-900 dark:text-white">{{ plan_distribution|length }}</p>
</div>
</div>
<!-- Revenue Chart -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Monthly Revenue (Last 6 Months)</h2>
<canvas id="revenueChart" height="80"></canvas>
</div>
<!-- Plan Distribution -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Plan Distribution</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead>
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Plan Name</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Accounts</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
{% for plan in plan_distribution %}
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ plan.name }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ plan.account_count }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<!-- Payment Methods -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Payment Methods</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead>
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Method</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Count</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Total</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
{% for method in payment_methods %}
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ method.payment_method|default:"Unknown" }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ method.count }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">${{ method.total|floatformat:2 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const ctx = document.getElementById('revenueChart');
new Chart(ctx, {
type: 'line',
data: {
labels: {{ months|safe }},
datasets: [{
label: 'Revenue ($)',
data: {{ monthly_revenue|safe }},
borderColor: '#0693e3',
backgroundColor: 'rgba(6, 147, 227, 0.1)',
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: true,
plugins: {
legend: {
display: true,
position: 'top',
}
},
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
{% endblock %}

View File

@@ -0,0 +1,103 @@
{% extends "admin/base_site.html" %}
{% load static %}
{% block content %}
<div class="px-6 py-4">
<!-- Page Header -->
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Usage Report</h1>
<p class="text-gray-600 dark:text-gray-400">Credit usage and AI operations analytics</p>
</div>
<!-- Summary Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Total Credits Used</h3>
<p class="text-3xl font-bold text-gray-900 dark:text-white">{{ total_credits|floatformat:0 }}</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Operation Types</h3>
<p class="text-3xl font-bold text-gray-900 dark:text-white">{{ usage_by_operation|length }}</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Active Accounts</h3>
<p class="text-3xl font-bold text-gray-900 dark:text-white">{{ top_consumers|length }}</p>
</div>
</div>
<!-- Usage by Operation Type -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Usage by Operation Type</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead>
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Operation</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Credits Used</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Cost (USD)</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Operations</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
{% for usage in usage_by_operation %}
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">{{ usage.operation_type }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ usage.total_credits|floatformat:0 }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">${{ usage.total_cost|floatformat:2 }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ usage.operation_count }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<!-- Top Credit Consumers -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Top Credit Consumers</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead>
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Account</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Total Credits</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Operations</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
{% for consumer in top_consumers %}
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">{{ consumer.account__name }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ consumer.total_credits|floatformat:0 }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ consumer.operation_count }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<!-- Model Usage Distribution -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Model Usage Distribution</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead>
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Model</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Usage Count</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-700">
{% for model in model_usage %}
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">{{ model.model_used }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white">{{ model.usage_count }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endblock %}