Merge pull request #26 from 001elijah/statist

Statist

package.json

@@ -19,6 +19,7 @@
     "formik": "^2.2.9",
     "lodash": "^4.17.21",
     "modern-normalize": "^1.1.0",
+    "moment": "^2.29.4",
     "notiflix": "^3.2.6",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.4",

src/components/DateInput/DateInput.jsx

@@ -18,18 +18,11 @@ export const Calendar = ({onDate}) => {
 
   const year = startDate.getFullYear();
   const month =startDate.getMonth()+1
-  // const month_ =()=>{
-  //   if(month<10){
-  //     return ("0"+month)
-  //   }
-  // }
 
   useEffect(()=>{
       onDate({month, year})
   },[onDate, year, month])
 
-
-  // console.log(getMonth, getYear);
   return (
       <DatePicker
         dateFormat="MMMM, yyyy"
@@ -40,6 +33,8 @@ export const Calendar = ({onDate}) => {
         showMonthYearPicker
         customInput={<ChangeInput />}
         wrapperClassName={s.calendar}
+        // minDate={subDays(new Date(), 5)} // add start tarnsaction
+        maxDate={new Date()}
         />
   );
 };

src/components/DateInput/DateInput.module.scss

@@ -2,23 +2,23 @@
 @import 'src/assets/styles/utils/vars';
 
 .calendar {
-    position: absolute;
-
-    top: -114px;
-    left: 0px;
+  position: absolute;
+  top: -114px;
+  left: 0px;
+  z-index: 1;
+  width: 217px;
+  @include tablet {
+    top: -54px;
+    left: 484px;
+    z-index: 1;
+  }
+  @include desktop {
+    top: -54px;
+    left: 550px;
     z-index: 1;
-    @include tablet {
-      top: -54px;
-      left: 484px;
-      z-index: 1;
-    }
-    @include desktop {
-      top: -54px;
-      left: 550px;
-      z-index: 1;
-    }
   }
-
+}
+
 .input_field {
   display: flex;
   justify-content: space-between;
@@ -35,7 +35,7 @@
   border-radius: 16px;
   border: none;
 
-  font-family: 'Lato';
+  font-family: 'Lato-Regular';
   font-style: normal;
   font-weight: 400;
   font-size: 16px;
@@ -44,57 +44,82 @@
   /* white */
   color: $main-white;
 }
-.month{
+.month {
   margin-bottom: 15px;
 }
-.popper{
+.popper {
   width: 217px;
   height: 220px;
 }
-:global .react-datepicker{
+:global .react-datepicker {
   border-radius: 15px;
   width: 217px;
+  border:none;
 }
-:global .react-datepicker__triangle{
-  display:none;
+:global .react-datepicker__triangle {
+  display: none;
 }
 
 :global .react-datepicker__header {
-border-radius: 15px;
-outline: none;
-border: none;
-margin-left: auto;
-margin-right: auto;
-width: 215px;
-
-font-family: 'Lato';
-font-style: normal;
-font-weight: 700;
-font-size: 16px;
-line-height: 19px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  border-radius: 0;
+  outline: none;
+  border-bottom: 1px solid  #2424240D;
+  margin-left: auto;
+  margin-right: auto;
+  height: 60px;
+  background: none;
+  font-family: 'Lato-Regular';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 19px;
 }
+:global .react-datepicker__navigation{
+  height:60px;
+}
+:global .react-datepicker__month .react-datepicker__month-text {
 
-
-:global .react-datepicker__month-container{
-  float: none;
+  padding: 6px 18px;
+  margin: 0;
+  width: 57px;
+
+  font-family: 'Lato-Regular';
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 19px;
 }
 
-:global .react-datepicker__header{
-  border-radius: 15px;
+:global .react-datepicker__month-container {
+  float: none;
 }
-:global .react-datepicker__month{
-  font-family: 'Lato';
-font-style: normal;
-font-weight: 400;
-font-size: 14px;
-line-height: 17px;
+:global .react-datepicker__month-text{
+  width: 57px;
+  border-radius: 50px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 17px;
 
-color: #242424;
+  /* identical to box height */
+  display: flex;
+  align-items: center;
 }
+:global .react-datepicker__month-text--keyboard-selected {
+  padding: 6px 18px;
+  width: 57px;
+  background: #3a6af5;
+  border-radius: 50px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 17px;
+  /* identical to box height */
+  display: flex;
+  align-items: center;
 
-:global  .react-datepicker__month-wrapper{
-  margin-bottom: 15px;
+  color: #f3f3f3;
 }
-:global  .global .react-datepicker-popper{
-  padding: 0;
-}

src/components/StatisticsComponents/CategoryBoard/CategoryBoard.jsx

@@ -4,7 +4,7 @@ import { Calendar } from '../../DateInput/DateInput';
 import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { getCashflowStat } from '../../../redux/operations/cashflowOperations';
-import shortid from 'shortid';
+// import shortid from 'shortid';
 // import {Notify} from "notiflix"
 
 export const Item = ({ id, amount, category, percentage }) => {
@@ -24,26 +24,30 @@ export const Item = ({ id, amount, category, percentage }) => {
 export const CategoriesList = () => {
   const dispatch = useDispatch();
   const [dateFilter, setDateFilter] = useState(); //обрані дати
-  const [transactionData, setTransactionData] = useState(); //отримання транзакцій
+  const [transactionData, setTransactionData] = useState([]); //отримання транзакцій
 
   useEffect(() => {
     dispatch(getCashflowStat(dateFilter)).then(data => {
-      if (typeof data.payload === 'object') {setTransactionData(data.payload)}
-      else {setTransactionData([])
-      // Notify.failure("You don't have transaction on this period")
-    };
+      setTransactionData(data.payload);
     });
   }, [dateFilter, dispatch]);
+// console.log('cat', transactionData)
+  if (transactionData?.length === 0) return;
 
   return (
-    <div className={s.container}>
-      <div className={s.wrapper}>
-        <Calendar onDate={setDateFilter} />
-        <StatisticsNav />
-        <ul>
-          {transactionData?.map(item => <Item key={shortid.generate()} {...item} />)}
-        </ul>
+    // <div className={s.background_img}>
+      <div className={s.container}>
+        <div className={s.wrapper}>
+          <Calendar onDate={setDateFilter} />
+          <StatisticsNav />
+          <ul className={s.expense_block}>
+            {(typeof(transactionData)==='object')? (transactionData?.map(item => (
+              <Item key={item.category} {...item} />
+            ))):(<p className={s.error_mes}>You didn't have transaction on this period</p>)
+            }
+          </ul>
+        </div>
       </div>
-    </div>
+    // </div>
   );
 };

src/components/StatisticsComponents/CategoryBoard/CategoryBoard.module.scss

@@ -3,7 +3,32 @@
 
 .container {
   @include container;
-}
+
+  @include tablet {
+    background-image: url('../../../assets/img/bg-tablet.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: bottom;
+    height: calc(100vh - 72px);
+  }
+
+  @include desktop {
+    background-image: url('../../../assets/img/bg-desktop.png');
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: bottom;
+  }
+}
+// .background_img{
+//   @include tablet{
+//     background-image: url(../../../assets/img/bg-tablet.png);
+//     background-size: contain
+//   }
+//   @include desktop{
+//   background-image: url(../../../assets/img/bg-desktop.png);
+//   background-size: contain
+//   }
+// }
 .wrapper{
   position: relative;
   position: relative;
@@ -177,3 +202,21 @@
   background-color: black;
 }
 
+.expense_block {
+  @include desktop {
+    height: 420px;
+    overflow-y: scroll;
+  }
+  @include tablet {
+    height: 420px;
+    overflow-y: scroll;
+  }
+}
+// .expense_block::-webkit-scrollbar {
+//   width: 2px;               /* ширина всей полосы прокрутки */
+// }
+.error_mes{
+  padding-top: 30px;
+  text-align: center;
+  font-size: 15px;
+}

src/components/StatisticsComponents/ExpensesBoard/ExpenseBoardItem.jsx

@@ -2,6 +2,7 @@ import { useDispatch } from 'react-redux';
 import s from './ExpensesBoard.module.scss';
 import { deleteOneTransaction } from '../../../redux/operations/cashflowOperations';
 import iconSvg from '../Svg';
+import moment from 'moment';
 
 export const Item = ({
   _id,
@@ -18,13 +19,14 @@ export const Item = ({
     setActive(true);
     setData(setTransData);
   };
+const newDate =moment().format("DD MM YYYY");
 
   return (
     <>
       <li key={_id} className={s.wrapper_expense}>
         <div className={s.comment_block}>
           <div>
-            <p className={s.expense_date}>{date}</p>
+            <p className={s.expense_date}>{newDate}</p>
             <p className={s.expense_comment}>{comment}</p>
           </div>
           <p className={s.expense_sum}> {sum} UAH</p>