version 3.0

.env.development

@@ -1,3 +1,3 @@
 REACT_APP_CUSTOM_DIR = ''
-REACT_APP_API_ENDPOINT = 'http://localhost/pcm'
+REACT_APP_API_ENDPOINT = 'http://localhost/pcm-backend-tmbcloud'
 REACT_APP_WEBSITE = 'http://tmb.co.ir'

package.json

@@ -3,10 +3,17 @@
   "version": "2.0.1",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.10.5",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@fortawesome/react-fontawesome": "^0.1.18",
+    "@mantine/core": "^5.8.2",
+    "@mantine/hooks": "^5.8.2",
+    "@mantine/modals": "^5.8.2",
+    "@mantine/notifications": "^5.8.2",
     "@material-ui/core": "^4.11.1",
+    "@reduxjs/toolkit": "^1.9.1",
+    "@tabler/icons": "^1.114.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
@@ -22,8 +29,10 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-hot-toast": "^2.2.0",
+    "react-redux": "^8.0.5",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
+    "use-sound": "^4.0.1",
     "uuid": "^8.3.2"
   },
   "scripts": {

src/App.css

@@ -41,8 +41,8 @@ a:hover {
 
 .panel-container {
   position: fixed;
-  width: 90%;
-  height: 80%;
+  width: 95%;
+  height: 95%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
@@ -120,6 +120,7 @@ a:hover {
   font-weight: 400;
   flex-direction: row;
   align-items: center;
+  white-space: nowrap;
 }
 
 .sidebar > .menu > ul > li > a:hover {
@@ -236,6 +237,7 @@ a:hover {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
+  position: relative;
 }
 
 .section-header {
@@ -637,7 +639,7 @@ a:hover {
 .numberOfStatisticsContainer {
   border: 1px solid #008a6c;
   padding: 10px 20px;
-  margin: 30px 30px 50px;
+  margin: 20px 30px 20px;
   background: #ffffff;
   display: flex;
   justify-content: center;

src/components/adminPanel.jsx

@@ -22,10 +22,11 @@ import Print from "./print";
 import EditPhoneNumber from "./editPhoneNumber";
 import EditAddress from "./editAddress";
 import jwtDecode from "jwt-decode";
+import axios from "../services/httpServices";
 import qs from "qs";
 import SMSServiceSettings from "./smsServiceSettings";
-import axios from "./../services/httpServices";
 import StatisticsSettings from "./statisticsSettings";
+import GetDeviceReport from "./getDeviceReport";
 
 const dir = process.env.REACT_APP_CUSTOM_DIR;
 const panelURL = process.env.REACT_APP_PANEL_URL;
@@ -63,6 +64,12 @@ const adminMenu = [
   },
   {
     id: "6",
+    title: "گزارش گیری",
+    link: `${dir}/admin/get-report`,
+    fontAwesomeIcon: "fa-clock",
+  },
+  {
+    id: "7",
     title: "خروج",
     fontAwesomeIcon: "fa-sign-out-alt",
     action: () => {
@@ -93,6 +100,12 @@ const clientMenu = [
   },
   {
     id: "6",
+    title: "گزارش گیری",
+    link: `${dir}/admin/get-report`,
+    fontAwesomeIcon: "fa-clock",
+  },
+  {
+    id: "7",
     title: "خروج",
     fontAwesomeIcon: "fa-sign-out-alt",
     action: () => {
@@ -126,6 +139,7 @@ class AdminPanel extends Component {
           <Route path={`${dir}/admin/users`} component={Users} />
           <Route path={`${dir}/admin/user/:username`} component={User} />
           <Route path={`${dir}/admin/devices`} component={Devices} />
+          <Route path={`${dir}/admin/get-report`} component={GetDeviceReport} />
           <Route
             path={`${dir}/admin/sms-settings`}
             component={SMSServiceSettings}

src/components/common/Pagination/PaginatedTable.jsx

@@ -3,7 +3,7 @@ import PaginationBar from "./PaginationBar";
 import Table from "../table";
 import _ from "lodash";
 
-const LIMIT = 10;
+const LIMIT = 15;
 
 const PaginatedTable = ({ data, columns }) => {
   const [paginationState, setPaginationState] = useState({

src/components/common/Pagination/Pagination.module.css

@@ -10,7 +10,6 @@
   flex-direction: row;
   align-items: center;
   align-self: center;
-  max-width: 320px;
   margin-top: 20px;
 }
 

src/components/common/Pagination/PaginationBar.jsx

@@ -1,8 +1,11 @@
+import { Button, Input } from "@mantine/core";
 import React from "react";
+import { useRef } from "react";
 import classes from "./Pagination.module.css";
 
 const PaginationBar = (props) => {
   const { currentPage, onPageNumberClick, numberOfPages } = props;
+  const pageNumberRef = useRef();
 
   const arr = new Array(numberOfPages);
   const PAGE_NUMBER_LIMIT = 5;
@@ -44,6 +47,7 @@ const PaginationBar = (props) => {
       }
     }
 
+    // i = 100    ta 105
     for (
       let i = currentPage;
       i < currentPage + limit && i <= numberOfPages;
@@ -65,6 +69,18 @@ const PaginationBar = (props) => {
     return pagination;
   };
 
+  const handleGoToPageClick = (e) => {
+    e.preventDefault();
+    const { value } = pageNumberRef.current;
+    if (
+      value <= numberOfPages &&
+      numberOfPages > PAGE_NUMBER_LIMIT &&
+      value > 0
+    ) {
+      onPageNumberClick(parseInt(value));
+    }
+  };
+
   return (
     <div className={classes.PaginationBarContainer}>
       {currentPage > 1 ? (
@@ -88,6 +104,28 @@ const PaginationBar = (props) => {
           آخرین
         </span>
       ) : null}
+      {numberOfPages > 5 ? (
+        <form
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            marginRight: "10px",
+            alignItems: "center",
+            columnGap: 10,
+          }}
+          onSubmit={handleGoToPageClick}
+        >
+          <Input
+            styles={{ input: { width: "100px" } }}
+            placeholder='شماره صفحه'
+            radius='xs'
+            ref={pageNumberRef}
+          />
+          <Button onClick={handleGoToPageClick} compact>
+            رفتن به صفحه
+          </Button>
+        </form>
+      ) : null}
     </div>
   );
 };