add dashboard statistic

src/app/ui/dashboard/subscriptions-statistic.tsx

@@ -1,4 +1,38 @@
+'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">
@@ -14,36 +48,28 @@ export default function SubscriptionsStatistic() {
 						</tr>
 					</thead>
 					<tbody>
-						<tr>
-							<td>
-								<span className="badge badge-primary">
-									СТАРТ
-								</span>
-							</td>
-							<td>0</td>
-							<td>0%</td>
-						</tr>
-						<tr>
-							<td>
-								<span className="badge badge-primary">
-									ДЕМО
-								</span>
-							</td>
-							<td>0</td>
-							<td>0%</td>
-						</tr>
-						<tr>
-							<td>
-								<span className="badge badge-primary">
-									ПРОФИ
-								</span>
-							</td>
-							<td>0</td>
-							<td>0%</td>
-						</tr>
+						{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>
-	)
+	);
 }