admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

added organization api in repo. and removed unuse files

Browse Source
This commit is contained in:
pramod.mahajan 2025-09-27 23:54:44 +05:30
parent 2489095b0b
commit 482f8a9bcb
17 changed files with 537 additions and 419 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/img/orglogo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

172
src/components/Employee/DemoTable.jsx
View File

@ -1,172 +0,0 @@
import React from "react";
const DemoTable = () => {
return (
<div className="content-wrapper">
<div className="container-fluid">
<div className="card">
<div className="card-datatable table-responsive">
<table className="datatables-basic table border-top">
<thead>
<tr>
<th></th>
<th></th>
<th>id</th>
<th>Name</th>
<th>Email</th>
<th>Date</th>
<th>Salary</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</div>
<div className="offcanvas offcanvas-end" id="add-new-record">
<div className="offcanvas-header border-bottom">
<h5 className="offcanvas-title" id="exampleModalLabel">
New Record
</h5>
<button
type="button"
className="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<div className="offcanvas-body flex-grow-1">
<form
className="add-new-record pt-0 row g-2"
id="form-add-new-record"
onsubmit="return false"
>
<div className="col-sm-12">
<label className="form-label" for="basicFullname">
Full Name
</label>
<div className="input-group input-group-merge">
<span id="basicFullname2" className="input-group-text">
<i className="bx bx-user"></i>
</span>
<input
type="text"
id="basicFullname"
className="form-control dt-full-name"
name="basicFullname"
placeholder="John Doe"
aria-label="John Doe"
aria-describedby="basicFullname2"
/>
</div>
</div>
<div className="col-sm-12">
<label className="form-label" for="basicPost">
Post
</label>
<div className="input-group input-group-merge">
<span id="basicPost2" className="input-group-text">
<i className="bx bxs-briefcase"></i>
</span>
<input
type="text"
id="basicPost"
name="basicPost"
className="form-control dt-post"
placeholder="Web Developer"
aria-label="Web Developer"
aria-describedby="basicPost2"
/>
</div>
</div>
<div className="col-sm-12">
<label className="form-label" for="basicEmail">
Email
</label>
<div className="input-group input-group-merge">
<span className="input-group-text">
<i className="bx bx-envelope"></i>
</span>
<input
type="text"
id="basicEmail"
name="basicEmail"
className="form-control dt-email"
placeholder="john.doe@example.com"
aria-label="john.doe@example.com"
/>
</div>
<div className="form-text">
You can use letters, numbers & periods
</div>
</div>
<div className="col-sm-12">
<label className="form-label" for="basicDate">
Joining Date
</label>
<div className="input-group input-group-merge">
<span id="basicDate2" className="input-group-text">
<i className="bx bx-calendar"></i>
</span>
<input
type="text"
className="form-control dt-date"
id="basicDate"
name="basicDate"
aria-describedby="basicDate2"
placeholder="MM/DD/YYYY"
aria-label="MM/DD/YYYY"
/>
</div>
</div>
<div className="col-sm-12">
<label className="form-label" for="basicSalary">
Salary
</label>
<div className="input-group input-group-merge">
<span id="basicSalary2" className="input-group-text">
<i className="bx bx-dollar"></i>
</span>
<input
type="number"
id="basicSalary"
name="basicSalary"
className="form-control dt-salary"
placeholder="12000"
aria-label="12000"
aria-describedby="basicSalary2"
/>
</div>
</div>
<div className="col-sm-12">
<button
type="submit"
className="btn btn-primary data-submit me-sm-4 me-1"
>
Submit
</button>
<button
type="reset"
className="btn btn-outline-secondary"
data-bs-dismiss="offcanvas"
>
Cancel
</button>
</div>
</form>
</div>
</div>
<hr className="my-12" />
<hr className="my-12" />
<hr className="my-12" />
</div>
<div className="content-backdrop fade"></div>
</div>
);
};
export default DemoTable;

7
src/components/Employee/EmployeeList.jsx
View File

@ -1,7 +0,0 @@
import React from "react";
const EmployeeList = () => {
return <div>EmployeeList</div>;
};
export default EmployeeList;

124
src/components/Employee/EmployeeSchema.jsx Normal file
View File

@ -0,0 +1,124 @@
import { z } from "zod"
const mobileNumberRegex = /^[0-9]\d{9}$/;
export const employeeSchema =
z.object({
firstName: z.string().min(1, { message: "First Name is required" }),
middleName: z.string().optional(),
lastName: z.string().min(1, { message: "Last Name is required" }),
email: z
.string()
.max(80, "Email cannot exceed 80 characters")
.optional()
.refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
message: "Invalid email format",
})
.refine(
(val) => {
if (!val) return true;
const [local, domain] = val.split("@");
return (
val.length <= 320 && local?.length <= 64 && domain?.length <= 255
);
},
{
message: "Email local or domain part is too long",
}
),
currentAddress: z
.string()
.min(1, { message: "Current Address is required" })
.max(500, { message: "Address cannot exceed 500 characters" }),
birthDate: z
.string()
.min(1, { message: "Birth Date is required" })
.refine(
(date, ctx) => {
return new Date(date) <= new Date();
},
{
message: "Birth date cannot be in the future",
}
),
joiningDate: z
.string()
.min(1, { message: "Joining Date is required" })
.refine(
(date, ctx) => {
return new Date(date) <= new Date();
},
{
message: "Joining date cannot be in the future",
}
),
emergencyPhoneNumber: z
.string()
.min(1, { message: "Phone Number is required" })
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
emergencyContactPerson: z
.string()
.min(1, { message: "Emergency Contact Person is required" })
.regex(/^[A-Za-z\s]+$/, {
message: "Emergency Contact Person must contain only letters",
}),
aadharNumber: z
.string()
.optional()
.refine((val) => !val || /^\d{12}$/.test(val), {
message: "Aadhar card must be exactly 12 digits long",
}),
gender: z
.string()
.min(1, { message: "Gender is required" })
.refine((val) => val !== "Select Gender", {
message: "Please select a gender",
}),
panNumber: z
.string()
.optional()
.refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
message: "Invalid PAN number",
}),
permanentAddress: z
.string()
.min(1, { message: "Permanent Address is required" })
.max(500, { message: "Address cannot exceed 500 characters" }),
phoneNumber: z
.string()
.min(1, { message: "Phone Number is required" })
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
jobRoleId: z.string().min(1, { message: "Role is required" }),
organizationId:z.string().min(1,{message:"Organization is required"}),
hasApplicationAccess:z.boolean().default(false),
}).refine((data) => {
if (data.hasApplicationAccess) {
return data.email && data.email.trim() !== "";
}
return true;
}, {
message: "Email is required when employee has access",
path: ["email"],
});
export const defatEmployeeObj = {
firstName: "",
middleName: "",
lastName: "",
email: "",
currentAddress: "",
birthDate: "",
joiningDate: "",
emergencyPhoneNumber: "",
emergencyContactPerson: "",
aadharNumber: "",
gender: "",
panNumber: "",
permanentAddress: "",
phoneNumber: "",
jobRoleId: null,
organizationId:"",
hasApplicationAccess:false
}

335
src/components/Employee/ManageEmployee.jsx
View File

@ -1,36 +1,37 @@
import React, { useEffect, useState } from "react";
import showToast from "../../services/toastService";
import EmployeeRepository from "../../repositories/EmployeeRepository";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import useMaster from "../../hooks/masterHook/useMaster";
import { useDispatch } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice";
import { Link, useNavigate, useParams } from "react-router-dom";
import { formatDate } from "../../utils/dateUtils";
import { useEmployeeProfile, useUpdateEmployee } from "../../hooks/useEmployees";
import {
cacheData,
clearCacheKey,
getCachedData,
} from "../../slices/apiDataManager";
import { clearApiCacheKey } from "../../slices/apiCacheSlice";
import { useMutation } from "@tanstack/react-query";
useEmployeeProfile,
useUpdateEmployee,
} from "../../hooks/useEmployees";
import Label from "../common/Label";
import DatePicker from "../common/DatePicker";
const mobileNumberRegex = /^[0-9]\d{9}$/;
import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
import { useOrganizationsList } from "../../hooks/useOrganization";
import { ITEMS_PER_PAGE } from "../../utils/constants";
const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
const dispatch = useDispatch();
const { mutate: updateEmployee, isPending } = useUpdateEmployee();
const {
data: organzationList,
isLoading,
isError,
error: EempError,
} = useOrganizationsList(ITEMS_PER_PAGE, 1, true);
const {
employee,
error,
loading: empLoading,
refetch
refetch,
} = useEmployeeProfile(employeeId);
useEffect(() => {
@ -38,6 +39,7 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
}, [employeeId]);
const [disabledEmail, setDisabledEmail] = useState(false);
const { data: job_role, loading } = useMaster();
const [isloading, setLoading] = useState(false);
const navigation = useNavigate();
@ -45,98 +47,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
const [currentAddressLength, setCurrentAddressLength] = useState(0);
const [permanentAddressLength, setPermanentAddressLength] = useState(0);
const userSchema = z.object({
...(employeeId ? { id: z.string().optional() } : {}),
firstName: z.string().min(1, { message: "First Name is required" }),
middleName: z.string().optional(),
lastName: z.string().min(1, { message: "Last Name is required" }),
email: z
.string()
.max(80, "Email cannot exceed 80 characters")
.optional()
.refine((val) => !val || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val), {
message: "Invalid email format",
})
.refine(
(val) => {
if (!val) return true;
const [local, domain] = val.split("@");
return (
val.length <= 320 && local?.length <= 64 && domain?.length <= 255
);
},
{
message: "Email local or domain part is too long",
}
),
currentAddress: z
.string()
.min(1, { message: "Current Address is required" })
.max(500, { message: "Address cannot exceed 500 characters" }),
birthDate: z
.string()
.min(1, { message: "Birth Date is required" })
.refine(
(date, ctx) => {
return new Date(date) <= new Date();
},
{
message: "Birth date cannot be in the future",
}
),
joiningDate: z
.string()
.min(1, { message: "Joining Date is required" })
.refine(
(date, ctx) => {
return new Date(date) <= new Date();
},
{
message: "Joining date cannot be in the future",
}
),
emergencyPhoneNumber: z
.string()
.min(1, { message: "Phone Number is required" })
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
emergencyContactPerson: z
.string()
.min(1, { message: "Emergency Contact Person is required" })
.regex(/^[A-Za-z\s]+$/, {
message: "Emergency Contact Person must contain only letters",
}),
aadharNumber: z
.string()
.optional()
.refine((val) => !val || /^\d{12}$/.test(val), {
message: "Aadhar card must be exactly 12 digits long",
}),
gender: z
.string()
.min(1, { message: "Gender is required" })
.refine((val) => val !== "Select Gender", {
message: "Please select a gender",
}),
panNumber: z
.string()
.optional()
.refine((val) => !val || /^[A-Z]{5}[0-9]{4}[A-Z]{1}$/.test(val), {
message: "Invalid PAN number",
}),
permanentAddress: z
.string()
.min(1, { message: "Permanent Address is required" })
.max(500, { message: "Address cannot exceed 500 characters" }),
phoneNumber: z
.string()
.min(1, { message: "Phone Number is required" })
.regex(mobileNumberRegex, { message: "Invalid phone number " }),
jobRoleId: z.string().min(1, { message: "Role is required" }),
});
useEffect(() => {
refetch()
}, [])
refetch();
}, []);
const {
register,
@ -147,25 +60,8 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
reset,
getValues,
} = useForm({
resolver: zodResolver(userSchema),
defaultValues: {
id: currentEmployee?.id || null,
firstName: currentEmployee?.firstName || "",
middleName: currentEmployee?.middleName || "",
lastName: currentEmployee?.lastName || "",
email: currentEmployee?.email || "",
currentAddress: currentEmployee?.currentAddress || "",
birthDate: formatDate(currentEmployee?.birthDate) || "",
joiningDate: formatDate(currentEmployee?.joiningDate) || "",
emergencyPhoneNumber: currentEmployee?.emergencyPhoneNumber || "",
emergencyContactPerson: currentEmployee?.emergencyContactPerson || "",
aadharNumber: currentEmployee?.aadharNumber || "",
gender: currentEmployee?.gender || "",
panNumber: currentEmployee?.panNumber || "",
permanentAddress: currentEmployee?.permanentAddress || "",
phoneNumber: currentEmployee?.phoneNumber || "",
jobRoleId: currentEmployee?.jobRoleId.toString() || null,
},
resolver: zodResolver(employeeSchema),
defaultValues: defatEmployeeObj,
mode: "onChange",
});
@ -176,7 +72,13 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
data.email = null;
}
updateEmployee({ ...data, IsAllEmployee }, {
const payload = { ...data, IsAllEmployee };
if (employeeId) {
payload.id = employeeId;
}
updateEmployee(payload, {
onSuccess: () => {
reset();
onClosed();
@ -184,7 +86,6 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
});
};
useEffect(() => {
if (!loading && !error && employee) {
setCurrentEmployee(employee);
@ -195,37 +96,47 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
reset(
currentEmployee
? {
id: currentEmployee.id || null,
firstName: currentEmployee.firstName || "",
middleName: currentEmployee.middleName || "",
lastName: currentEmployee.lastName || "",
email: currentEmployee.email || "",
currentAddress: currentEmployee.currentAddress || "",
birthDate: formatDate(currentEmployee.birthDate) || "",
joiningDate: formatDate(currentEmployee.joiningDate) || "",
emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
emergencyContactPerson:
currentEmployee.emergencyContactPerson || "",
aadharNumber: currentEmployee.aadharNumber || "",
gender: currentEmployee.gender || "",
panNumber: currentEmployee.panNumber || "",
permanentAddress: currentEmployee.permanentAddress || "",
phoneNumber: currentEmployee.phoneNumber || "",
jobRoleId: currentEmployee.jobRoleId?.toString() || "",
}
id: currentEmployee.id || null,
firstName: currentEmployee.firstName || "",
middleName: currentEmployee.middleName || "",
lastName: currentEmployee.lastName || "",
email: currentEmployee.email || "",
currentAddress: currentEmployee.currentAddress || "",
birthDate: formatDate(currentEmployee.birthDate) || "",
joiningDate: formatDate(currentEmployee.joiningDate) || "",
emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
emergencyContactPerson:
currentEmployee.emergencyContactPerson || "",
aadharNumber: currentEmployee.aadharNumber || "",
gender: currentEmployee.gender || "",
panNumber: currentEmployee.panNumber || "",
permanentAddress: currentEmployee.permanentAddress || "",
phoneNumber: currentEmployee.phoneNumber || "",
jobRoleId: currentEmployee.jobRoleId?.toString() || "",
organizationId: currentEmployee.organizationId || "",
hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
}
: {}
);
setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
setPermanentAddressLength(currentEmployee?.permanentAddress?.length || 0);
}, [currentEmployee, reset]);
const hasAccessAplication = watch("hasApplicationAccess");
return (
<>
<form onSubmit={handleSubmit(onSubmit)} className="p-sm-0 p-2">
<div className="text-center"><p className="fs-5 fw-semibold"> {employee ? "Update Employee" : "Create Employee"}</p> </div>
<div className="text-center">
<p className="fs-5 fw-semibold">
{" "}
{employee ? "Update Employee" : "Create Employee"}
</p>{" "}
</div>
<div className="row mb-3">
<div className="col-sm-4">
<Label className="form-text text-start" required>First Name</Label>
<Label className="form-text text-start" required>
First Name
</Label>
<input
type="text"
name="firstName"
@ -244,7 +155,10 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
}}
/>
{errors.firstName && (
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.firstName.message}
</div>
)}
@ -267,14 +181,18 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
}}
/>
{errors.middleName && (
<div className="danger-text text-start " style={{ fontSize: "12px" }}>
<div
className="danger-text text-start "
style={{ fontSize: "12px" }}
>
{errors.middleName.message}
</div>
)}
</div>
<div className="col-sm-4">
<Label className="form-text text-start" required>Last Name</Label>
<Label className="form-text text-start" required>
Last Name
</Label>
<input
type="text"
{...register("lastName", {
@ -291,16 +209,24 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
}}
/>
{errors.lastName && (
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.lastName.message}
</div>
)}
</div>
</div>
<div className="row mb-3">
<div className="col-sm-6">
<div className="form-text text-start">Email</div>
<Label
htmlFor="email"
className="text-start form-text"
required={hasAccessAplication}
>
Email
</Label>
<input
type="email"
id="email"
@ -321,7 +247,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
)}
</div>
<div className="col-sm-6">
<Label className="form-text text-start" required>Phone Number</Label>
<Label className="form-text text-start" required>
Phone Number
</Label>
<input
type="text"
keyboardType="numeric"
@ -345,7 +273,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
<div className="row mb-3"></div>
<div className="row mb-3">
<div className="col-sm-4">
<Label className="form-text text-start" required>Gender</Label>
<Label className="form-text text-start" required>
Gender
</Label>
<div className="input-group">
<select
@ -387,7 +317,10 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
</div>
{errors.birthDate && (
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.birthDate.message}
</div>
)}
@ -408,7 +341,10 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
</div>
{errors.joiningDate && (
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.joiningDate.message}
</div>
)}
@ -416,7 +352,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
</div>
<div className="row mb-3">
<div className="col-sm-6">
<Label className="form-text text-start" required>Current Address</Label>
<Label className="form-text text-start" required>
Current Address
</Label>
<textarea
id="currentAddress"
@ -428,15 +366,11 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
maxLength={500}
onChange={(e) => {
setCurrentAddressLength(e.target.value.length);
// let react-hook-form still handle it
register("currentAddress").onChange(e);
}}
></textarea>
<div className="text-end muted">
<small>
{" "}
{500 - currentAddressLength} characters left
</small>
<small> {500 - currentAddressLength} characters left</small>
</div>
{errors.currentAddress && (
<div
@ -466,9 +400,7 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
}}
></textarea>
<div className="text-end muted">
<small>
{500 - permanentAddressLength} characters left
</small>
<small>{500 - permanentAddressLength} characters left</small>
</div>
{errors.permanentAddress && (
<div
@ -480,6 +412,55 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
)}
</div>
</div>
{/* -------------- */}
<div className="row mb-3">
<div className="col-sm-6">
<Label className="form-text text-start" required>
Organization
</Label>
<div className="input-group">
<select
className="form-select form-select-sm"
{...register("organizationId")}
id="organizationId"
aria-label=""
>
<option disabled value="">
Select Role
</option>
{organzationList?.data
.sort((a, b) => a?.name?.localeCompare(b?.name))
.map((item) => (
<option value={item?.id} key={item?.id}>
{item?.name}
</option>
))}
</select>
</div>
{errors.organizationId && (
<div
className="danger-text text-start justify-content-center"
style={{ fontSize: "12px" }}
>
{errors.organizationId.message}
</div>
)}
</div>
<div className="col-sm-6 d-flex align-items-center mt-2">
<label className="form-check-label d-flex align-items-center">
<input
type="checkbox"
className="form-check-input me-2"
{...register("hasApplicationAccess")}
/>
Has Application Access ?
</label>
</div>
</div>
{/* --------------- */}
<div className="row mb-3">
{" "}
<div className="divider">
@ -488,7 +469,9 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
</div>
<div className="row mb-3">
<div className="col-sm-4">
<Label className="form-text text-start" required>Official Designation</Label>
<Label className="form-text text-start" required>
Official Designation
</Label>
<div className="input-group">
<select
className="form-select form-select-sm"
@ -601,15 +584,6 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
)}
</div>
</div>
{employeeId && (
<div className="row mb-3 d-none">
<div className="col-sm-12">
<input type="text" name="id" {...register("id")} />
</div>
</div>
)}
<div className="row text-end">
<div className="col-sm-12">
<button
@ -626,18 +600,11 @@ const ManageEmployee = ({ employeeId, onClosed, IsAllEmployee }) => {
className="btn btn-sm btn-primary"
disabled={isPending}
>
{isPending
? "Please Wait..."
: employeeId
? "Update"
: "Create"}
{isPending ? "Please Wait..." : employeeId ? "Update" : "Create"}
</button>
</div>
</div>
</form>
</>
);
};

30
src/components/Organization/AssignOrg.jsx
View File

@ -93,8 +93,15 @@ const AssignOrg = ({ setStep }) => {
<div className="row text-black text-start mb-3">
{/* Organization Info Display */}
<div className="col-12 mb-3">
<div className="d-flex justify-content-between align-items-center text-start mb-2">
<div className="fw-semibold text-wrap">{orgData.name}</div>
<div className="d-flex justify-content-between align-items-center text-start mb-1">
<div className="d-flex flex-row gap-2 align-items-center text-wrap">
<img
src="/public/assets/img/orgLogo.png"
alt="logo"
width={40}
height={40}
/> <p className="fw-semibold fs-6 m-0">{orgData.name}</p>
</div>
<div className="text-end">
<button
type="button"
@ -106,7 +113,7 @@ const AssignOrg = ({ setStep }) => {
</div>
</div>
</div>
<div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
{/* Contact Info */}
<div className="col-md-6 mb-3">
<div className="d-flex">
@ -114,7 +121,7 @@ const AssignOrg = ({ setStep }) => {
className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
Contact Person :
<i className="bx bx-sm bx-user me-1" /> Contact Person :
</label>
<div className="text-muted">{orgData.contactPerson}</div>
</div>
@ -125,7 +132,7 @@ const AssignOrg = ({ setStep }) => {
className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
Contact Number :
<i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
</label>
<div className="text-muted">{orgData.contactNumber}</div>
</div>
@ -136,7 +143,7 @@ const AssignOrg = ({ setStep }) => {
className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
Email Address :
<i className='bx bx-sm me-1 bx-envelope'></i> Email Address :
</label>
<div className="text-muted">{orgData.email}</div>
</div>
@ -147,7 +154,8 @@ const AssignOrg = ({ setStep }) => {
className="form-label me-2 mb-0 fw-semibold"
style={{ maxWidth: "130px" }}
>
Service provider Id (SPRID) :
<i className="bx bx-sm me-1 bx-barcode"></i>
Service Provider Id (SPRID) :
</label>
<div className="text-muted">{orgData.sprid}</div>
</div>
@ -158,7 +166,7 @@ const AssignOrg = ({ setStep }) => {
className="form-label me-1 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
Address :
<i className='bx bx-sm me-1 bx-map'></i> Address :
</label>
<div className="text-muted text-start">{orgData.address}</div>
</div>
@ -233,11 +241,11 @@ const AssignOrg = ({ setStep }) => {
<div className="d-flex justify-content-between mt-5">
<button
type="button"
className="btn btn-xs btn-outline-secondary"
className="btn btn-sm btn-outline-secondary"
onClick={handleBack}
disabled={isPending}
>
<i className="bx bx-left-arrow-alt"></i> Back
<i className="bx bx-chevron-left"></i>Back
</button>
<button
type="submit"
@ -247,7 +255,7 @@ const AssignOrg = ({ setStep }) => {
{isPending
? "Please wait..."
: flowType === "default"
? "Assign Organization"
? "Assign to Organization"
: "Assign to Project"}
</button>
</div>

4
src/components/Organization/ManagOrg.jsx
View File

@ -2,6 +2,7 @@ import React, { useEffect } from "react";
import { FormProvider, useForm } from "react-hook-form";
import {
useCreateOrganization,
useOrganization,
useOrganizationModal,
useUpdateOrganization,
} from "../../hooks/useOrganization";
@ -18,6 +19,7 @@ const ManagOrg = () => {
const { data: service, isLoading } = useGlobalServices();
const { flowType, orgData, startStep, onOpen, onClose, prevStep } =
useOrganizationModal();
const {data:organization,isLoading:organizationLoading,isError,error} = useOrganization(orgData?.id);
const method = useForm({
resolver: zodResolver(organizationSchema),
@ -45,7 +47,7 @@ const ManagOrg = () => {
onOpen({ startStep: 1 });
onClose();
});
console.log(organization)
// Prefill form if editing
useEffect(() => {
if (orgData) {

2
src/components/Organization/OrgPickerFromSPId.jsx
View File

@ -78,7 +78,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
<div className="d-flex flex-row gap-2 text-start text-black ">
<div className="mt-1">
<img
src="/public/assets/img/SP-Placeholdeer.svg"
src="/public/assets/img/orgLogo.png"
alt="logo"
width={50}
height={50}

11
src/components/Organization/OrganizationModal.jsx
View File

@ -19,6 +19,7 @@ import AssignOrg from "./AssignOrg";
import ManagOrg from "./ManagOrg";
import OrgPickerFromSPId from "./OrgPickerFromSPId";
import OrgPickerfromTenant from "./OrgPickerfromTenant";
import ViewOrganization from "./ViewOrganization";
const OrganizationModal = () => {
const { isOpen, orgData, startStep, onOpen, onClose, onToggle } =
@ -53,7 +54,7 @@ const OrganizationModal = () => {
};
const RenderTitle = useMemo(() => {
if (orgData) {
if (orgData && startStep === 3 ) {
return "Assign Organization";
}
@ -70,8 +71,11 @@ const OrganizationModal = () => {
if (startStep === 3) {
return "Assign Organization";
}
if(startStep === 5){
return "Organization Details"
}
return "Manage Organization";
return `${orgData ? "Update":"Create"} Organization`;
}, [startStep, orgData]);
const contentBody = (
@ -94,6 +98,9 @@ const OrganizationModal = () => {
{/* ---------- STEP 3: Add New Organization ---------- */}
{startStep === 4 && <ManagOrg />}
{/* ---------- STEP 3: View Organization ---------- */}
{startStep === 5 && <ViewOrganization orgId={orgData}/>}
</div>
);

79
src/components/Organization/OrganizationSkeleton.jsx
View File

@ -42,3 +42,82 @@ export const OrgCardSkeleton = () => {
</div>
);
};
export const OrgDetailsSkeleton = () => {
return (
<div className="row text-start p-3">
{/* Header */}
<div className="col-12 mb-3">
<div className="d-flex justify-content-between align-items-center">
{/* Logo + Name */}
<div className="d-flex flex-row gap-2 align-items-center">
<SkeletonLine height={40} width={40} className="rounded-circle" />
<SkeletonLine height={18} width="180px" />
</div>
{/* Status Badge */}
<SkeletonLine height={20} width="70px" className="rounded-pill" />
</div>
</div>
{/* Section Title */}
<div className="d-flex text-secondary mb-2">
<SkeletonLine height={16} width="140px" />
</div>
{/* Contact Person */}
<div className="col-md-6 mb-3">
<div className="d-flex">
<SkeletonLine height={16} width="130px" className="me-2" />
<SkeletonLine height={16} width="140px" />
</div>
</div>
{/* Contact Number */}
<div className="col-md-6 mb-3">
<div className="d-flex">
<SkeletonLine height={16} width="130px" className="me-2" />
<SkeletonLine height={16} width="140px" />
</div>
</div>
{/* Email */}
<div className="col-md-12 mb-3">
<div className="d-flex">
<SkeletonLine height={16} width="130px" className="me-2" />
<SkeletonLine height={16} width="220px" />
</div>
</div>
{/* SPRID */}
<div className="col-6 mb-3">
<div className="d-flex">
<SkeletonLine height={16} width="130px" className="me-2" />
<SkeletonLine height={16} width="160px" />
</div>
</div>
{/* Employees */}
<div className="col-6 mb-3">
<div className="d-flex">
<SkeletonLine height={16} width="130px" className="me-2" />
<SkeletonLine height={16} width="60px" />
</div>
</div>
{/* Address */}
<div className="col-12 mb-3">
<div className="d-flex">
<SkeletonLine height={16} width="130px" className="me-2" />
<SkeletonLine height={16} width="100%" />
</div>
</div>
{/* Section Title 2 */}
<div className="d-flex text-secondary mb-2">
<SkeletonLine height={16} width="200px" />
</div>
</div>
);
};

2
src/components/Organization/OrganizationsList.jsx
View File

@ -129,7 +129,7 @@ const OrganizationsList = ({searchText}) => {
))}
<td className="sticky-action-column ">
<div className="d-flex justify-content-center gap-2">
<i className="bx bx-show text-primary cursor-pointer" ></i>
<i className="bx bx-show text-primary cursor-pointer" onClick={()=>onOpen({startStep:5,orgData:org.id,flowType:"view"})}></i>
<i className="bx bx-edit text-secondary cursor-pointer" onClick={()=>onOpen({startStep:4,orgData:org,flowType:"edit"})}></i>
<i className="bx bx-trash text-danger cursor-pointer"></i>
</div>

103
src/components/Organization/ViewOrganization.jsx Normal file
View File

@ -0,0 +1,103 @@
import React from "react";
import { useOrganization } from "../../hooks/useOrganization";
import { OrgDetailsSkeleton } from "./OrganizationSkeleton";
const VieworgDataanization = ({ orgId }) => {
const { data, isLoading, isError, error } = useOrganization(orgId);
if (isLoading) return <OrgDetailsSkeleton/>;
if (isError) return <div>{error.message}</div>;
return (
<div className="row text-black text-black text-start ">
{/* Header */}
<div className="col-12 mb-3">
<div className="d-flex justify-content-between align-items-center text-start mb-1">
<div className="d-flex flex-row gap-2 align-items-center text-wrap">
<img
src="/public/assets/img/orgLogo.png"
alt="logo"
width={40}
height={40}
/> <p className="fw-semibold fs-6 m-0">{data?.data?.name}</p>
</div>
<div className="text-end">
<span className={`badge bg-label-${data?.data.isActive ? "primary":"secondary"} `}>{data?.data.isActive ? "Active":"In-Active"} </span>
</div>
</div>
</div>
<div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
{/* Contact Info */}
<div className="col-md-6 mb-3">
<div className="d-flex">
<label
className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
<i className="bx bx-sm bx-user me-1" /> Contact Person :
</label>
<div className="text-muted">{data?.data?.contactPerson}</div>
</div>
</div>
<div className="col-md-6 mb-3">
<div className="d-flex">
<label
className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
<i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
</label>
<div className="text-muted">{data?.data?.contactNumber}</div>
</div>
</div>
<div className="col-md-12 mb-3">
<div className="d-flex">
<label
className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
<i className='bx bx-sm me-1 bx-envelope'></i> Email Address :
</label>
<div className="text-muted">{data?.data?.email}</div>
</div>
</div>
<div className="col-6 mb-3">
<div className="d-flex">
<label
className="form-label me-2 mb-0 fw-semibold"
style={{ maxWidth: "130px" }}
>
<i className="bx bx-sm me-1 bx-barcode"></i>
Service Provider Id (SPRID) :
</label>
<div className="text-muted">{data?.data?.sprid}</div>
</div>
</div>
<div className="col-6 mb-3">
<div className="d-flex">
<label
className="form-label me-2 mb-0 fw-semibold"
style={{ maxWidth: "130px" }}
>
<i className="bx bx-sm me-1 bx-group"></i>
Employees :
</label>
<div className="text-muted">{data?.data?.activeEmployeeCount}</div>
</div>
</div>
<div className="col-12 mb-3">
<div className="d-flex">
<label
className="form-label me-1 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
<i className='bx bx-sm me-1 bx-map'></i> Address :
</label>
<div className="text-muted text-start">{data?.data?.address}</div>
</div>
</div>
<div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-briefcase me-1" /> Projects And Services</div>
</div>
)
};
export default VieworgDataanization;

67
src/components/common/DatePicker.jsx
View File

@ -1,14 +1,13 @@
import { useEffect, useRef } from "react";
import { useController } from "react-hook-form";
const DatePicker = ({
name,
control,
placeholder = "DD-MM-YYYY",
className = "",
allowText = false,
maxDate, // removed default new Date()
maxDate,
minDate,
...rest
}) => {
@ -22,43 +21,43 @@ const DatePicker = ({
});
useEffect(() => {
if (inputRef.current) {
flatpickr(inputRef.current, {
dateFormat: "d-m-Y",
allowInput: allowText,
defaultDate: value
? flatpickr.parseDate(value, "Y-m-d")
: null,
maxDate: maxDate ?? undefined, // only applied if passed
minDate: minDate ? new Date(minDate.split("T")[0]) : undefined,
onChange: function (selectedDates) {
if (selectedDates.length > 0) {
// store in YYYY-MM-DD
const formatted = flatpickr.formatDate(selectedDates[0], "Y-m-d");
onChange(formatted);
} else {
onChange("");
}
},
...rest
});
}
if (!inputRef.current) return;
const fp = flatpickr(inputRef.current, {
dateFormat: "d-m-Y",
allowInput: allowText,
defaultDate: value ? new Date(value) : null, // safely convert to Date
maxDate: maxDate ? new Date(maxDate) : undefined,
minDate: minDate ? new Date(minDate) : undefined,
onChange: (selectedDates) => {
if (selectedDates.length > 0) {
onChange(flatpickr.formatDate(selectedDates[0], "Y-m-d"));
} else {
onChange("");
}
},
...rest
});
return () => {
fp.destroy(); // clean up on unmount
};
}, [inputRef, value, allowText, maxDate, minDate, rest, onChange]);
const displayValue = value ? flatpickr.formatDate(new Date(value), "d-m-Y") : "";
return (
<div className={` position-relative ${className}`}>
<div className={`position-relative ${className}`}>
<input
type="text"
className="form-control form-control-sm "
className="form-control form-control-sm"
placeholder={placeholder}
defaultValue={
value
? flatpickr.formatDate(
flatpickr.parseDate(value, "Y-m-d"),
"d-m-Y"
)
: ""
}
value={displayValue}
onChange={(e) => {
if (allowText) {
onChange(e.target.value); // allow manual typing if enabled
}
}}
ref={(el) => {
inputRef.current = el;
ref(el);
@ -70,7 +69,7 @@ const DatePicker = ({
<span
className="position-absolute top-50 end-0 pe-1 translate-middle-y cursor-pointer"
onClick={() => {
if (inputRef.current && inputRef.current._flatpickr) {
if (inputRef.current?._flatpickr) {
inputRef.current._flatpickr.open();
}
}}

2
src/hooks/useEmployees.js
View File

@ -221,7 +221,7 @@ export const useUpdateEmployee = () => {
mutationFn: (employeeData) =>
EmployeeRepository.manageEmployee(employeeData),
onSuccess: (_, variables) => {
const id = variables.id || variables.employeeId;
const id = variables?.id || variables?.employeeId;
const isAllEmployee = variables.IsAllEmployee;
// Cache invalidation

15
src/hooks/useOrganization.js
View File

@ -37,6 +37,13 @@ export const useOrganizationModal = () => {
// ================================Query=============================================================
export const useOrganization=(id)=>{
return useQuery({
queryKey:["organization",id],
queryFn:async()=> await OrganizationRepository.getOrganizaion(id),
enabled:!!id
})
}
export const useOrganizationBySPRID = (sprid) => {
return useQuery({
queryKey: ["organization by", sprid],
@ -167,11 +174,11 @@ export const useAssignOrgToTenant = (onSuccessCallback) => {
export const useUpdateOrganization = () => {
const useClient = useQueryClient();
return useMutation({
mutationFn: async (payload) =>
await OrganizationRepository.assignOrganizationToProject(payload),
mutationFn: async ({orgId,payload}) =>
await OrganizationRepository.updateOrganizaion(orgId,payload),
onSuccess: (_, variables) => {
// useClient.invalidateQueries({ queryKey: ["organizationList"] });
showToast("Organization successfully", "success");
useClient.invalidateQueries({ queryKey: ["organizationList"] });
showToast("Organization Updated successfully", "success");
if (onSuccessCallback) onSuccessCallback();
},
onError: (error) => {

1
src/pages/employee/EmployeeList.jsx
View File

@ -751,7 +751,6 @@ const EmployeeList = () => {
</div>
</div>
) : (
// </div>
<div className="card">
<div className="text-center">
<i className="fa-solid fa-triangle-exclamation fs-5"></i>

2
src/repositories/OrganizationRespository.jsx
View File

@ -2,6 +2,8 @@ import { api } from "../utils/axiosClient";
const OrganizationRepository = {
createOrganization: (data) => api.post("/api/Organization/create", data),
updateOrganizaion:(id,data)=>api.put(`/api/Organization/edit/${id}`),
getOrganizaion:(id)=>api.get(`/api/Organization/details/${id}`),
getOrganizationList: (pageSize, pageNumber, active, sprid, searchString) => {
return api.get(
`/api/Organization/list?pageSize=${pageSize}&pageNumber=${pageNumber}&active=${active}&${