Removing dropdown logic all the places wehre dropdown is added.

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

View File

@ -237,112 +237,110 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
))}
</span>
</p>
<div
className="col-12 col-md-4 d-flex flex-row gap-3 align-items-center justify-content-end"
ref={dropdownRef}
>
<div
className="col-12 col-md-4 d-flex flex-row gap-3 align-items-center mt-4 mb-6 justify-content-end"
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">
{/* Search Box */}
<div>
<input
type="text"
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
type="text"
className="form-control form-control-sm ms-auto mb-2 mt-2"
placeholder="Search employees or roles..."
value={searchTerm}
onChange={handleSearchChange}
className="form-check-input"
type="checkbox"
id="checkboxAllRoles"
value="all"
checked={selectedRoles.includes("all")}
onChange={(e) => handleRoleChange(e, e.target.value)}
/>
</div>
{/* 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"
}`}
onClick={() => setOpen(!open)}
<label
className="form-check-label ms-2"
htmlFor="checkboxAllRoles"
>
<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
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>
)}
All Roles
</label>
</div>
</div>
</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>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-label text-start">
<div className="row mb-1">

View File

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

View File

@ -23,31 +23,49 @@ const TeamAssignToProject = ({ closeModal }) => {
<h5 className="mb-4">Assign Employee To Project</h5>
<div className="row align-items-center gx-5 text-start">
<div className="col-12 col-md-6 mb-2">
<AppFormController
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"
/>
<div className="col-12 col-md-6 mb-2 mt-5">
{!isLoading && data && (
<>
{data.length === 1 && (
<h5 className="mb-2">{data[0].name}</h5>
)}
/>
{errors.organizationId && (
<small className="danger-text">{errors.organizationId.message}</small>
)}
</div>
<div className="col-12 col-md-6 mt-n5">
{/* If multiple organizations → show dropdown */}
{data.length > 1 && (
<div className="col-12 col-md-6 mb-2 text-start">
<AppFormController
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">
<label htmlFor="search" className="form-label mb-1">
Search Employee

View File

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

View File

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

View File

@ -49,35 +49,49 @@ const TaskPlanning = () => {
/>
<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 ? (
<p className="badge bg-label-secondary m-0">Service not assigned</p>
<p className="badge bg-label-secondary m-0"></p>
) : (
<AppFormController
name="serviceFilter"
control={control}
render={({ field }) => (
<SelectField
label="Services"
placeholder="All Services"
options={[{ id: "", name: "All Services" }, ...(data ?? [])]}
labelKey="name"
valueKey="id"
isLoading={servicesLoading}
value={field.value}
onChange={(val) => {
field.onChange(val);
dispatch(setService(val));
}}
className="m-0"
<>
{/* When exactly 1 service assigned → display heading */}
{data?.length === 1 && (
<h5 className="mb-3">{data[0].name}</h5>
)}
{/* When multiple services → show dropdown */}
{data?.length > 1 && (
<AppFormController
name="serviceFilter"
control={control}
render={({ field }) => (
<SelectField
label="Select Services"
placeholder="All Services"
options={[{ id: "", name: "All Services" }, ...(data ?? [])]}
labelKey="name"
valueKey="id"
isLoading={servicesLoading}
value={field.value}
onChange={(val) => {
field.onChange(val);
dispatch(setService(val));
}}
className="m-0"
/>
)}
/>
)}
/>
</>
)}
</div>
{/* Planning Component */}
{selectedProject ? (
<InfraPlanning />

View File

@ -53,7 +53,7 @@ const DailyProgrssReport = () => {
});
const clearFilter = () => {
updatedRef.current?.onClear();
};
};
const handleFilter = (filterObj) => {
setFilter(filterObj)
}
@ -120,31 +120,44 @@ const DailyProgrssReport = () => {
/>
<div className="card page-min-h p-5">
{data?.length > 0 && (
<div className="col-sm-4 col-md-3 col-12 text-start">
<AppFormController
name="serviceFilter"
control={control}
defaultValue={service ?? ""}
render={({ field }) => (
<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 className="text-start">
{/* Service Heading or Dropdown */}
{!isLoading && data && (
<>
{/* If only 1 service assigned → show heading */}
{data.length === 1 && (
<h5 className="mb-3">{data[0].name}</h5>
)}
/>
</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>
<TaskReportList filter={filter}