191 lines
7.4 KiB
JavaScript
191 lines
7.4 KiB
JavaScript
import React, { useState } from "react";
|
|
import { formatUTCToLocalTime } from "../../utils/dateUtils";
|
|
import EditProfile from "./EditProfile";
|
|
import GlobalModel from "../common/GlobalModel";
|
|
import { useTenantContext } from "../../pages/Tenant/TenantPage";
|
|
import { useTenantDetailsContext } from "../../pages/Tenant/TenantDetails";
|
|
import IconButton from "../common/IconButton";
|
|
import { MANAGE_TENANTS } from "../../utils/constants";
|
|
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
|
|
|
const Profile = ({ data }) => {
|
|
const {setEditTenant} = useTenantDetailsContext()
|
|
const canUpdateTenant = useHasUserPermission(MANAGE_TENANTS)
|
|
return (
|
|
<>
|
|
<div className="container-fuid">
|
|
|
|
<div className="row">
|
|
<div className="col-12">
|
|
<div className="d-flex flex-wrap align-items-start position-relative ">
|
|
<div className=" d-flex align-items-start gap-2 my-1">
|
|
{data.logoImage ? (<img
|
|
src={data.logoImage}
|
|
alt="Preview"
|
|
className="img-thumbnail rounded"
|
|
style={{ maxHeight: "35px" }}
|
|
/>):( <IconButton
|
|
iconClass="bx bx-sm bx-building"
|
|
color="warning"
|
|
size={8}
|
|
/>)}
|
|
</div>
|
|
<div className="ms-2 ">
|
|
<h4 className="m-0">{data.name}</h4>
|
|
<div className="block">
|
|
<i className="bx bx-globe text-primary bx-xs me-1"></i>
|
|
<span>{data?.domainName}</span>
|
|
</div>
|
|
{canUpdateTenant && ( <span
|
|
className="position-absolute top-0 end-0 cursor-auto"
|
|
onClick={() => setEditTenant(true)}
|
|
>
|
|
<i className="bx bx-edit bs-sm text-primary cursor-pointer"></i>
|
|
</span>)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{data?.description && (
|
|
<div className="col rounded-2 justify-content-start p-2">
|
|
<p className="m-0">{data?.description}</p>
|
|
</div>
|
|
)}
|
|
|
|
|
|
</div>
|
|
<div className="divider text-start my-1">
|
|
<div className="divider-text">Personal</div>
|
|
</div>
|
|
<div className="row ">
|
|
<div className="col-12 col-md-6 d-flex align-items-center">
|
|
<i className="bx bx-sm bx-user me-1"></i>
|
|
<span className="fw-semibold">Contact Person:</span>
|
|
<span className="ms-2">{data.contactName}</span>
|
|
</div>
|
|
|
|
<div className="col-12 col-md-6 d-flex align-items-center my-4 m-0">
|
|
<i className="bx bx-sm bx-envelope me-1"></i>
|
|
<span className="fw-semibold">Email:</span>
|
|
<span className="ms-2">{data.email}</span>
|
|
</div>
|
|
<div className="col-12 col-md-6 d-flex align-items-center">
|
|
<i className="bx bx-sm bx-mobile me-1"></i>
|
|
<span className="fw-semibold">Contact Number:</span>
|
|
<span className="ms-2">{data.contactNumber}</span>
|
|
</div>
|
|
|
|
{data.billingAddress && (
|
|
<div className="col-12 d-flex text-wrap align-items-start mt-4 m-0">
|
|
<i className='bx bxs-flag-alt bx-sm me-1'></i>
|
|
<span className="fw-semibold">Address:</span>
|
|
<span className="ms-2">{data.billingAddress}</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="divider text-start ">
|
|
<div className="divider-text">Organization</div>
|
|
</div>
|
|
|
|
<div className="col-12 d-flex align-items-center mb-2">
|
|
<i className="bx bx-sm bxs-building me-1"></i>
|
|
<span className="fw-semibold">Industry:</span>
|
|
<span className="ms-2">{data?.industry?.name}</span>
|
|
</div>
|
|
<div className="row ">
|
|
{data?.taxId && (
|
|
<div className="col-12 col-md-6 d-flex align-items-center ">
|
|
<i className="bx bx-sm bx-id-card me-1"></i>
|
|
<span className="fw-semibold">Tax Id:</span>
|
|
<span className="ms-2">{data?.taxId}</span>
|
|
</div>
|
|
)}
|
|
<div className="col-12 col-md-6 d-flex align-items-center mb-2 m-0">
|
|
<i className="bx bx-sm bx-group me-1"></i>
|
|
<span className="fw-semibold">Organization Size:</span>
|
|
<span className="ms-2">{data?.organizationSize}</span>
|
|
</div>
|
|
<div className="col-12 col-md-6 d-flex align-items-center my-2 m-0">
|
|
<i className="bx bx-sm bx-group me-1"></i>
|
|
<span className="fw-semibold">Seat Available:</span>
|
|
<span className="ms-2">{data?.seatsAvailable}</span>
|
|
</div>
|
|
<div className="col-12 col-md-6 d-flex align-items-center my-2 m-0">
|
|
<i className="bx bx-sm bx-group me-1"></i>
|
|
<span className="fw-semibold">Total Seat:</span>
|
|
<span className="ms-2">{data?.currentPlan?.maxUsers}</span>
|
|
</div>
|
|
<div className="col-12 col-md-6 d-flex align-items-center">
|
|
<i className="bx bx-sm bxs-calendar me-1"></i>
|
|
<span className="fw-semibold">On-Boarding Date:</span>
|
|
<span className="ms-2">
|
|
{formatUTCToLocalTime(data?.onBoardingDate)}
|
|
</span>
|
|
</div>
|
|
|
|
<table className="table table-bordered text-center text-nowrap table-responsive my-4">
|
|
<tbody>
|
|
<tr>
|
|
<td colSpan="1">
|
|
<strong>Status</strong>
|
|
</td>
|
|
<td colSpan="1">
|
|
<strong>Active</strong>
|
|
</td>
|
|
<td colSpan="1">
|
|
<strong>In-Progress</strong>
|
|
</td>
|
|
<td colSpan="1">
|
|
<strong>On Hold</strong>
|
|
</td>
|
|
<td>
|
|
<strong>In-Active</strong>
|
|
</td>
|
|
<td>
|
|
<strong>Completed</strong>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<strong>Projects</strong>
|
|
</td>
|
|
<td>
|
|
<strong>{data?.activeProjects}</strong>
|
|
</td>
|
|
<td>
|
|
<strong>{data?.inProgressProjects}</strong>
|
|
</td>
|
|
<td>
|
|
<strong>{data?.onHoldProjects}</strong>
|
|
</td>
|
|
<td>
|
|
<strong>{data?.inActiveProjects}</strong>
|
|
</td>
|
|
<td>
|
|
<strong>{data?.completedProjects}</strong>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="row">
|
|
<div className="col-12 col-md-6 d-flex align-items-center">
|
|
<i className="bx bx-sm bx-group me-1"></i>
|
|
<span className="fw-semibold">Activite Employees:</span>
|
|
<span className="ms-2">{data?.activeEmployees}</span>
|
|
</div>
|
|
|
|
<div className="col-12 col-md-6 d-flex align-items-center my-4 m-0">
|
|
<i className="bx bx-sm bx-group me-1"></i>
|
|
<span className="fw-semibold">In-Active Employee:</span>
|
|
<span className="ms-2">{data?.inActiveEmployees}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Profile;
|
|
|