initial commit
This commit is contained in:
undefined
@@ -0,0 +1,193 @@
|
||||
import React, { useState } from "react";
|
||||
import MkdSDK from "@/utils/MkdSDK";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
import { GlobalContext } from "@/globalContext";
|
||||
import ViewAdminPageLayout from "@/layouts/ViewAdminPageLayout";
|
||||
import History from "@/components/History";
|
||||
import Icon from "@/components/Icons";
|
||||
import EditAdminPropertyPage from "./EditAdminPropertyPage";
|
||||
|
||||
let sdk = new MkdSDK();
|
||||
|
||||
const ViewAdminPropertyPage = ({ page }) => {
|
||||
const [profileInfo, setProfileInfo] = useState();
|
||||
const { dispatch: globalDispatch } = React.useContext(GlobalContext);
|
||||
const params = useParams();
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
key: 0,
|
||||
name: "Profile Details",
|
||||
component: page === "view" ? <ProfileDetails profileInfo={profileInfo} /> : <EditAdminPropertyPage />,
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
name: "History",
|
||||
component: (
|
||||
<History
|
||||
id={params?.id}
|
||||
table="property"
|
||||
/>
|
||||
),
|
||||
},
|
||||
// {
|
||||
// key: 2,
|
||||
// name: "Spaces",
|
||||
// component: <div></div>
|
||||
// },
|
||||
// {
|
||||
// key: 3,
|
||||
// name: "Addons",
|
||||
// component: <div></div>
|
||||
// }
|
||||
];
|
||||
|
||||
React.useEffect(() => {
|
||||
globalDispatch({
|
||||
type: "SETPATH",
|
||||
payload: {
|
||||
path: "property",
|
||||
},
|
||||
});
|
||||
|
||||
(async function () {
|
||||
const result = await sdk.callRawAPI(
|
||||
"/v2/api/custom/ergo/property/PAGINATE",
|
||||
{
|
||||
where: [params?.id ? `${params?.id ? `ergo_property.id = '${params?.id}'` : "1"}` : 1],
|
||||
page: 1,
|
||||
limit: 1,
|
||||
},
|
||||
"POST",
|
||||
);
|
||||
|
||||
if (!result.error) {
|
||||
setProfileInfo(result.list[0]);
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ViewAdminPageLayout
|
||||
title={"Property"}
|
||||
name={`${profileInfo ? `${profileInfo?.name}` : ""}`}
|
||||
backTo={"property"}
|
||||
table1={"property"}
|
||||
deleteMessage="Are you sure you want to delete this Property?"
|
||||
id={params?.id}
|
||||
>
|
||||
<div className="border-b border-gray-200 text-center text-sm font-medium text-gray-500">
|
||||
<ul className="-mb-px flex flex-wrap">
|
||||
{tabs.map((tab) => (
|
||||
<li
|
||||
key={tab.key}
|
||||
className="mr-2"
|
||||
>
|
||||
<button
|
||||
onClick={() => setActiveTab(tab.key)}
|
||||
className={`inline-block p-4 ${
|
||||
activeTab === tab.key ? "border-[#111827] font-bold text-[#111827]" : " border-transparent hover:border-gray-300 hover:text-gray-600"
|
||||
} rounded-t-lg border-b-2 `}
|
||||
>
|
||||
{tab.name}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{tabs[activeTab].component}
|
||||
</ViewAdminPageLayout>
|
||||
);
|
||||
};
|
||||
|
||||
const ProfileDetails = ({ profileInfo }) => {
|
||||
const navigate = useNavigate();
|
||||
const params = useParams();
|
||||
const selectVerified = [
|
||||
{ key: "0", value: "No" },
|
||||
{ key: "1", value: "Yes" },
|
||||
];
|
||||
|
||||
const selectStatus = [
|
||||
{
|
||||
key: "0",
|
||||
value: "Inactive",
|
||||
},
|
||||
{ key: "1", value: "Active" },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="p-5">
|
||||
<div className="w-full max-w-[413px]">
|
||||
<div className="mb-5 flex px-5">
|
||||
<p className="w-[15rem] text-base font-bold">Profile Details</p>
|
||||
<div className="flex-1">
|
||||
<button
|
||||
className="flex items-center text-[#33D4B7]"
|
||||
onClick={() => navigate(`/admin/edit-property/${params?.id}`)}
|
||||
>
|
||||
<Icon
|
||||
type="pencil"
|
||||
className="stroke-[#33D4B7]"
|
||||
/>
|
||||
<span className="ml-2">Edit</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex py-2">
|
||||
<p className="mr-10 w-[10rem] px-5 text-right">Host ID</p>
|
||||
<p className="flex-1">{profileInfo?.host_id}</p>
|
||||
</div>
|
||||
<div className="flex py-2">
|
||||
<p className="mr-10 w-[10rem] px-5 text-right">Host Email</p>
|
||||
<p className="flex-1 lowercase">{profileInfo?.email}</p>
|
||||
</div>
|
||||
<div className="flex py-2">
|
||||
<p className="mr-10 w-[10rem] px-5 text-right">Address</p>
|
||||
<p className="flex-1">
|
||||
{profileInfo?.address_line_1} {profileInfo?.address_line_2}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex py-2">
|
||||
<p className="mr-10 w-[10rem] px-5 text-right">City</p>
|
||||
<p className="flex-1">{profileInfo?.city}</p>
|
||||
</div>
|
||||
<div className="flex py-2">
|
||||
<p className="mr-10 w-[10rem] px-5 text-right">Zip Code</p>
|
||||
<p className="flex-1">{profileInfo?.zip}</p>
|
||||
</div>
|
||||
<div className="flex py-2">
|
||||
<p className="mr-10 w-[10rem] px-5 text-right">Country</p>
|
||||
<p className="flex-1">{profileInfo?.country}</p>
|
||||
</div>
|
||||
<div className="flex py-2">
|
||||
<p className="mr-10 w-[10rem] px-5 text-right">Verified</p>
|
||||
<p className="flex-1">{selectVerified[profileInfo?.verified]?.value}</p>
|
||||
</div>
|
||||
<div className="flex py-2">
|
||||
<p className="mr-10 w-[10rem] px-5 text-right normal-case">Num of Spaces</p>
|
||||
<p className="flex-1">{profileInfo?.spaces}</p>
|
||||
</div>
|
||||
<div className="flex py-2">
|
||||
<p className="mr-10 w-[10rem] px-5 text-right">Status</p>
|
||||
<p className="flex-1">{selectStatus[profileInfo?.status]?.value}</p>
|
||||
</div>
|
||||
<div className="flex py-2">
|
||||
<Link
|
||||
className="mr-10 w-[10rem] px-5 text-right font-semibold underline "
|
||||
to={`/admin/property_add_on?property_id=${profileInfo?.id}`}
|
||||
target={"_blank"}
|
||||
>
|
||||
View Addons
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ViewAdminPropertyPage;
|
||||
Reference in New Issue
Block a user