.1502411993651747:e9abbeef9f0f4b8fa2a54e26dd2e3fcc_69f76c3bdc48703ced6d2e23.69f76c48dc48703ced6d2e25.69f76c481999bd81150ca9bf:Trae CN.T(2026/5/3 23:39:52)

client/src/components/expense/addExpense.jsx

@@ -11,7 +11,7 @@ import useResponsive from '../../theme/hooks/useResponsive';
 import { currencyFind } from '../../utils/helper';
 import { addExpenseService } from '../../services/expenseServices';
 import configData from '../../config.json'
-import { useParams } from 'react-router-dom'
+import { useParams, useNavigate } from 'react-router-dom'
 import { getGroupDetailsService } from '../../services/groupServices';
 import Loading from '../loading';
 import { Link as RouterLink } from 'react-router-dom';
@@ -20,6 +20,7 @@ import { parseISO } from 'date-fns';
 
 
 export default function AddExpense() {  
+  const navigate = useNavigate();
   const params = useParams();
   const mdUp = useResponsive('up', 'md');
   const profile = JSON.parse(localStorage.getItem('profile'))
@@ -58,7 +59,7 @@ export default function AddExpense() {
     onSubmit: async () => {
       setLoading(true)
       if(await addExpenseService(values, setAlert, setAlertMessage))
-       window.location = configData.VIEW_GROUP_URL+groupId
+        navigate(configData.VIEW_GROUP_URL + groupId, { state: { refresh: true } })
     },
   });
 

client/src/components/expense/editExpense.jsx

@@ -16,7 +16,7 @@ import Loading from '../loading';
 import { useNavigate } from "react-router-dom";
 import AlertBanner from '../AlertBanner';
 import { parseISO } from 'date-fns';
-
+import configData from '../../config.json';
 
 
 export default function EditExpense() {
@@ -55,7 +55,7 @@ export default function EditExpense() {
     onSubmit: async () => {
       setLoading(true)
       if(await editExpenseService(values, setAlert, setAlertMessage))
-      navigate(-1)
+        navigate(configData.VIEW_GROUP_URL + values.groupId, { state: { refresh: true } })
     },
   });
 

client/src/components/expense/expenseCard.jsx

@@ -38,7 +38,7 @@ const modelStyle = {
 };
 
 
-export default function ExpenseCard({ expenseId, expenseName, expenseAmount, expensePerMember, expenseOwner, expenseDate, currencyType }) {
+export default function ExpenseCard({ expenseId, expenseName, expenseAmount, expensePerMember, expenseOwner, expenseDate, currencyType, onExpenseDeleted }) {
     const mdUp = useResponsive('up', 'md');
     const [anchorEl, setAnchorEl] = useState(null);
     const [deleteConfirm, setDeleteConfirm] = useState(false)
@@ -60,8 +60,12 @@ export default function ExpenseCard({ expenseId, expenseName, expenseAmount, exp
 
       const apiDeleteCall = async() => {
         await deleteExpenseService({id: expenseId})
-        window.location.reload()
         deleteConfirmClose()
+        if (onExpenseDeleted) {
+            onExpenseDeleted()
+        } else {
+            window.location.reload()
+        }
       }
 
     const open = Boolean(anchorEl);

client/src/components/groups/settlement/index.jsx

@@ -12,7 +12,7 @@ import SettlementCard from './settlementCard';
 import UserBalanceChart from './userBalanceChart';
 
 
-export const GroupSettlements = ({ currencyType }) => {
+export const GroupSettlements = ({ currencyType, refreshKey = 0 }) => {
     const params = useParams();
     const [noSettle, setNoSettle] = useState(true)
     const [alert, setAlert] = useState(false)
@@ -27,6 +27,7 @@ export const GroupSettlements = ({ currencyType }) => {
         const getGroupSettlement = async () => {
             setReload(false)
             setLoading(true)
+            setNoSettle(true)
             const groupIdJson = {
                 id: params.groupId
             }
@@ -35,7 +36,7 @@ export const GroupSettlements = ({ currencyType }) => {
             setLoading(false)
         }
         getGroupSettlement()
-    }, [reload])
+    }, [reload, params.groupId, refreshKey])
 
     return (
         <>
@@ -71,7 +72,7 @@ export const GroupSettlements = ({ currencyType }) => {
                         No Settlement requiered !
                         </Typography>
                         </Grid>
-                         : <UserBalanceChart/>}
+                         : <UserBalanceChart refreshKey={refreshKey}/>}
 
 
 

client/src/components/groups/settlement/userBalanceChart.jsx

@@ -10,7 +10,7 @@ import { Bar } from "react-chartjs-2"
 import useResponsive from "../../../theme/hooks/useResponsive"
 
 
-const UserBalanceChart = () => {
+const UserBalanceChart = ({ refreshKey = 0 }) => {
     const params = useParams();
     const mdUp = useResponsive('up', 'md');
     const [loading, setLoading] = useState(false)
@@ -51,6 +51,8 @@ const UserBalanceChart = () => {
     useEffect(() => {
         const getGroupDetails = async () => {
             setLoading(true)
+            setGraphData([])
+            setGraphLabel([])
             const groupIdJson = {
                 id: params.groupId
             }
@@ -71,7 +73,7 @@ const UserBalanceChart = () => {
             setLoading(false)
         }
         getGroupDetails()
-    }, [])
+    }, [params.groupId, refreshKey])
 
     return (
         <>

client/src/components/groups/viewGroup/groupCategoryGraph.jsx

@@ -10,7 +10,7 @@ import ChartDataLabels from 'chartjs-plugin-datalabels';
 import 'chart.js/auto'
 import { convertToCurrency, currencyFind } from '../../../utils/helper';
 
-const GroupCategoryGraph = ({currencyType}) => {
+const GroupCategoryGraph = ({currencyType, refreshKey = 0}) => {
     const params = useParams();
     const [alert, setAlert] = useState(false)
     const [alertMessage, setAlertMessage] = useState()
@@ -66,12 +66,12 @@ const GroupCategoryGraph = ({currencyType}) => {
             }
             const category_exp =
                 await getGroupCategoryExpService(groupIdJson, setAlert, setAlertMessage)
-            setCategoryExp(category_exp.data.data)
+            setCategoryExp(category_exp?.data?.data)
             setLoading(false)
         }
         getGroupCategoryExpense()
 
-    }, [])
+    }, [params.groupId, refreshKey])
     return (
         <>
             {loading ? <Loading /> :

client/src/components/groups/viewGroup/groupMonthlyGraph.jsx

@@ -9,7 +9,7 @@ import { Line } from "react-chartjs-2";
 import 'chart.js/auto'
 import { monthNamesMMM } from '../../../utils/helper';
 
-const GroupMonthlyGraph = () => {
+const GroupMonthlyGraph = ({ refreshKey = 0 }) => {
     const params = useParams();
     const [alert, setAlert] = useState(false)
     const [alertMessage, setAlertMessage] = useState()
@@ -71,13 +71,13 @@ const GroupMonthlyGraph = () => {
             const monthly_exp =
                 await getGroupMonthlyExpService(groupIdJson, setAlert, setAlertMessage)
             const daily_exp = await getGroupDailyExpService(groupIdJson, setAlert, setAlertMessage)
-            setMonthlyExp(monthly_exp.data.data)
-            setDailyExp(daily_exp.data.data)
+            setMonthlyExp(monthly_exp?.data?.data)
+            setDailyExp(daily_exp?.data?.data)
             setLoading(false)
         }
         getGroupMonthlyExpense()
 
-    }, [])
+    }, [params.groupId, refreshKey])
     return (
         <>
             {loading ? <Loading /> :

client/src/components/groups/viewGroup/index.jsx

@@ -1,6 +1,6 @@
 import { Box, Button, Container, Divider, Fab, Grid, Link, Stack, styled, Typography } from '@mui/material';
 import React, { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams, useLocation } from 'react-router-dom'
 import { getGroupDetailsService, getGroupExpenseService } from '../../../services/groupServices';
 import AlertBanner from '../../AlertBanner';
 import Iconify from '../../Iconify';
@@ -19,6 +19,7 @@ const emailId = profile?.emailId
 var showCount = 10
 export default function ViewGroup() {
     const params = useParams();
+    const location = useLocation();
     const [loading, setLoading] = useState(true);
     const [group, setGroup] = useState({});
     const [groupExpense, setGroupExpense] = useState([]);
@@ -30,6 +31,11 @@ export default function ViewGroup() {
     const [expFocus, setExpFocus] = useState(false);
     const [expenses, setExpenses] = useState()
     const [viewSettlement, setViewSettlement] = useState(0)
+    const [expenseRefreshKey, setExpenseRefreshKey] = useState(0)
+
+    const triggerExpenseRefresh = () => {
+        setExpenseRefreshKey(prev => prev + 1)
+    }
 
 
     const toggleAllExp = () => {
@@ -63,9 +69,18 @@ export default function ViewGroup() {
         return 0
     }
 
+    useEffect(() => {
+        if (location.state?.refresh) {
+            triggerExpenseRefresh()
+        }
+    }, [location.state])
+
     useEffect(() => {
         const getGroupDetails = async () => {
             setLoading(true)
+            showCount = 10
+            setShowAllExp(false)
+            setExpFocus(false)
             const groupIdJson = {
                 id: params.groupId
             }
@@ -80,7 +95,7 @@ export default function ViewGroup() {
             setLoading(false)
         }
         getGroupDetails()
-    }, []);
+    }, [params.groupId, expenseRefreshKey]);
 
     const CategoryStyle = styled('span')(({ theme }) => ({
         top: 22,
@@ -367,7 +382,7 @@ export default function ViewGroup() {
                             }
                             {viewSettlement === 1 &&
                                 <Grid item md={12} xs={12}>
-                                    <GroupSettlements currencyType={group?.groupCurrency} />
+                                    <GroupSettlements currencyType={group?.groupCurrency} refreshKey={expenseRefreshKey} />
                                 </Grid>
                             }
                             {viewSettlement === 0 &&
@@ -405,6 +420,7 @@ export default function ViewGroup() {
                                                                 expenseOwner={myExpense?.expenseOwner}
                                                                 expenseDate={myExpense?.expenseDate}
                                                                 currencyType={group?.groupCurrency}
+                                                                onExpenseDeleted={triggerExpenseRefresh}
                                                             />
                                                         </Grid>))}
 
@@ -414,10 +430,10 @@ export default function ViewGroup() {
                                                 </Grid>
                                             </Grid>
                                             <Grid item xs={12} md={6} >
-                                                <GroupCategoryGraph currencyType={group?.groupCurrency} />
+                                                <GroupCategoryGraph currencyType={group?.groupCurrency} refreshKey={expenseRefreshKey} />
                                             </Grid>
                                             <Grid item xs={12} md={expFocus || viewSettlement ? 6 : 12}>
-                                                <GroupMonthlyGraph />
+                                                <GroupMonthlyGraph refreshKey={expenseRefreshKey} />
                                             </Grid>
                                         </>
                                     }

components/group.js

@@ -301,7 +301,7 @@ exports.addSplit = async (groupId, expenseAmount, expenseOwner, expenseMembers)
     })
     group.groupTotal += expenseAmount
     group.split[0][expenseOwner] += expenseAmount
-    expensePerPerson = expenseAmount / expenseMembers.length
+    let expensePerPerson = expenseAmount / expenseMembers.length
     expensePerPerson = Math.round((expensePerPerson  + Number.EPSILON) * 100) / 100;
     //Updating the split values per user 
     for (var user of expenseMembers) {
@@ -310,7 +310,7 @@ exports.addSplit = async (groupId, expenseAmount, expenseOwner, expenseMembers)
 
     //Nullifying split - check if the group balance is zero else added the diff to owner 
     let bal=0
-    for(val of Object.entries(group.split[0]))
+    for(let val of Object.entries(group.split[0]))
     {
         bal += val[1]
     }
@@ -334,7 +334,7 @@ exports.clearSplit = async (groupId, expenseAmount, expenseOwner, expenseMembers
     })
     group.groupTotal -= expenseAmount
     group.split[0][expenseOwner] -= expenseAmount
-    expensePerPerson = expenseAmount / expenseMembers.length
+    let expensePerPerson = expenseAmount / expenseMembers.length
     expensePerPerson = Math.round((expensePerPerson  + Number.EPSILON) * 100) / 100;
     //Updating the split values per user 
     for (var user of expenseMembers) {
@@ -343,7 +343,7 @@ exports.clearSplit = async (groupId, expenseAmount, expenseOwner, expenseMembers
 
     //Nullifying split - check if the group balance is zero else added the diff to owner 
     let bal=0
-    for(val of Object.entries(group.split[0]))
+    for(let val of Object.entries(group.split[0]))
     {
         bal += val[1]
     }