Merge pull request #127 from DNO-inc/dev

Added statistic (alpha version)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tres",
   "private": true,
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

public/locales/en/translation.json

@@ -124,6 +124,7 @@
       "deleted": "Deleted"
     },
     "notifications": "Notifications",
+    "statistic": "Statistic",
     "generalTickets": "General Tickets",
     "settings": "Settings"
   },
@@ -251,7 +252,19 @@
     "close": "Close"
   },
   "statistic": {
-    "heading": "Statistic"
+    "heading": "Statistic",
+    "activitySummary": {
+      "heading": "Activity summary"
+    },
+    "calendarStatistic": {
+      "heading": "Calendar"
+    },
+    "mentionedFaculties": {
+      "heading": "Mentioned faculties"
+    },
+    "systemStatus": {
+      "heading": "Current system status"
+    }
   },
   "privacyPolicy": {
     "postscript": {

public/locales/ua/translation.json

@@ -124,6 +124,7 @@
       "deleted": "Видалені"
     },
     "notifications": "Сповіщення",
+    "statistic": "Статистика",
     "generalTickets": "Поточні звернення",
     "settings": "Налаштування"
   },
@@ -251,7 +252,19 @@
     "close": "Вирішений"
   },
   "statistic": {
-    "heading": "Статистика"
+    "heading": "Статистика",
+    "activitySummary": {
+      "heading": "Підсумок діяльності"
+    },
+    "calendarStatistic": {
+      "heading": "Календар"
+    },
+    "mentionedFaculties": {
+      "heading": "Згадані факультети"
+    },
+    "systemStatus": {
+      "heading": "Поточний стан системи"
+    }
   },
   "privacyPolicy": {
     "postscript": {

src/components/StatisticCard/StatisticCard.tsx

@@ -0,0 +1,49 @@
+import { CSSProperties, FC } from "react";
+import { useTranslation } from "react-i18next";
+
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import useTheme from "@mui/material/styles/useTheme";
+
+import IPalette from "theme/IPalette.interface";
+
+interface StatisticCardProps {
+  title: string;
+  width: number;
+  children: JSX.Element;
+  styles?: CSSProperties;
+}
+
+const StatisticCard: FC<StatisticCardProps> = ({
+  title,
+  width,
+  children,
+  styles,
+}) => {
+  const { t } = useTranslation();
+  const { palette }: IPalette = useTheme();
+
+  return (
+    <Box
+      sx={{
+        ...styles,
+        display: "flex",
+        flexDirection: "column",
+        gap: "20px",
+        p: "15px 20px",
+        width: `${width}px`,
+        height: `fit-content`,
+        borderRadius: 1,
+        bgcolor: palette.grey.card,
+        border: `1px solid ${palette.grey.active}`,
+      }}
+    >
+      <Typography sx={{ fontSize: 20 }}>
+        {t(`statistic.${title}.heading`)}
+      </Typography>
+      {children}
+    </Box>
+  );
+};
+
+export { StatisticCard };

src/components/StatisticCard/index.ts

@@ -0,0 +1 @@
+export { StatisticCard } from "./StatisticCard";

src/constants/scopes.ts

@@ -1,7 +1,7 @@
 const scopes = {
   REPORTS: "Reports",
   QA: "Q/A",
-  SUGGESTIONS: "Suggestions",
+  SUGGESTION: "Suggestion",
 };
 
 export { scopes };

src/layouts/MainLayout/components/Sidebar/components/SidebarActions/components/GeneralActions/GeneralActions.tsx

@@ -19,6 +19,8 @@ import GridViewIcon from "@mui/icons-material/GridView";
 import GridViewSharpIcon from "@mui/icons-material/GridViewSharp";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
+import InsertChartIcon from "@mui/icons-material/InsertChart";
+import InsertChartOutlinedIcon from "@mui/icons-material/InsertChartOutlined";
 
 import { NavbarListItem } from "./components/NavbarListItem";
 
@@ -103,15 +105,26 @@ const GeneralActions: FC<GeneralActionsProps> = ({
           handleListItemClick={handleListItemClick}
         />
         {isAdmin && (
-          <NavbarListItem
-            title={"queue"}
-            endpoint={endpoints.QUEUE}
-            disabled={!isAuth}
-            selectedKey={selectedKey}
-            handleListItemClick={handleListItemClick}
-            activeIcon={<GridViewSharpIcon />}
-            disableIcon={<GridViewIcon />}
-          />
+          <>
+            <NavbarListItem
+              title={"queue"}
+              endpoint={endpoints.QUEUE}
+              disabled={!isAuth}
+              selectedKey={selectedKey}
+              handleListItemClick={handleListItemClick}
+              activeIcon={<GridViewSharpIcon />}
+              disableIcon={<GridViewIcon />}
+            />
+            <NavbarListItem
+              title={"statistic"}
+              endpoint={endpoints.STATISTIC}
+              disabled={!isAuth}
+              selectedKey={selectedKey}
+              handleListItemClick={handleListItemClick}
+              activeIcon={<InsertChartIcon />}
+              disableIcon={<InsertChartOutlinedIcon />}
+            />
+          </>
         )}
         <NavbarListItem
           title={"notifications"}

src/pages/Statistic/Statistic.tsx

@@ -1,20 +1,20 @@
-import { FC, useEffect, useState } from "react";
+import { FC, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 
-import { GlobalStatistic } from "./components/GlobalStatistic";
+import { StatusesStatistic } from "./components/StatusesStatistic";
+import { ActivitySummary } from "./components/ActivitySummary";
+import { CalendarStatistic } from "./components/CalendarStatistic";
+import { FacultiesStatistic } from "./components/FacultiesStatistic";
 
-import { useGetStatisticsMutation } from "api/statistics.api";
-import { useGetStatusesQuery } from "api/meta.api";
-
-export interface IGlobalStatus {
-  status_id: number;
-  status_name: string;
-  count: number;
-}
+import {
+  useGetFacultyStatisticQuery,
+  useGetGeneralStatisticMutation,
+  useGetSummaryActivityQuery,
+} from "api/statistic.api";
 
 export interface IPeriodStatus {
   date: string;
@@ -23,51 +23,46 @@ export interface IPeriodStatus {
   tickets_count: number;
 }
 
-export interface IStatus {
-  status_id: number;
-  name: string;
-}
-
-type ApiResponse = {
-  data?: {
-    global: IGlobalStatus[];
-    period: IPeriodStatus[];
-  };
-  error?: any;
-};
-
 const Statistic: FC = () => {
   const { t } = useTranslation();
 
-  const [getStatistics] = useGetStatisticsMutation();
-  const { data: statuses, isSuccess } = useGetStatusesQuery({});
-
-  const [global, setGlobal] = useState([]);
+  const { data: summaryActivity } = useGetSummaryActivityQuery({});
+  const { data: facultiesStatistic } = useGetFacultyStatisticQuery({});
+  const [getStatistics, { data: generalStatistic }] =
+    useGetGeneralStatisticMutation();
 
   useEffect(() => {
-    getStatistics(JSON.stringify({})).then((res: ApiResponse) => {
-      if (res?.data) {
-        const statistics = JSON.parse(res.data as any);
-
-        setGlobal(statistics.global.statuses);
-      }
-    });
+    getStatistics(JSON.stringify({}));
   }, []);
 
   return (
-    <Grid container sx={{ width: "100%" }}>
+    <Grid container>
       <Box>
-        <Typography variant="h1" sx={{ textAlign: "center" }}>
-          {t("statistic.heading")}
-        </Typography>
+        <Typography variant="h1">{t("statistic.heading")}</Typography>
       </Box>
-      <Box sx={{ width: "100%" }}>
-        {global.length > 0 && isSuccess && (
-          <GlobalStatistic
-            globalStatistic={global}
-            statuses={statuses.statuses_list}
+      <Box
+        sx={{
+          display: "grid",
+          gap: "20px",
+          gridTemplateAreas: `"statuses calendar faculties faculties" 
+                              "statuses activities activities none"`,
+          pt: "100px !important",
+        }}
+      >
+        {generalStatistic && (
+          <StatusesStatistic statusesStatistic={generalStatistic.statuses} />
+        )}
+        {generalStatistic && (
+          <CalendarStatistic calendarStatistic={generalStatistic.scopes} />
+        )}
+        {facultiesStatistic && (
+          <FacultiesStatistic
+            facultiesStatistic={facultiesStatistic.faculties_data}
           />
         )}
+        {summaryActivity && (
+          <ActivitySummary summaryActivity={summaryActivity} />
+        )}
       </Box>
     </Grid>
   );