Merge pull request #1014 from ita-social-projects/#999-FE-Analytics-o…

…f-companies

#999 fe analytics of companies

FrontEnd/src/pages/AdminPage/Menu/Menu.jsx

@@ -1,5 +1,6 @@
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { useAuth } from '../../../hooks';
+import ProfilesStatistics from '../UserProfilesTable/ProfilesStatistics';
 import css from './Menu.module.css';
 
 const MENU = [
@@ -25,6 +26,7 @@ const MENU = [
     },
 ];
 
+
 const SUPERUSER_MENU = [
     {
         id: 'am5',
@@ -41,6 +43,7 @@ const SUPERUSER_MENU = [
 
 function Menu() {
     const { isSuperUser } = useAuth();
+    const location = useLocation();
 
     return (
         <div className={css['menu-section']}>
@@ -53,6 +56,7 @@ function Menu() {
                     key={element.id} to={element.link}>{element.title}
                 </NavLink>
             ))}
+            {location.pathname === '/customadmin/profiles/' && <ProfilesStatistics />}
         </div>
     );
 }

FrontEnd/src/pages/AdminPage/Menu/Menu.module.css

@@ -22,3 +22,4 @@
 .menu-section-element__active {
     font-weight: 600;
 }
+

FrontEnd/src/pages/AdminPage/UserProfilesTable/ProfilesStatistics.jsx

@@ -0,0 +1,69 @@
+import axios from 'axios';
+import useSWR from 'swr';
+import { Descriptions } from 'antd';
+import Loader from '../../../components/Loader/Loader';
+import css from './ProfilesStatistics.module.css';
+
+async function fetcher(url) {
+  const response = await axios.get(url);
+  return response.data;
+}
+
+function ProfilesStatistics() {
+  const baseUrl = process.env.REACT_APP_BASE_API_URL;
+  const url = `${baseUrl}/api/admin/profiles/statistics/`;
+  const { data: statistics, error, isLoading } = useSWR(url, fetcher);
+
+  const items = statistics
+    ? [
+        {
+          key: '1',
+          label: 'Кількість зареєстрованих компаній',
+          children: statistics.companies_count,
+        },
+        {
+          key: '2',
+          label: 'Кількість Інвесторів',
+          children: statistics.investors_count,
+        },
+        {
+          key: '3',
+          label: 'Кількість Cтратапів',
+          children: statistics.startups_count,
+        },
+        {
+          key: '4',
+          label: 'Кількість заблокованих компаній',
+          children: statistics.blocked_companies_count,
+        },
+      ]
+    : [];
+
+  return isLoading ? (
+    <div className={css['loader-container']}>
+      <Loader />
+    </div>
+  ) : error ? (
+    <div className={css['error']}>Не вдалося отримати статистику компаній</div>
+  ) : (
+    <Descriptions
+      title="Статистика компаній"
+      column={1}
+      bordered
+      size="small"
+      items={items.map((item) => ({
+        ...item,
+        label: (
+          <span className={css['description-item-label']}>{item.label}</span>
+        ),
+        children: (
+          <span className={css['description-item-content']}>
+            {item.children}
+          </span>
+        ),
+      }))}
+    />
+  );
+}
+
+export default ProfilesStatistics;

FrontEnd/src/pages/AdminPage/UserProfilesTable/ProfilesStatistics.module.css

@@ -0,0 +1,24 @@
+.description-item-label {
+  max-width: 150px;
+}
+
+.description-item-content {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.error {
+  color: #f5222d;
+  background-color: #fff1f0; 
+  border: 1px solid #ffa39e;
+  padding: 10px;
+  border-radius: 4px;
+  margin-top: 10px;
+}
+
+.loader-container {
+  width: 200px;
+  height: 300px;
+}

FrontEnd/src/pages/CustomThemes/customAdminTheme.js

@@ -21,6 +21,13 @@ const customAdminTheme = {
       Table: {
         lineWidth: 3,
         colorPrimary: '#1f9a7c'
+      },
+      Carousel: {
+        colorBgContainer: '#B4D27A',
+        dotActiveWidth: 32,
+        dotWidth: 32,
+        dotHeight: 6,
+        lineHeight: 1,
       }
     },
     token: {