version 1.2

aliasadolahi74 · Nov 20, 2022 · 50c9ce8 · 50c9ce8
1 parent b5613c2
commit 50c9ce8
Show file tree

Hide file tree

Showing 35 changed files with 18,768 additions and 395 deletions.
diff --git a/.env.development b/.env.development
@@ -1,3 +1,3 @@
 REACT_APP_CUSTOM_DIR = ''
-REACT_APP_API_ENDPOINT = 'http://localhost/pcm/'
+REACT_APP_API_ENDPOINT = 'http://localhost/pcm'
 REACT_APP_WEBSITE = 'http://tmb.co.ir'
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,8 +1,11 @@
 {
   "name": "pcm-app",
-  "version": "1.3.0",
+  "version": "2.0.1",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
     "@material-ui/core": "^4.11.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",

diff --git a/src/App.js b/src/App.js
@@ -8,8 +8,7 @@ import { Route, Redirect, Switch } from "react-router-dom";
 import Login from "./components/login";
 import { MuiThemeProvider, createMuiTheme } from "@material-ui/core";
 import jwtDecode from "jwt-decode";
-import axios from "axios";
-import config from "./config.json";
+import axios from "./services/httpServices";
 import qs from "qs";
 const dir = process.env.REACT_APP_CUSTOM_DIR;
 
@@ -63,7 +62,7 @@ async function refreshToken(oldToken) {
     method: "POST",
     headers: { "content-type": "application/x-www-form-urlencoded" },
     data: qs.stringify({ token: oldToken }),
-    url: `${config.apiBaseURL}/refresh-token.php`,
+    url: `/refresh-token.php`,
   };
   const loginInfo = await axios(loginOptions);
   if (loginInfo.data.status) {

diff --git a/src/components/adminPanel.jsx b/src/components/adminPanel.jsx
@@ -22,71 +22,91 @@ import Print from "./print";
 import EditPhoneNumber from "./editPhoneNumber";
 import EditAddress from "./editAddress";
 import jwtDecode from "jwt-decode";
-import axios from "axios";
-import config from "../config.json";
 import qs from "qs";
 import SMSServiceSettings from "./smsServiceSettings";
+import axios from "./../services/httpServices";
+import StatisticsSettings from "./statisticsSettings";
 
 const dir = process.env.REACT_APP_CUSTOM_DIR;
 const panelURL = process.env.REACT_APP_PANEL_URL;
 
+const adminMenu = [
+  {
+    id: "1",
+    title: "داشبورد",
+    link: `${dir}/admin/dashboard`,
+    fontAwesomeIcon: "fa-database",
+  },
+  {
+    id: "2",
+    title: "کاربران",
+    link: `${dir}/admin/users`,
+    fontAwesomeIcon: "fa-users",
+  },
+  {
+    id: "3",
+    title: "دستگاه‌ها",
+    link: `${dir}/admin/devices`,
+    fontAwesomeIcon: "fa-hdd",
+  },
+  {
+    id: "4",
+    title: "سرویس پیامکی",
+    link: `${dir}/admin/sms-settings`,
+    fontAwesomeIcon: "fa-sms",
+  },
+  {
+    id: "5",
+    title: "تنظیمات آماری",
+    link: `${dir}/admin/statistics-settings`,
+    fontAwesomeIcon: "fa-clock",
+  },
+  {
+    id: "6",
+    title: "خروج",
+    fontAwesomeIcon: "fa-sign-out-alt",
+    action: () => {
+      localStorage.clear();
+      window.location.href = panelURL;
+    },
+  },
+];
+
+const clientMenu = [
+  {
+    id: "1",
+    title: "داشبورد",
+    link: `${dir}/admin/dashboard`,
+    fontAwesomeIcon: "fa-database",
+  },
+  {
+    id: "3",
+    title: "دستگاه‌ها",
+    link: `${dir}/admin/devices`,
+    fontAwesomeIcon: "fa-hdd",
+  },
+  {
+    id: "5",
+    title: "پشتیبانی",
+    link: `${dir}/admin/support`,
+    fontAwesomeIcon: "fa-headset",
+  },
+  {
+    id: "6",
+    title: "خروج",
+    fontAwesomeIcon: "fa-sign-out-alt",
+    action: () => {
+      localStorage.clear();
+      window.location.href = panelURL;
+    },
+  },
+];
+
 class AdminPanel extends Component {
   state = {
-    sidebarItems: [
-      {
-        id: "1",
-        title: "داشبورد",
-        link: `${dir}/admin/dashboard`,
-        fontAwesomeIcon: "fa-database",
-      },
-      {
-        id: "2",
-        title: "کاربران",
-        link: `${dir}/admin/users`,
-        fontAwesomeIcon: "fa-users",
-      },
-      {
-        id: "3",
-        title: "دستگاه‌ها",
-        link: `${dir}/admin/devices`,
-        fontAwesomeIcon: "fa-hdd",
-      },
-      {
-        id: "4",
-        title: "سرویس پیامکی",
-        link: `${dir}/admin/sms-settings`,
-        fontAwesomeIcon: "fa-sms",
-      },
-      {
-        id: "5",
-        title: "پشتیبانی",
-        link: `${dir}/admin/support`,
-        fontAwesomeIcon: "fa-headset",
-      },
-      {
-        id: "6",
-        title: "خروج",
-        fontAwesomeIcon: "fa-sign-out-alt",
-        action: () => {
-          localStorage.clear();
-          window.location.href = panelURL;
-        },
-      },
-    ],
+    sidebarItems: authData.isAdmin ? adminMenu : clientMenu,
   };
 
-  componentDidMount() {
-    var sidebarItems;
-    if (!authData.isAdmin) {
-      sidebarItems = this.state.sidebarItems.filter(
-        (item) => item.id !== "2" && item.id !== "4"
-      );
-    } else {
-      sidebarItems = this.state.sidebarItems.filter((item) => item.id !== "5");
-    }
-    this.setState({ sidebarItems });
-  }
-
   render() {
     const sidebarItems = this.state.sidebarItems;
 
@@ -110,6 +130,10 @@ class AdminPanel extends Component {
             path={`${dir}/admin/sms-settings`}
             component={SMSServiceSettings}
           />
+          <Route
+            path={`${dir}/admin/statistics-settings`}
+            component={StatisticsSettings}
+          />
           <Route
             path={`${dir}/admin/edit-device/:deviceID`}
             component={EditDevice}
@@ -179,7 +203,7 @@ async function refreshToken(oldToken) {
       "content-type": "application/x-www-form-urlencoded",
     },
     data: qs.stringify({ token: oldToken }),
-    url: `${config.apiBaseURL}/refresh-token.php`,
+    url: `/refresh-token.php`,
   };
   const loginInfo = await axios(loginOptions);
   const token = loginInfo.data.body.token;

diff --git a/src/components/common/Pagination/PaginatedTable.jsx b/src/components/common/Pagination/PaginatedTable.jsx
@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import PaginationBar from "./PaginationBar";
+import Table from "../table";
+import _ from "lodash";
+
+const LIMIT = 10;
+
+const PaginatedTable = ({ data, columns }) => {
+  const [paginationState, setPaginationState] = useState({
+    currentPage: 1,
+  });
+
+  const getPaginatedData = (data, limit, page) => {
+    return _.slice(data, (page - 1) * limit, page * limit);
+  };
+
+  const handlePageNumberClick = (page) => {
+    setPaginationState({ currentPage: page });
+  };
+
+  const numberOfPages = Math.ceil(data?.length / LIMIT);
+  const { currentPage } = paginationState;
+
+  return (
+    <React.Fragment>
+      <Table
+        data={getPaginatedData(data, LIMIT, currentPage)}
+        columns={columns}
+      />
+      {numberOfPages > 1 ? (
+        <PaginationBar
+          numberOfPages={numberOfPages}
+          currentPage={currentPage}
+          onPageNumberClick={handlePageNumberClick}
+        />
+      ) : null}
+    </React.Fragment>
+  );
+};
+
+export default PaginatedTable;
diff --git a/src/components/common/pagination.module.css → ...s/common/Pagination/Pagination.module.css b/src/components/common/pagination.module.css → ...s/common/Pagination/Pagination.module.css
@@ -1,33 +1,41 @@
+:root {
+  --color-one: #2eaf7d;
+  --color-two: #3fd0c9;
+  --color-three: #449342;
+  --color-four: #02353c;
+}
+
 .PaginationBarContainer {
   display: flex;
   flex-direction: row;
   align-items: center;
   align-self: center;
-  max-width: 400px;
+  max-width: 320px;
   margin-top: 20px;
 }
 
 .PaginationBarItem {
   display: flex;
+  font-size: 13px;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   box-sizing: border-box;
-  background-color: #02353c;
+  background-color: var(--color-four);
   transition: 300ms;
   color: #fff;
   border-radius: 2px;
   min-height: 30px;
   min-width: 30px;
   margin-right: 1px;
   margin-left: 1px;
-  padding: 5px;
+  padding: 0 4px;
 }
 
 .PaginationBarItem:hover {
-  background-color: #449342;
+  background-color: var(--color-three);
 }
 
 .PaginationBarItem.CurrentPage {
-  background-color: #2eaf7d;
+  background-color: var(--color-one);
 }
diff --git a/src/components/common/pagination.jsx → ...nents/common/Pagination/PaginationBar.jsx b/src/components/common/pagination.jsx → ...nents/common/Pagination/PaginationBar.jsx
@@ -1,10 +1,8 @@
 import React from "react";
-import classes from "./pagination.module.css";
+import classes from "./Pagination.module.css";
 
-const Pagination = (props) => {
-  const { currentPage, onPageChange: onPageNumberClick, itemsCount } = props;
-
-  const numberOfPages = Math.ceil(itemsCount / 5);
+const PaginationBar = (props) => {
+  const { currentPage, onPageNumberClick, numberOfPages } = props;
 
   const arr = new Array(numberOfPages);
   const PAGE_NUMBER_LIMIT = 5;
@@ -37,7 +35,6 @@ const Pagination = (props) => {
         }
         pagination.push(
           <span
-            key={i}
             onClick={() => onPageNumberClick(i)}
             className={classArr.join(" ")}
           >
@@ -58,7 +55,6 @@ const Pagination = (props) => {
       }
       pagination.push(
         <span
-          key={i}
           onClick={() => onPageNumberClick(i)}
           className={classArr.join(" ")}
         >
@@ -73,7 +69,7 @@ const Pagination = (props) => {
     <div className={classes.PaginationBarContainer}>
       {currentPage > 1 ? (
         <span
-          key='first'
+          key='firstItem'
           onClick={() => onPageNumberClick(1)}
           className={classes.PaginationBarItem}
         >
@@ -85,7 +81,7 @@ const Pagination = (props) => {
 
       {currentPage < numberOfPages ? (
         <span
-          key='last'
+          key='lastItem'
           onClick={() => onPageNumberClick(numberOfPages)}
           className={classes.PaginationBarItem}
         >
@@ -96,4 +92,4 @@ const Pagination = (props) => {
   );
 };
 
-export default Pagination;
+export default PaginationBar;