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

Removing dropdown logic all the places wehre dropdown is added.

Browse Source
This commit is contained in:
Kartik Sharma 2025-12-12 19:07:55 +05:30
parent deba5dfa01
commit 3a8c1745f4
7 changed files with 298 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

198
src/components/Project/AssignTask.jsx
View File

@ -237,112 +237,110 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
))} ))}
</span> </span>
</p> </p>
<div <div
className="col-12 col-md-4 d-flex flex-row gap-3 align-items-center justify-content-end" className="col-12 col-md-4 d-flex flex-row gap-3 align-items-center mt-4 mb-6 justify-content-end"
ref={dropdownRef} ref={dropdownRef}
> >
<div className="d-flex justify-content-between align-items-center w-100">
{/* Left Side → Heading + Search */}
<div className="d-flex flex-column w-100">
<label className=" text-start small mb-1">Search Employee</label>
<div className="d-flex justify-content-between align-items-center w-100"> <input
{/* Search Box */} type="text"
<div> className="form-control form-control-sm"
placeholder="Search employees or roles..."
value={searchTerm}
onChange={handleSearchChange}
/>
</div>
{/* Right Side → Dropdown */}
<div className="dropdown position-relative d-inline-block ms-2 mt-4">
<a
className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") || selectedRoles.length === 0
? "text-secondary"
: "text-primary"
}`}
onClick={() => setOpen(!open)}
>
<i className="bx bx-slider-alt ms-2"></i>
</a>
{/* Badge */}
{selectedRolesCount > 0 && (
<span
className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white text-tiny"
style={{
fontSize: "0.65rem",
minWidth: "18px",
height: "18px",
padding: "0",
lineHeight: "18px",
textAlign: "center",
zIndex: 10,
}}
>
{selectedRolesCount}
</span>
)}
{/* 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 <input
type="text" className="form-check-input"
className="form-control form-control-sm ms-auto mb-2 mt-2" type="checkbox"
placeholder="Search employees or roles..." id="checkboxAllRoles"
value={searchTerm} value="all"
onChange={handleSearchChange} checked={selectedRoles.includes("all")}
onChange={(e) => handleRoleChange(e, e.target.value)}
/> />
</div> <label
{/* Dropdown */} className="form-check-label ms-2"
<div className="dropdown position-relative d-inline-block"> htmlFor="checkboxAllRoles"
<a
className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") ||
selectedRoles.length === 0
? "text-secondary"
: "text-primary"
}`}
onClick={() => setOpen(!open)}
> >
<i className="bx bx-slider-alt ms-2"></i> All Roles
</a> </label>
{/* Badge */}
{selectedRolesCount > 0 && (
<span
className="position-absolute top-0 start-100 translate-middle badge rounded-circle bg-warning text-white text-tiny"
style={{
fontSize: "0.65rem",
minWidth: "18px",
height: "18px",
padding: "0",
lineHeight: "18px",
textAlign: "center",
zIndex: 10,
}}
>
{selectedRolesCount}
</span>
)}
{/* 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="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}>
<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> </div>
</div> </li>
</div>
{/* 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>
</div>
</div>
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="form-label text-start"> <div className="form-label text-start">
<div className="row mb-1"> <div className="row mb-1">

4
src/components/Project/ProjectInfra.jsx
View File

@ -139,9 +139,9 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
render={({ field }) => ( render={({ field }) => (
<SelectField <SelectField
label="Select Service" label="Select Service"
options={[{ id: "", name: "All Projects" }, ...(assignedServices ?? [])]} options={[{ id: "", name: "All Services" }, ...(assignedServices ?? [])]}
placeholder="Choose a Service" placeholder="Choose a Service"
required
labelKey="name" labelKey="name"
valueKey="id" valueKey="id"
value={field.value} value={field.value}

66
src/components/Project/Team/TeamAssignToProject.jsx
View File

@ -23,31 +23,49 @@ const TeamAssignToProject = ({ closeModal }) => {
<h5 className="mb-4">Assign Employee To Project</h5> <h5 className="mb-4">Assign Employee To Project</h5>
<div className="row align-items-center gx-5 text-start"> <div className="row align-items-center gx-5 text-start">
<div className="col-12 col-md-6 mb-2"> <div className="col-12 col-md-6 mb-2 mt-5">
<AppFormController
name="organizationId" {!isLoading && data && (
control={control} <>
rules={{ required: "Organization is required" }} {data.length === 1 && (
render={({ field }) => ( <h5 className="mb-2">{data[0].name}</h5>
<SelectField
label="Select Organization"
options={data ?? []}
placeholder="Choose an Organization"
required
labelKey="name"
valueKey="id"
value={field.value}
onChange={field.onChange}
isLoading={isLoading}
className="m-0 w-100"
/>
)} )}
/>
{errors.organizationId && ( {/* If multiple organizations → show dropdown */}
<small className="danger-text">{errors.organizationId.message}</small> {data.length > 1 && (
)} <div className="col-12 col-md-6 mb-2 text-start">
</div> <AppFormController
<div className="col-12 col-md-6 mt-n5"> name="organizationId"
control={control}
rules={{ required: "Organization is required" }}
render={({ field }) => (
<SelectField
label="Select Organization"
options={[...data]}
placeholder="Choose an Organization"
required
labelKey="name"
valueKey="id"
value={field.value}
onChange={field.onChange}
isLoading={isLoading}
className="m-0 w-100"
/>
)}
/>
{errors.organizationId && (
<small className="danger-text">
{errors.organizationId.message}
</small>
)}
</div>
)}
</>
)}
{/* </div> */}
</div>
<div className="col-12 col-md-6 mt-n2">
<div className="d-flex flex-column"> <div className="d-flex flex-column">
<label htmlFor="search" className="form-label mb-1"> <label htmlFor="search" className="form-label mb-1">
Search Employee Search Employee

20
src/components/Project/Team/TeamEmployeeList.jsx
View File

@ -162,15 +162,23 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
<table className="table" style={{ maxHeight: "80px", overflowY: "auto" }}> <table className="table" style={{ maxHeight: "80px", overflowY: "auto" }}>
<thead className=" position-sticky top-0"> <thead className=" position-sticky top-0">
<tr> <tr>
<th>Select</th>
<th>Employee</th> <th>Employee</th>
<th>Service</th> <th>Service</th>
<th>Job Role</th> <th>Job Role</th>
<th>Select</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{employees.map((emp, index) => ( {employees.map((emp, index) => (
<tr key={emp.id}> <tr key={emp.id}>
<td>
<input
type="checkbox"
className="form-check-input"
checked={emp.isChecked}
onChange={() => handleCheckboxChange(index)}
/>
</td>
<td> <td>
<div className="d-flex align-items-center"> <div className="d-flex align-items-center">
<Avatar firstName={emp.firstName} lastName={emp.lastName} /> <Avatar firstName={emp.firstName} lastName={emp.lastName} />
@ -179,6 +187,7 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
</span> </span>
</div> </div>
</td> </td>
<td> <td>
<select <select
value={emp.serviceId} value={emp.serviceId}
@ -221,14 +230,7 @@ const TeamEmployeeList = ({ organizationId, searchTerm, closeModal }) => {
<div className="danger-text">{emp.errors.jobRole}</div> <div className="danger-text">{emp.errors.jobRole}</div>
)} )}
</td> </td>
<td>
<input
type="checkbox"
className="form-check-input"
checked={emp.isChecked}
onChange={() => handleCheckboxChange(index)}
/>
</td>
</tr> </tr>
))} ))}
</tbody> </tbody>

120
src/pages/Activities/AttendancePage.jsx
View File

@ -122,17 +122,17 @@ const AttendancePage = () => {
// Conditionally include Regularization tab based on permission // Conditionally include Regularization tab based on permission
...(DoRegularized ...(DoRegularized
? [ ? [
{ {
id: "regularization", id: "regularization",
title: "Regularization", title: "Regularization",
content: ( content: (
<Regularization <Regularization
searchTerm={searchTerm} searchTerm={searchTerm}
organizationId={appliedFilters.selectedOrganization} organizationId={appliedFilters.selectedOrganization}
/> />
), ),
}, },
] ]
: []), : []),
]; ];
// --- END: Tab Configuration Array // --- END: Tab Configuration Array
@ -148,11 +148,11 @@ const AttendancePage = () => {
{(modelConfig?.action === 0 || {(modelConfig?.action === 0 ||
modelConfig?.action === 1 || modelConfig?.action === 1 ||
modelConfig?.action === 2) && ( modelConfig?.action === 2) && (
<CheckCheckOutmodel <CheckCheckOutmodel
modeldata={modelConfig} modeldata={modelConfig}
closeModal={closeModal} closeModal={closeModal}
/> />
)} )}
{/* For view logs */} {/* For view logs */}
{modelConfig?.action === 6 && ( {modelConfig?.action === 6 && (
<AttendLogs Id={modelConfig?.id} closeModal={closeModal} /> <AttendLogs Id={modelConfig?.id} closeModal={closeModal} />
@ -173,23 +173,19 @@ const AttendancePage = () => {
{/* Tabs header with search and filter */} {/* Tabs header with search and filter */}
<div className="nav-align-top nav-tabs-shadow bg-white border-bottom pt-5"> <div className="nav-align-top nav-tabs-shadow bg-white border-bottom pt-5">
<div className="row align-items-center g-0 mb-3 mb-md-0 mx-1 mx-sm-5"> <div className="row align-items-center g-0 mb-3 mb-md-0 mx-1 mx-sm-5">
{/* Tabs Buttons */}
<div className="col-12 col-md mt-1"> {/* Tabs Buttons - Now col-12 col-md-6 */}
<div className="col-12 col-md-6 mt-1">
<ul className="nav nav-tabs" role="tablist"> <ul className="nav nav-tabs" role="tablist">
{tabsData.map((tab) => ( {tabsData.map((tab) => (
<li <li
className={`nav-item ${ className={`nav-item ${tab.id === "regularization" && !DoRegularized ? "d-none" : ""
tab.id === "regularization" && !DoRegularized }`}
? "d-none"
: ""
}`} // Keep the d-none logic for regularization, although it's filtered above
key={tab.id} key={tab.id}
> >
<button <button
type="button" type="button"
className={`nav-link ${ className={`nav-link ${activeTab === tab.id ? "active" : ""} fs-6`}
activeTab === tab.id ? "active" : ""
} fs-6`}
onClick={() => handleTabChange(tab.id)} onClick={() => handleTabChange(tab.id)}
data-bs-toggle="tab" data-bs-toggle="tab"
data-bs-target={`#navs-top-${tab.id}`} data-bs-target={`#navs-top-${tab.id}`}
@ -201,29 +197,51 @@ const AttendancePage = () => {
</ul> </ul>
</div> </div>
{/* Search + Organization filter */} {/* Search + Organization Filter - Now col-12 col-md-6 */}
<div className="col-12 col-md-auto mb-2 mt-md-0 ms-md-auto nav"> <div className="col-12 col-md-6 mb-2 mt-md-0">
<div className="row g-2"> <div className="row g-0">
{/* Organization */}
<div className="col-12 col-sm-6"> <div className="col-12 col-sm-6">
<select
className="form-select form-select-sm" {/* If only 1 organization → show name only */}
value={appliedFilters.selectedOrganization} {!orgLoading && organizations?.length === 1 && (
onChange={(e) => <h5 className="m-0 ">{organizations[0].name}</h5>
setAppliedFilters((prev) => ({ )}
...prev,
selectedOrganization: e.target.value, {/* If multiple organizations → show dropdown */}
})) {!orgLoading && organizations?.length > 1 && (
} <select
disabled={orgLoading} className="form-select form-select-sm"
> value={appliedFilters.selectedOrganization}
<option value="">All Organizations</option> onChange={(e) =>
{organizations?.map((org, ind) => ( setAppliedFilters((prev) => ({
<option key={`${org.id}-${ind}`} value={org.id}> ...prev,
{org.name} selectedOrganization: e.target.value,
</option> }))
))} }
</select> disabled={orgLoading}
>
<option value="">All Organizations</option>
{organizations?.map((org, ind) => (
<option key={`${org.id}-${ind}`} value={org.id}>
{org.name}
</option>
))}
</select>
)}
{/* Loading case (optional) */}
{orgLoading && (
<div className="form-control form-control-sm disabled">
Loading...
</div>
)}
</div> </div>
{/* Search */}
<div className="col-12 col-sm-6"> <div className="col-12 col-sm-6">
<input <input
type="text" type="text"
@ -233,11 +251,14 @@ const AttendancePage = () => {
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
/> />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{/* Tab Content */} {/* Tab Content */}
<div className="tab-content attedanceTabs py-0 px-1 px-sm-3 pb-10"> <div className="tab-content attedanceTabs py-0 px-1 px-sm-3 pb-10">
{selectedProject ? ( {selectedProject ? (
@ -245,9 +266,8 @@ const AttendancePage = () => {
{tabsData.map((tab) => ( {tabsData.map((tab) => (
<div <div
key={tab.id} key={tab.id}
className={`tab-pane fade ${ className={`tab-pane fade ${activeTab === tab.id ? "show active" : ""
activeTab === tab.id ? "show active" : "" } py-0 ${tab.id === "all" ? "mx-2" : "p-3"}`}
} py-0 ${tab.id === "all" ? "mx-2" : "p-3"}`}
id={`navs-top-${tab.id}`} id={`navs-top-${tab.id}`}
role="tabpanel" role="tabpanel"
> >

54
src/pages/Activities/TaskPlannng.jsx
View File

@ -49,35 +49,49 @@ const TaskPlanning = () => {
/> />
<div className="card py-2 page-min-h"> <div className="card py-2 page-min-h">
<div className="col-sm-4 col-md-3 col-12 px-4 py-2 text-start"> <div className="col-sm-4 col-md-3 col-12 px-4 py-2 ms-1 text-start">
{/* When no services available */}
{data?.length === 0 ? ( {data?.length === 0 ? (
<p className="badge bg-label-secondary m-0">Service not assigned</p> <p className="badge bg-label-secondary m-0"></p>
) : ( ) : (
<AppFormController <>
name="serviceFilter" {/* When exactly 1 service assigned → display heading */}
control={control} {data?.length === 1 && (
render={({ field }) => ( <h5 className="mb-3">{data[0].name}</h5>
<SelectField )}
label="Services"
placeholder="All Services" {/* When multiple services → show dropdown */}
options={[{ id: "", name: "All Services" }, ...(data ?? [])]} {data?.length > 1 && (
labelKey="name" <AppFormController
valueKey="id" name="serviceFilter"
isLoading={servicesLoading} control={control}
value={field.value} render={({ field }) => (
onChange={(val) => { <SelectField
field.onChange(val); label="Select Services"
dispatch(setService(val)); placeholder="All Services"
}} options={[{ id: "", name: "All Services" }, ...(data ?? [])]}
className="m-0" labelKey="name"
valueKey="id"
isLoading={servicesLoading}
value={field.value}
onChange={(val) => {
field.onChange(val);
dispatch(setService(val));
}}
className="m-0"
/>
)}
/> />
)} )}
/> </>
)} )}
</div> </div>
{/* Planning Component */} {/* Planning Component */}
{selectedProject ? ( {selectedProject ? (
<InfraPlanning /> <InfraPlanning />

63
src/pages/DailyProgressReport/DailyProgrssReport.jsx
View File

@ -53,7 +53,7 @@ const DailyProgrssReport = () => {
}); });
const clearFilter = () => { const clearFilter = () => {
updatedRef.current?.onClear(); updatedRef.current?.onClear();
}; };
const handleFilter = (filterObj) => { const handleFilter = (filterObj) => {
setFilter(filterObj) setFilter(filterObj)
} }
@ -120,31 +120,44 @@ const DailyProgrssReport = () => {
/> />
<div className="card page-min-h p-5"> <div className="card page-min-h p-5">
{data?.length > 0 && ( <div className="text-start">
<div className="col-sm-4 col-md-3 col-12 text-start"> {/* Service Heading or Dropdown */}
<AppFormController {!isLoading && data && (
name="serviceFilter" <>
control={control} {/* If only 1 service assigned → show heading */}
defaultValue={service ?? ""} {data.length === 1 && (
render={({ field }) => ( <h5 className="mb-3">{data[0].name}</h5>
<SelectField
label="Services"
options={[{ id: "", name: "All Projects" }, ...(data ?? [])]}
placeholder="Select Service"
labelKey="name"
valueKey="id"
isLoading={isLoading}
value={field.value}
onChange={(val) => {
field.onChange(val);
setService(val);
}}
className="m-0"
/>
)} )}
/>
</div> {/* If multiple services → show dropdown */}
)} {data.length > 1 && (
<div className="col-12 col-md-3 mb-3 text-start">
<AppFormController
name="serviceFilter"
control={control}
defaultValue={service ?? ""}
render={({ field }) => (
<SelectField
label="Select Service"
options={[{ id: "", name: "All Services" }, ...data]}
placeholder="Choose a Service"
labelKey="name"
valueKey="id"
value={field.value}
isLoading={isLoading}
onChange={(val) => {
field.onChange(val);
setService(val);
}}
className="w-100"
/>
)}
/>
</div>
)}
</>
)}
</div>
<div> <div>
<TaskReportList filter={filter} <TaskReportList filter={filter}