BE, FE: investments refactoring

andreipradan · Feb 14, 2025 · dec807d · dec807d
1 parent 775483f
commit dec807d
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 131 deletions.
diff --git a/frontend/src/app/finances/Investments/Bonds.js b/frontend/src/app/finances/Investments/Bonds.js
@@ -16,9 +16,11 @@ import { formatTime } from '../../earthquakes/Earthquakes';
 import Modal from 'react-bootstrap/Modal';
 import Button from 'react-bootstrap/Button';
 import DatePicker from 'react-datepicker/es';
+import { useHistory } from 'react-router-dom';
 
 const Bonds = () => {
   const dispatch = useDispatch();
+  const history = useHistory()
   const state = useSelector(state => state.bonds)
   const token = useSelector((state) => state.auth.token)
 
@@ -123,7 +125,14 @@ const Bonds = () => {
       </h3>
       <nav aria-label="breadcrumb">
         <ol className="breadcrumb">
-          <li className="breadcrumb-item"><a href="!#" onClick={event => event.preventDefault()}>Finance</a></li>
+          <li className="breadcrumb-item">
+            <span
+              className={"cursor-pointer text-primary"}
+              onClick={() => history.push("/investments/summary")}
+            >
+              Investments
+            </span>
+          </li>
           <li className="breadcrumb-item active" aria-current="page">Bonds</li>
         </ol>
       </nav>
@@ -133,7 +142,7 @@ const Bonds = () => {
 
     {/* Top cards */}
     <div className="row">
-      <div className="col-sm-12 grid-margin">
+      <div className="col-sm-12 col-xl-4 grid-margin">
         <div className="card">
           <div className="card-body">
             <h6>
@@ -160,52 +169,43 @@ const Bonds = () => {
                     />
                   {
                     state.aggregations
-                      ? <>
-                          <ListItem
-                            label="Active"
-                            value={`${state.aggregations.active_RON} RON`}
-                            textType={'primary'}
-                            className="mr-3"
-                          />
+                      ? state.currencies?.map(currency =>
+                        <>
+                          {
+                            ['active', 'buy', 'deposit', 'pnl', 'dividend', 'sell'].map(item =>
+                              <ListItem
+                                label={
+                                  item === 'pnl'
+                                    ? 'Profit / Loss'
+                                    : item[0].toUpperCase() + item.slice(1)
+                                }
+                                value={`${state.aggregations[`${item}_${currency}`]} ${currency}`}
+                                textType={
+                                  item === 'dividend'
+                                    ? 'success'
+                                    : item === 'pnl'
+                                      ? state.aggregations[`${item}_${currency}`] > 0
+                                        ? 'success' : 'danger'
+                                      : item === 'sell'
+                                        ? 'warning'
+                                        : item === 'active'
+                                          ? 'info'
+                                          : 'primary'
+                                }
+                                className="mr-3"
+                              />)
+                          }
                           <ListItem
-                            label="Deposited"
-                            value={`${state.aggregations.deposited} RON`}
-                            textType={'info'}
-                            className="mr-3"
-                          />
-                          <ListItem
-                            label="Invested"
-                            value={`${state.aggregations.invested} RON`}
-                            textType={'info'}
-                            className="mr-3"
-                          />
-                          <ListItem
-                            label="Sold"
-                            value={`${state.aggregations.sold} RON`}
-                            textType={'warning'}
-                            className="mr-3"
-                          />
-                          <ListItem
-                            label="Profit / Loss"
-                            value={`${state.aggregations.pnl} RON`}
-                            textType={state.aggregations.pnl > 0 ? 'success' : 'warning'}
-                            className="mr-3"
-                          />
-                          <ListItem
-                            label="Dividends"
-                            value={`${state.aggregations.dividends} RON`}
-                            textType={'success'}
-                            className="mr-3"
-                          />
-                          <ListItem
-                            label="Profit"
-                            value={`${state.aggregations.pnl + state.aggregations.dividends} RON`}
-                            textType={'success'}
+                            label={"Profit"}
+                            value={`${state.aggregations[`pnl_${currency}`] + state.aggregations[`dividend_${currency}`]} ${currency}`}
+                            textType={
+                              state.aggregations[`pnl_${currency}`] + state.aggregations[`dividend_${currency}`] > 0
+                                ? 'success': 'danger'
+                            }
                             className="mr-3"
                           />
-                        </>
-                      : null
-                  }
+                        </>)
+                      : null}
                   </div>
                 : null
             }
@@ -215,7 +215,7 @@ const Bonds = () => {
     </div>
 
     {/* Last Transaction */}
-    <div className="row">
+    <div className="row mt-2">
       <div className="col-sm-12 grid-margin">
         <div className="card">
           <div className="card-body">

diff --git a/frontend/src/app/finances/Investments/Crypto.js b/frontend/src/app/finances/Investments/Crypto.js
@@ -14,9 +14,12 @@ import { capitalize } from "../../utils";
 import { setKwargs } from "../../../redux/cryptoSlice";
 import { setKwargs as setPnlKwargs } from "../../../redux/cryptoPnlSlice";
 import { selectStyles } from "../Accounts/Categorize/EditModal";
+import { useHistory } from 'react-router-dom';
 
 const Crypto = () => {
   const dispatch = useDispatch();
+  const history = useHistory()
+
   const crypto = useSelector(state => state.crypto)
   const pnl = useSelector(state => state.cryptoPnl)
   const token = useSelector((state) => state.auth.token)
@@ -93,8 +96,15 @@ const Crypto = () => {
       </h3>
       <nav aria-label="breadcrumb">
         <ol className="breadcrumb">
-          <li className="breadcrumb-item"><a href="!#" onClick={event => event.preventDefault()}>Finance</a></li>
-          <li className="breadcrumb-item active" aria-current="page">Stocks</li>
+          <li className="breadcrumb-item">
+            <span
+              className={"cursor-pointer text-primary"}
+              onClick={() => history.push("/investments/summary")}
+            >
+              Investments
+            </span>
+          </li>
+          <li className="breadcrumb-item active" aria-current="page">Crypto</li>
         </ol>
       </nav>
     </div>
@@ -103,7 +113,7 @@ const Crypto = () => {
 
     {/* Top cards */}
     <div className="row">
-      <div className="col-sm-4 grid-margin">
+      <div className={`col-sm-${crypto.loading && !crypto.results ? 12 : 4} grid-margin`}>
         <div className="card">
           <div className="card-body">
             <h6>

diff --git a/frontend/src/app/finances/Investments/Deposits.js b/frontend/src/app/finances/Investments/Deposits.js
@@ -16,9 +16,12 @@ import { formatDate, formatTime } from '../../earthquakes/Earthquakes';
 import Modal from 'react-bootstrap/Modal';
 import Button from 'react-bootstrap/Button';
 import DatePicker from 'react-datepicker/es';
+import { useHistory } from 'react-router-dom';
 
 const Deposits = () => {
   const dispatch = useDispatch();
+  const history = useHistory()
+
   const state = useSelector(state => state.deposits)
   const token = useSelector((state) => state.auth.token)
 
@@ -115,69 +118,39 @@ const Deposits = () => {
       </h3>
       <nav aria-label="breadcrumb">
         <ol className="breadcrumb">
-          <li className="breadcrumb-item"><a href="!#" onClick={event => event.preventDefault()}>Finance</a></li>
+          <li className="breadcrumb-item">
+            <span
+              className={"cursor-pointer text-primary"}
+              onClick={() => history.push("/investments/summary")}
+            >
+              Investments
+            </span>
+          </li>
           <li className="breadcrumb-item active" aria-current="page">Deposits</li>
         </ol>
       </nav>
     </div>
 
-    <Errors errors={state.errors}/>
+    {
+      state.loading
+        ? <Circles
+            height={20}
+            width={20}
+            wrapperStyle={{ display: 'default' }}
+            wrapperClass="btn"
+          />
+        : <b className={"text-small text-muted"}>
+            <div>Count: {state.count}</div>
+            <div>
+              Profit: {state.aggregations?.pnl ? `${state.aggregations?.pnl} RON` : '-'}
+            </div>
+            <div className="mb-1">
+              Tax: {state.aggregations?.tax ? `${state.aggregations?.tax} RON` : '-'}
+            </div>
+          </b>
+    }
 
-    {/* Top cards */}
-    <div className="row">
-      <div className="col-sm-12 grid-margin">
-        <div className="card">
-          <div className="card-body">
-            <h6>
-              Portfolio&nbsp;
-              {
-                state.loading
-                  ? <Circles
-                      height={20}
-                      width={20}
-                      wrapperStyle={{ display: 'default' }}
-                      wrapperClass="btn"
-                    />
-                  : null
-              }
-            </h6>
-            {
-              !state.loading && state.results
-                ? <div style={{ maxHeight: '22vh', overflowY: 'scroll' }}>
-                    <ListItem
-                      label={'Deposits'}
-                      value={state.count || '-'}
-                      textType={'primary'}
-                      className="mr-3"
-                    />
-                    <ListItem
-                      label="Profit"
-                      value={state.aggregations?.pnl ? `${state.aggregations?.pnl} RON` : '-'}
-                      textType={state.aggregations?.pnl > 0 ? 'success' : ''}
-                      className="mr-3"
-                    />
-                    <ListItem
-                      label="Tax"
-                      value={state.aggregations?.tax ? `${state.aggregations?.tax} RON` : '-'}
-                      textType={state.aggregations?.tax > 0 ? 'danger' : 'warning'}
-                      className="mr-3"
-                    />
-                    {
-                      state.currencies.filter(c => Object.keys(state.aggregations).includes(c[0])).map(currency => <ListItem
-                        key={currency}
-                        label={currency}
-                        value={`${state.aggregations?.[currency]} ${currency}`}
-                        textType={'success'}
-                        className="mr-3"
-                      />)
-                    }
-                  </div>
-                : null
-            }
-          </div>
-        </div>
-      </div>
-    </div>
+    <Errors errors={state.errors}/>
 
     {/* Last deposit */}
     <div className="row">

diff --git a/frontend/src/app/finances/Investments/Pension.js b/frontend/src/app/finances/Investments/Pension.js
@@ -11,6 +11,7 @@ import Errors from "../../shared/Errors";
 import ListItem from "../../shared/ListItem";
 import { selectItem, setModalOpen } from "../../../redux/pensionSlice";
 import { PensionApi } from '../../../api/finance';
+import { useHistory } from 'react-router-dom';
 
 export const getEvaluation = (p, justValue = false) => {
   const evaluation = parseFloat(p.latest_unit_value || 0) * (p.total_units || 0)
@@ -29,6 +30,8 @@ export const getPnl = (p, justValue = false) => {
 
 const Pension = () => {
   const dispatch = useDispatch();
+  const history = useHistory()
+
   const pension = useSelector(state => state.pension)
   const token = useSelector((state) => state.auth.token)
 
@@ -157,7 +160,14 @@ const Pension = () => {
       </h3>
       <nav aria-label="breadcrumb">
         <ol className="breadcrumb">
-          <li className="breadcrumb-item"><a href="!#" onClick={event => event.preventDefault()}>Finance</a></li>
+          <li className="breadcrumb-item">
+            <span
+              className={"cursor-pointer text-primary"}
+              onClick={() => history.push("/investments/summary")}
+            >
+              Investments
+            </span>
+          </li>
           <li className="breadcrumb-item active" aria-current="page">Pension</li>
         </ol>
       </nav>

diff --git a/frontend/src/app/finances/Investments/Stocks.js b/frontend/src/app/finances/Investments/Stocks.js
@@ -15,9 +15,12 @@ import { setKwargs as setPnlKwargs } from "../../../redux/pnlSlice";
 import { setKwargs } from "../../../redux/stocksSlice";
 import { selectStyles } from "../Accounts/Categorize/EditModal";
 import { StocksApi, StocksPnlApi } from '../../../api/finance';
+import { useHistory } from 'react-router-dom';
 
 const Stocks = () => {
   const dispatch = useDispatch();
+  const history = useHistory()
+
   const pnl = useSelector(state => state.pnl)
   const stocks = useSelector(state => state.stocks)
   const token = useSelector((state) => state.auth.token)
@@ -107,7 +110,14 @@ const Stocks = () => {
       </h3>
       <nav aria-label="breadcrumb">
         <ol className="breadcrumb">
-          <li className="breadcrumb-item"><a href="!#" onClick={event => event.preventDefault()}>Finance</a></li>
+          <li className="breadcrumb-item">
+            <span
+              className={"cursor-pointer text-primary"}
+              onClick={() => history.push("/investments/summary")}
+            >
+              Investments
+            </span>
+          </li>
           <li className="breadcrumb-item active" aria-current="page">Stocks</li>
         </ol>
       </nav>

diff --git a/frontend/src/app/finances/Investments/Summary.js b/frontend/src/app/finances/Investments/Summary.js
@@ -27,24 +27,6 @@ const Summary = () => {
   useEffect(refresh, []);
 
   return <div>
-    <div className="page-header mb-0">
-      <h3 className="page-title">
-        Investments
-        <button
-          type="button"
-          className="btn btn-outline-success btn-sm border-0 bg-transparent"
-          onClick={refresh}
-        >
-          <i className="mdi mdi-refresh" />
-        </button>
-      </h3>
-      <nav aria-label="breadcrumb">
-        <ol className="breadcrumb">
-          <li className="breadcrumb-item"><a href="!#" onClick={event => event.preventDefault()}>Finance</a></li>
-          <li className="breadcrumb-item active" aria-current="page">Investments</li>
-        </ol>
-      </nav>
-    </div>
     <Errors errors={state.errors}/>
 
     {/* Top Cards - Summary, Remaining, Paid */}