- Add project list on emplyee profile
- Add image as per gender
This commit is contained in:
parent
dd81d873f1
commit
bae7cb4890
BIN
public/assets/img/avatars/avatar_f_01.png
Normal file
BIN
public/assets/img/avatars/avatar_f_01.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 376 KiB |
BIN
public/assets/img/avatars/avatar_f_02.png
Normal file
BIN
public/assets/img/avatars/avatar_f_02.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 426 KiB |
BIN
public/assets/img/avatars/avatar_m_01.png
Normal file
BIN
public/assets/img/avatars/avatar_m_01.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 364 KiB |
BIN
public/assets/img/avatars/avatar_m_02.png
Normal file
BIN
public/assets/img/avatars/avatar_m_02.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 376 KiB |
@ -24,12 +24,22 @@ const EmpBanner = ({ profile, loggedInUser }) => {
|
|||||||
)}
|
)}
|
||||||
<div className="user-profile-header d-flex flex-column flex-lg-row text-sm-start text-center mb-8">
|
<div className="user-profile-header d-flex flex-column flex-lg-row text-sm-start text-center mb-8">
|
||||||
<div className="flex-shrink-0 mt-1 mx-sm-0 mx-auto">
|
<div className="flex-shrink-0 mt-1 mx-sm-0 mx-auto">
|
||||||
<img
|
{profile.gender.toLowerCase() == "male" && (
|
||||||
width={125}
|
<img
|
||||||
src="../../assets/img/avatars/00.jpg"
|
width={125}
|
||||||
alt="user image"
|
src="../../assets/img/avatars/avatar_m_01.png"
|
||||||
className="d-block h-auto ms-0 ms-sm-6 rounded-3 user-profile-img"
|
alt="user image"
|
||||||
/>
|
className="d-block h-auto ms-0 ms-sm-6 rounded-3 user-profile-img"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{profile.gender.toLowerCase() == "female" && (
|
||||||
|
<img
|
||||||
|
width={125}
|
||||||
|
src="../../assets/img/avatars/avatar_f_02.png"
|
||||||
|
alt="user image"
|
||||||
|
className="d-block h-auto ms-0 ms-sm-6 rounded-3 user-profile-img"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-grow-1 mt-1 mt-lg-1">
|
<div className="flex-grow-1 mt-1 mt-lg-1">
|
||||||
<div className="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-4">
|
<div className="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-4">
|
||||||
|
@ -1,26 +1,55 @@
|
|||||||
import React from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import Avatar from "../common/Avatar";
|
|
||||||
import EmpOverview from "./EmpOverview";
|
import EmpOverview from "./EmpOverview";
|
||||||
|
import { useProjectsByEmployee } from "../../hooks/useProjects";
|
||||||
|
|
||||||
const EmpDashboard = ({ profile }) => {
|
const EmpDashboard = ({ profile }) => {
|
||||||
|
const {
|
||||||
|
projectList,
|
||||||
|
loading: selectedProjectLoding,
|
||||||
|
refetch,
|
||||||
|
} = useProjectsByEmployee(profile?.id);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col col-4 pt-5">
|
<div className="col pt-5">
|
||||||
{" "}
|
{" "}
|
||||||
<EmpOverview profile={profile}></EmpOverview>
|
<EmpOverview profile={profile}></EmpOverview>
|
||||||
</div>
|
</div>
|
||||||
<div className="col col-4 pt-5">
|
<div className="col pt-5">
|
||||||
<div className="card">
|
<div className="card">
|
||||||
{" "}
|
{" "}
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<small className="card-text text-uppercase text-body-secondary small">
|
<small className="card-text text-uppercase text-body-secondary small">
|
||||||
My Projects
|
My Projects
|
||||||
</small>{" "}
|
</small>{" "}
|
||||||
|
<ul className="list-unstyled my-3 py-1">
|
||||||
|
{selectedProjectLoding && <span>Loading</span>}
|
||||||
|
{projectList.map((project) => (
|
||||||
|
<li
|
||||||
|
className="d-flex mb-6 align-items-center"
|
||||||
|
key={project.id}
|
||||||
|
>
|
||||||
|
<div className="avatar flex-shrink-0 me-4">
|
||||||
|
<span className="avatar-initial rounded bg-label-primary">
|
||||||
|
<i className="icon-base bx bx-buildings icon-lg"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="row w-100 align-items-center">
|
||||||
|
<div className="col-sm-8 col-lg-12 col-xxl-8 mb-1 mb-sm-0 mb-lg-1 mb-xxl-0 text-start">
|
||||||
|
<h6 className="mb-0">{project.shortName}</h6>
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-4 col-lg-12 col-xxl-4 d-flex justify-content-xxl-end">
|
||||||
|
<div className="label-secondary">{project.name}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col col-4 pt-5">
|
{/* <div className="col col-4 pt-5">
|
||||||
<div className="card">
|
<div className="card">
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<small className="card-text text-uppercase text-body-secondary small">
|
<small className="card-text text-uppercase text-body-secondary small">
|
||||||
@ -28,7 +57,7 @@ const EmpDashboard = ({ profile }) => {
|
|||||||
</small>{" "}
|
</small>{" "}
|
||||||
</div>{" "}
|
</div>{" "}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -27,9 +27,9 @@ const Header = () => {
|
|||||||
const { data, loading } = useMaster();
|
const { data, loading } = useMaster();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
|
||||||
{
|
// {
|
||||||
console.log(location.pathname);
|
// console.log(location.pathname);
|
||||||
}
|
// }
|
||||||
|
|
||||||
const isDashboardPath =
|
const isDashboardPath =
|
||||||
/^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
|
/^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
|
||||||
|
@ -286,7 +286,7 @@ export const useProjectDetails = (projectId, isAuto = true) => {
|
|||||||
|
|
||||||
export const useProjectsByEmployee = (employeeId) => {
|
export const useProjectsByEmployee = (employeeId) => {
|
||||||
const {
|
const {
|
||||||
data: projectNameList = [],
|
data: projectList = [],
|
||||||
isLoading,
|
isLoading,
|
||||||
error,
|
error,
|
||||||
refetch,
|
refetch,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user