172 lines
6.8 KiB
PHP
172 lines
6.8 KiB
PHP
<?php
|
|
/**
|
|
* Settings Tab: Cost Log
|
|
*
|
|
* Uses AJAX for server-side pagination and filtering.
|
|
*
|
|
* @package WP_Agentic_Writer
|
|
*/
|
|
|
|
if ( ! defined( 'ABSPATH' ) ) {
|
|
exit;
|
|
}
|
|
?>
|
|
|
|
<div class="row g-4">
|
|
<!-- Summary Stats -->
|
|
<div class="col-12">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white border-bottom-0 pt-4 pb-0">
|
|
<div class="d-flex align-items-center">
|
|
<span class="me-3 fs-4">📊</span>
|
|
<div>
|
|
<h5 class="card-title mb-1"><?php esc_html_e( 'Cost Summary', 'wp-agentic-writer' ); ?></h5>
|
|
<p class="text-muted small mb-0"><?php esc_html_e( 'Overview of your API spending', 'wp-agentic-writer' ); ?></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3">
|
|
<div class="col-6 col-md-3">
|
|
<div class="p-3 rounded bg-primary bg-opacity-10 text-center">
|
|
<div class="fs-4 fw-bold text-primary" id="wpaw-stat-all-time">$0.0000</div>
|
|
<div class="text-muted small"><?php esc_html_e( 'All Time', 'wp-agentic-writer' ); ?></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="p-3 rounded bg-success bg-opacity-10 text-center">
|
|
<div class="fs-4 fw-bold text-success" id="wpaw-stat-monthly">$0.0000</div>
|
|
<div class="text-muted small"><?php esc_html_e( 'This Month', 'wp-agentic-writer' ); ?></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="p-3 rounded bg-info bg-opacity-10 text-center">
|
|
<div class="fs-4 fw-bold text-info" id="wpaw-stat-today">$0.0000</div>
|
|
<div class="text-muted small"><?php esc_html_e( 'Today', 'wp-agentic-writer' ); ?></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<div class="p-3 rounded bg-warning bg-opacity-10 text-center">
|
|
<div class="fs-4 fw-bold text-warning" id="wpaw-stat-avg">$0.0000</div>
|
|
<div class="text-muted small"><?php esc_html_e( 'Avg Per Post', 'wp-agentic-writer' ); ?></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="col-12">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white border-bottom-0 pt-4 pb-0">
|
|
<div class="d-flex align-items-center">
|
|
<span class="me-3 fs-4">🔍</span>
|
|
<div>
|
|
<h5 class="card-title mb-1"><?php esc_html_e( 'Filter Cost Log', 'wp-agentic-writer' ); ?></h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row g-3 align-items-end">
|
|
<div class="col-md-2">
|
|
<label for="wpaw-filter-post" class="form-label small"><?php esc_html_e( 'Post ID', 'wp-agentic-writer' ); ?></label>
|
|
<input type="number" class="form-control form-control-sm" id="wpaw-filter-post" placeholder="<?php esc_attr_e( 'All', 'wp-agentic-writer' ); ?>" />
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label for="wpaw-filter-model" class="form-label small"><?php esc_html_e( 'Model', 'wp-agentic-writer' ); ?></label>
|
|
<select class="form-select form-select-sm" id="wpaw-filter-model">
|
|
<option value=""><?php esc_html_e( 'All models', 'wp-agentic-writer' ); ?></option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label for="wpaw-filter-type" class="form-label small"><?php esc_html_e( 'Type', 'wp-agentic-writer' ); ?></label>
|
|
<select class="form-select form-select-sm" id="wpaw-filter-type">
|
|
<option value=""><?php esc_html_e( 'All types', 'wp-agentic-writer' ); ?></option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label for="wpaw-filter-date-from" class="form-label small"><?php esc_html_e( 'Date From', 'wp-agentic-writer' ); ?></label>
|
|
<input type="date" class="form-control form-control-sm" id="wpaw-filter-date-from" />
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label for="wpaw-filter-date-to" class="form-label small"><?php esc_html_e( 'Date To', 'wp-agentic-writer' ); ?></label>
|
|
<input type="date" class="form-control form-control-sm" id="wpaw-filter-date-to" />
|
|
</div>
|
|
<div class="col-md-2">
|
|
<div class="d-flex gap-2">
|
|
<button type="button" class="btn btn-primary btn-sm flex-grow-1" id="wpaw-apply-filters">
|
|
<span class="dashicons dashicons-filter"></span>
|
|
</button>
|
|
<button type="button" class="btn btn-outline-secondary btn-sm" id="wpaw-clear-filters">
|
|
<span class="dashicons dashicons-dismiss"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cost Log Table -->
|
|
<div class="col-12">
|
|
<div class="card border-0 shadow-sm">
|
|
<div class="card-header bg-white border-bottom-0 pt-4 pb-0">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div class="d-flex align-items-center">
|
|
<span class="me-3 fs-4">📋</span>
|
|
<div>
|
|
<h5 class="card-title mb-1"><?php esc_html_e( 'Detailed Cost Log', 'wp-agentic-writer' ); ?></h5>
|
|
<p class="text-muted small mb-0" id="wpaw-records-info"><?php esc_html_e( 'Loading...', 'wp-agentic-writer' ); ?></p>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-outline-primary btn-sm" id="wpaw-export-csv">
|
|
<span class="dashicons dashicons-download me-1"></span>
|
|
<?php esc_html_e( 'Export CSV', 'wp-agentic-writer' ); ?>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0" id="wpaw-cost-log-table">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th class="px-3" style="width: 50%;"><?php esc_html_e( 'Post Title', 'wp-agentic-writer' ); ?></th>
|
|
<th class="text-center"><?php esc_html_e( 'API Calls', 'wp-agentic-writer' ); ?></th>
|
|
<th class="text-end px-3"><?php esc_html_e( 'Total Cost', 'wp-agentic-writer' ); ?></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="wpaw-cost-log-tbody">
|
|
<tr>
|
|
<td colspan="3" class="text-center py-5">
|
|
<div class="spinner-border text-primary" role="status">
|
|
<span class="visually-hidden"><?php esc_html_e( 'Loading...', 'wp-agentic-writer' ); ?></span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="d-flex justify-content-between align-items-center p-3 border-top" id="wpaw-pagination-wrapper">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<label for="wpaw-per-page" class="form-label mb-0 small"><?php esc_html_e( 'Per page:', 'wp-agentic-writer' ); ?></label>
|
|
<select class="form-select form-select-sm" id="wpaw-per-page" style="width: auto;">
|
|
<option value="10">10</option>
|
|
<option value="25" selected>25</option>
|
|
<option value="50">50</option>
|
|
<option value="100">100</option>
|
|
</select>
|
|
</div>
|
|
<nav aria-label="Cost log pagination">
|
|
<ul class="pagination pagination-sm mb-0" id="wpaw-pagination">
|
|
<!-- Pagination will be populated by JS -->
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|