75 lines
1.7 KiB
TypeScript
75 lines
1.7 KiB
TypeScript
'use client'
|
|
|
|
import { useMonitoringStats } from '@/app/hooks/react-query/dashboard/useTariffStatistic';
|
|
|
|
export default function SubscriptionsStatistic() {
|
|
const { data, isLoading, isError } = useMonitoringStats();
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="admin-content">
|
|
<div className="content-header">
|
|
<h3>Статистика подписок</h3>
|
|
</div>
|
|
<div className="content-body">
|
|
<div>Загрузка...</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (isError) {
|
|
return (
|
|
<div className="admin-content">
|
|
<div className="content-header">
|
|
<h3>Статистика подписок</h3>
|
|
</div>
|
|
<div className="content-body">
|
|
<div>Ошибка при загрузке данных</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const tariffs = data?.tariffs || [];
|
|
|
|
return (
|
|
<div className="admin-content">
|
|
<div className="content-header">
|
|
<h3>Статистика подписок</h3>
|
|
</div>
|
|
<div className="content-body">
|
|
<table className="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Тариф</th>
|
|
<th>Пользователей</th>
|
|
<th>Доля</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{tariffs.length > 0 ? (
|
|
tariffs.map((tariff, index) => (
|
|
<tr key={index}>
|
|
<td>
|
|
<span className={`badge badge-primary`}>
|
|
{tariff.tariff_name}
|
|
</span>
|
|
</td>
|
|
<td>{tariff.user_count}</td>
|
|
<td>{tariff.usage_percent.toFixed(2)}%</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan={3} style={{ textAlign: 'center' }}>
|
|
Нет данных
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |