Issues_Sep_1W_V2 #402
@ -470,9 +470,8 @@ const ManageContact = ({ contactId, closeModal }) => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="d-flex justify-content-end gap-3 py-2">
|
||||
<button
|
||||
<div className="d-flex justify-content-end gap-2 py-2 mt-3">
|
||||
<button
|
||||
className="btn btn-sm btn-label-secondary"
|
||||
type="button"
|
||||
onClick={handleClosed}
|
||||
|
||||
@ -34,9 +34,13 @@ const EmpDashboard = ({ profile }) => {
|
||||
<div className="d-flex flex-wrap align-items-center justify-content-between gap-2">
|
||||
<div className="d-flex">
|
||||
<div className="avatar flex-shrink-0 me-3">
|
||||
<span className="avatar-initial rounded bg-label-primary">
|
||||
<span
|
||||
className={`avatar-initial rounded ${project.removedDate ? "bg-label-warning" : "bg-label-success"
|
||||
}`}
|
||||
>
|
||||
<i className="icon-base bx bx-buildings icon-lg"></i>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<h6 className="mb-0">{project.projectShortName}</h6>
|
||||
@ -49,6 +53,14 @@ const EmpDashboard = ({ profile }) => {
|
||||
<em>NA</em>
|
||||
)}
|
||||
</div>
|
||||
{project.removedDate && (
|
||||
<div className="mt-0 d-flex flex-column flex-sm-row justify-content-between">
|
||||
<div className="label-secondary">
|
||||
Unassigned:{" "}
|
||||
{new Date(project.removedDate).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@ -59,14 +71,7 @@ const EmpDashboard = ({ profile }) => {
|
||||
</div>
|
||||
|
||||
{/* Dates */}
|
||||
{project.removedDate && (
|
||||
<div className="mt-2 d-flex flex-column flex-sm-row justify-content-between">
|
||||
<div className="label-secondary">
|
||||
Unassigned:{" "}
|
||||
{new Date(project.removedDate).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
|
||||
@ -187,7 +187,7 @@ const ExpenseFilterPanel = ({ onApply, handleGroupBy }) => {
|
||||
<div className="d-flex justify-content-end py-3 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary btn-xs"
|
||||
className="btn btn-label-secondary btn-xs"
|
||||
onClick={onClear}
|
||||
>
|
||||
Clear
|
||||
|
||||
@ -47,6 +47,20 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
},
|
||||
});
|
||||
|
||||
const dropdownRef = useRef(null);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
// Close dropdown on outside click
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event) => {
|
||||
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
||||
setOpen(false);
|
||||
}
|
||||
};
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
const infoRef = useRef(null);
|
||||
const infoRef1 = useRef(null);
|
||||
|
||||
@ -255,19 +269,20 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
<div className="row mb-1">
|
||||
<div className="col-12">
|
||||
<div className="form-text text-start">
|
||||
<div className="d-flex align-items-center form-text fs-7">
|
||||
<div
|
||||
className="d-flex align-items-center form-text fs-7"
|
||||
ref={dropdownRef}
|
||||
>
|
||||
<span className="text-dark">Select Team</span>
|
||||
|
||||
{/* Dropdown */}
|
||||
<div className="dropdown position-relative d-inline-block">
|
||||
<a
|
||||
className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") || selectedRoles.length === 0
|
||||
? "text-secondary"
|
||||
: "text-primary"
|
||||
? "text-secondary"
|
||||
: "text-primary"
|
||||
}`}
|
||||
data-bs-toggle="dropdown"
|
||||
role="button"
|
||||
aria-expanded="false"
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<i className="bx bx-slider-alt ms-2"></i>
|
||||
</a>
|
||||
@ -290,57 +305,55 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Dropdown Menu with Scroll */}
|
||||
<ul
|
||||
className="dropdown-menu p-2 text-capitalize"
|
||||
style={{ maxHeight: "300px", overflowY: "auto" }}
|
||||
>
|
||||
{/* All Roles */}
|
||||
<li key="all">
|
||||
<div className="form-check dropdown-item py-0">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id="checkboxAllRoles"
|
||||
value="all"
|
||||
checked={selectedRoles.includes("all")}
|
||||
onChange={(e) =>
|
||||
handleRoleChange(e, e.target.value)
|
||||
}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label ms-2"
|
||||
htmlFor="checkboxAllRoles"
|
||||
>
|
||||
All Roles
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{/* Dynamic Roles */}
|
||||
{jobRolesForDropdown?.map((role) => (
|
||||
<li key={role.id}>
|
||||
{/* Dropdown Menu */}
|
||||
{open && (
|
||||
<ul
|
||||
className="dropdown-menu show p-2 text-capitalize"
|
||||
style={{ maxHeight: "300px", overflowY: "auto" }}
|
||||
>
|
||||
{/* All Roles */}
|
||||
<li key="all">
|
||||
<div className="form-check dropdown-item py-0">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id={`checkboxRole-${role.id}`}
|
||||
value={role.id}
|
||||
checked={selectedRoles.includes(String(role.id))}
|
||||
onChange={(e) =>
|
||||
handleRoleChange(e, e.target.value)
|
||||
}
|
||||
id="checkboxAllRoles"
|
||||
value="all"
|
||||
checked={selectedRoles.includes("all")}
|
||||
onChange={(e) => handleRoleChange(e, e.target.value)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label ms-2"
|
||||
htmlFor={`checkboxRole-${role.id}`}
|
||||
htmlFor="checkboxAllRoles"
|
||||
>
|
||||
{role.name}
|
||||
All Roles
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
{/* Dynamic Roles */}
|
||||
{jobRolesForDropdown?.map((role) => (
|
||||
<li key={role.id}>
|
||||
<div className="form-check dropdown-item py-0">
|
||||
<input
|
||||
className="form-check-input"
|
||||
type="checkbox"
|
||||
id={`checkboxRole-${role.id}`}
|
||||
value={role.id}
|
||||
checked={selectedRoles.includes(String(role.id))}
|
||||
onChange={(e) => handleRoleChange(e, e.target.value)}
|
||||
/>
|
||||
<label
|
||||
className="form-check-label ms-2"
|
||||
htmlFor={`checkboxRole-${role.id}`}
|
||||
>
|
||||
{role.name}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Search Box */}
|
||||
|
||||
@ -106,7 +106,7 @@ const TenantFilterPanel = ({ onApply }) => {
|
||||
<div className="d-flex justify-content-end py-3 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary btn-xs"
|
||||
className="btn btn-label-secondary btn-xs"
|
||||
onClick={onClear}
|
||||
|
||||
>
|
||||
|
||||
@ -273,7 +273,7 @@ const FilterIcon = ({
|
||||
<li className="d-flex justify-content-end gap-2 px-2 mt-2 mb-2">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-secondary btn-sm py-0 px-2"
|
||||
className="btn btn-label-secondary btn-sm py-0 px-2"
|
||||
onClick={clearAllFilters}
|
||||
>
|
||||
Clear
|
||||
|
||||
@ -63,6 +63,7 @@
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: #f8f9fa;
|
||||
color: black;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@ -65,9 +65,9 @@ const handleChange = (e) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Label htmlFor={name} className="form-label" required>
|
||||
<label htmlFor={name} className="form-label">
|
||||
{label}
|
||||
</Label>
|
||||
</label>
|
||||
|
||||
<div
|
||||
className="form-control form-control-sm p-1"
|
||||
|
||||
@ -11,6 +11,17 @@ import { queryClient } from "../layouts/AuthLayout";
|
||||
|
||||
// Query ---------------------------------------------------------------------------
|
||||
|
||||
export const useEmployee = (employeeId) => {
|
||||
return useQuery({
|
||||
queryKey: ["employeeProfile", employeeId],
|
||||
queryFn: async () => {
|
||||
const res = await EmployeeRepository.getEmployeeProfile(employeeId)
|
||||
return res.data;
|
||||
},
|
||||
enabled:!!employeeId
|
||||
});
|
||||
};
|
||||
|
||||
export const useAllEmployees = (showInactive) => {
|
||||
const {
|
||||
data = [],
|
||||
@ -197,6 +208,9 @@ export const useEmployeesNameByProject = (projectId) => {
|
||||
|
||||
// Mutation------------------------------------------------------------------
|
||||
|
||||
|
||||
|
||||
|
||||
export const useUpdateEmployee = () => {
|
||||
const selectedProject = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
@ -211,6 +225,7 @@ export const useUpdateEmployee = () => {
|
||||
const isAllEmployee = variables.IsAllEmployee;
|
||||
|
||||
// Cache invalidation
|
||||
queryClient.invalidateQueries({ queryKey: ["employeeProfile",id] });
|
||||
queryClient.invalidateQueries({ queryKey: ["allEmployees"] });
|
||||
// queryClient.invalidateQueries(['employeeProfile', id]);
|
||||
queryClient.invalidateQueries({ queryKey: ["projectEmployees"] });
|
||||
@ -232,40 +247,6 @@ export const useUpdateEmployee = () => {
|
||||
});
|
||||
};
|
||||
|
||||
// export const useSuspendEmployee = ({ setIsDeleteModalOpen, setemployeeLodaing }) => {
|
||||
// const queryClient = useQueryClient();
|
||||
// const selectedProject = useSelector((store)=>store.localVariables.projectId)
|
||||
// return useMutation({
|
||||
// mutationFn: (id) => {
|
||||
// setemployeeLodaing(true);
|
||||
// return EmployeeRepository.deleteEmployee(id);
|
||||
// },
|
||||
|
||||
// onSuccess: () => {
|
||||
|
||||
// // queryClient.invalidateQueries( ['allEmployee',false]);
|
||||
// queryClient.invalidateQueries( {queryKey: [ 'projectEmployees' ]} );
|
||||
// queryClient.invalidateQueries( {queryKey:[ 'employeeListByProject' ,selectedProject]} );
|
||||
// showToast("Employee deleted successfully.", "success");
|
||||
// setIsDeleteModalOpen(false);
|
||||
// },
|
||||
|
||||
// onError: (error) => {
|
||||
// const message =
|
||||
// error.response?.data?.message ||
|
||||
// error.message ||
|
||||
// "An unexpected error occurred";
|
||||
// showToast(message, "error");
|
||||
// setIsDeleteModalOpen(false);
|
||||
// },
|
||||
|
||||
// onSettled: () => {
|
||||
// setemployeeLodaing(false);
|
||||
// },
|
||||
// });
|
||||
// };
|
||||
|
||||
// Manage Role
|
||||
|
||||
export const useSuspendEmployee = ({
|
||||
setIsDeleteModalOpen,
|
||||
@ -353,4 +334,4 @@ export const useUpdateEmployeeRoles = ({
|
||||
isError: mutation.isError,
|
||||
error: mutation.error,
|
||||
};
|
||||
};
|
||||
};
|
||||
@ -10,7 +10,7 @@ import { z } from "zod";
|
||||
|
||||
|
||||
const forgotPassSceham = z.object({
|
||||
email: z.string().email(),
|
||||
email: z.string().trim().email(),
|
||||
})
|
||||
|
||||
const ForgotPasswordPage = () => {
|
||||
|
||||
@ -16,13 +16,13 @@ const LoginPage = () => {
|
||||
|
||||
const loginSchema = IsLoginWithOTP
|
||||
? z.object({
|
||||
username: z.string().email({ message: "Valid email required" }),
|
||||
})
|
||||
username: z.string().trim().email({ message: "Valid email required" }),
|
||||
})
|
||||
: z.object({
|
||||
username: z.string().email({ message: "Valid email required" }),
|
||||
password: z.string().min(1, { message: "Password required" }),
|
||||
rememberMe: z.boolean(),
|
||||
});
|
||||
username: z.string().trim().email({ message: "Valid email required" }),
|
||||
password: z.string().trim().min(1, { message: "Password required" }),
|
||||
rememberMe: z.boolean(),
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
@ -106,7 +106,7 @@ const LoginPage = () => {
|
||||
{/* Password */}
|
||||
{!IsLoginWithOTP && (
|
||||
<>
|
||||
<div className="mb-3 text-start">
|
||||
{/* <div className="mb-3 text-start">
|
||||
<label htmlFor="password" className="form-label">
|
||||
Password
|
||||
</label>
|
||||
@ -114,9 +114,8 @@ const LoginPage = () => {
|
||||
<input
|
||||
type={hidepass ? "password" : "text"}
|
||||
id="password"
|
||||
className={`form-control ${
|
||||
errors.password ? "is-invalid" : ""
|
||||
}`}
|
||||
className={`form-control ${errors.password ? "is-invalid" : ""
|
||||
}`}
|
||||
placeholder="••••••••"
|
||||
{...register("password")}
|
||||
/>
|
||||
@ -135,6 +134,38 @@ const LoginPage = () => {
|
||||
{errors.password.message}
|
||||
</div>
|
||||
)}
|
||||
</div> */}
|
||||
|
||||
<div className="mb-3 form-password-toggle text-start">
|
||||
<label htmlFor="password" className="form-label">
|
||||
Password
|
||||
</label>
|
||||
|
||||
<div className="input-group input-group-merge">
|
||||
<input
|
||||
type={hidepass ? "password" : "text"}
|
||||
autoComplete="new-password"
|
||||
id="password"
|
||||
className="form-control form-control-xl shadow-none"
|
||||
name="password"
|
||||
{...register("password")}
|
||||
placeholder="••••••••••••"
|
||||
aria-describedby="password"
|
||||
/>
|
||||
<span className="input-group-text cursor-pointer border-start-0">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-link p-0"
|
||||
onClick={() => setHidepass(!hidepass)}
|
||||
>
|
||||
{hidepass ? (
|
||||
<i className="bx bx-hide fs-5" />
|
||||
) : (
|
||||
<i className="bx bx-show fs-5" />
|
||||
)}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Remember Me + Forgot Password */}
|
||||
@ -169,8 +200,8 @@ const LoginPage = () => {
|
||||
{loading
|
||||
? "Please Wait..."
|
||||
: IsLoginWithOTP
|
||||
? "Send OTP"
|
||||
: "Sign In"}
|
||||
? "Send OTP"
|
||||
: "Sign In"}
|
||||
</button>
|
||||
|
||||
{/* Login With OTP Button */}
|
||||
|
||||
@ -93,153 +93,155 @@ const ResetPassword = () => {
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center justify-content-center p-4 p-sm-5 bg-gray-60 h-100">
|
||||
<div className="block p-4 p-sm-5 bg-gray-60">
|
||||
<h4 className="mb-2">Reset Password? 🔒</h4>
|
||||
<p className="mb-4">Enter your email and new password to update.</p>
|
||||
<form
|
||||
id="formAuthentication"
|
||||
className="mb-3"
|
||||
onSubmit={handleSubmit(onSubmitResetPassword)}
|
||||
>
|
||||
<div className="mb-3 text-start">
|
||||
<label htmlFor="email" className="form-label">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
id="email"
|
||||
{...register("email")}
|
||||
placeholder="Enter your email"
|
||||
autoFocus
|
||||
/>
|
||||
{errors.email && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.email.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-2 form-password-toggle text-start">
|
||||
<div className="mt-2">
|
||||
<label htmlFor="email" className="form-label">
|
||||
New Password
|
||||
</label>
|
||||
</div>
|
||||
<div className=" input-group input-group-merge">
|
||||
<input
|
||||
type={hidepass ? "password" : "text"}
|
||||
autoComplete="true"
|
||||
id="password"
|
||||
className="form-control"
|
||||
name="password"
|
||||
{...register("password")}
|
||||
placeholder="············"
|
||||
aria-describedby="password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-secondy border-top border-end border-bottom "
|
||||
onClick={() => setHidepass(!hidepass)}
|
||||
style={{
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderLeft: 0,
|
||||
}}
|
||||
>
|
||||
{hidepass ? (
|
||||
<i className="bx bx-hide" />
|
||||
) : (
|
||||
<i className="bx bx-show" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{errors.password && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.password.message}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-2">
|
||||
{" "}
|
||||
<label htmlFor="email" className="form-label">
|
||||
Repeat New Password
|
||||
</label>{" "}
|
||||
</div>
|
||||
<div className=" input-group input-group-merge">
|
||||
<input
|
||||
type={hidepass1 ? "password" : "text"}
|
||||
autoComplete="true"
|
||||
id="password"
|
||||
className="form-control"
|
||||
name="confirmPassword"
|
||||
{...register("confirmPassword")}
|
||||
placeholder="············"
|
||||
aria-describedby="password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn border-top border-end border-bottom "
|
||||
onClick={() => setHidepass1(!hidepass1)}
|
||||
style={{
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderLeft: 0,
|
||||
}}
|
||||
>
|
||||
{hidepass1 ? (
|
||||
<i className="bx bx-hide" />
|
||||
) : (
|
||||
<i className="bx bx-show" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{errors.confirmPassword && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.confirmPassword.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-3 text-start ">
|
||||
<p className="p-0 m-0" style={{ fontSize: "9px" }}>
|
||||
Password must be at least 8 characters
|
||||
</p>
|
||||
<p className="p-0 m-0" style={{ fontSize: "9px" }}>
|
||||
Password must contain at least one uppercase letter
|
||||
</p>
|
||||
<p className="p-0 m-0" style={{ fontSize: "9px" }}>
|
||||
Password must contain at least one number
|
||||
</p>
|
||||
<p className="p-0 m-0" style={{ fontSize: "9px" }}>
|
||||
Password must contain at least one special character
|
||||
</p>
|
||||
</div>
|
||||
<button aria-label="Click me" className="btn btn-primary d-grid w-100">
|
||||
{loading ? "Please Wait..." : "Update Password"}
|
||||
</button>
|
||||
</form>
|
||||
<div className="text-center">
|
||||
<Link
|
||||
aria-label="Go to Login Page"
|
||||
to="/auth/login"
|
||||
className="d-flex align-items-center justify-content-center"
|
||||
<div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center justify-content-center p-4 p-sm-5 bg-gray-60 h-100">
|
||||
<div className="block p-4 p-sm-5 bg-gray-60">
|
||||
<h4 className="mb-2">Reset Password? 🔒</h4>
|
||||
<p className="mb-4">Enter your email and new password to update.</p>
|
||||
<form
|
||||
id="formAuthentication"
|
||||
className="mb-3"
|
||||
onSubmit={handleSubmit(onSubmitResetPassword)}
|
||||
>
|
||||
<i className="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i>
|
||||
Back to login
|
||||
</Link>
|
||||
<div className="mb-3 text-start">
|
||||
<label htmlFor="email" className="form-label">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control border border-secondary"
|
||||
id="email"
|
||||
{...register("email")}
|
||||
placeholder="Enter your email"
|
||||
autoFocus
|
||||
/>
|
||||
{errors.email && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.email.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-2 form-password-toggle text-start">
|
||||
<div className="mt-2">
|
||||
<label htmlFor="email" className="form-label">
|
||||
New Password
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="input-group input-group-merge d-flex align-items-center border border-secondary rounded px-2">
|
||||
<input
|
||||
type={hidepass ? "password" : "text"}
|
||||
autoComplete="true"
|
||||
id="password"
|
||||
className="form-control form-control-xl border-0 shadow-none"
|
||||
name="password"
|
||||
{...register("password")}
|
||||
placeholder="············"
|
||||
aria-describedby="password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-link-secondary p-0 ms-2"
|
||||
onClick={() => setHidepass(!hidepass)}
|
||||
style={{
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderLeft: 0,
|
||||
}}
|
||||
>
|
||||
{hidepass ? (
|
||||
<i className="bx bx-hide" />
|
||||
) : (
|
||||
<i className="bx bx-show" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{errors.password && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.password.message}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-2">
|
||||
{" "}
|
||||
<label htmlFor="email" className="form-label">
|
||||
Repeat New Password
|
||||
</label>{" "}
|
||||
</div>
|
||||
<div className="input-group input-group-merge d-flex align-items-center border border-secondary rounded px-2">
|
||||
<input
|
||||
type={hidepass1 ? "password" : "text"}
|
||||
autoComplete="true"
|
||||
id="password"
|
||||
className="form-control form-control-xl border-0 shadow-none"
|
||||
name="confirmPassword"
|
||||
{...register("confirmPassword")}
|
||||
placeholder="············"
|
||||
aria-describedby="password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-link-secondary p-0 ms-2"
|
||||
onClick={() => setHidepass1(!hidepass1)}
|
||||
style={{
|
||||
borderTopLeftRadius: 0,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderLeft: 0,
|
||||
}}
|
||||
>
|
||||
{hidepass1 ? (
|
||||
<i className="bx bx-hide" />
|
||||
) : (
|
||||
<i className="bx bx-show" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{errors.confirmPassword && (
|
||||
<div
|
||||
className="danger-text text-start"
|
||||
style={{ fontSize: "12px" }}
|
||||
>
|
||||
{errors.confirmPassword.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mb-3 text-start ">
|
||||
<p className="p-0 m-0" style={{ fontSize: "9px" }}>
|
||||
Password must be at least 8 characters
|
||||
</p>
|
||||
<p className="p-0 m-0" style={{ fontSize: "9px" }}>
|
||||
Password must contain at least one uppercase letter
|
||||
</p>
|
||||
<p className="p-0 m-0" style={{ fontSize: "9px" }}>
|
||||
Password must contain at least one number
|
||||
</p>
|
||||
<p className="p-0 m-0" style={{ fontSize: "9px" }}>
|
||||
Password must contain at least one special character
|
||||
</p>
|
||||
</div>
|
||||
<button aria-label="Click me" className="btn btn-primary d-grid w-100">
|
||||
{loading ? "Please Wait..." : "Update Password"}
|
||||
</button>
|
||||
</form>
|
||||
<div className="text-center">
|
||||
<Link
|
||||
aria-label="Go to Login Page"
|
||||
to="/auth/login"
|
||||
className="d-flex align-items-center justify-content-center"
|
||||
>
|
||||
<i className="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i>
|
||||
Back to login
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ import {
|
||||
VIEW_ALL_EMPLOYEES,
|
||||
VIEW_TEAM_MEMBERS,
|
||||
} from "../../utils/constants";
|
||||
import { clearCacheKey, useSelectedProject } from "../../slices/apiDataManager";
|
||||
import { clearCacheKey } from "../../slices/apiDataManager";
|
||||
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
|
||||
import SuspendEmp from "../../components/Employee/SuspendEmp"; // Keep if you use SuspendEmp
|
||||
import {
|
||||
@ -38,10 +38,9 @@ import usePagination from "../../hooks/usePagination";
|
||||
import { setProjectId } from "../../slices/localVariablesSlice";
|
||||
|
||||
const EmployeeList = () => {
|
||||
// const selectedProjectId = useSelector(
|
||||
// (store) => store.localVariables.projectId
|
||||
// );
|
||||
const selectedProjectId = useSelectedProject();
|
||||
const selectedProjectId = useSelector(
|
||||
(store) => store.localVariables.projectId
|
||||
);
|
||||
const { projectNames, loading: projectLoading, fetchData } = useProjectName();
|
||||
|
||||
const dispatch = useDispatch();
|
||||
@ -79,11 +78,11 @@ const EmployeeList = () => {
|
||||
}
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!selectedProjectId && projectNames?.length > 0) {
|
||||
dispatch(setProjectId(projectNames[0].id));
|
||||
}
|
||||
}, [selectedProjectId, projectNames, dispatch]);
|
||||
useEffect(() => {
|
||||
if (selectedProjectId === null) {
|
||||
dispatch(setProjectId(projectNames[0]?.id));
|
||||
}
|
||||
}, [selectedProjectId]);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const applySearchFilter = (data, text) => {
|
||||
@ -177,12 +176,10 @@ useEffect(() => {
|
||||
useEffect(() => {
|
||||
if (!loading && Array.isArray(employees)) {
|
||||
const sorted = [...employees].sort((a, b) => {
|
||||
const nameA = `${a.firstName || ""}${a.middleName || ""}${
|
||||
a.lastName || ""
|
||||
}`.toLowerCase();
|
||||
const nameB = `${b.firstName || ""}${b.middleName || ""}${
|
||||
b.lastName || ""
|
||||
}`.toLowerCase();
|
||||
const nameA = `${a.firstName || ""}${a.middleName || ""}${a.lastName || ""
|
||||
}`.toLowerCase();
|
||||
const nameB = `${b.firstName || ""}${b.middleName || ""}${b.lastName || ""
|
||||
}`.toLowerCase();
|
||||
return nameA?.localeCompare(nameB);
|
||||
});
|
||||
|
||||
@ -221,10 +218,10 @@ useEffect(() => {
|
||||
recallEmployeeData(
|
||||
showInactive,
|
||||
showAllEmployees ? null : selectedProjectId
|
||||
);
|
||||
); // Use selectedProjectId here
|
||||
}
|
||||
},
|
||||
[employees, showInactive, showAllEmployees, selectedProjectId]
|
||||
[employees, showInactive, showAllEmployees, selectedProjectId] // Add all relevant dependencies
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@ -247,7 +244,7 @@ useEffect(() => {
|
||||
)}
|
||||
|
||||
{showModal && (
|
||||
<GlobalModel
|
||||
<GlobalModel
|
||||
isOpen={showModal}
|
||||
size="lg"
|
||||
closeModal={() => setShowModal(false)}
|
||||
@ -259,18 +256,24 @@ useEffect(() => {
|
||||
/>
|
||||
</GlobalModel>
|
||||
)}
|
||||
{IsDeleteModalOpen && (
|
||||
|
||||
{IsDeleteModalOpen && (
|
||||
<ConfirmModal
|
||||
isOpen={IsDeleteModalOpen}
|
||||
type="delete"
|
||||
header="Suspend Employee"
|
||||
message="Are you sure you want suspend?"
|
||||
header={
|
||||
selectedEmpFordelete?.isActive
|
||||
? "Suspend Employee"
|
||||
: "Reactivate Employee"
|
||||
}
|
||||
message={`Are you sure you want to ${selectedEmpFordelete?.isActive ? "suspend" : "reactivate"
|
||||
} this employee?`}
|
||||
onSubmit={(id) =>
|
||||
suspendEmployee({
|
||||
employeeId:id ,
|
||||
active: !selectedEmpFordelete.isActive,
|
||||
})
|
||||
}
|
||||
suspendEmployee({
|
||||
employeeId: id,
|
||||
active: !selectedEmpFordelete.isActive,
|
||||
})
|
||||
}
|
||||
onClose={() => setIsDeleteModalOpen(false)}
|
||||
loading={employeeLodaing}
|
||||
paramData={selectedEmpFordelete.id}
|
||||
@ -496,9 +499,8 @@ useEffect(() => {
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
className={`sorting_disabled ${
|
||||
!Manage_Employee && "d-none"
|
||||
}`}
|
||||
className={`sorting_disabled ${!Manage_Employee && "d-none"
|
||||
}`}
|
||||
rowSpan="1"
|
||||
colSpan="1"
|
||||
style={{ width: "50px" }}
|
||||
@ -518,9 +520,9 @@ useEffect(() => {
|
||||
)}
|
||||
{/* Conditional messages for no data or no search results */}
|
||||
{!loading &&
|
||||
displayData?.length === 0 &&
|
||||
searchText &&
|
||||
!showAllEmployees ? (
|
||||
displayData?.length === 0 &&
|
||||
searchText &&
|
||||
!showAllEmployees ? (
|
||||
<tr>
|
||||
<td colSpan={8}>
|
||||
<small className="muted">
|
||||
@ -530,14 +532,14 @@ useEffect(() => {
|
||||
</tr>
|
||||
) : null}
|
||||
{!loading &&
|
||||
displayData?.length === 0 &&
|
||||
(!searchText || showAllEmployees) ? (
|
||||
displayData?.length === 0 &&
|
||||
(!searchText || showAllEmployees) ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={8}
|
||||
style={{ paddingTop: "20px", textAlign: "center" }}
|
||||
>
|
||||
No team members assigned yet
|
||||
No Data Found
|
||||
</td>
|
||||
</tr>
|
||||
) : null}
|
||||
@ -556,9 +558,7 @@ useEffect(() => {
|
||||
<div className="d-flex flex-column">
|
||||
<a
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/employee/${item.id}?for=attendance`
|
||||
)
|
||||
navigate(`/employee/${item.id}`)
|
||||
}
|
||||
className="text-heading text-truncate cursor-pointer"
|
||||
>
|
||||
@ -594,10 +594,9 @@ useEffect(() => {
|
||||
{item.jobRole || "Not Assign Yet"}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td className=" d-none d-md-table-cell">
|
||||
{item.joiningDate
|
||||
? moment(item.joiningDate).format("DD-MMM-YYYY")
|
||||
: "NA"}
|
||||
{moment(item.joiningDate)?.format("DD-MMM-YYYY")}
|
||||
</td>
|
||||
<td>
|
||||
{showInactive ? (
|
||||
@ -626,47 +625,56 @@ useEffect(() => {
|
||||
<i className="bx bx-dots-vertical-rounded bx-md"></i>
|
||||
</button>
|
||||
<div className="dropdown-menu dropdown-menu-end">
|
||||
{/* View always visible */}
|
||||
<button
|
||||
onClick={() =>
|
||||
navigate(`/employee/${item.id}`)
|
||||
}
|
||||
onClick={() => navigate(`/employee/${item.id}`)}
|
||||
className="dropdown-item py-1"
|
||||
>
|
||||
<i className="bx bx-detail bx-sm"></i> View
|
||||
</button>
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() => {
|
||||
handleEmployeeModel(item.id);
|
||||
}}
|
||||
>
|
||||
<i className="bx bx-edit bx-sm"></i> Edit
|
||||
</button>
|
||||
{!item.isSystem && (
|
||||
|
||||
{/* If ACTIVE employee */}
|
||||
{item.isActive && (
|
||||
<>
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() =>
|
||||
handleOpenDelete(item)
|
||||
}
|
||||
onClick={() => handleEmployeeModel(item.id)}
|
||||
>
|
||||
<i className="bx bx-task-x bx-sm"></i>{" "}
|
||||
Suspend
|
||||
<i className="bx bx-edit bx-sm"></i> Edit
|
||||
</button>
|
||||
|
||||
{/* Suspend only when active */}
|
||||
{item.isActive && (
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() => handleOpenDelete(item)}
|
||||
>
|
||||
<i className="bx bx-task-x bx-sm"></i> Suspend
|
||||
</button>
|
||||
)}
|
||||
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
type="button"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#managerole-modal"
|
||||
onClick={() =>
|
||||
setEmpForManageRole(item.id)
|
||||
}
|
||||
onClick={() => setEmpForManageRole(item.id)}
|
||||
>
|
||||
<i className="bx bx-cog bx-sm"></i>{" "}
|
||||
Manage Role
|
||||
<i className="bx bx-cog bx-sm"></i> Manage Role
|
||||
</button>
|
||||
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* If INACTIVE employee AND inactive toggle is ON */}
|
||||
{!item.isActive && showInactive && (
|
||||
<button
|
||||
className="dropdown-item py-1"
|
||||
onClick={() => handleOpenDelete(item)}
|
||||
>
|
||||
<i className="bx bx-refresh bx-sm me-1"></i> Re-activate
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
@ -683,9 +691,8 @@ useEffect(() => {
|
||||
<nav aria-label="Page">
|
||||
<ul className="pagination pagination-sm justify-content-end py-1">
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === 1 ? "disabled" : ""
|
||||
}`}
|
||||
className={`page-item ${currentPage === 1 ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link btn-xs"
|
||||
@ -698,9 +705,8 @@ useEffect(() => {
|
||||
{[...Array(totalPages)]?.map((_, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className={`page-item ${
|
||||
currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
className={`page-item ${currentPage === index + 1 ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
@ -712,9 +718,8 @@ useEffect(() => {
|
||||
))}
|
||||
|
||||
<li
|
||||
className={`page-item ${
|
||||
currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
className={`page-item ${currentPage === totalPages ? "disabled" : ""
|
||||
}`}
|
||||
>
|
||||
<button
|
||||
className="page-link"
|
||||
|
||||
@ -3,6 +3,7 @@ import { useSearchParams, useParams, useNavigate } from "react-router-dom";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
import {
|
||||
useEmployee,
|
||||
useEmployeeProfile,
|
||||
useEmployees,
|
||||
useEmployeesByProject,
|
||||
@ -28,38 +29,20 @@ const EmployeeProfile = () => {
|
||||
|
||||
const projectID = useSelector((store) => store.localVariables.projectId);
|
||||
const { employeeId } = useParams();
|
||||
// const {employee,loading} = useEmployeeProfile(employeeId)
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [SearchParams] = useSearchParams();
|
||||
const tab = SearchParams.get("for");
|
||||
const [activePill, setActivePill] = useState(tab || "profile");
|
||||
const [currentEmployee, setCurrentEmployee] = useState();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
const {data:currentEmployee,isLoading,isError,error} = useEmployee(employeeId)
|
||||
const handlePillClick = (pillKey) => {
|
||||
setActivePill(pillKey);
|
||||
};
|
||||
|
||||
const fetchEmployeeProfile = async (employeeID) => {
|
||||
try {
|
||||
const resp = await EmployeeRepository.getEmployeeProfile(employeeID);
|
||||
setCurrentEmployee(resp.data);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (employeeId) {
|
||||
fetchEmployeeProfile(employeeId);
|
||||
}
|
||||
}, [employeeId]);
|
||||
|
||||
const navigate = useNavigate();
|
||||
const renderContent = () => {
|
||||
if (loading) return <div>Loading</div>;
|
||||
if (isLoading) return <div>Loading</div>;
|
||||
switch (activePill) {
|
||||
case "profile": {
|
||||
return (
|
||||
@ -101,9 +84,10 @@ const EmployeeProfile = () => {
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
if (isLoading) {
|
||||
return <div>Loading...</div>;
|
||||
}
|
||||
if(isError) return <div >{error.message}</div>
|
||||
return (
|
||||
<>
|
||||
<div className="container-fluid">
|
||||
@ -138,4 +122,4 @@ const EmployeeProfile = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default EmployeeProfile;
|
||||
export default EmployeeProfile;
|
||||
Loading…
x
Reference in New Issue
Block a user