feat:User summry on Group Page

Backend/routes/individualGroupRoute.js

@@ -21,7 +21,7 @@ const addUserDeusPool = async ({
   const { GroupId } = Group.body.dataValues;
   const Userlist = await getGroupUsersWithoutCurrent(GroupId, EmailId);
   const UserId2 = EmailId;
-  const Owes = (Number(Amount)) / ((Number(Userlist.body.length)));
+  const Owes = (Number(Amount)) / (Number(Number(Userlist.body.length) + 1));
   //   console.log(Owes);
   const addUserDeusRes = [];
   for (let i = 0; i < Userlist.body.length; i += 1) {

Frontend/client/src/components/Grouppage/grouppage.js

@@ -16,12 +16,14 @@ import UpperNavbar from '../Commonpage/upperNavbar';
 import TablePage from './grouppagetable';
 import '../../styles/grouppage.css';
 import Example from './grouppagemodal';
+import Usersummary from './grouptableusersummary';
 
 class GroupPage extends Component {
   constructor(props) {
     super(props);
     this.state = {
       expenses: [],
+      usersummary: [],
     };
   }
 
@@ -32,6 +34,9 @@ class GroupPage extends Component {
     const resForExpenseList = await axios.get(`http://localhost:3002/individualgroup/showexpanse/${groupId}`);
     console.log('Expanse', resForExpenseList.data);
     this.setState({ expenses: resForExpenseList.data.data });
+    const resForUserSummary = await axios.get(`http://localhost:3002/individualgroup/Groupsummary/${groupId}`);
+    console.log('summary', resForUserSummary.data);
+    this.setState({ usersummary: resForUserSummary.data.body });
   }
 
   render() {
@@ -42,6 +47,7 @@ class GroupPage extends Component {
         <SideNavbar />
         <Example GroupId={this.props.location.state.group}/>
         <TablePage data={this.state.expenses}/>
+        <Usersummary data={this.state.usersummary}/>
       </div>
     );
   }

Frontend/client/src/components/Grouppage/grouppagetable.js

@@ -7,20 +7,24 @@ import '../../styles/mygroups.css';
 
 class TablePage extends Component {
   render() {
-    console.log('this props data', this.props.data);
+    // console.log('this props data', this.props.data);
     return (
       <table className="table" id="grouppagetable">
         <thead className="thead-dark">
           <tr>
             <th>Expense description</th>
+            <th>Paid By</th>
             <th>Amount</th>
+            <th>Date</th>
           </tr>
         </thead>
         <tbody>
           {this.props.data.map((expense) => (
             <tr>
               <td>{expense.Description}</td>
+              <td>{expense.EmailId}</td>
               <td>{expense.Amount}</td>
+              <td>{expense.createdAt.slice(0, 10)}</td>
             </tr>
           ))}
         </tbody>

Frontend/client/src/components/Grouppage/grouptableusersummary.js

@@ -0,0 +1,51 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/prop-types */
+/* eslint-disable react/prefer-stateless-function */
+/* eslint-disable react/jsx-filename-extension */
+import React, { Component } from 'react';
+import '../../styles/mygroups.css';
+
+class Usersummary extends Component {
+  render() {
+    console.log('this user summary props data', this.props.data);
+    return (
+      <div className="UserSummaryTable">
+        <ul className="list-group list-group-item-success">
+          {this.props.data.map((usersummary) => (
+            <li className="list-group-item">
+              {usersummary.UserId1}
+              {' '}
+              Owes
+              {' '}
+              {usersummary.UserId2}
+              {' '}
+              {usersummary.Owes}
+              $
+            </li>
+          ))}
+        </ul>
+      </div>
+    //   <table className="table" id="grouppagetable">
+    //     <thead className="thead-dark">
+    //       <tr>
+    //         <th>Expense description</th>
+    //         <th>Amount</th>
+    //         <th>Date</th>
+    //       </tr>
+    //     </thead>
+    //     <tbody>
+    //       {this.props.data.map((expense) => (
+    //         <tr>
+    //           <td>{expense.Description}</td>
+    //           <td>{expense.Amount}</td>
+    //           <td>{expense.createdAt.slice(0, 10)}</td>
+    //         </tr>
+    //       ))}
+    //     </tbody>
+    //   </table>
+
+    );
+  }
+}
+
+export default Usersummary;

Frontend/client/src/styles/grouppage.css

@@ -9,6 +9,12 @@
     top: 210px;
     left: 370px;
 }
+.UserSummaryTable{
+    right: 20px;
+    top: 250px;
+    width: 330px;
+    position: absolute;
+}
 .rrow{
     left: 8px;
     top: 20px;