handle error msg

src/components/Tenant/TenantsList.jsx

@@ -125,7 +125,15 @@ const TenantsList = ({
   ];
   if (isInitialLoading)
     return <TenantTableSkeleton columns={TenantColumns} rows={13} />;
-  if (isError) return <div>{error.message}</div>;
+    if (isError)
+    return (
+      <div className="">
+          <div className="card text-center my-4 p-2">
+            <i className="fa-solid fa-triangle-exclamation fs-5"></i>
+            <p>{error.message}</p>
+          </div>
+      </div>
+    );
   return (
     <>
       <div className="card p-2 mt-3">

src/pages/Expense/ExpensePage.jsx

@@ -80,21 +80,23 @@ const ExpensePage = () => {
   };
 
   useEffect(() => {
-    setShowTrigger(true);
+    if (IsViewAll || IsViewSelf || IsCreatedAble) {
-    setOffcanvasContent(
+      setShowTrigger(true);
-      "Expense Filters",
+      setOffcanvasContent(
-      <ExpenseFilterPanel
+        "Expense Filters",
-        onApply={setFilter}
+        <ExpenseFilterPanel
-        handleGroupBy={setGroupBy}
+          onApply={setFilter}
-        clearFilter={clearFilter}
+          handleGroupBy={setGroupBy}
-      />
+          clearFilter={clearFilter}
-    );
+        />
+      );
+    }
 
     return () => {
       setShowTrigger(false);
       setOffcanvasContent("", null);
     };
-  }, []);
+  }, [IsViewAll, IsViewSelf, IsCreatedAble]);
 
   const contextValue = {
     setViewExpense,
@@ -105,16 +107,17 @@ const ExpensePage = () => {
   return (
     <ExpenseContext.Provider value={contextValue}>
       <div className="container-fluid">
-        <Breadcrumb data={[{ label: "Home", link: "/" }, { label: "Expense" }]} />
+        <Breadcrumb
+          data={[{ label: "Home", link: "/" }, { label: "Expense" }]}
+        />
 
-        {(IsViewAll || IsViewSelf || IsCreatedAble) ? (
+        {IsViewAll || IsViewSelf || IsCreatedAble ? (
           <>
             <div className="card my-3 px-sm-4 px-0">
               <div className="card-body py-2 px-3">
                 <div className="row align-items-center">
                   <div className="col-6 ">
                     <div className="d-flex align-items-center">
-
                       <input
                         type="search"
                         className="form-control form-control-sm w-auto"
@@ -132,7 +135,12 @@ const ExpensePage = () => {
                         type="button"
                         className="p-1 me-1 m-sm-0  bg-primary rounded-circle"
                         title="Add New Expense"
-                        onClick={() => setManageExpenseModal({ IsOpen: true, expenseId: null })}
+                        onClick={() =>
+                          setManageExpenseModal({
+                            IsOpen: true,
+                            expenseId: null,
+                          })
+                        }
                       >
                         <i className="bx bx-plus fs-4 text-white"></i>
                       </button>
@@ -142,12 +150,18 @@ const ExpensePage = () => {
               </div>
             </div>
 
-            <ExpenseList filters={filters} groupBy={groupBy} searchText={searchText} />
+            <ExpenseList
+              filters={filters}
+              groupBy={groupBy}
+              searchText={searchText}
+            />
           </>
         ) : (
           <div className="card text-center py-1">
             <i className="fa-solid fa-triangle-exclamation fs-5" />
-            <p>Access Denied: You don't have permission to perform this action!</p>
+            <p>
+              Access Denied: You don't have permission to perform this action !
+            </p>
           </div>
         )}
 
@@ -156,12 +170,16 @@ const ExpensePage = () => {
           <GlobalModel
             isOpen
             size="lg"
-            closeModal={() => setManageExpenseModal({ IsOpen: null, expenseId: null })}
+            closeModal={() =>
+              setManageExpenseModal({ IsOpen: null, expenseId: null })
+            }
           >
             <ManageExpense
               key={ManageExpenseModal.expenseId ?? "new"}
               expenseToEdit={ManageExpenseModal.expenseId}
-              closeModal={() => setManageExpenseModal({ IsOpen: null, expenseId: null })}
+              closeModal={() =>
+                setManageExpenseModal({ IsOpen: null, expenseId: null })
+              }
             />
           </GlobalModel>
         )}

src/pages/Tenant/TenantDetails.jsx

@@ -8,6 +8,8 @@ import GlobalModel from "../../components/common/GlobalModel";
 import EditProfile from "../../components/Tenant/EditProfile";
 import SubScriptionHistory from "../../components/Tenant/SubScriptionHistory";
 import Loader from "../../components/common/Loader";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { MANAGE_TENANTS, SUPPER_TENANT } from "../../utils/constants";
 
 const TenantDetailsContext = createContext();
 export const useTenantDetailsContext = () => useContext(TenantDetailsContext);
@@ -16,19 +18,21 @@ const TenantDetails = ({
   tenantId: tenantIdProp,
   wrapInContainer = true,
   showBreadcrumb = true,
-  iTSelf = true
+  iTSelf = true,
 }) => {
   const { tenantId: tenantIdFromUrl } = useParams();
   const activeTenantId = tenantIdFromUrl || tenantIdProp;
   const { data, isLoading, isError, error } = useTenantDetails(activeTenantId);
+  const ManageTenant = useHasUserPermission(SUPPER_TENANT);
+  const ModifyTenant = useHasUserPermission(MANAGE_TENANTS);
   const [editTenant, setEditTenant] = useState(false);
   const contextValues = useMemo(
     () => ({ editTenant, setEditTenant }),
     [editTenant]
   );
 
-  const tabs = useMemo(
+  const tabs = useMemo(() => {
-    () => [
+    const allTabs = [
       {
         id: "navs-left-home",
         label: "Profile",
@@ -58,13 +62,37 @@ const TenantDetails = ({
           </div>
         ),
       },
-    ],
+    ];
-    [data, activeTenantId]
-  );
-  if (!activeTenantId) return <div className="my-4">No tenant selected.</div>;
-  if (isLoading) return <div className="my-4"><Loader/></div>;
-  if (isError) return <div className="my-3">{error?.message}</div>;
 
+    return ManageTenant && ModifyTenant
+      ? allTabs
+      : [allTabs[0], allTabs[allTabs.length - 1]];
+  }, [data, activeTenantId, ManageTenant, ModifyTenant]);
+  if (!activeTenantId) return <div className="my-4">No tenant selected.</div>;
+  if (isLoading)
+    return (
+      <div className="my-4">
+        <Loader />
+      </div>
+    );
+  if (isError)
+    return (
+      <div className="container-fluid">
+        {error.status === 403 ? (
+          <div className="card text-center my-4 p-2">
+            <i className="fa-solid fa-triangle-exclamation fs-5"></i>
+            <p>
+              Access Denied: You don't have permission to perform this action!
+            </p>
+          </div>
+        ) : (
+          <div className="card text-center my-4 p-2">
+            <i className="fa-solid fa-triangle-exclamation fs-5"></i>
+            <p>{error.message}</p>
+          </div>
+        )}
+      </div>
+    );
 
   const Shell = ({ children }) =>
     wrapInContainer ? (