handle error msg

This commit is contained in:
pramod mahajan 2025-08-23 11:21:02 +05:30
parent 006a68f2fe
commit a76cbe8615
3 changed files with 82 additions and 28 deletions

View File

@ -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">

View File

@ -80,21 +80,23 @@ const ExpensePage = () => {
};
useEffect(() => {
setShowTrigger(true);
setOffcanvasContent(
"Expense Filters",
<ExpenseFilterPanel
onApply={setFilter}
handleGroupBy={setGroupBy}
clearFilter={clearFilter}
/>
);
if (IsViewAll || IsViewSelf || IsCreatedAble) {
setShowTrigger(true);
setOffcanvasContent(
"Expense Filters",
<ExpenseFilterPanel
onApply={setFilter}
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>
)}

View File

@ -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 ? (