first commit all files
This commit is contained in:
dwindown
171
views/settings/tab-cost-log.php
Normal file
171
views/settings/tab-cost-log.php
Normal file
@@ -0,0 +1,171 @@
|
||||
<?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>
|
||||
Reference in New Issue
Block a user