#86 добавлены адаптив и стили на все страницы платежей

front/src/components/Account/Account.css

@@ -2,27 +2,19 @@ h4 {
   margin: 2rem 0rem 1rem;
 }
 .table-wrap {
-  margin-top: 0;
-  padding-top: 0;
   overflow: auto;
   position: relative;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
-
+  max-width: 100%;
   overflow-y: auto; 
-  height: 250px;
+  height: 60vh;
 }
 .table-image > td,th {
   vertical-align: middle;
   text-align: center;
 }
-.table thead{
-  margin-top: 0;
-  padding-top: 0;
-}
 .table{
   height: 100%;
-  text-align: center;
-  margin: 0 auto;
   font-size: 0.9em;
   font-family: sans-serif;
   display: inline-block;
@@ -31,13 +23,16 @@ h4 {
   overflow-x: auto;
   white-space: nowrap;
   -webkit-overflow-scrolling: touch;
-  border-collapse: collapse; width: 100%;
+  border-collapse: collapse; 
 }
 /* .table>thead{
     background-color: #009879;
     text-align: left;
 
 } */
+.table tr {
+  max-width: 100%;
+}
 .table th {
   position: sticky; 
   top: 0;
@@ -64,61 +59,15 @@ h4 {
   border-radius: 3px;
   border: 1px solid rgb(133, 131, 131);
   padding: 3px;
-  margin-top: 5px;
+  margin: 5px;
   font-size: 14px;
-  width: 100%;
+  width: 100px;
   box-shadow: 0 2px 3px 0 rgba(0,0,0,0.2);
   cursor: pointer;
 }
 .Account__btn:hover, .Account__btn:focus {
   background-color: #c4c7c7;
 }
-.button {
-  display: inline-block;
-  text-decoration: none;
-  margin: 2px;
-  padding: 10px;
-  background: linear-gradient(64.35deg,#ff7488 9.2%,#ff077d 89.76%);
-  color: white;
-  border-radius: 10px;
-  cursor: pointer;
-}
-
-.button:hover, .button:focus {
-  box-shadow: 0 0 0 4px rgba(0, 0, 255, .2);
-}
-
-.dropdown-content {
-  position: absolute;
-  background-color: #f1f1f1;
-  min-width: 160px;
-  overflow: auto;
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  z-index: 1;
-}
-
-.dropdown-content p {
-  color: black;
-  padding: 12px 16px;
-  text-decoration: none;
-  display: block;
-}
-
-.dropdown a:hover {background-color: #ddd;} */
 
 .show {display: block;}
 
-/* @media screen and (max-width: 600px){
-  .table-wrap {
-    overflow: auto;
-    position: relative;
-  }
-  .table{
-    display: inline-block;
-    vertical-align: top;
-    max-width: 100%;
-    overflow-x: auto;
-    white-space: nowrap;
-    -webkit-overflow-scrolling: touch;
-  }
-} */
\ No newline at end of file

front/src/components/Account/Account.js

@@ -70,10 +70,10 @@ const Account = ({ registry, payments, approve, cancelApprove, pay, cancelPay, s
               </td>
               {registry && user && (user._id===payment.user._id || user.role.includes('approvePayment'))?<td>
                 {payment.repeatability? (
-                  <> 
+                  <div className="flex-space"> 
                     <span >да</span>
                     <button className="Account__btn" onClick={() => stopRepeatability(payment._id)}>Отменить</button>
-                  </>
+                  </div>
                   ): <span >нет</span>}
                 </td>:user && user.role.includes('viewAllPayments') && <td>
                 {!payment.repeatability? <span >нет</span> : <span >да</span>}</td>}
@@ -83,15 +83,15 @@ const Account = ({ registry, payments, approve, cancelApprove, pay, cancelPay, s
                 {payment.approved && payment.paided && <span style={{ color: 'green' }}>Оплачен</span>}</td>}                               
               {registry && user && user.role.includes('approvePayment') && <td>
                 {!payment.approved? (
-                  <>
+                  <div className="flex-space">
                     <span style={{ color: 'red' }}>Не подтвержден</span>
                     <button className="Account__btn" onClick={() => approve(payment._id)}>Подтвердить</button>
-                  </>
+                  </div>
                   ): (
-                  <>
+                  <div className="flex-space">
                     <span style={{ color: 'orange' }}>Подтвержден</span>
                     <button className="Account__btn" onClick={() => cancelApprove(payment._id)}>Отменить</button>
-                  </>)}
+                  </div>)}
                 </td>}
               {registry && user && user.role.includes('payPayment') && !user.role.includes('approvePayment') && payment.approved && <td>
                 {!payment.paided? (

front/src/components/Header/Header.css

@@ -76,7 +76,7 @@
         margin-bottom: 0;
     }
 }
-@media screen and (min-width:1500px) {
+@media screen and (min-width:1200px) {
     .Header__menu{
         position:unset;
         display: flex;

front/src/components/Total/Total.css

+.Total {
+    text-align: center;
+    margin: 10px auto;
+    color: #363636;
+    display: flex;
+    flex-direction: column;
+}
+.Total__title {
+    margin: 10px;
+}
+.Total__company {
+    color: #363636;
+    font-size: 16px;
+    font-weight: 500;
+    border: 1px solid #f52284;
+    border-radius: 5px;
+    padding: 5px;
+    margin: 5px;
+    width: 95%;
+}
+@media screen and (min-width:600px) {
+    .Total__company {
+        font-size: 20px;
+        width: 320px;
+    }
+}
+@media screen and (min-width:1200px) {
+    .Total {
+        flex-direction: row;
+    }
+}
\ No newline at end of file

front/src/components/Total/Total.js

+import React from 'react'
+import './Total.css'
+
+const Total = ({payments}) => {
+    
+    let totalAsia = 0
+      payments.filter((payment) => {
+          if(payment.payer === "Froot_Middle_Asia"){
+              totalAsia += Number(payment.sum)
+          }
+          return totalAsia
+      });
+      let totalBusiness = 0
+      payments.filter((payment) => {
+          if(payment.payer === "Froot_Бизнес"){
+              totalBusiness += Number(payment.sum)
+          }
+          return totalBusiness
+      });
+    return (
+        <div className="Total">
+                  <h3 className="Total__title">Cумма платежей по компаниям:</h3>
+                  <span className="Total__company">"Froot_Middle_Asia": <strong>{totalAsia}</strong> KZT</span>
+                  <span className="Total__company">"Froot_Бизнес": <strong>{totalBusiness}</strong> KZT</span>
+             </div>
+    )
+}
+
+export default Total

front/src/components/UI/Buttons/ButtonPink/ButtonPink.css

 .ButtonPink {
-    width: 200px;
-    height: 40px;
+    min-width: 150px;
+    height: 35px;
     font-size: 16px;
     font-weight: bold;
     background-color: #ff067c;
     border: none;
     margin-left: 35px;
     color: #fff;
-    border-radius: 8px;
+    border-radius: 5px;
     box-shadow: 0 0 3px 2px;
     outline: none;
     cursor: pointer;

front/src/components/UI/Buttons/ButtonWhite/ButtonWhite.css

 .ButtonWhite {
-    
-    outline: 0;
+    outline: none;
     margin-left: 10px;
     color: #ff067c;
     background-color: #fff;
-    border-radius: 8px;
+    border-radius: 5px;
     font-size: 16px;
     font-weight: bold;
     cursor: pointer;
-    width: 200px;
-    height: 40px;
+    min-width: 150px;
+    height: 35px;
     border: 1px solid #ff067c;
 }
 .ButtonWhite:hover {

front/src/components/UI/Modal/Modal.css

 .Modal {
-    width: 80%;
-    padding: 20px;
+    width: 70%;
+    max-height: 90%;
+    padding: 10px;
     z-index: 500;
     border: 1px solid #ccc;
     background-color: white;
-    box-shadow: 1px 1px 1px black;
-    margin: 50px 0;
+    box-shadow: 1px 1px 100px black;
     text-align: center;
     transition: all 0.3s ease-out;
     position: absolute;
@@ -14,15 +14,18 @@
     transform: translate(-50%, -50%);
 }
 .Modal__container {
-    padding: 10px;
     display: flex;
     justify-content: space-between;
-    align-items: start;
+    align-items: flex-start;
 }
 .Modal__img {
-    width: 100%;
+    width: 90%;
     display: block;
 }
+.filter {
+    left: 53%;
+    top: 85px;
+}
 @media screen and (max-width: 900px){
     .Modal, .Modal__img {
         width: 100%;

front/src/components/UI/Modal/Modal.js

@@ -4,11 +4,11 @@ import Backdrop from "../Backdrop/Backdrop";
 import ButtonClose from "../Buttons/ButtonClose/ButtonClose"
 import "./Modal.css";
 
-const Modal = ({ src, body, close}) => {
+const Modal = ({ src, body, name, close}) => {
   return (
     <Fragment>
-      <Backdrop close={close}/>
-      <div className="Modal">
+     {!body && <Backdrop close={close}/>}
+      <div className={name==='filter'? "Modal filter" : "Modal"}>
         <div className="Modal__container"> 
           {src? <img className="Modal__img" src={src}/> : body }
           <ButtonClose onClickHandler={close}/>

front/src/containers/Payments/Payments.css

 .Payments {
-    margin: 0 auto;
-    padding: 15px;
-}
-.Payments__close {
-    margin-left: auto;
-    padding: 3px 3px 0 3px;
-    border-radius: 3px;
-    background: white;
-}
-.Payments__btn {
-    padding: 5px 10px;
-    font-size: 18px;
-    font-weight: bold;
-    background: #f52284;
-    border: none;
-    margin: 20px 0;
-    color: white;
-    border-radius: 5px;
-    box-shadow: 0 0 3px 2px;
-    outline: none;
-    cursor: pointer;
-}
-.Payments__btn:hover {
-    background: #762c80;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 5px;
 }
-.Payments__btn:active {
-    box-shadow: none;
+.Payments__header {
+    border-bottom: 2px solid #e5e5ea;
+    padding-bottom: 10px;
+    text-align: center;
 }
 .Payments__title {
     color: #b1b0b0;
     font-size: 30px;
     text-align: center;
     text-shadow: 1px 1px 2px black;
-    margin: 0;
-    margin-bottom: 10px;
+    margin: 0 auto;
 }
-.Payments__total {
-    color: #363636;
-    text-align: center;
-    width: 50%;
-    margin: 0 auto 10px;
-}
-.Payments__total-company {
-    color: #363636;
-    font-size: 20px;
-    font-weight: 500;
-    border: 2px solid grey;
-    border-radius: 5px;
-    padding: 5px;
-    margin: 5px;
-    width: 50%;
+.Payments__content, .Payments__header {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
 }
+
+/* filter */
 .Payments__filter {
+    text-align: right;
+}
+.Payments__filter-input {
     display: flex;
-    align-items: center;
-    width: 70%;
-    margin: 0 auto;
+    justify-content: space-around;
+    align-items: flex-start;
+}
+.Payments__filter-title {
+    margin: 5px;
+}
+.mb {
+    margin-bottom: 14px;
+    width: 150px;
+}
+.Payments__filter-item {
+    margin: 0 30px;
 }
 select, input {
+    height: 35px;
+    box-sizing: border-box;
     padding: 5px;
     margin: 0 10px;
     font-size: 14px;
+    border-radius: 0;
+    border: 1px solid gray;
 }
 .dropdown {
     position: relative;
     display: inline-block;
-    margin: 0 10px;
-    
 }
 .dropdown__title {
-    padding: 5px 10px;
-    min-width: 150px;
+    padding: 8px 10px;
+    width: 150px;
     border: 1px solid gray;
     cursor: pointer;
 }
@@ -80,7 +68,7 @@ select, input {
     margin-top: 5px;
     list-style: none;
     background: white;
-    min-width: 144px;
+    width: 144px;
     border: 1px solid gray;
     z-index: 1;
 }
@@ -93,3 +81,19 @@ select, input {
 .dropdown__content-item:hover {
     background: #bbb9b9;
 }
+.Payments__filter-control {
+    margin: 20px 0 10px;
+}
+
+@media screen and (min-width:600px) {
+    .Payments {
+        padding: 15px;
+    }
+    .Payments__header {
+        justify-content: space-between;
+    }
+    .Payments__title {
+        text-align: left;
+        margin: 0;
+    }
+}

front/src/containers/Payments/Payments.js

@@ -3,6 +3,10 @@ import React, { Fragment, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import Account from "../../components/Account/Account";
 import RedirectToAuth from "../../components/RedirectToAuth/RedirectToAuth";
+import Total from "../../components/Total/Total";
+import ButtonPink from "../../components/UI/Buttons/ButtonPink/ButtonPink";
+import ButtonWhite from "../../components/UI/Buttons/ButtonWhite/ButtonWhite";
+import Modal from "../../components/UI/Modal/Modal";
 import UsersPermission from "../../components/UsersPermission/UsersPermission";
 import {
   fetchPayments,
@@ -40,21 +44,6 @@ const Payments = () => {
     dispatch(fetchPayments());
     return
   };
-
-  let totalAsia = 0
-    payments.filter((payment) => {
-        if(payment.payer === "Froot_Middle_Asia"){
-            totalAsia += Number(payment.sum)
-        }
-        return totalAsia
-    });
-    let totalBusiness = 0
-    payments.filter((payment) => {
-        if(payment.payer === "Froot_Бизнес"){
-            totalBusiness += Number(payment.sum)
-        }
-        return totalBusiness
-    });
   const inputChangeHandler = (event) => {
     const { name, value } = event.target;
     setState((prevState) => {
@@ -118,22 +107,21 @@ const Payments = () => {
     }
     dispatch(fetchSortedData(stateCopy));
   };
-  
-  return (
-    <Fragment>
-      {user ? <div className="Payments">
-        {user.role.includes('viewAllPayments') ? (
-          <Fragment>
-            <h2 className="Payments__title">Все платежи</h2>
-        <div className="Payments__total">
-                  <h3>Общая сумма платежей по компаниям:</h3>
-                  <div className="flex-space">
-                      <span className="Payments__total-company">"Froot_Middle_Asia": <strong>{totalAsia}</strong> KZT</span>
-                      <span className="Payments__total-company">"Froot_Бизнес": <strong>{totalBusiness}</strong> KZT</span>
-                  </div>
-              </div>
-        <div className="Payments__filter">
+  // --для модалки--
+  const [showModal, setShowModal] = useState({
+    show: false
+  });
+  const openModal = () => {
+    setShowModal({ show: true });
+  }
+  const closeModal = () => {
+    setShowModal({ show: false })
+  }
+  const body = (
     <form>
+      <div className="Payments__filter-input">
+        <div className="Payments__filter-item">
+          <h3 className="Payments__filter-title">По компании:</h3>
           <select
             className="toClear"
             name="payer"
@@ -144,9 +132,10 @@ const Payments = () => {
             <option value="Froot_Middle_Asia">Froot_Middle_Asia</option>
             <option value="Froot_Бизнес">Froot_Бизнес</option>
           </select>
-
+        </div>
+        <div className="Payments__filter-item">
+          <h3 className="Payments__filter-title">По дате:</h3>
           <span>с</span>
-
           <input
             className="inputToClear"
             type="date"
@@ -154,27 +143,44 @@ const Payments = () => {
             name="fromDate"
           />
           <span>до</span>
-
           <input
             className="toClear"
             type="date"
             onChange={(e) => inputDateChangeHandler(e)}
             name="toDate"
           />
-          <div className="dropdown">
+        </div>
+        <div className="Payments__filter-item dropdown">
+          <h3 className="Payments__filter-title mb">По статусу:</h3>
           <span id="dropdown" className="dropdown__title">Статусы платежей</span>
           <div className="dropdown__content">
             <div className="dropdown__content-item" onClick={e=>statusChangeHandler(e)}>Подтвержден</div>
             <div className="dropdown__content-item" onClick={e=>statusChangeHandler(e)}>Не подтвержден</div>
             <div className="dropdown__content-item" onClick={e=>statusChangeHandler(e)}>Оплачен</div>
           </div>
-
         </div>
-          <button className="Payments__btn" type='button' onClick={() => postData()}>Применить</button>
-          <button className="Payments__btn" type='reset' onClick={()=>clearData()}>Сброс</button>
+      </div>
+      <div className="Payments__filter-control">
+        <ButtonPink type='button' text='Применить' onClickHandler={postData}/>
+        <ButtonWhite type='reset' text='Сброс' onClickHandler={clearData}/>
+      </div>
     </form>      
+  )
 
-         
+  return (
+    <Fragment>
+      {user && payments.length? <div className="Payments">
+        {user.role.includes('viewAllPayments') ? (
+          <Fragment>
+            <div className="Payments__content">
+              <div className="Payments__header">
+                <h2 className="Payments__title">Все платежи</h2>
+                <div className="Payments__filter">
+                  <ButtonPink type='button' text='Фильтры' onClickHandler={openModal}/>
+                  {showModal.show && <Modal body={body} name={'filter'} close={closeModal} />}
+                </div>
+              </div>
+              <Total payments={payments}/>
            </div>
         <Account payments={payments}
           statusDateChange = {statusChangeHandler}

front/src/containers/Registry/Registry.css

 .Registry__title {
     color: #b1b0b0;
     font-size: 30px;
-    text-align: center;
+    text-align: left;
     text-shadow: 1px 1px 2px black;
     margin: 0;
-    margin-bottom: 10px;
 }
 .Registry__total {
-    color: #363636;
     text-align: center;
-    width: 50%;
-    margin: 0 auto 10px;
+    margin: 10px auto;
+    color: #363636;
+    display: flex;
+    flex-direction: column;
+}
+.Registry__total-title {
+    margin: 10px;
 }
 .Registry__total-company {
     color: #363636;
-    font-size: 20px;
+    font-size: 16px;
     font-weight: 500;
-    border: 2px solid grey;
+    border: 1px solid #f52284;
     border-radius: 5px;
     padding: 5px;
     margin: 5px;
-    width: 50%;
+    width: 95%;
+}
+@media screen and (min-width:600px) {
+    .Registry {
+        padding: 15px;
+    }
+    .Registry__total-company {
+        font-size: 20px;
+        width: 320px;
+    }
+}
+@media screen and (min-width:1200px) {
+    .Registry__total {
+        flex-direction: row;
+    }
 }
\ No newline at end of file

front/src/containers/RegistryForAccountant/RegistryForAccountant.css

+.RegistryForAccountant {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 5px;
+}
+.RegistryForAccountant__header {
+    border-bottom: 2px solid #e5e5ea;
+    padding-bottom: 10px;
+}
 .RegistryForAccountant__title {
     color: #b1b0b0;
     font-size: 30px;
-    text-align: center;
+    text-align: left;
     text-shadow: 1px 1px 2px black;
     margin: 0;
-    margin-bottom: 10px;
 }
-.RegistryForAccountant__content {
+.RegistryForAccountant__content, .RegistryForAccountant__header {
+    width: 100%;
     display: flex;
     justify-content: space-between;
-    align-items: flex-end;
+    align-items: center;
     flex-wrap: wrap;
-    margin-bottom: 10px;
-}
-.RegistryForAccountant__total-title {
-    margin-bottom: 0;
-}
-.RegistryForAccountant__total {
-    color: #363636;
 }
-.RegistryForAccountant__total-company {
-    color: #363636;
-    font-size: 20px;
-    font-weight: 500;
-    border: 2px solid grey;
-    border-radius: 5px;
-    padding: 5px;
-    margin-top: 5px;
+.RegistryForAccountant__downloads {
+    display: flex;
+    flex-wrap: wrap;
 }
 .RegistryForAccountant__downloads-btn {
+    display: block;
     text-align: center;
     text-decoration: none;
-    background-color: #e3e6e6;
-    color: #5e5d5d;
-    border-radius: 3px;
-    border: 1px solid rgb(133, 131, 131);
-    padding: 3px;
-    margin-top: 5px;
+    padding: 6px 10px;
+    outline: none;
+    margin: 10px;
+    color: #fff;
+    background-color:#ff067c;
+    border-radius: 5px;
     font-size: 16px;
-    box-shadow: 0 2px 3px 0 rgba(0,0,0,0.2);
+    font-weight: bold;
     cursor: pointer;
+    border: none;
+}
+.RegistryForAccountant__downloads-btn:hover {
+    box-shadow: 0 0 10px 1px #9d9ea0;
 }
\ No newline at end of file

front/src/containers/RegistryForAccountant/RegistryForAccountant.js

@@ -15,6 +15,7 @@ import { apiURL } from "../../config";
 import { download } from "../../../src/functions";
 import JSZipUtils from "jszip-utils";
 import { saveAs } from "file-saver";
+import Total from "../../components/Total/Total";
 
 const RegistryForAccountant = () => {
   const todaysPayments = useSelector((state) => state.payments.todaysPayments);
@@ -22,20 +23,6 @@ const RegistryForAccountant = () => {
   const approvedPayments = todaysPayments.filter((p) => p.approved === true);
   const today = moment().format("YYYY-MM-DD");
 
-  let totalAsia = 0;
-  approvedPayments.filter((payment) => {
-    if (payment.payer === "Froot_Middle_Asia") {
-      totalAsia += Number(payment.sum);
-    }
-    return totalAsia;
-  });
-  let totalBusiness = 0;
-  approvedPayments.filter((payment) => {
-    if (payment.payer === "Froot_Бизнес") {
-      totalBusiness += Number(payment.sum);
-    }
-    return totalBusiness;
-  });
   const registry = true;
   const dispatch = useDispatch();
   useEffect(() => {
@@ -76,61 +63,12 @@ const RegistryForAccountant = () => {
     });
   };
 
-  //   -- 1 вариант скачивание файлов одним архивом--
-
-  //   const downloadFiles = () =>{
-  //       let zip = new JSZip();
-  //       for (let i=0; i < todayFiles.length; i++) {
-  //           const fileName = todayFiles[i].substring(0, todayFiles[i].lastIndexOf('g')+1);
-  //           const encodedString = btoa(todayFiles[i]);
-  //           console.log('encodedString', encodedString)
-  //           // добавим файл
-  //           zip.file(fileName, encodedString, {base64: true});
-  //       }
-  //       // асинхронно получаем готовый архив
-  //       zip.generateAsync({type: "blob"}).then(function(content) {
-  //           FileSaver.saveAs(content, "download.zip");
-  //       });
-  //   }
-
-  //   ----2вариант обычного скачивания файлов из массива--
-  //   const downloadFiles = () =>{
-  //       const fileURLs = [];
-  //       approvedPayments.map(p=>{
-  //           fileURLs.push(p.image)
-  //       })
-  //       fileURLs.map(f=>{
-  //           download(apiURL + "/uploads/" + f, "file.jpg")
-  //       })
-  //   }
-
-  // ---вариант 3 данные с бэка--
-  //   const downloadFiles = () => {
-  //     todayFiles.map((f) => {
-  //       download(apiURL + "/uploads/" + f, "file.jpg");
-  //     });
-  //   };
-
   return (
     <div className="RegistryForAccountant">
-      <h2 className="RegistryForAccountant__title">
-        Платежи на сегодня: {today}{" "}
-      </h2>
       <div className="RegistryForAccountant__content">
-        <div className="RegistryForAccountant__total">
-          <h3 className="RegistryForAccountant__total-title">
-            Общая сумма платежей по компаниям:
-          </h3>
-          <div className="flex-column">
-            <span className="RegistryForAccountant__total-company">
-              "Froot_Middle_Asia": <strong>{totalAsia}</strong> KZT
-            </span>
-            <span className="RegistryForAccountant__total-company">
-              "Froot_Бизнес": <strong>{totalBusiness}</strong> KZT
-            </span>
-          </div>
-        </div>
-        <div className="RegistryForAccountant__downloads flex-column">
+        <div className="RegistryForAccountant__header">
+          <h2 className="RegistryForAccountant__title">Платежи для оплаты на сегодня: {today} </h2>
+          <div className="RegistryForAccountant__downloads">
             <a
               className="RegistryForAccountant__downloads-btn"
               download
@@ -146,8 +84,8 @@ const RegistryForAccountant = () => {
             </a>
           </div>    
         </div>
-
-      <div>
+        <Total payments={approvedPayments}/>
+      </div>
       <Account
           registry={registry}
           pay={payHandler}
@@ -155,7 +93,6 @@ const RegistryForAccountant = () => {
           payments={approvedPayments}
         />
     </div>
-    </div>
   );
 };
 

front/src/containers/RegistryForApprove/RegistryForApprove.css

+.Registry {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 5px;
+}
+.Registry__header {
+    border-bottom: 2px solid #e5e5ea;
+    padding-bottom: 10px;
+}
 .Registry__title {
     color: #b1b0b0;
     font-size: 30px;
-    text-align: center;
+    text-align: left;
     text-shadow: 1px 1px 2px black;
     margin: 0;
-    margin-bottom: 10px;
 }
+.Registry__content, .Registry__header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+}
+/* total */
 .Registry__total {
-    color: #363636;
     text-align: center;
-    width: 50%;
-    margin: 0 auto 10px;
+    margin: 10px auto;
+    color: #363636;
+    display: flex;
+    flex-direction: column;
+}
+.Registry__total-title {
+    margin: 10px;
 }
 .Registry__total-company {
     color: #363636;
-    font-size: 20px;
+    font-size: 16px;
     font-weight: 500;
-    border: 2px solid grey;
+    border: 1px solid #f52284;
     border-radius: 5px;
     padding: 5px;
     margin: 5px;
-    width: 50%;
+    width: 95%;
+}
+@media screen and (min-width:600px) {
+    .Registry {
+        padding: 15px;
+    }
+    .Registry__total-company {
+        font-size: 20px;
+        width: 320px;
+    }
+}
+@media screen and (min-width:1200px) {
+    .Registry__total {
+        flex-direction: row;
+    }
 }
\ No newline at end of file

front/src/containers/RegistryForApprove/RegistryForApprove.js

@@ -4,26 +4,13 @@ import Account from '../../components/Account/Account';
 import { fetchApprove, fetchCancelApprove, fetchStopRepeatability, fetchTodaysPayments } from '../../store/actions/paymentAction';
 import moment from 'moment'
 import './RegistryForApprove.css'
+import Total from '../../components/Total/Total';
 
 
 const RegistryForApprove = () => {
     const todaysPayments = useSelector(state => state.payments.todaysPayments);
     const today = moment().format('YYYY-MM-DD') 
 
-    let totalAsia = 0
-    todaysPayments.filter((payment) => {
-        if(payment.payer === "Froot_Middle_Asia"){
-            totalAsia += Number(payment.sum)
-        }
-        return totalAsia
-    });
-    let totalBusiness = 0
-    todaysPayments.filter((payment) => {
-        if(payment.payer === "Froot_Бизнес"){
-            totalBusiness += Number(payment.sum)
-        }
-        return totalBusiness
-    });
     const registry = true
     const dispatch = useDispatch();
     useEffect(() => {
@@ -42,16 +29,13 @@ const RegistryForApprove = () => {
 
     return (
         <div className="Registry">
+            <div className="Registry__content">
+              <div className="Registry__header">
                 <h2 className="Registry__title">Платежи на сегодня: {today} </h2>
-            <div className="Registry__total">
-                <h3>Общая сумма платежей по компаниям:</h3>
-                <div className="flex-space">
-                    <span className="Registry__total-company">"Froot_Middle_Asia": <strong>{totalAsia}</strong> KZT</span>
-                    <span className="Registry__total-company">"Froot_Бизнес": <strong>{totalBusiness}</strong> KZT</span>
+                
               </div>
+              <Total payments={todaysPayments}/>
             </div>
-            
-            <div>
             <Account 
                     registry={registry} 
                     approve={approveHandler}
@@ -59,9 +43,6 @@ const RegistryForApprove = () => {
                     stopRepeatability={stopRepeatabilityHandler}
                     payments={todaysPayments}/>
         </div>
-            
-        </div>
-        
     )
 };
 

front/src/store/actions/paymentAction.js

@@ -2,6 +2,7 @@ import { push } from "connected-react-router";
 import axiosApi from "../../axiosApi";
 
 export const FETCH_PAYMENTS_SUCCESS = "FETCH_PAYMENTS_SUCCESS";
+export const FETCH_PAYMENTS_FAILURE = "FETCH_PAYMENTS_FAILURE";
 export const FETCH_PAYMENT_BY_ID_SUCCESS = "FETCH_PAYMENT_BY_ID_SUCCESS";
 export const CREATE_PAYMENT_SUCCESS = "CREATE_PAYMENT_SUCCESS";
 export const FETCH_TODAYS_PAYMENTS_SUCCESS = "FETCH_TODAYS_PAYMENTS_SUCCESS";
@@ -12,6 +13,9 @@ export const EDIT_DATA_SUCCESS = "EDIT_DATA_SUCCESS";
 export const fetchPaymentsSuccess = (payments) => {
   return { type: FETCH_PAYMENTS_SUCCESS, payments };
 };
+export const fetchPaymentsFailure = (error) => {
+  return { type: FETCH_PAYMENTS_FAILURE, error };
+};
 export const fetchPaymentByIdSuccess = (payment) => {
   return { type: FETCH_PAYMENT_BY_ID_SUCCESS, payment }
 }
@@ -86,7 +90,11 @@ export const fetchPayments = () => {
       const response = await axiosApi.get("/payments");
       dispatch(fetchPaymentsSuccess(response.data));
     } catch (e) {
-      console.error(e);
+      if (e.response && e.response.data) {
+          dispatch(fetchPaymentsFailure(e.response.data))
+      } else {
+          dispatch(fetchPaymentsFailure({ global: 'No internet' }))
+      }
   }
   };
 };

front/src/store/reducers/paymentReducer.js

-const { FETCH_PAYMENTS_SUCCESS, FETCH_TODAYS_PAYMENTS_SUCCESS, FETCH_STATUS_SUCCESS, FETCH_PAYMENT_BY_ID_SUCCESS, FETCH_TODAYS_FILES_SUCCESS } = require("../actions/paymentAction");
+const { FETCH_PAYMENTS_SUCCESS, FETCH_TODAYS_PAYMENTS_SUCCESS, FETCH_STATUS_SUCCESS, FETCH_PAYMENT_BY_ID_SUCCESS, FETCH_TODAYS_FILES_SUCCESS, FETCH_PAYMENTS_FAILURE } = require("../actions/paymentAction");
 
 const initialState = {
   payments: [],
+  paymentsError: null,
   paymentById: {},
   todaysPayments: [],
   todayFiles: []
@@ -11,6 +12,8 @@ const paymentReducer = (state = initialState, action) => {
   switch (action.type) {
     case FETCH_PAYMENTS_SUCCESS:
       return { ...state, payments: action.payments };
+    case FETCH_PAYMENTS_FAILURE:
+      return { ...state, paymentsError: action.error };
     case FETCH_PAYMENT_BY_ID_SUCCESS:
       return { ...state, paymentById: action.payment };
     case FETCH_TODAYS_PAYMENTS_SUCCESS: