Merge pull request #128 from DNO-inc/feature#100

Fix statuses filter bug and hide statistic

public/locales/en/translation.json

@@ -256,14 +256,14 @@
     "activitySummary": {
       "heading": "Activity summary"
     },
-    "calendarStatistic": {
-      "heading": "Calendar"
+    "scopeStatistic": {
+      "heading": "Tickets processed"
     },
     "mentionedFaculties": {
       "heading": "Mentioned faculties"
     },
     "systemStatus": {
-      "heading": "Current system status"
+      "heading": "Last 30 day"
     }
   },
   "privacyPolicy": {

public/locales/ua/translation.json

@@ -256,14 +256,14 @@
     "activitySummary": {
       "heading": "Підсумок діяльності"
     },
-    "calendarStatistic": {
-      "heading": "Календар"
+    "scopeStatistic": {
+      "heading": "Звернень оброблено"
     },
     "mentionedFaculties": {
       "heading": "Згадані факультети"
     },
     "systemStatus": {
-      "heading": "Поточний стан системи"
+      "heading": "Останні 30 днів"
     }
   },
   "privacyPolicy": {

src/components/FilterPanel/components/StatusCheckboxGroup/components/CustomCheckbox/CustomCheckbox.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { useTranslation } from "react-i18next";
 
 import Box from "@mui/material/Box";
 import Checkbox from "@mui/material/Checkbox";
@@ -13,11 +14,12 @@ interface CustomCheckboxProps {
 }
 
 const CustomCheckbox: FC<CustomCheckboxProps> = ({ status }) => {
+  const { t } = useTranslation();
   const { palette }: IPalette = useTheme();
 
   return (
     <FormControlLabel
-      label={status.name}
+      label={t(`statusesFilter.${status.name}`)}
       control={
         <Box sx={{ position: "relative" }}>
           <Checkbox

src/components/FilterPanel/components/StatusCheckboxGroup/hooks/useGetStatusesFullInfo.ts

@@ -1,5 +1,4 @@
 import { ChangeEvent } from "react";
-import { useTranslation } from "react-i18next";
 import { useSearchParams } from "react-router-dom";
 
 import useTheme from "@mui/material/styles/useTheme";
@@ -19,7 +18,6 @@ export interface IStatus {
 export const useGetStatusesFullInfo = (
   isAllStatuses: boolean
 ): [IStatus[], boolean[]] => {
-  const { t } = useTranslation();
   const { palette }: IPalette = useTheme();
 
   const [searchParams] = useSearchParams();
@@ -32,7 +30,7 @@ export const useGetStatusesFullInfo = (
     checked: boolean
   ): IStatus => ({
     id,
-    name: t(`statusesFilter.${name}`),
+    name: name,
     color: palette.semantic[color],
     checked,
     onChange: handleChange(id),

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

@@ -19,8 +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 InsertChartIcon from "@mui/icons-material/InsertChart";
+// import InsertChartOutlinedIcon from "@mui/icons-material/InsertChartOutlined";
 
 import { NavbarListItem } from "./components/NavbarListItem";
 
@@ -115,15 +115,15 @@ const GeneralActions: FC<GeneralActionsProps> = ({
               activeIcon={<GridViewSharpIcon />}
               disableIcon={<GridViewIcon />}
             />
-            <NavbarListItem
+            {/* <NavbarListItem
               title={"statistic"}
               endpoint={endpoints.STATISTIC}
               disabled={!isAuth}
               selectedKey={selectedKey}
               handleListItemClick={handleListItemClick}
               activeIcon={<InsertChartIcon />}
               disableIcon={<InsertChartOutlinedIcon />}
-            />
+            /> */}
           </>
         )}
         <NavbarListItem

src/pages/Queue/Queue.tsx

@@ -33,7 +33,7 @@ export interface IScope {
   queues: IQueue[];
 }
 
-const scopeNames = ["Reports", "Q/A", "Suggestions"];
+const scopeNames = ["Reports", "Q/A", "Suggestion"];
 
 const Queue: FC = () => {
   const { t, i18n } = useTranslation();

src/pages/Statistic/Statistic.tsx

@@ -7,7 +7,7 @@ import Typography from "@mui/material/Typography";
 
 import { StatusesStatistic } from "./components/StatusesStatistic";
 import { ActivitySummary } from "./components/ActivitySummary";
-import { CalendarStatistic } from "./components/CalendarStatistic";
+import { ScopesStatistic } from "./components/ScopesStatistic";
 import { FacultiesStatistic } from "./components/FacultiesStatistic";
 
 import {
@@ -44,16 +44,17 @@ const Statistic: FC = () => {
         sx={{
           display: "grid",
           gap: "20px",
-          gridTemplateAreas: `"statuses calendar faculties faculties" 
-                              "statuses activities activities none"`,
+          gridTemplateAreas: `"statuses activities faculties" 
+                              "statuses scopes     faculties"
+                              "statuses none       none"`,
           pt: "100px !important",
         }}
       >
         {generalStatistic && (
           <StatusesStatistic statusesStatistic={generalStatistic.statuses} />
         )}
         {generalStatistic && (
-          <CalendarStatistic calendarStatistic={generalStatistic.scopes} />
+          <ScopesStatistic calendarStatistic={generalStatistic.scopes} />
         )}
         {facultiesStatistic && (
           <FacultiesStatistic
@@ -63,6 +64,7 @@ const Statistic: FC = () => {
         {summaryActivity && (
           <ActivitySummary summaryActivity={summaryActivity} />
         )}
+        <div style={{ gridArea: "none" }}></div>
       </Box>
     </Grid>
   );

src/pages/Statistic/components/ActivitySummary/ActivitySummary.tsx

@@ -53,7 +53,7 @@ const ActivitySummary: FC<ActivitySummaryProps> = ({ summaryActivity }) => {
   return (
     <StatisticCard
       title={"activitySummary"}
-      width={420}
+      width={320}
       styles={{ gridArea: "activities" }}
     >
       <Box

src/pages/Statistic/components/ActivitySummary/components/ActivityTile/ActivityTile.tsx

@@ -10,20 +10,31 @@ interface ActivityTileProps {
   color: string;
 }
 
-const ActivityTile: FC<ActivityTileProps> = ({
-  icon,
-  stat,
-  title,
-  percent,
-  color,
-}) => {
+const ActivityTile: FC<ActivityTileProps> = ({ icon, stat, title }) => {
   return (
-    <Box>
-      <img src={icon} alt={title} style={{ marginBottom: 12 }} />
-      <div style={{ display: "flex", flexDirection: "column", gap: 5 }}>
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        flexGrow: 1,
+      }}
+    >
+      <img
+        src={icon}
+        alt={title}
+        style={{ marginBottom: 12, width: 26, height: 26 }}
+      />
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 5,
+        }}
+      >
         <div style={{ fontSize: 16 }}>{stat}</div>
         <div style={{ fontSize: 12 }}>{title}</div>
-        <div style={{ fontSize: 10, color: color }}>{percent}</div>
       </div>
     </Box>
   );

src/pages/Statistic/components/CalendarStatistic/components/ScopesStatistic/ScopesStatistic.tsx → src/pages/Statistic/components/ScopesStatistic/ScopesStatistic.tsx

@@ -1,63 +1,39 @@
 import { FC } from "react";
 
 import Box from "@mui/material/Box";
-import useTheme from "@mui/material/styles/useTheme";
-import { Button, Divider, Typography } from "@mui/material";
 
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import FlagOutlinedIcon from "@mui/icons-material/FlagOutlined";
 import HandshakeOutlinedIcon from "@mui/icons-material/HandshakeOutlined";
 
-import IPalette from "theme/IPalette.interface";
-import { IScope } from "../../CalendarStatistic";
+import { StatisticCard } from "components/StatisticCard";
+
 import { scopes } from "constants/scopes";
 import { ScopeTile } from "./components/ScopeTile";
 
+interface IScope {
+  date: string;
+  scope: string;
+  tickets_count: number;
+}
+
 interface ScopesStatisticProps {
   calendarStatistic: IScope[];
 }
 
 const ScopesStatistic: FC<ScopesStatisticProps> = ({ calendarStatistic }) => {
-  const { palette }: IPalette = useTheme();
-
   const icons = {
     [scopes.QA]: <HelpOutlineIcon fontSize="small" />,
     [scopes.REPORTS]: <FlagOutlinedIcon fontSize="small" />,
     [scopes.SUGGESTION]: <HandshakeOutlinedIcon fontSize="small" />,
   };
 
   return (
-    <Box
-      sx={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "25px",
-        fontSize: 14,
-        fontWeight: 500,
-      }}
+    <StatisticCard
+      title={"scopeStatistic"}
+      width={320}
+      styles={{ gridArea: "scopes" }}
     >
-      <Divider sx={{ ml: "-14px", width: "110%" }} />
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <Typography variant="h2" sx={{ fontWeight: 500 }}>
-          Tickets processed
-        </Typography>
-        <Button
-          color="inherit"
-          sx={{
-            fontSize: 14,
-            color: palette.whiteAlpha.default,
-            textTransform: "initial",
-          }}
-        >
-          View all
-        </Button>
-      </Box>
       <Box sx={{ display: "flex", flexDirection: "column", gap: "14px" }}>
         {calendarStatistic.map(scopeStat => {
           const { scope, tickets_count } = scopeStat;
@@ -72,7 +48,7 @@ const ScopesStatistic: FC<ScopesStatisticProps> = ({ calendarStatistic }) => {
           );
         })}
       </Box>
-    </Box>
+    </StatisticCard>
   );
 };