123 lines
3.6 KiB
JavaScript
123 lines
3.6 KiB
JavaScript
import React, { createContext, useContext,useState } from "react";
|
|
import { useParams } from "react-router-dom";
|
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
|
import Profile from "../../components/Tenant/Profile";
|
|
|
|
import { useTenantDetails } from "../../hooks/useTenant";
|
|
import Organization from "../../components/Tenant/Organization";
|
|
import { ComingSoonPage } from "../Misc/ComingSoonPage";
|
|
import GlobalModel from "../../components/common/GlobalModel";
|
|
import EditProfile from "../../components/Tenant/EditProfile";
|
|
import SubScriptionHistory from "../../components/Tenant/SubScriptionHistory";
|
|
|
|
const TenantDetailsContext = createContext();
|
|
export const useTenantDetailsContext = () => useContext(TenantDetailsContext);
|
|
|
|
|
|
const TenantDetails = () => {
|
|
const { tenantId } = useParams();
|
|
const { data, isLoading, isError, error } = useTenantDetails(tenantId);
|
|
const [editTenant, setEditTenant] = useState(false);
|
|
const contextValues ={
|
|
setEditTenant,editTenant
|
|
}
|
|
|
|
|
|
const tabs = [
|
|
{
|
|
id: "navs-left-home",
|
|
label: "Profile",
|
|
icon: "bx bx-user-circle",
|
|
iconSize: "bx-sm",
|
|
content: <Profile data={data} />,
|
|
},
|
|
|
|
{
|
|
id: "navs-left-bill",
|
|
label: "Bills and Plan ",
|
|
icon: "bx bx-receipt",
|
|
iconSize: "bx-sm",
|
|
content: (
|
|
<div className="text-center">
|
|
<SubScriptionHistory tenantId={tenantId} />
|
|
</div>
|
|
),
|
|
},
|
|
|
|
{
|
|
id: "navs-left-messages",
|
|
label: "Messages",
|
|
icon: "bx bx-message-rounded",
|
|
iconSize: "bx-sm",
|
|
content: (
|
|
<div className="text-center">
|
|
<ComingSoonPage />
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
|
|
if (isLoading) return <div className="my-4">Loading...</div>;
|
|
if (isError) return <div className="my-3">{error.message}</div>;
|
|
return (
|
|
<>
|
|
<TenantDetailsContext.Provider value={contextValues}>
|
|
<div className="container-fluid py-0">
|
|
<Breadcrumb
|
|
data={[
|
|
{ label: "Home", link: "/dashboard" },
|
|
{ label: "Tenant", link: "/tenants" },
|
|
{ label: "Tenant Details", link: null },
|
|
]}
|
|
/>
|
|
|
|
<div className="nav-align-left nav-tabs-shadow mb-6">
|
|
<ul className="nav nav-tabs py-2 page-min-h" role="tablist">
|
|
{tabs.map((tab, index) => (
|
|
<li key={tab.id} className="nav-item">
|
|
<button
|
|
type="button"
|
|
className={`nav-link d-flex align-items-center gap-2 ${
|
|
index === 0 ? "active" : ""
|
|
}`}
|
|
role="tab"
|
|
data-bs-toggle="tab"
|
|
data-bs-target={`#${tab.id}`}
|
|
aria-controls={tab.id}
|
|
aria-selected={index === 0}
|
|
>
|
|
{tab.icon && <i className={`${tab.icon} ${tab.iconSize}`} />}
|
|
{tab.label}
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="tab-content">
|
|
{tabs.map((tab, index) => (
|
|
<div
|
|
key={tab.id}
|
|
className={`tab-pane fade ${
|
|
index === 0 ? "show active" : ""
|
|
} text-start`}
|
|
id={tab.id}
|
|
>
|
|
{tab.content}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</TenantDetailsContext.Provider>
|
|
{editTenant && (
|
|
<GlobalModel size="lg" isOpen={editTenant} closeModal={()=>setEditTenant(false)}>
|
|
<EditProfile TenantId={tenantId} onClose={()=>setEditTenant(false)}/>
|
|
</GlobalModel>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default TenantDetails;
|