feat: engineer stat

Author: vkhv

public/locales/en/translation.json

@@ -1132,5 +1132,16 @@
   "No data": "No data",
   "DME per Ejection": "DME per Ejection",
   "Active mines": "Active mines",
-  "Mining events": "Mining events"
+  "Mining events": "Mining events",
+  "My info": "My info",
+  "Engineers info": "Engineers info",
+  "Certificate": "Certificate",
+  "Skills learned": "Skills learned",
+  "Average start time of the contract after the offer": "Average start time of the contract after the offer",
+  "Date": "Date",
+  "Upgrades": "Upgrades",
+  "DME earned": "DME earned",
+  "Total upgrades": "Total upgrades",
+  "Total fails": "Total fails",
+  "Total DME earned": "Total DME earned"
 }

src/app/router/paths.ts

@@ -1,3 +1,5 @@
+import { EngineerStatPage } from '../../pages/engineer/stat';
+
 export const root = '/';
 export const intro = '/intro';
 export const contractorCabin = '/contractor-cabin';
@@ -31,3 +33,4 @@ export const engineer = '/engineer';
 export const engineerEquipmentHall = '/engineer/equipment-hall';
 export const unidentifiedActivity = '/unidentified-activity';
 export const engineerTraining = '/engineer/training';
+export const engineerStatAndInfo = '/engineer/stat-and-info';

src/app/router/routes.tsx

@@ -34,6 +34,7 @@ import {
 
 import { OperationPageType } from 'entities/contract';
 import * as paths from './paths';
+import { EngineerStatPage } from '../../pages/engineer/stat';
 
 export type AppRoute = {
     titleTag: string;
@@ -285,6 +286,14 @@ export const routes: AppRoute[] = [
         forBetaUser: false,
         titleTag: 'Engineers Training — DeepMine',
     },
+    {
+        path: paths.engineerStatAndInfo,
+        Component: EngineerStatPage,
+        forLoggedIn: true,
+        forAdmin: false,
+        forBetaUser: false,
+        titleTag: 'Engineers Stat — DeepMine',
+    },
 ];
 
 export const fallbackRoute: AppRoute = {

src/entities/engineer/index.ts

@@ -3,3 +3,5 @@ export * from './constants';
 export * from './models';
 export * from './lib';
 export * from './api';
+export * from './info';
+export * from './stat';

src/entities/engineer/info.ts

@@ -0,0 +1,6 @@
+export type EngineerInfo = {
+    certificate_asset_id: number;
+    level: number;
+    skills_count: number;
+    start_time_gap: string;
+};

src/entities/engineer/stat.ts

@@ -0,0 +1,17 @@
+export type EngineerStatDto = {
+    date: string;
+    upgrades_count: number;
+    upgrades_status: string;
+    upgrade_total_count: number;
+    upgrades_fails_count: number;
+    upgrades_cost_of_execution: string;
+    upgrades: {
+        date: string;
+        type: string;
+        rarity: string;
+        status: string;
+        total_count: number;
+        fails_count: number;
+        cost_of_execution: string;
+    }[];
+};

src/features/engineer/index.ts

@@ -7,3 +7,5 @@ export * from './equipment-upgrade/model';
 export * from './equipment-upgrade/model/upgrade-kit';
 export * from './equipment-upgrade/lib';
 export * from './engineer-training';
+
+export * from './stat';

src/features/engineer/main-cabin/ui/menu/index.tsx

@@ -6,7 +6,11 @@ import {
     ToolOutlined,
     ProjectOutlined,
 } from '@ant-design/icons';
-import { engineerEquipmentHall, engineerTraining } from 'app/router/paths';
+import {
+    engineerEquipmentHall,
+    engineerStatAndInfo,
+    engineerTraining,
+} from 'app/router/paths';
 import { CabinStatus } from 'entities/engineer';
 import { Menu, MenuItem } from 'shared/ui';
 import styles from './styles.module.scss';
@@ -24,8 +28,8 @@ const menuItems = [
     },
     {
         icon: <ProjectOutlined />,
-        path: '',
-        unlockedAt: CabinStatus.CanSeeStats,
+        path: engineerStatAndInfo,
+        unlockedAt: true,
     },
 ];
 

src/features/engineer/stat/index.ts

@@ -0,0 +1 @@
+export * from './models/info';

src/features/engineer/stat/models/info.ts

@@ -0,0 +1,49 @@
+import { createEffect, createStore } from 'effector';
+import { createGate } from 'effector-react';
+import { forward } from 'effector/compat';
+import axios from 'axios';
+import { ENDPOINT } from 'app/constants';
+import { EngineerInfo, EngineerStatDto } from 'entities/engineer';
+
+const getEngineerInfo = createEffect(async ({ user }: { user: string }) => {
+    const { data = null } = await axios.get<EngineerInfo | null>(
+        `${ENDPOINT}/game-api/statistic/engineer/my_info`,
+        {
+            params: {
+                user,
+            },
+        }
+    );
+
+    return data;
+});
+const getEngineerStat = createEffect(async ({ user }: { user: string }) => {
+    const { data = null } = await axios.get<EngineerStatDto[] | null>(
+        `${ENDPOINT}/game-api/statistic/engineer/my_stats`,
+        {
+            params: {
+                user,
+            },
+        }
+    );
+
+    return data;
+});
+
+export const $engineerInfo = createStore<EngineerInfo | null>(null).on(
+    getEngineerInfo.doneData,
+    (_, data) => data
+);
+export const $engineerStat = createStore<EngineerStatDto[] | null>(null).on(
+    getEngineerStat.doneData,
+    (_, data) => data
+);
+
+export const EngineerStatInfo = createGate<{ user: string }>(
+    'EngineerStatInfo'
+);
+
+forward({
+    from: EngineerStatInfo.open,
+    to: [getEngineerInfo, getEngineerStat],
+});

src/pages/engineer/index.tsx

@@ -20,3 +20,4 @@ const EngineerPage = () => {
 };
 
 export { EngineerPage };
+export * from './stat';

src/pages/engineer/stat/index.tsx

@@ -0,0 +1,57 @@
+import { FC } from 'react';
+
+import { PageWithTabs, useAccountName } from 'shared';
+import { TableWithTitle } from 'features';
+import { useTranslation } from 'react-i18next';
+import { useGate, useStore } from 'effector-react';
+import {
+    $engineerInfo,
+    $engineerStat,
+    EngineerStatInfo,
+} from 'features/engineer';
+import { EngineerStat } from './ui';
+
+enum Tabs {
+    info,
+    stat,
+}
+
+export const EngineerStatPage: FC = () => {
+    const { t } = useTranslation();
+    const accountName = useAccountName();
+    useGate(EngineerStatInfo, { user: accountName });
+    const engineerStatInfo = useStore($engineerInfo);
+    const engineerStat = useStore($engineerStat);
+
+    return (
+        <PageWithTabs
+            tabs={[
+                {
+                    key: String(Tabs.info),
+                    children: (
+                        <TableWithTitle
+                            title={t('Engineers info')}
+                            data={{
+                                [t('Certificate')]:
+                                    engineerStatInfo?.certificate_asset_id,
+                                [t('Level')]: engineerStatInfo?.level,
+                                [t('Skills learned')]:
+                                    engineerStatInfo?.skills_count,
+                                [t(
+                                    'Average start time of the contract after the offer'
+                                )]: engineerStatInfo?.start_time_gap,
+                            }}
+                        />
+                    ),
+                    label: t(`My info`),
+                },
+                {
+                    key: String(Tabs.stat),
+                    children: <EngineerStat data={engineerStat} />,
+                    label: t(`pages.contractorStatsAndInfo.mineAreaInfo`),
+                },
+            ]}
+            documentTitleScope="Engineer stat and info"
+        />
+    );
+};

src/pages/engineer/stat/ui/index.tsx

@@ -0,0 +1,105 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { ColumnsType } from 'antd/lib/table';
+import { Table, toLocaleDate } from 'shared';
+import { ContractorStats } from 'entities/game-stat';
+import { EngineerStatDto } from 'entities/engineer';
+
+export const EngineerStat: FC<{
+    data: EngineerStatDto[] | null | undefined;
+}> = ({ data }) => {
+    const { t } = useTranslation();
+
+    const expandedColumns = [
+        {
+            title: t('pages.contractorMiningStats.date'),
+            dataIndex: 'date',
+            key: 'date',
+            render: () => <div />,
+        },
+        {
+            dataIndex: 'type',
+            key: 'type',
+        },
+        {
+            dataIndex: 'status',
+            key: 'status',
+        },
+        {
+            dataIndex: 'cost_of_execution',
+            key: 'cost_of_execution',
+        },
+        {
+            dataIndex: 'total_count',
+            key: 'total_count',
+        },
+        {
+            dataIndex: 'fails_count',
+            key: 'fails_count',
+        },
+        {
+            dataIndex: 'cost_of_execution',
+            key: 'cost_of_execution',
+        },
+    ];
+    const columns: ColumnsType<ContractorStats> = [
+        {
+            title: t('Date'),
+            dataIndex: 'date',
+            key: 'date',
+            render: (date: number) => toLocaleDate(date),
+        },
+        {
+            title: t('Upgrades'),
+            dataIndex: 'upgrades_count',
+            key: 'upgrades_count',
+        },
+        {
+            title: t('Status'),
+            dataIndex: 'upgrades_status',
+            key: 'upgrades_status',
+        },
+        {
+            title: t('DME earned'),
+            dataIndex: 'upgrades_cost_of_execution',
+            key: 'upgrades_cost_of_execution',
+        },
+        {
+            title: t('Total upgrades'),
+            dataIndex: 'upgrade_total_count',
+            key: 'upgrade_total_count',
+        },
+        {
+            title: t('Total fails'),
+            dataIndex: 'upgrades_fails_count',
+            key: 'upgrades_fails_count',
+        },
+        {
+            title: t('Total DME earned'),
+            dataIndex: 'upgrades_fails_count',
+            key: 'upgrades_fails_count',
+        },
+    ];
+
+    const expandedRowRender = (value: EngineerStatDto) => {
+        return (
+            <Table
+                dataSource={value.upgrades}
+                columns={expandedColumns}
+                showHeader={false}
+                bordered={false}
+                tableLayout="fixed"
+            />
+        );
+    };
+    return (
+        <Table
+            dataSource={data?.map((stat) => ({ ...stat, key: stat.date }))}
+            columns={columns}
+            tableLayout="fixed"
+            expandable={{
+                expandedRowRender,
+            }}
+        />
+    );
+};