initial setup for tenant profile

public/assets/vendor/css/core.css

@@ -18609,6 +18609,9 @@ li:not(:first-child) .dropdown-item,
 .min-vh-100 {
   min-height: 100vh !important;
 }
+.page-min-h{
+  min-height: 70vh !important;
+}
 
 .flex-fill {
   flex: 1 1 auto !important;

src/components/Tenanat/Profile.jsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Profile = () => {
+  return (
+    <div className='container-fuid'>profile</div>
+  )
+}
+
+export default Profile

src/components/Tenanat/TenantsList.jsx

@@ -6,9 +6,11 @@ import IconButton from "../common/IconButton";
 import Pagination from "../common/Pagination";
 import { TenantTableSkeleton } from "./TenanatSkeleton";
 import { useTenantContext } from "../../pages/Tenant/TenantPage";
+import { useNavigate } from "react-router-dom";
 
 const TenantsList = ({searchText,setIsRefetching, setRefetchFn}) => {
   const [currentPage, setCurrentPage] = useState(1);
+  const navigate = useNavigate()
   const { data, isLoading, isError, isInitialLoading, error,refetch, isFetching } = useTenants(
     currentPage,
     {},
@@ -39,7 +41,7 @@ const TenantsList = ({searchText,setIsRefetching, setRefetchFn}) => {
       key: "name",
       label: "Organization",
       getValue: (t) => (
-        <div className="d-flex align-items-center py-1">
+        <div className="d-flex align-items-center py-1" onClick={()=>navigate(`/tenant/${t.id}`)}>
           <IconButton
             iconClass="bx bx-sm bx-building"
             color="warning"

src/pages/Tenant/TenantDetails.jsx

@@ -0,0 +1,128 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import Breadcrumb from "../../components/common/Breadcrumb";
+import Profile from "../../components/Tenanat/profile";
+
+const TenantDetails = () => {
+    
+  const tabs = [
+    {
+      id: "navs-left-home",
+      label: "Profile",
+      icon: "bx bx-user-circle",
+      iconSize: "bx-sm", 
+      content: <Profile/>,
+    },
+    {
+      id: "navs-left-org",
+      label: "Organization",
+      icon: "bx bxs-business",
+      iconSize: "bx-sm", // change to bx-xs, bx-md, bx-lg
+      content: (
+        <>
+          <p>
+            Icing pastry pudding oat cake. Lemon drops cotton candy caramels cake...
+          </p>
+          <p className="mb-0">
+            Tootsie roll fruitcake cookie. Dessert topping pie...
+          </p>
+        </>
+      ),
+    },
+    {
+      id: "navs-left-profile",
+      label: "Settings",
+      icon: "bx bx-cog",
+      iconSize: "bx-sm",
+      content: (
+        <>
+          <p>
+            Donut dragée jelly pie halvah. Danish gingerbread bonbon cookie...
+          </p>
+          <p className="mb-0">
+            Jelly-o jelly beans icing pastry cake cake lemon drops...
+          </p>
+        </>
+      ),
+    },
+    {
+      id: "navs-left-messages",
+      label: "Messages",
+      icon: "bx bx-message-rounded",
+      iconSize: "bx-sm",
+      content: (
+        <>
+          <p>
+            Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans...
+          </p>
+          <p className="mb-0">
+            Cake chocolate bar cotton candy apple pie tootsie roll...
+          </p>
+        </>
+      ),
+    },
+     {
+      id: "navs-left-bill",
+      label: "Bill",
+      icon: "bx bx-receipt",
+      iconSize: "bx-sm",
+      content: (
+        <>
+          <p>
+            Oat cake chupa chups dragée donut toffee. Sweet cotton candy jelly beans...
+          </p>
+          <p className="mb-0">
+            Cake chocolate bar cotton candy apple pie tootsie roll...
+          </p>
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <div className="container-fluid py-0">
+      <Breadcrumb
+        data={[
+          { label: "Home", link: "/dashboard" },
+          { label: "Tenant", link: "/tenant" },
+          { 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>
+  );
+};
+
+export default TenantDetails;

src/pages/Tenant/TenantPage.jsx

@@ -65,7 +65,7 @@ const TenantPage = () => {
                 value={searchText}
                 onChange={(e)=>setSearchText(e.target.value)}
                 className="form-control form-control-sm"
-                placeholder="Search..."
+                placeholder="Search Tenant"
               />
             </div>
 

src/router/AppRoutes.jsx

@@ -41,6 +41,7 @@ import LoginWithOtp from "../pages/authentication/LoginWithOtp";
 import TenantPage from "../pages/Tenant/TenantPage";
 import CreateTenant from "../pages/Tenant/CreateTenant";
 import ExpensePage from "../pages/Expense/ExpensePage";
+import TenantDetails from "../pages/Tenant/TenantDetails";
 
 const router = createBrowserRouter(
   [
@@ -83,6 +84,7 @@ const router = createBrowserRouter(
             { path: "/masters", element: <MasterPage /> },
              { path: "/tenants", element: <TenantPage /> },
              { path: "/tenants/new-tenant", element: <CreateTenant /> },
+              { path: "/tenant/:tenantId", element: <TenantDetails /> },
             { path: "/help/support", element: <Support /> },
             { path: "/help/docs", element: <Documentation /> },
             { path: "/help/connect", element: <Connect /> },