d02c142f65
- RdController: 사운드로고-AI생성, 사운드로고-TTS 토큰 기록 - CmSongController: 나레이션-가사생성, 나레이션-TTS 토큰 기록 - AI 토큰 사용량 UI에 사운드로고/나레이션 카테고리 분류 추가
661 lines
29 KiB
PHP
661 lines
29 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'AI 토큰 사용량')
|
|
|
|
@push('styles')
|
|
<style>
|
|
.stat-card {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 16px 20px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
.stat-card .label { font-size: 13px; color: #6b7280; margin-bottom: 4px; }
|
|
.stat-card .value { font-size: 22px; font-weight: 700; color: #111827; }
|
|
.stat-card .sub { font-size: 12px; color: #9ca3af; margin-top: 2px; }
|
|
|
|
.filter-bar {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 16px 20px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: end;
|
|
flex-wrap: wrap;
|
|
}
|
|
.filter-bar label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 4px; font-weight: 500; }
|
|
.filter-bar select,
|
|
.filter-bar input {
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 8px;
|
|
padding: 6px 10px;
|
|
font-size: 13px;
|
|
min-width: 140px;
|
|
}
|
|
.filter-bar button {
|
|
padding: 7px 16px;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.data-table { width: 100%; border-collapse: collapse; }
|
|
.data-table th {
|
|
background: #f9fafb;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #6b7280;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
padding: 10px 12px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
.data-table td {
|
|
padding: 10px 12px;
|
|
font-size: 13px;
|
|
color: #374151;
|
|
border-bottom: 1px solid #f3f4f6;
|
|
}
|
|
.data-table tr:hover td { background: #f9fafb; }
|
|
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
|
|
|
|
.pagination-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 0;
|
|
}
|
|
.pagination-bar button {
|
|
padding: 6px 12px;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 6px;
|
|
background: white;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
}
|
|
.pagination-bar button:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
.pagination-bar button:not(:disabled):hover { background: #f3f4f6; }
|
|
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 2px 8px;
|
|
border-radius: 10px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
}
|
|
.badge-blue { background: #dbeafe; color: #1d4ed8; }
|
|
.badge-green { background: #dcfce7; color: #16a34a; }
|
|
.badge-purple { background: #f3e8ff; color: #7c3aed; }
|
|
.badge-orange { background: #ffedd5; color: #c2410c; }
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #9ca3af;
|
|
}
|
|
.empty-state svg { margin: 0 auto 12px; }
|
|
|
|
.modal-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 50;
|
|
}
|
|
.modal-content {
|
|
background: white;
|
|
border-radius: 16px;
|
|
width: 90%;
|
|
max-width: 800px;
|
|
max-height: 85vh;
|
|
overflow-y: auto;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
}
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 24px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
.modal-header h2 { font-size: 18px; font-weight: 700; color: #111827; }
|
|
.modal-body { padding: 24px; }
|
|
.modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
padding: 16px 24px;
|
|
border-top: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.pricing-table { width: 100%; border-collapse: collapse; }
|
|
.pricing-table th {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #6b7280;
|
|
padding: 8px 10px;
|
|
text-align: left;
|
|
border-bottom: 2px solid #e5e7eb;
|
|
white-space: nowrap;
|
|
}
|
|
.pricing-table td {
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid #f3f4f6;
|
|
vertical-align: middle;
|
|
}
|
|
.pricing-table input[type="text"],
|
|
.pricing-table input[type="number"] {
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 6px;
|
|
padding: 5px 8px;
|
|
font-size: 13px;
|
|
width: 100%;
|
|
min-width: 80px;
|
|
}
|
|
.pricing-table input:focus {
|
|
outline: none;
|
|
border-color: #3b82f6;
|
|
box-shadow: 0 0 0 2px rgba(59,130,246,0.2);
|
|
}
|
|
|
|
.toast {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
padding: 12px 20px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
z-index: 60;
|
|
animation: slideIn 0.3s ease;
|
|
}
|
|
.toast-success { background: #dcfce7; color: #16a34a; border: 1px solid #bbf7d0; }
|
|
.toast-error { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
|
|
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<meta name="csrf-token" content="{{ csrf_token() }}">
|
|
<div id="ai-token-usage-root"></div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
@include('partials.react-cdn')
|
|
<script src="https://unpkg.com/lucide@0.469.0?v={{ time() }}"></script>
|
|
@verbatim
|
|
<script type="text/babel">
|
|
const { useState, useEffect, useRef } = React;
|
|
|
|
const createIcon = (name) => {
|
|
const _def=((n)=>{const a={'check-circle':'CircleCheck','alert-circle':'CircleAlert','alert-triangle':'TriangleAlert','clipboard-check':'ClipboardCheck','arrow-up-circle':'CircleArrowUp','arrow-down-circle':'CircleArrowDown'};if(a[n]&&lucide[a[n]])return lucide[a[n]];const p=n.split('-').map(w=>w.charAt(0).toUpperCase()+w.slice(1)).join('');return lucide[p]||(lucide.icons&&lucide.icons[n])||null;})(name);
|
|
const _c = s => s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
|
|
return ({ className = "w-5 h-5", ...props }) => {
|
|
if (!_def) return null;
|
|
const [, attrs, children = []] = _def;
|
|
const sp = { className };
|
|
Object.entries(attrs).forEach(([k, v]) => { sp[_c(k)] = v; });
|
|
Object.assign(sp, props);
|
|
return React.createElement("svg", sp, ...children.map(([tag, ca], i) => {
|
|
const cp = { key: i };
|
|
if (ca) Object.entries(ca).forEach(([k, v]) => { cp[_c(k)] = v; });
|
|
return React.createElement(tag, cp);
|
|
}));
|
|
};
|
|
};
|
|
|
|
const BrainCircuit = createIcon('brain-circuit');
|
|
const Search = createIcon('search');
|
|
const RotateCcw = createIcon('rotate-ccw');
|
|
const ChevronLeft = createIcon('chevron-left');
|
|
const ChevronRight = createIcon('chevron-right');
|
|
const Zap = createIcon('zap');
|
|
const DollarSign = createIcon('dollar-sign');
|
|
const Hash = createIcon('hash');
|
|
const ArrowUpDown = createIcon('arrow-up-down');
|
|
const Settings = createIcon('settings');
|
|
const X = createIcon('x');
|
|
const Save = createIcon('save');
|
|
|
|
const getCategory = (menuName) => {
|
|
if (!menuName) return '-';
|
|
if (menuName.startsWith('AI음성녹음')) return 'AI음성녹음';
|
|
if (menuName.startsWith('회의록')) return '회의록';
|
|
if (menuName.includes('명함')) return '명함OCR';
|
|
if (menuName.includes('사업자등록증')) return '사업자등록증OCR';
|
|
if (menuName.startsWith('사운드로고')) return '사운드로고';
|
|
if (menuName.startsWith('나레이션')) return '나레이션';
|
|
return menuName;
|
|
};
|
|
|
|
const fmtDuration = (sec) => { if (!sec || sec <= 0) return ''; const m = Math.floor(sec/60); const s = sec%60; return m > 0 ? `${m}분 ${s}초` : `${s}초`; };
|
|
|
|
const fmt = (n) => n != null ? Number(n).toLocaleString() : '0';
|
|
const fmtUsd = (n) => n != null ? '$' + Number(n).toFixed(4) : '$0.0000';
|
|
const fmtKrw = (n) => n != null ? Number(n).toLocaleString('ko-KR', { maximumFractionDigits: 0 }) + '원' : '0원';
|
|
|
|
const PROVIDER_LABELS = {
|
|
'gemini': { label: 'Gemini', type: 'token' },
|
|
'claude': { label: 'Claude', type: 'token' },
|
|
'google-stt': { label: 'Google STT', type: 'unit' },
|
|
'google-gcs': { label: 'Google GCS', type: 'unit' },
|
|
};
|
|
|
|
function PricingModal({ show, onClose, onSaved }) {
|
|
const [configs, setConfigs] = useState([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (show) {
|
|
setLoading(true);
|
|
fetch('/system/ai-token-usage/pricing')
|
|
.then(r => r.json())
|
|
.then(json => { if (json.success) setConfigs(json.data); })
|
|
.catch(err => console.error('단가 조회 실패:', err))
|
|
.finally(() => setLoading(false));
|
|
}
|
|
}, [show]);
|
|
|
|
const updateField = (idx, field, value) => {
|
|
setConfigs(prev => {
|
|
const next = [...prev];
|
|
next[idx] = { ...next[idx], [field]: value };
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
setSaving(true);
|
|
try {
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
|
|
const res = await fetch('/system/ai-token-usage/pricing', {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken },
|
|
body: JSON.stringify({ configs }),
|
|
});
|
|
const json = await res.json();
|
|
if (json.success) {
|
|
onSaved('단가 설정이 저장되었습니다.');
|
|
onClose();
|
|
} else {
|
|
onSaved(json.message || '저장 실패', true);
|
|
}
|
|
} catch (err) {
|
|
onSaved('저장 중 오류가 발생했습니다.', true);
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
if (!show) return null;
|
|
|
|
return (
|
|
<div className="modal-overlay" onClick={onClose}>
|
|
<div className="modal-content" onClick={e => e.stopPropagation()}>
|
|
<div className="modal-header">
|
|
<h2 className="flex items-center gap-2">
|
|
<Settings className="w-5 h-5" />
|
|
AI 토큰 단가 설정
|
|
</h2>
|
|
<button onClick={onClose} className="p-1 hover:bg-gray-100 rounded-lg transition">
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
{loading ? (
|
|
<div className="text-center py-8 text-gray-400">
|
|
<div className="animate-spin inline-block w-6 h-6 border-2 border-blue-500 border-t-transparent rounded-full mb-2"></div>
|
|
<p>로딩 중...</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="overflow-x-auto">
|
|
<table className="pricing-table">
|
|
<thead>
|
|
<tr>
|
|
<th>제공자</th>
|
|
<th>모델명</th>
|
|
<th>입력 단가<br/><span style={{fontWeight:400,fontSize:11}}>$/1M tokens</span></th>
|
|
<th>출력 단가<br/><span style={{fontWeight:400,fontSize:11}}>$/1M tokens</span></th>
|
|
<th>단위 가격<br/><span style={{fontWeight:400,fontSize:11}}>$ per unit</span></th>
|
|
<th>환율<br/><span style={{fontWeight:400,fontSize:11}}>USD→KRW</span></th>
|
|
<th>설명</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{configs.map((c, idx) => {
|
|
const info = PROVIDER_LABELS[c.provider] || { label: c.provider, type: 'token' };
|
|
const isUnit = info.type === 'unit';
|
|
return (
|
|
<tr key={c.id}>
|
|
<td>
|
|
<span className="badge badge-purple">{info.label}</span>
|
|
</td>
|
|
<td>
|
|
<input type="text" value={c.model_name}
|
|
onChange={e => updateField(idx, 'model_name', e.target.value)} />
|
|
</td>
|
|
<td>
|
|
<input type="number" step="0.0001" value={c.input_price_per_million}
|
|
disabled={isUnit}
|
|
style={isUnit ? {background:'#f3f4f6',color:'#9ca3af'} : {}}
|
|
onChange={e => updateField(idx, 'input_price_per_million', parseFloat(e.target.value) || 0)} />
|
|
</td>
|
|
<td>
|
|
<input type="number" step="0.0001" value={c.output_price_per_million}
|
|
disabled={isUnit}
|
|
style={isUnit ? {background:'#f3f4f6',color:'#9ca3af'} : {}}
|
|
onChange={e => updateField(idx, 'output_price_per_million', parseFloat(e.target.value) || 0)} />
|
|
</td>
|
|
<td>
|
|
<input type="number" step="0.000001" value={c.unit_price}
|
|
disabled={!isUnit}
|
|
style={!isUnit ? {background:'#f3f4f6',color:'#9ca3af'} : {}}
|
|
onChange={e => updateField(idx, 'unit_price', parseFloat(e.target.value) || 0)} />
|
|
{isUnit && c.unit_description && (
|
|
<div style={{fontSize:11,color:'#9ca3af',marginTop:2}}>{c.unit_description}</div>
|
|
)}
|
|
</td>
|
|
<td>
|
|
<input type="number" step="0.01" value={c.exchange_rate}
|
|
onChange={e => updateField(idx, 'exchange_rate', parseFloat(e.target.value) || 0)} />
|
|
</td>
|
|
<td>
|
|
<input type="text" value={c.description || ''}
|
|
onChange={e => updateField(idx, 'description', e.target.value)} />
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div style={{marginTop:12,padding:'10px 12px',background:'#fffbeb',borderRadius:8,fontSize:12,color:'#92400e'}}>
|
|
* 토큰 기반 모델(Gemini, Claude)은 입력/출력 단가를, 단위 기반 서비스(STT, GCS)는 단위 가격을 수정하세요.
|
|
<br/>* 환율 변경 시 모든 모델에 동일하게 적용됩니다. 저장 후 새로운 요청부터 변경된 단가가 적용됩니다.
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="modal-footer">
|
|
<button onClick={onClose}
|
|
className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium transition">
|
|
취소
|
|
</button>
|
|
<button onClick={handleSave} disabled={saving || loading}
|
|
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium transition flex items-center gap-1 disabled:opacity-50">
|
|
<Save className="w-4 h-4" />
|
|
{saving ? '저장 중...' : '저장'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AiTokenUsageApp() {
|
|
const [records, setRecords] = useState([]);
|
|
const [stats, setStats] = useState({});
|
|
const [filters, setFilters] = useState({ menu_names: [], tenants: [] });
|
|
const [pagination, setPagination] = useState({ current_page: 1, last_page: 1, per_page: 20, total: 0 });
|
|
const [loading, setLoading] = useState(true);
|
|
const [showPricingModal, setShowPricingModal] = useState(false);
|
|
const [toast, setToast] = useState(null);
|
|
|
|
// 필터 상태
|
|
const today = new Date();
|
|
const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
|
|
const [startDate, setStartDate] = useState(firstDay.toISOString().split('T')[0]);
|
|
const [endDate, setEndDate] = useState(today.toISOString().split('T')[0]);
|
|
const [tenantId, setTenantId] = useState('');
|
|
const [menuName, setMenuName] = useState('');
|
|
const [page, setPage] = useState(1);
|
|
|
|
const fetchData = async (p = 1) => {
|
|
setLoading(true);
|
|
try {
|
|
const params = new URLSearchParams();
|
|
if (startDate) params.set('start_date', startDate);
|
|
if (endDate) params.set('end_date', endDate);
|
|
if (tenantId) params.set('tenant_id', tenantId);
|
|
if (menuName) params.set('menu_name', menuName);
|
|
params.set('page', p);
|
|
params.set('per_page', 20);
|
|
|
|
const res = await fetch(`/system/ai-token-usage/list?${params}`);
|
|
const json = await res.json();
|
|
if (json.success) {
|
|
setRecords(json.data);
|
|
setStats(json.stats);
|
|
setFilters(json.filters);
|
|
setPagination(json.pagination);
|
|
setPage(json.pagination.current_page);
|
|
}
|
|
} catch (err) {
|
|
console.error('데이터 조회 실패:', err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => { fetchData(); }, []);
|
|
|
|
const handleSearch = () => { fetchData(1); };
|
|
const handleReset = () => {
|
|
setStartDate(firstDay.toISOString().split('T')[0]);
|
|
setEndDate(today.toISOString().split('T')[0]);
|
|
setTenantId('');
|
|
setMenuName('');
|
|
setTimeout(() => fetchData(1), 0);
|
|
};
|
|
const goPage = (p) => { fetchData(p); };
|
|
|
|
const showToast = (message, isError = false) => {
|
|
setToast({ message, isError });
|
|
setTimeout(() => setToast(null), 3000);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* Toast 알림 */}
|
|
{toast && (
|
|
<div className={`toast ${toast.isError ? 'toast-error' : 'toast-success'}`}>
|
|
{toast.message}
|
|
</div>
|
|
)}
|
|
|
|
{/* 단가 설정 모달 */}
|
|
<PricingModal
|
|
show={showPricingModal}
|
|
onClose={() => setShowPricingModal(false)}
|
|
onSaved={(msg, isError) => showToast(msg, isError)}
|
|
/>
|
|
|
|
{/* 페이지 헤더 */}
|
|
<div className="flex justify-between items-center">
|
|
<h1 className="text-2xl font-bold text-gray-800 flex items-center gap-2">
|
|
<BrainCircuit className="w-7 h-7" />
|
|
AI 토큰 사용량
|
|
</h1>
|
|
<button
|
|
onClick={() => setShowPricingModal(true)}
|
|
className="flex items-center gap-1.5 px-3 py-2 bg-white border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition shadow-sm"
|
|
>
|
|
<Settings className="w-4 h-4" />
|
|
단가 설정
|
|
</button>
|
|
</div>
|
|
|
|
{/* 통계 카드 */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3">
|
|
<div className="stat-card">
|
|
<div className="label">총 호출 수</div>
|
|
<div className="value">{fmt(stats.total_count)}</div>
|
|
<div className="sub">건</div>
|
|
</div>
|
|
<div className="stat-card">
|
|
<div className="label">입력 토큰</div>
|
|
<div className="value">{fmt(stats.total_prompt_tokens)}</div>
|
|
<div className="sub">tokens</div>
|
|
</div>
|
|
<div className="stat-card">
|
|
<div className="label">출력 토큰</div>
|
|
<div className="value">{fmt(stats.total_completion_tokens)}</div>
|
|
<div className="sub">tokens</div>
|
|
</div>
|
|
<div className="stat-card">
|
|
<div className="label">전체 토큰</div>
|
|
<div className="value">{fmt(stats.total_total_tokens)}</div>
|
|
<div className="sub">tokens</div>
|
|
</div>
|
|
<div className="stat-card">
|
|
<div className="label">총 비용 (USD)</div>
|
|
<div className="value">{fmtUsd(stats.total_cost_usd)}</div>
|
|
<div className="sub">달러</div>
|
|
</div>
|
|
<div className="stat-card">
|
|
<div className="label">총 비용 (KRW)</div>
|
|
<div className="value">{fmtKrw(stats.total_cost_krw)}</div>
|
|
<div className="sub">원</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 필터 바 */}
|
|
<div className="filter-bar">
|
|
<div>
|
|
<label>시작일</label>
|
|
<input type="date" value={startDate} onChange={e => setStartDate(e.target.value)} />
|
|
</div>
|
|
<div>
|
|
<label>종료일</label>
|
|
<input type="date" value={endDate} onChange={e => setEndDate(e.target.value)} />
|
|
</div>
|
|
<div>
|
|
<label>테넌트</label>
|
|
<select value={tenantId} onChange={e => setTenantId(e.target.value)}>
|
|
<option value="">전체</option>
|
|
{filters.tenants.map(t => (
|
|
<option key={t.id} value={t.id}>{t.name}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label>호출 메뉴</label>
|
|
<select value={menuName} onChange={e => setMenuName(e.target.value)}>
|
|
<option value="">전체</option>
|
|
{filters.menu_names.map(m => (
|
|
<option key={m} value={m}>{m}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<button
|
|
onClick={handleSearch}
|
|
className="bg-blue-600 text-white hover:bg-blue-700 flex items-center gap-1"
|
|
>
|
|
<Search className="w-4 h-4" /> 조회
|
|
</button>
|
|
<button
|
|
onClick={handleReset}
|
|
className="bg-gray-100 text-gray-700 hover:bg-gray-200 flex items-center gap-1"
|
|
>
|
|
<RotateCcw className="w-4 h-4" /> 초기화
|
|
</button>
|
|
</div>
|
|
|
|
{/* 데이터 테이블 */}
|
|
<div className="bg-white rounded-xl shadow-sm overflow-hidden">
|
|
{loading ? (
|
|
<div className="text-center py-16 text-gray-400">
|
|
<div className="animate-spin inline-block w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full mb-3"></div>
|
|
<p>데이터를 불러오는 중...</p>
|
|
</div>
|
|
) : records.length === 0 ? (
|
|
<div className="empty-state">
|
|
<BrainCircuit className="w-12 h-12 text-gray-300" />
|
|
<p className="text-lg font-medium text-gray-500 mt-2">사용 내역이 없습니다</p>
|
|
<p className="text-sm">AI 기능을 사용하면 토큰 사용량이 기록됩니다.</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="overflow-x-auto">
|
|
<table className="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>테넌트</th>
|
|
<th>사용일시</th>
|
|
<th>카테고리</th>
|
|
<th>호출메뉴</th>
|
|
<th>모델</th>
|
|
<th>녹음시간</th>
|
|
<th className="num">입력토큰</th>
|
|
<th className="num">출력토큰</th>
|
|
<th className="num">전체토큰</th>
|
|
<th className="num">비용(USD)</th>
|
|
<th className="num">비용(KRW)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{records.map(r => (
|
|
<tr key={r.id}>
|
|
<td>
|
|
<span className="badge badge-blue">{r.tenant_id}</span>
|
|
{' '}{r.tenant_name}
|
|
</td>
|
|
<td>{r.created_at}</td>
|
|
<td><span className="badge badge-orange">{getCategory(r.menu_name)}</span></td>
|
|
<td><span className="badge badge-green">{r.menu_name}</span></td>
|
|
<td><span className="badge badge-purple">{r.model}</span></td>
|
|
<td>{r.model === 'google-speech-to-text' ? fmtDuration(r.prompt_tokens) : ''}</td>
|
|
<td className="num">{fmt(r.prompt_tokens)}</td>
|
|
<td className="num">{fmt(r.completion_tokens)}</td>
|
|
<td className="num font-semibold">{fmt(r.total_tokens)}</td>
|
|
<td className="num">{fmtUsd(r.cost_usd)}</td>
|
|
<td className="num font-semibold">{fmtKrw(r.cost_krw)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* 페이지네이션 */}
|
|
<div className="pagination-bar px-4">
|
|
<span className="text-sm text-gray-500">
|
|
총 {fmt(pagination.total)}건 (페이지 {pagination.current_page}/{pagination.last_page})
|
|
</span>
|
|
<div className="flex gap-2">
|
|
<button
|
|
disabled={pagination.current_page <= 1}
|
|
onClick={() => goPage(pagination.current_page - 1)}
|
|
className="flex items-center gap-1"
|
|
>
|
|
<ChevronLeft className="w-4 h-4" /> 이전
|
|
</button>
|
|
<button
|
|
disabled={pagination.current_page >= pagination.last_page}
|
|
onClick={() => goPage(pagination.current_page + 1)}
|
|
className="flex items-center gap-1"
|
|
>
|
|
다음 <ChevronRight className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ReactDOM.createRoot(document.getElementById('ai-token-usage-root')).render(<AiTokenUsageApp />);
|
|
</script>
|
|
@endverbatim
|
|
@endpush
|