fix(dashboard): daily-графики и счётчики из GET /v1/admin/stats

Refs EventHub/EventHubFrontAdmin#26

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/DailyLineChartCard.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Card, Col } from 'antd';
+import {
+    LineChart,
+    Line,
+    XAxis,
+    YAxis,
+    CartesianGrid,
+    Tooltip,
+    Legend,
+    ResponsiveContainer,
+} from 'recharts';
+import { DayCount } from '../types/api';
+
+interface Props {
+    title: string;
+    data?: DayCount[];
+    color: string;
+    lg?: number;
+}
+
+const DailyLineChartCard: React.FC<Props> = ({ title, data, color, lg = 12 }) => {
+    const chartData = (data ?? []).map((item) => ({
+        date: item.date,
+        count: item.count,
+    }));
+
+    if (chartData.length === 0) {
+        return null;
+    }
+
+    return (
+        <Col xs={24} lg={lg}>
+            <Card title={title}>
+                <ResponsiveContainer width="100%" height={300}>
+                    <LineChart data={chartData}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey="date" />
+                        <YAxis allowDecimals={false} />
+                        <Tooltip />
+                        <Legend />
+                        <Line type="monotone" dataKey="count" stroke={color} name={title} />
+                    </LineChart>
+                </ResponsiveContainer>
+            </Card>
+        </Col>
+    );
+};
+
+export default DailyLineChartCard;

src/pages/dashboard/DashboardPage.tsx

@@ -8,22 +8,18 @@ import {
     WarningOutlined,
     BugOutlined,
     ClockCircleOutlined,
+    DollarOutlined,
 } from '@ant-design/icons';
 import { useDashboardStats } from '../../hooks/useDashboard';
 import type { ColumnsType } from 'antd/es/table';
 import { AdminActivity } from '../../types/api';
 import {
-    LineChart,
-    Line,
-    XAxis,
-    YAxis,
-    CartesianGrid,
-    Tooltip,
-    Legend,
-    ResponsiveContainer,
     AreaChart,
     Area,
+    XAxis,
+    Tooltip,
 } from 'recharts';
+import DailyLineChartCard from '../../components/DailyLineChartCard';
 
 const DashboardPage: React.FC = () => {
     const { data, isLoading, error } = useDashboardStats();
@@ -54,12 +50,12 @@ const DashboardPage: React.FC = () => {
         { title: 'Последний вход', dataIndex: 'last_login', key: 'last_login' },
     ];
 
-    const eventsChartData = data.events_by_day?.map(item => ({
+    const eventsChartData = data.events_by_day?.map((item) => ({
         date: item.date,
         events: item.count,
     })) || [];
 
-    const registrationsChartData = data.registrations_by_day?.map(item => ({
+    const registrationsChartData = data.registrations_by_day?.map((item) => ({
         date: item.date,
         registrations: item.count,
     })) || [];
@@ -68,7 +64,6 @@ const DashboardPage: React.FC = () => {
         <div>
             <h2>Общая статистика</h2>
             <Row gutter={[16, 16]}>
-                {/* Пользователи с мини-графиком */}
                 <Col xs={24} sm={12} lg={6}>
                     <Card>
                         <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -109,7 +104,6 @@ const DashboardPage: React.FC = () => {
                     </Card>
                 </Col>
 
-                {/* События с мини-графиком */}
                 <Col xs={24} sm={12} lg={6}>
                     <Card>
                         <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -190,39 +184,64 @@ const DashboardPage: React.FC = () => {
                         />
                     </Card>
                 </Col>
+
+                {data.pending_users_total !== undefined && (
+                    <Col xs={24} sm={12} lg={6}>
+                        <Card>
+                            <Statistic title="Неподтверждённые" value={data.pending_users_total} prefix={<UserOutlined />} />
+                        </Card>
+                    </Col>
+                )}
+                {data.reports_pending !== undefined && (
+                    <Col xs={24} sm={12} lg={6}>
+                        <Card>
+                            <Statistic title="Жалобы: pending" value={data.reports_pending} />
+                        </Card>
+                    </Col>
+                )}
+                {data.reports_reviewed !== undefined && (
+                    <Col xs={24} sm={12} lg={6}>
+                        <Card>
+                            <Statistic title="Жалобы: reviewed" value={data.reports_reviewed} />
+                        </Card>
+                    </Col>
+                )}
+                {data.reports_dismissed !== undefined && (
+                    <Col xs={24} sm={12} lg={6}>
+                        <Card>
+                            <Statistic title="Жалобы: dismissed" value={data.reports_dismissed} />
+                        </Card>
+                    </Col>
+                )}
+                {data.subscriptions_total !== undefined && (
+                    <Col xs={24} sm={12} lg={6}>
+                        <Card>
+                            <Statistic title="Подписки" value={data.subscriptions_total} prefix={<DollarOutlined />} />
+                        </Card>
+                    </Col>
+                )}
+                {data.trial_subscriptions !== undefined && (
+                    <Col xs={24} sm={12} lg={6}>
+                        <Card>
+                            <Statistic title="Пробные подписки" value={data.trial_subscriptions} />
+                        </Card>
+                    </Col>
+                )}
             </Row>
 
             <Row gutter={[16, 16]} style={{ marginTop: 32 }}>
-                <Col xs={24} lg={12}>
+                <DailyLineChartCard title="События по дням" data={data.events_by_day} color="#1890ff" />
-                    <Card title="События по дням">
+                <DailyLineChartCard title="Регистрации по дням" data={data.registrations_by_day} color="#52c41a" />
-                        <ResponsiveContainer width="100%" height={300}>
+                <DailyLineChartCard title="Отзывы по дням" data={data.reviews_by_day} color="#faad14" />
-                            <LineChart data={eventsChartData}>
+                <DailyLineChartCard title="Календари по дням" data={data.calendars_by_day} color="#722ed1" />
-                                <CartesianGrid strokeDasharray="3 3" />
+                <DailyLineChartCard title="Жалобы по дням" data={data.reports_by_day} color="#ff4d4f" />
-                                <XAxis dataKey="date" />
+                <DailyLineChartCard title="Тикеты по дням" data={data.tickets_by_day} color="#13c2c2" />
-                                <YAxis allowDecimals={false} />
+                <DailyLineChartCard title="Подписки по дням" data={data.subscriptions_by_day} color="#eb2f96" />
-                                <Tooltip />
+                <DailyLineChartCard title="Неподтверждённые по дням" data={data.pending_users_by_day} color="#fa8c16" />
-                                <Legend />
-                                <Line type="monotone" dataKey="events" stroke="#1890ff" name="События" />
-                            </LineChart>
-                        </ResponsiveContainer>
-                    </Card>
-                </Col>
-                <Col xs={24} lg={12}>
-                    <Card title="Регистрации по дням">
-                        <ResponsiveContainer width="100%" height={300}>
-                            <LineChart data={registrationsChartData}>
-                                <CartesianGrid strokeDasharray="3 3" />
-                                <XAxis dataKey="date" />
-                                <YAxis allowDecimals={false} />
-                                <Tooltip />
-                                <Legend />
-                                <Line type="monotone" dataKey="registrations" stroke="#52c41a" name="Регистрации" />
-                            </LineChart>
-                        </ResponsiveContainer>
-                    </Card>
-                </Col>
             </Row>
 
+            {data.admin_activity && data.admin_activity.length > 0 && (
+                <>
                     <h2 style={{ marginTop: 32 }}>Активность администраторов</h2>
                     <Table
                         columns={adminColumns}
@@ -231,6 +250,8 @@ const DashboardPage: React.FC = () => {
                         pagination={false}
                         size="small"
                     />
+                </>
+            )}
         </div>
     );
 };

src/types/api.ts

@@ -328,16 +328,28 @@ export interface AuditListParams {
 // ===================== Dashboard Stats =====================
 export interface DashboardStats {
     users_total: number;
+    pending_users_total?: number;
     events_total: number;
     reviews_total: number;
     calendars_total: number;
     reports_total: number;
+    reports_pending?: number;
+    reports_reviewed?: number;
+    reports_dismissed?: number;
     tickets_total: number;
     tickets_open: number;
+    subscriptions_total?: number;
+    trial_subscriptions?: number;
     avg_ticket_resolution_h: number;
-    admin_activity: AdminActivity[];
+    admin_activity?: AdminActivity[];
     events_by_day: DayCount[];
     registrations_by_day: DayCount[];
+    reviews_by_day?: DayCount[];
+    calendars_by_day?: DayCount[];
+    reports_by_day?: DayCount[];
+    tickets_by_day?: DayCount[];
+    subscriptions_by_day?: DayCount[];
+    pending_users_by_day?: DayCount[];
 }
 
 export interface AdminActivity {