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

Adding Dropdown in all places.

Browse Source
This commit is contained in:
Kartik Sharma 2025-12-06 12:58:43 +05:30
parent c7e72946ea
commit 654e34ebfa
40 changed files with 573 additions and 487 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Directory/BucketForm.jsx
View File

@ -43,7 +43,7 @@ const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) =>
Name
</Label>
<input
className="form-control form-control-sm"
className="form-control"
{...register("name")}
/>
{errors.name && (
@ -51,12 +51,12 @@ const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) =>
)}
</div>
<div className="mb-3">
<div className="my-3">
<Label htmlFor="description" className="text-start" required>
Description
</Label>
<textarea
className="form-control form-control-sm"
className="form-control"
{...register("description")}
rows="3"
/>

2
src/components/Directory/BucketList.jsx
View File

@ -14,7 +14,7 @@ const BucketList = ({ buckets, loading, searchTerm, onEdit, onDelete }) => {
if (!loading && sorted.length === 0) return <div>No buckets found</div>;
return (
<div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 pt-3 px-2 px-sm-0">
<div className="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 pt-3 px-2 px-sm-0 text-start">
{sorted.map((bucket) => (
<div className="col" key={bucket.id}>
<div className="card h-100">

2
src/components/Directory/CardViewContact.jsx
View File

@ -61,7 +61,7 @@ const CardViewContact = ({
(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
}
/>{" "}
<span className="text-heading fs-6 ms-2"> {contact?.name}</span>
<span className="text-heading fs-6 ms-2 mt-n1"> {contact?.name}</span>
</div>
<div>
{IsActive && (

2
src/components/Directory/ManageBucket1.jsx
View File

@ -45,7 +45,7 @@ const ManageBucket1 = () => {
return (
<div className="container m-0 p-0" style={{ minHeight: "00px" }}>
<div className="d-flex justify-content-center">
<p className="fs-5 fw-semibold m-0">Manage Buckets</p>
<h5 className="m-0">Manage Buckets</h5>
</div>
{action ? (

10
src/components/Directory/ManageContact.jsx
View File

@ -281,7 +281,7 @@ const ManageContact = ({ contactId, closeModal }) => {
]}
placeholder="Choose a Label"
required
labelKeyKey="name"
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
@ -295,7 +295,7 @@ const ManageContact = ({ contactId, closeModal }) => {
</small>
)}
</div>
<div className="col-7 text-start mt-n3">
<div className="col-7 text-start mt-n0">
<label className="form-label">Email</label>
<div className="d-flex align-items-center">
<input
@ -344,7 +344,7 @@ const ManageContact = ({ contactId, closeModal }) => {
]}
placeholder="Choose a Label"
required
labelKeyKey="name"
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
@ -359,7 +359,7 @@ const ManageContact = ({ contactId, closeModal }) => {
)}
</div>
<div className="col-7 text-start mt-n3">
<div className="col-7 text-start mt-n0">
<label className="form-label">Phone</label>
<div className="d-flex align-items-center">
<input
@ -406,7 +406,7 @@ const ManageContact = ({ contactId, closeModal }) => {
required
options={contactCategory ?? []}
placeholder="Select Category"
labelKeyKey="name"
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}

4
src/components/Documents/ManageDocument.jsx
View File

@ -252,7 +252,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
options={DocumentCategories ?? []}
placeholder="Select Category"
required
labelKeyKey="name"
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
@ -282,7 +282,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
options={DocumentTypes ?? []}
placeholder="Select Document Type"
required
labelKeyKey="name"
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}

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

@ -529,7 +529,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
a?.name?.localeCompare(b?.name)
)}
placeholder="Select Role"
labelKeyKey="name"
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}

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

@ -255,7 +255,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
options={organizationList ?? []}
placeholder="--Select Organization--"
required
labelKeyKey="name"
labelKey="name"
valueKeyKey="id"
value={field.value || ""}
onChange={field.onChange}
@ -281,7 +281,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
options={serviceList ?? []}
placeholder="--Select Service--"
required
labelKeyKey="name"
labelKey="name"
valueKeyKey="id"
value={field.value || ""}
onChange={field.onChange}

6
src/components/Project/ManageProjectInfo.jsx
View File

@ -261,7 +261,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
)}
</div>
<div className="col-12 mt-n1">
<div className="col-12">
<Label htmlFor="promoterId" className="form-label">
Promoter
</Label>
@ -296,7 +296,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
)}
</div>
<div className="col-12 mt-n1">
<div className="col-12">
<Label htmlFor="pmcId" className="form-label">
PMC
</Label>
@ -331,7 +331,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
)}
</div>
<div className="d-flex justify-content-between text-secondary text-tiny text-wrap mt-n1">
<div className="d-flex justify-content-between text-secondary text-tiny text-wrap">
<span>
<i className="bx bx-sm bx-info-circle"></i> Not found PMC and
Pomoter, find through SPRID or create new

2
src/components/Project/ProjectPermission.jsx
View File

@ -142,7 +142,7 @@ const ProjectPermission = () => {
}
placeholder="-- Select Employee --"
required
labelKeyKey="name"
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}

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

@ -4,6 +4,9 @@ import { useOrganization } from "../../../hooks/useDirectory";
import { useOrganizationsList } from "../../../hooks/useOrganization";
import { useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
import { useSelectedProject } from "../../../slices/apiDataManager";
import { AppFormController } from "../../../hooks/appHooks/useAppForm";
import SelectField from "../../common/Forms/SelectField";
import { useForm } from "react-hook-form";
const TeamAssignToProject = ({ closeModal }) => {
const [searchText, setSearchText] = useState("");
@ -11,54 +14,48 @@ const TeamAssignToProject = ({ closeModal }) => {
const project = useSelectedProject();
const { data, isLoading, isError, error } =
useProjectAssignedOrganizationsName(project);
const { control, watch, formState: { errors } } = useForm({
defaultValues: { organizationId: "" },
});
return (
<div className="container">
{/* <p className="fs-5 fs-seminbod ">Assign Employee To Project </p> */}
<h5 className="mb-4">Assign Employee To Project</h5>
<div className="row align-items-center gx-5">
<div className="col">
<div className="d-flex flex-grow-1 align-items-center gap-2">
{isLoading ? (
<select className="form-select form-select-sm w-100" disabled>
<option value="">Loading...</option>
</select>
) : data?.length === 0 ? (
<p className="mb-0 badge bg-label-secondary">No organizations found</p>
) : (
<>
<label
htmlFor="organization"
className="form-label mb-0 text-nowrap"
>
Select Organization
</label>
<select
id="organization"
className="form-select form-select-sm w-100"
value={selectedOrg || ""}
onChange={(e) => setSelectedOrg(e.target.value)}
>
<option value="">Select</option>
{data.map((org) => (
<option key={org.id} value={org.id}>
{org.name}
</option>
))}
</select>
</>
<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"
/>
)}
/>
{errors.organizationId && (
<small className="danger-text">{errors.organizationId.message}</small>
)}
</div>
</div>
<div className="col">
<div className="d-flex flex-grow-1 align-items-center gap-2">
<label htmlFor="search" className="form-label mb-0 text-nowrap">
<div className="col-12 col-md-6 mt-n5">
<div className="d-flex flex-column">
<label htmlFor="search" className="form-label mb-1">
Search Employee
</label>
<input
id="search"
type="search"
className="form-control form-control-sm w-100"
className="form-control w-100"
placeholder="Search..."
value={searchText}
onChange={(e) => setSearchText(e.target.value)}

92
src/components/Project/Team/Teams.jsx
View File

@ -22,6 +22,9 @@ import { useSelectedProject } from "../../../slices/apiDataManager";
import GlobalModel from "../../common/GlobalModel";
import TeamAssignToProject from "./TeamAssignToProject";
import { SpinnerLoader } from "../../common/Loader";
import { AppFormController } from "../../../hooks/appHooks/useAppForm";
import SelectField from "../../common/Forms/SelectField";
import { useForm } from "react-hook-form";
const Teams = () => {
const selectedProject = useSelectedProject();
@ -30,9 +33,15 @@ const Teams = () => {
const [employees, setEmployees] = useState([]);
const [selectedEmployee, setSelectedEmployee] = useState(null);
const [deleteEmployee, setDeleteEmplyee] = useState(null);
const [searchTerm, setSearchTerm] = useState(""); // State for search term
const [selectedService, setSelectedService] = useState(null);
const [activeEmployee, setActiveEmployee] = useState(false);
const { control, watch } = useForm({
defaultValues: {
selectedService: "",
searchTerm: "",
},
});
const selectedService = watch("selectedService");
const searchTerm = watch("searchTerm");
const { data: assignedServices, isLoading: servicesLoading } =
useProjectAssignedServices(selectedProject);
@ -95,26 +104,23 @@ const Teams = () => {
const filteredEmployees = useMemo(() => {
if (!projectEmployees) return [];
let filtered = projectEmployees;
if (activeEmployee) {
filtered = projectEmployees.filter((emp) => !emp.isActive);
}
// Apply search filter if present
if (searchTerm?.trim()) {
const lower = searchTerm.toLowerCase();
filtered = filtered.filter((emp) => {
const fullName = `${emp.firstName ?? ""} ${emp.lastName ?? ""}`.toLowerCase();
const jobRole = getJobRole(emp?.jobRoleId)?.toLowerCase();
return fullName.includes(lower) || jobRole.includes(lower);
return fullName.includes(lower) || (emp.jobRoleName ?? "").toLowerCase().includes(lower);
});
}
return filtered;
}, [projectEmployees, searchTerm, activeEmployee]);
const handleSearch = (e) => setSearchTerm(e.target.value);
const employeeHandler = useCallback(
(msg) => {
if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
@ -124,6 +130,7 @@ const Teams = () => {
[filteredEmployees, refetch]
);
useEffect(() => {
eventBus.on("employee", employeeHandler);
return () => eventBus.off("employee", employeeHandler);
@ -154,33 +161,37 @@ const Teams = () => {
<div className="card card-action mb-6">
<div className="card-body">
<div className="row align-items-center justify-content-between mb-4 g-3">
<div className="col-md-6 col-12 algin-items-center">
<div className="d-flex flex-wrap align-items-center gap-3">
<div>
{!servicesLoading && (
<div className="col-md-6 col-12 d-flex flex-wrap align-items-center gap-3">
{!servicesLoading && assignedServices && (
<>
{assignedServices?.length === 1 && (
{assignedServices.length === 1 && (
<h5 className="mb-2">{assignedServices[0].name}</h5>
)}
{assignedServices?.length > 1 && (
<select
className="form-select form-select-sm"
aria-label="Select Service"
value={selectedService}
onChange={handleServiceChange}
>
<option value="">All Services</option>
{assignedServices.map((service) => (
<option key={service.id} value={service.id}>
{service.name}
</option>
))}
</select>
{assignedServices.length > 1 && (
<div className="col-12 col-md-6 mb-2 text-start">
<AppFormController
name="selectedService"
control={control}
render={({ field }) => (
<SelectField
label="Select Service"
options={[{ id: "", name: "All Services" }, ...assignedServices]}
placeholder="Choose a Service"
labelKey="name"
valueKey="id"
value={field.value}
onChange={field.onChange}
isLoading={servicesLoading}
className="w-100"
/>
)}
/>
</div>
)}
</>
)}
</div>
<div className="form-check form-switch d-flex align-items-center text-nowrap">
<input
@ -190,26 +201,28 @@ const Teams = () => {
checked={activeEmployee}
onChange={handleToggleActive}
/>
<label
className="form-check-label ms-2"
htmlFor="activeEmployeeSwitch"
>
<label className="form-check-label ms-2" htmlFor="activeEmployeeSwitch">
{activeEmployee ? "Active Employees" : "In-active Employees"}
</label>
</div>
</div>
</div>
<div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3">
<div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3 mt-n1">
<div className="col-12 col-md-4">
<AppFormController
name="searchTerm"
control={control}
render={({ field }) => (
<input
type="search"
className="form-control form-control-sm"
className="form-control form-control-sm w-100"
placeholder="Search by Name or Role"
aria-controls="DataTables_Table_0"
style={{ maxWidth: "200px" }}
value={searchTerm}
onChange={handleSearch}
value={field.value}
onChange={field.onChange}
/>
)}
/>
</div>
{HasAssignUserPermission && (
<button
@ -246,8 +259,7 @@ const Teams = () => {
</tr>
</thead>
<tbody className="table-border-bottom-0">
{filteredEmployees &&
filteredEmployees
{filteredEmployees
.sort((a, b) =>
(a.firstName || "").localeCompare(b.firstName || "")
)

6
src/components/ServiceProject/ManageServiceProject.jsx
View File

@ -135,7 +135,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
options={organization?.data ?? []}
placeholder="Select Client"
required
labelKeyKey="name"
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
@ -147,7 +147,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
</div>
<i
className="bx bx-plus-circle bx-xs cursor-pointer text-primary mt-n3"
className="bx bx-plus-circle bx-xs cursor-pointer text-primary "
onClick={() => {
onClose();
openOrgModal({ startStep: 2 });
@ -317,7 +317,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
)}
</div>
</div>
<div className="d-flex justify-content-end gap-4 mt-4">
<div className="d-flex justify-content-end gap-2 mt-4">
<button
className="btn btn-sm btn-outline-secondary"
disabled={isPending || isUpdating}

2
src/components/ServiceProject/ServiceProjectJob/ChangeStatus.jsx
View File

@ -68,7 +68,7 @@ const ChangeStatus = ({ statusId, projectId, jobId, popUpId }) => {
options={data ?? []}
placeholder="Choose a Status"
required
labelKeyKey="name"
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}

4
src/components/ServiceProject/ServiceProjectJob/ManageJob.jsx
View File

@ -236,8 +236,8 @@ const ManageJob = ({ Job }) => {
options={data ?? []}
placeholder="Choose a Status"
required
labelKeyKey="name"
valueKeyKey="id"
labelKey="name"
valueKey="id"
value={field.value}
onChange={field.onChange}
isLoading={isLoading}

8
src/components/Tenant/ContactInfro.jsx
View File

@ -32,7 +32,7 @@ const ContactInfro = ({ onNext }) => {
<input
id="firstName"
type="text"
className={`form-control form-control-sm`}
className={`form-control `}
{...register("firstName")}
/>
{errors.firstName && (
@ -46,7 +46,7 @@ const ContactInfro = ({ onNext }) => {
<input
id="lastName"
type="text"
className={`form-control form-control-sm `}
className={`form-control `}
{...register("lastName")}
/>
{errors.lastName && (
@ -60,7 +60,7 @@ const ContactInfro = ({ onNext }) => {
<input
id="email"
type="email"
className={`form-control form-control-sm `}
className={`form-control `}
{...register("email")}
/>
{errors.email && (
@ -74,7 +74,7 @@ const ContactInfro = ({ onNext }) => {
<input
id="contactNumber"
type="text"
className={`form-control form-control-sm `}
className={`form-control `}
{...register("contactNumber")}
inputMode="tel"
placeholder="+91 9876543210"

133
src/components/Tenant/EditProfile.jsx
View File

@ -7,6 +7,8 @@ import { LogoUpload } from './LogoUpload';
import showToast from '../../services/toastService';
import { zodResolver } from '@hookform/resolvers/zod';
import { EditTenant } from './TenantSchema';
import { AppFormController } from '../../hooks/appHooks/useAppForm';
import SelectField from '../common/Forms/SelectField';
const EditProfile = ({ TenantId, onClose }) => {
const { data, isLoading, isError, error } = useTenantDetails(TenantId);
@ -37,7 +39,7 @@ const EditProfile = ({ TenantId, onClose }) => {
}
});
const { register, reset, handleSubmit, formState: { errors } } = methods;
const { register, control, reset, handleSubmit, formState: { errors } } = methods;
const onSubmit = (formData) => {
const tenantPayload = { ...formData, contactName: `${formData.firstName} ${formData.lastName}`, id: data.id, }
@ -74,93 +76,122 @@ const EditProfile = ({ TenantId, onClose }) => {
<form className="row g-6" onSubmit={handleSubmit(onSubmit)}>
<h5>Edit Tenant</h5>
<div className="col-sm-6 mt-1 text-start">
<div className="col-sm-6 mt-n2 text-start">
<Label htmlFor="firstName" required>First Name</Label>
<input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} inputMode='text' />
<input id="firstName" type="text" className="form-control " {...register("firstName")} inputMode='text' />
{errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
</div>
<div className="col-sm-6 mt-1 text-start">
<div className="col-sm-6 mt-n2 text-start">
<Label htmlFor="lastName" required>Last Name</Label>
<input id="lastName" type="text" className="form-control form-control-sm" {...register("lastName")} />
<input id="lastName" type="text" className="form-control " {...register("lastName")} />
{errors.lastName && <div className="danger-text">{errors.lastName.message}</div>}
</div>
<div className="col-sm-6 mt-1 text-start">
<div className="col-sm-6 text-start">
<Label htmlFor="contactNumber" required>Contact Number</Label>
<input id="contactNumber" type="text" className="form-control form-control-sm" {...register("contactNumber")} inputMode="tel"
<input id="contactNumber" type="text" className="form-control " {...register("contactNumber")} inputMode="tel"
placeholder="+91 9876543210" />
{errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>}
</div>
<div className="col-sm-6 mt-1 text-start">
<div className="col-sm-6 text-start">
<Label htmlFor="domainName" >Domain Name</Label>
<input id="domainName" type="text" className="form-control form-control-sm" {...register("domainName")} />
<input id="domainName" type="text" className="form-control " {...register("domainName")} />
{errors.domainName && <div className="danger-text">{errors.domainName.message}</div>}
</div>
<div className="col-sm-6 mt-1 text-start">
<div className="col-sm-6 text-start">
<Label htmlFor="taxId" >Tax ID</Label>
<input id="taxId" type="text" className="form-control form-control-sm" {...register("taxId")} />
<input id="taxId" type="text" className="form-control " {...register("taxId")} />
{errors.taxId && <div className="danger-text">{errors.taxId.message}</div>}
</div>
<div className="col-sm-6 mt-1 text-start">
<div className="col-sm-6 text-start">
<Label htmlFor="officeNumber" >Office Number</Label>
<input id="officeNumber" type="text" className="form-control form-control-sm" {...register("officeNumber")} />
<input id="officeNumber" type="text" className="form-control " {...register("officeNumber")} />
{errors.officeNumber && <div className="danger-text">{errors.officeNumber.message}</div>}
</div>
<div className="col-sm-6 mt-1 text-start">
<Label htmlFor="industryId" required>Industry</Label>
<select className="form-select form-select-sm" {...register("industryId")}>
{industryLoading ? <option value="">Loading...</option> :
Industries?.map((indu) => (
<option key={indu.id} value={indu.id}>{indu.name}</option>
))
}
</select>
{errors.industryId && <div className="danger-text">{errors.industryId.message}</div>}
</div>
<div className="col-sm-6 mt-1 text-start">
<Label htmlFor="reference">Reference</Label>
<select className="form-select form-select-sm" {...register("reference")}>
{reference.map((org) => (
<option key={org.val} value={org.val}>{org.name}</option>
))}
</select>
{errors.reference && <div className="danger-text">{errors.reference.message}</div>}
</div>
<div className="col-sm-6 text-start">
<Label htmlFor="organizationSize" required>
Organization Size
</Label>
<AppFormController
name="industryId"
control={control}
render={({ field }) => (
<SelectField
label="Industry"
options={Industries ?? []}
placeholder={industryLoading ? "Loading..." : "Choose an Industry"}
required
labelKey="name"
valueKey="id"
value={field.value}
onChange={field.onChange}
isLoading={industryLoading}
className="m-0 w-100"
/>
)}
/>
<select
className="form-select form-select-sm"
{...register("organizationSize")}
>
{orgSize.map((org) => (
<option key={org.val} value={org.val}>
{org.name}
</option>
))}
</select>
{errors.organizationSize && (
<div className="danger-text">{errors.organizationSize.message}</div>
{errors.industryId && (
<small className="danger-text">{errors.industryId.message}</small>
)}
</div>
<div className="col-12 mt-1 text-start">
<div className="col-sm-6 text-start">
<AppFormController
name="reference"
control={control}
render={({ field }) => (
<SelectField
label="Reference"
placeholder="Select Reference"
options={reference ?? []}
labelKey="name"
valueKey="val"
value={field.value}
onChange={field.onChange}
className="shadow-none border py-1 px-2 small m-0"
/>
)}
/>
{errors.reference && (
<small className="danger-text">{errors.reference.message}</small>
)}
</div>
<div className="col-sm-6 text-start">
<AppFormController
name="organizationSize"
control={control}
render={({ field }) => (
<SelectField
label="Organization Size"
placeholder="Select Organization Size"
options={orgSize ?? []}
labelKey="name"
valueKey="val"
value={field.value}
onChange={field.onChange}
className="shadow-none border py-1 px-2 small m-0"
required
/>
)}
/>
{errors.organizationSize && (
<small className="danger-text">{errors.organizationSize.message}</small>
)}
</div>
<div className="col-12 text-start">
<Label htmlFor="billingAddress" required>Billing Address</Label>
<textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} />
{errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>}
</div>
<div className="col-12 mt-1 text-start">
<div className="col-12 text-start">
<Label htmlFor="description">Description</Label>
<textarea id="description" className="form-control" {...register("description")} rows={2} />
{errors.description && <div className="danger-text">{errors.description.message}</div>}

131
src/components/Tenant/OrganizationInfo.jsx
View File

@ -8,6 +8,9 @@ import { orgSize, reference } from "../../utils/constants";
import moment from "moment";
import { useGlobalServices } from "../../hooks/masterHook/useMaster";
import SelectMultiple from "../common/SelectMultiple";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
import { fill } from "pdf-lib";
const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
const { data, isError, isLoading: industryLoading } = useIndustries();
@ -53,7 +56,8 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
// onSubmitTenant(data);
// onNext();
const tenantPayload = { ...data, onBoardingDate: moment.utc(data.onBoardingDate, "DD-MM-YYYY").toISOString() }
CreateTenant(tenantPayload);
// CreateTenant(tenantPayload);
console.log(tenantPayload)
}
};
@ -67,7 +71,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
return (
<div className="row g-2 text-start">
<div className="row g-6 text-start">
<div className="col-sm-6">
<Label htmlFor="organizationName" required>
Organization Name
@ -75,7 +79,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
<input
id="organizationName"
className={`form-control form-control-sm `}
className={`form-control `}
{...register("organizationName")}
/>
{errors.organizationName && (
@ -89,7 +93,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
</Label>
<input
id="officeNumber"
className={`form-control form-control-sm `}
className={`form-control `}
{...register("officeNumber")}
/>
{errors.officeNumber && (
@ -103,7 +107,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
</Label>
<input
id="domainName"
className={`form-control form-control-sm `}
className={`form-control `}
{...register("domainName")}
/>
{errors.domainName && (
@ -117,7 +121,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
</Label>
<input
id="taxId"
className={`form-control form-control-sm `}
className={`form-control `}
{...register("taxId")}
/>
{errors.taxId && (
@ -131,6 +135,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
</Label>
<DatePicker
name="onBoardingDate"
size="md"
control={control}
placeholder="DD-MM-YYYY"
maxDate={new Date()}
@ -143,73 +148,79 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
)}
</div>
<div className="col-sm-6">
<Label htmlFor="organizationSize" required>
Organization Size
</Label>
<select
id="organizationSize"
className="form-select shadow-none border py-1 px-2"
style={{ fontSize: "0.875rem" }} // Bootstrap's small text size
{...register("organizationSize", { required: "Organization size is required" })}
>
{orgSize.map((org) => (
<option key={org.val} value={org.val}>
{org.name}
</option>
))}
</select>
<div className="col-sm-6 mb-2 mb-md-4">
<AppFormController
name="organizationSize"
control={control}
render={({ field }) => (
<SelectField
label="Organization Size"
placeholder="Select Organization Size"
options={orgSize ?? []}
labelKey="name"
valueKey="val"
value={field.value}
onChange={field.onChange}
className="shadow-none border py-1 px-2 small m-0"
required
/>
)}
/>
{errors.organizationSize && (
<div className="danger-text">{errors.organizationSize.message}</div>
<small className="danger-text">{errors.organizationSize.message}</small>
)}
</div>
<div className="col-sm-6">
<Label htmlFor="industryId" required>
Industry
</Label>
<select
id="industryId"
className="form-select shadow-none border py-1 px-2 small"
{...register("industryId")}
>
{industryLoading ? (
<option value="">Loading...</option>
) : (
data?.map((indu) => (
<option key={indu.id} value={indu.id}>
{indu.name}
</option>
))
<div className="col-sm-6 mt-n3">
<AppFormController
name="industryId"
control={control} // make sure `control` comes from useForm
render={({ field }) => (
<SelectField
label="Industry"
placeholder={industryLoading ? "Loading..." : "Select Industry"}
options={data ?? []}
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
isLoading={industryLoading}
className="shadow-none border py-1 px-2 small"
required
/>
)}
</select>
/>
{errors.industryId && (
<div className="danger-text">{errors.industryId.message}</div>
)}
</div>
<div className="col-sm-6">
<Label htmlFor="reference" required>Reference</Label>
<select
id="reference"
className="form-select shadow-none border py-1 px-2 small"
{...register("reference")}
>
{reference.map((org) => (
<option key={org.val} value={org.val}>
{org.name}
</option>
))}
</select>
<div className="col-sm-6 mb-2 mb-md-4 mt-n3">
<AppFormController
name="reference"
control={control}
render={({ field }) => (
<SelectField
label="Reference"
placeholder="Select Reference"
options={reference ?? []}
labelKey="name"
valueKey="val"
value={field.value}
onChange={field.onChange}
className="shadow-none border py-1 px-2 small m-0"
required
/>
)}
/>
{errors.reference && (
<div className="danger-text">{errors.reference.message}</div>
<small className="danger-text">{errors.reference.message}</small>
)}
</div>
<div className="col-sm-6">
<div className="col-sm-6 mt-n3">
<SelectMultiple
name="serviceIds"
label="Services"
@ -229,7 +240,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
<textarea
id="description"
rows={3}
className={`form-control form-control-sm `}
className={`form-control `}
{...register("description")}
/>
{errors.description && (

1
src/components/Tenant/TenantForm.jsx
View File

@ -43,6 +43,7 @@ const TenantForm = () => {
const tenantForm = useForm({
resolver: zodResolver(newTenantSchema),
defaultValues: tenantDefaultValues,
mode: "onChange",
});
const subscriptionForm = useForm({

8
src/components/Tenant/TenantsList.jsx
View File

@ -114,8 +114,7 @@ const TenantsList = ({
align: "text-center",
getValue: (t) => (
<span
className={`badge ${
getTenantStatus(t.tenantStatus?.id) || "secondary"
className={`badge ${getTenantStatus(t.tenantStatus?.id) || "secondary"
}`}
>
{t.tenantStatus?.name || "Unknown"}
@ -151,12 +150,11 @@ const TenantsList = ({
<tbody>
{data?.data.length > 0 ? (
data.data.map((tenant) => (
<tr key={tenant.id}>
<tr key={tenant.id} style={{ height: "50px" }}>
{TenantColumns.map((col) => (
<td
key={col.key}
className={`d-table-cell px-3 py-2 align-middle ${
col.align ?? ""
className={`d-table-cell px-3 py-2 align-middle ${col.align ?? ""
}`}
>
{col.customRender

8
src/components/collections/ManageCollection.jsx
View File

@ -219,7 +219,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
</div>
<div className="col-12 col-md-6 mb-2">
<div className="col-12 col-md-6 mb-4">
<Label required>Title</Label>
<input
type="text"
@ -256,7 +256,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<div className="col-12 col-md-6 mb-4">
<Label required>Invoice Date</Label>
<DatePicker
className="w-100"
@ -271,7 +271,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<div className="col-12 col-md-6 mb-4">
<Label required>Expected Payment Date</Label>
<DatePicker
className="w-100"
@ -359,7 +359,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
</div>
</div>
<div className="col-12">
<div className="col-12 my-3">
<Label className="form-label" required>
Upload Bill{" "}
</Label>

2
src/components/master/CreateRole.jsx
View File

@ -228,7 +228,7 @@ const CreateRole = ({ modalType, onClose }) => {
</div>
{masterFeatures && (
<div className="col-12 text-end">
<div className="col-12 text-end mt-5">
<button
type="reset"
className="btn btn-sm btn-label-secondary me-3"

2
src/components/master/CreateWorkCategory.jsx
View File

@ -90,7 +90,7 @@ const CreateWorkCategory = ({ onClose }) => {
/>
{errors.name && <p className="text-danger">{errors.name.message}</p>}
</div>
<div className="col-12 col-md-12 text-start">
<div className="col-12 col-md-12 text-start my-3">
<Label className="form-label" htmlFor="description" required>Description</Label>
<textarea
rows="3"

2
src/components/master/EditRole.jsx
View File

@ -276,7 +276,7 @@ const EditMaster = ({ master, onClose }) => {
<div className="col-12 text-end mt-3">
<div className="col-12 text-end mt-5">
<button
type="button"
className="btn btn-sm btn-label-secondary me-3"

42
src/components/master/ManageDocumentCategory.jsx
View File

@ -9,6 +9,8 @@ import {
useUpdateDocumentCategory,
} from "../../hooks/masterHook/useMaster";
import Label from "../common/Label";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
export const Document_Entity = Object.entries(DOCUMENTS_ENTITIES).map(
([key, value]) => ({ key, value })
@ -34,6 +36,7 @@ const ManageDocumentCategory = ({ data, onClose }) => {
register,
handleSubmit,
reset,
control,
formState: { errors },
} = methods;
@ -89,7 +92,7 @@ const ManageDocumentCategory = ({ data, onClose }) => {
<input
type="text"
{...register("name")}
className={`form-control form-control-sm `}
className={`form-control `}
/>
{errors.name && (
<p className="danger-text">{errors.name.message}</p>
@ -97,29 +100,36 @@ const ManageDocumentCategory = ({ data, onClose }) => {
</div>
<div className="col-12">
<Label required >Select Entity</Label>
<select
className="form-select form-select-sm"
{...register("entityTypeId")}
>
<option value="" disabled>Select entity</option>
{Document_Entity.map((entity) => (
<option key={entity.key} value={entity.value}>
{entity.key}
</option>
))}
</select>
<AppFormController
name="entityTypeId"
control={control}
render={({ field }) => (
<SelectField
label="Select Entity"
options={Document_Entity ?? []}
placeholder="Select entity"
required
labelKey="key"
valueKey="value"
value={field.value}
onChange={field.onChange}
className="m-0 w-100"
/>
)}
/>
{errors.entityTypeId && (
<p className="danger-text">{errors.entityTypeId.message}</p>
)}
</div>
<div className="col-12">
<div className="col-12 my-3">
<Label required >Description</Label>
<textarea
rows="3"
{...register("description")}
className={`form-control form-control-sm`}
className={`form-control `}
/>
{errors.description && (
<p className="danger-text">{errors.description.message}</p>
@ -137,7 +147,7 @@ const ManageDocumentCategory = ({ data, onClose }) => {
</button>
<button
type="submit"
className="btn btn-sm btn-primary me-3"
className="btn btn-sm btn-primary"
disabled={isPending || Updating}
>
{isPending || Updating

81
src/components/master/ManageDocumentType.jsx
View File

@ -5,6 +5,8 @@ import { zodResolver } from "@hookform/resolvers/zod";
import { useCreateDocumentType, useDocumentCategories, useUpdateDocumentType } from "../../hooks/masterHook/useMaster";
import { DOCUMENTS_ENTITIES } from "../../utils/constants";
import Label from "../common/Label";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
export const Document_Entity = Object.entries(DOCUMENTS_ENTITIES).map(
@ -40,6 +42,7 @@ const ManageDocumentType = ({ data, onClose, documentCategories = [] }) => {
register,
handleSubmit,
reset, watch,
control,
formState: { errors },
} = methods;
@ -96,7 +99,7 @@ const onSubmit = (payload) => {
<input
type="text"
{...register("name")}
className={`form-control form-control-sm `}
className={`form-control `}
/>
{errors.name && <a className="text-danger">{errors.name.message}</a>}
</div>
@ -107,7 +110,7 @@ const onSubmit = (payload) => {
<input
type="text"
{...register("regexExpression")}
className="form-control form-control-sm"
className="form-control "
/>
</div>
@ -117,7 +120,7 @@ const onSubmit = (payload) => {
<input
type="text"
{...register("allowedContentType")}
className={`form-control form-control form-control-sm`}
className={`form-control form-control `}
/>
{errors.allowedContentType && (
<a className="text-danger">{errors.allowedContentType.message}</a>
@ -130,7 +133,7 @@ const onSubmit = (payload) => {
<input
type="number"
{...register("maxSizeAllowedInMB", { valueAsNumber: true })}
className={`form-control form-control-sm`}
className={`form-control `}
/>
{errors.maxSizeAllowedInMB && (
<a className="text-danger">{errors.maxSizeAllowedInMB.message}</a>
@ -156,44 +159,56 @@ const onSubmit = (payload) => {
/>
<label className="form-check-label">Mandatory</label>
</div>
{/* Document Entity */}
<div className="col-12">
<label className="form-label">Document Entity</label>
<select
{...register("entityTypeId")}
className={`form-select form-select-sm`}
>
<option value="">-- Select Category --</option>
{Document_Entity.map((entity) => (
<option key={entity.key} value={entity.value}>
{entity.key}
</option>
))}
</select>
<AppFormController
name="entityTypeId"
control={control}
render={({ field }) => (
<SelectField
label="Document Entity"
options={Document_Entity ?? []}
placeholder="-- Select Category --"
required
labelKey="key"
valueKey="value"
value={field.value}
onChange={field.onChange}
className="m-0 w-100"
/>
)}
/>
{errors.entityTypeId && (
<a className="text-danger">{errors.entityTypeId.message}</a>
<small className="text-danger">{errors.entityTypeId.message}</small>
)}
</div>
{/* Category */}
<div className="col-12">
<Label required> Document Category</Label>
<select
{...register("documentCategoryId")}
className={`form-select form-select-sm`}
>
{isLoading && <option value="" disabled>Loading....</option> }
<option value="">-- Select Category --</option>
{!isLoading && DocumentCategories?.map((cat) => (
<option key={cat.id} value={cat.id}>
{cat.name}
</option>
))}
</select>
{/* Document Category */}
<div className="col-12 my-3">
<AppFormController
name="documentCategoryId"
control={control}
render={({ field }) => (
<SelectField
label="Document Category"
options={DocumentCategories ?? []}
placeholder={isLoading ? "Loading..." : "-- Select Category --"}
required
labelKey="name"
valueKey="id"
value={field.value}
onChange={field.onChange}
isLoading={isLoading}
className="m-0 w-100"
/>
)}
/>
{errors.documentCategoryId && (
<a className="text-danger">{errors.documentCategoryId.message}</a>
<small className="text-danger">{errors.documentCategoryId.message}</small>
)}
</div>
{/* Buttons */}
<div className="d-flex flex-row justify-content-end gap-3 ">
<button

2
src/components/master/ManagePaymentMode.jsx
View File

@ -56,7 +56,7 @@ const ManagePaymentMode = ({ data = null, onClose }) => {
/>
{errors.name && <p className="danger-text">{errors.name.message}</p>}
</div>
<div className="col-12 col-md-12 text-start">
<div className="col-12 col-md-12 text-start my-3">
<Label className="form-label" htmlFor="description" required>
Description
</Label>

6
src/components/master/Services/ManageActivity.jsx
View File

@ -145,7 +145,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
<input
type="text"
{...register("activityName")}
className={`form-control form-control-sm ${
className={`form-control ${
errors.activityName ? "is-invalid" : ""
}`}
/>
@ -161,7 +161,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
<input
type="text"
{...register("unitOfMeasurement")}
className={`form-control form-control-sm ${
className={`form-control ${
errors.unitOfMeasurement ? "is-invalid" : ""
}`}
/>
@ -203,7 +203,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
></input>
<input
{...register(`checkList.${index}.description`)}
className="form-control form-control-sm"
className="form-control "
placeholder={`Checklist item ${index + 1}`}
onChange={(e) =>
handleChecklistChange(index, e.target.value)

4
src/components/master/Services/ManageGroup.jsx
View File

@ -62,7 +62,7 @@ const ManageGroup = ({ group = null, whichService = null, close }) => {
<input
type="text"
{...register("name")}
className={`form-control form-control-sm ${errors.name ? "is-invalids" : ""
className={`form-control ${errors.name ? "is-invalids" : ""
}`}
/>
{errors.name && (
@ -76,7 +76,7 @@ const ManageGroup = ({ group = null, whichService = null, close }) => {
<textarea
rows="3"
{...register("description")}
className={`form-control form-control-sm ${errors.description ? "is-invalids" : ""
className={`form-control ${errors.description ? "is-invalids" : ""
}`}
></textarea>

2
src/components/master/Services/ManageServices.jsx
View File

@ -62,7 +62,7 @@ const ManageServices = ({ data , onClose }) => {
{errors.name && <p className="danger-text">{errors.name.message}</p>}
</div>
<div className="col-12 col-md-12 text-start">
<div className="col-12 col-md-12 text-start my-3">
<Label className="form-label" htmlFor="description" required>
Description
</Label>

2
src/components/master/Services/ServicesGroups.jsx
View File

@ -40,7 +40,7 @@ const ServiceGroups = ({ service }) => {
<div className="accordion" id="accordionExample">
<div className="accordion-item active shadow-none">
{/* Service Header */}
<div className="d-flex justify-content-between text-start align-items-center accordion-header py-1">
<div className="d-flex justify-content-between text-start align-items-center accordion-header py-3">
<p className="m-0 fw-bold fs-6">{service.name}</p>
<button
className="btn btn-sm btn-primary"

2
src/components/master/paymentAdjustmentHead/ManagePaymentHead.jsx
View File

@ -75,7 +75,7 @@ const ManagePaymentHead = ({ data, onClose }) => {
)}
</div>
<div className="mb-3">
<div className="my-3">
<Label htmlFor="description" required>
Description
</Label>

2
src/components/purchase/DeliveryChallane.jsx
View File

@ -142,7 +142,7 @@ const DeliveryChallane = ({ purchaseId }) => {
label="Select Document Type"
options={data ?? []}
placeholder="Choose Type"
labelKeyKey="name"
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}

2
src/components/purchase/PurchasePayment.jsx
View File

@ -111,7 +111,7 @@ const PurchasePayment = ({ onClose, purchaseId }) => {
options={paymentTypes?.data ?? []}
placeholder="Choose a Status"
required
labelKeyKey="name"
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}

2
src/components/purchase/PurchasePaymentDetails.jsx
View File

@ -223,7 +223,7 @@ const PurchasePaymentDetails = ({ purchaseId = null }) => {
label="Select Document Type"
options={InvoiceDocTypes ?? []}
placeholder="Choose Type"
labelKeyKey="name"
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}

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

@ -60,14 +60,14 @@ const TaskPlanning = () => {
<SelectField
label="Services"
placeholder="All Services"
options={data ?? []}
labelKeyKey="name"
valueKeyKey="id"
options={[{ id: "", name: "All Services" }, ...(data ?? [])]}
labelKey="name"
valueKey="id"
isLoading={servicesLoading}
value={field.value}
onChange={(val) => {
field.onChange(val); // react-hook-form update
dispatch(setService(val)); // Redux update
field.onChange(val);
dispatch(setService(val));
}}
className="m-0"
/>
@ -77,6 +77,7 @@ const TaskPlanning = () => {
</div>
{/* Planning Component */}
{selectedProject ? (
<InfraPlanning />

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

@ -107,15 +107,15 @@ const DailyProgrssReport = () => {
render={({ field }) => (
<SelectField
label="Services"
options={data ?? []}
placeholder="All Services"
labelKeyKey="name"
valueKeyKey="id"
options={[{ id: "", name: "All Projects" }, ...(data ?? [])]}
placeholder="Select Service"
labelKey="name"
valueKey="id"
isLoading={isLoading}
value={field.value}
onChange={(val) => {
field.onChange(val); // update RHF
setService(val); // update your local filter state
field.onChange(val);
setService(val);
}}
className="m-0"
/>
@ -129,6 +129,7 @@ const DailyProgrssReport = () => {
</div>
</div>
</DailyProgrssContext.Provider>
</div>
);

27
src/pages/authentication/ChangePassword.jsx
View File

@ -73,7 +73,6 @@ const ChangePasswordPage = () => {
<div className="row">
<h5 className="mb-2">Change Password</h5>
<p className="mb-4 text-black">
Enter old and new password to update.
@ -86,7 +85,7 @@ const ChangePasswordPage = () => {
<div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
<input
type={hideOldPass ? "password" : "text"}
className="form-control form-control-sm border-0 shadow-none"
className="form-control border-0 shadow-none"
{...register("oldPassword")}
placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
style={{ flex: 1 }}
@ -112,7 +111,7 @@ const ChangePasswordPage = () => {
<div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
<input
type={hideNewPass ? "password" : "text"}
className="form-control form-control-sm border-0 shadow-none"
className="form-control border-0 shadow-none"
{...register("newPassword")}
placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
style={{ flex: 1 }}
@ -142,7 +141,7 @@ const ChangePasswordPage = () => {
<div className="input-group input-group-merge d-flex align-items-center border rounded px-2">
<input
type={hideConfirmPass ? "password" : "text"}
className="form-control form-control-sm border-0 shadow-none"
className="form-control border-0 shadow-none"
{...register("confirmPassword")}
placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
style={{ flex: 1 }}
@ -168,28 +167,28 @@ const ChangePasswordPage = () => {
)}
</div>
<div className="d-flex justify-content-center pt-2 text-muted small text-black">
<div className="d-flex justify-content-center my-5 text-muted small text-black">
Your password must have at least 8 characters and include a lower
case letter, an uppercase letter, a number, and a special
character.
</div>
{/* Action Buttons */}
<div className="d-flex justify-content-center pt-4">
<button
type="submit"
className="btn btn-primary btn-sm me-2"
disabled={loading}
>
{loading ? "Please Wait..." : "Change Password"}
</button>
<div className="d-flex justify-content-end">
<button
type="button"
className="btn btn-outline-secondary btn-sm"
className="btn btn-outline-secondary btn-sm me-2"
onClick={onClose}
disabled={loading}
>
Cancel
</button>
<button
type="submit"
className="btn btn-primary btn-sm"
disabled={loading}
>
{loading ? "Please Wait..." : "Change Password"}
</button>
</div>
</form>
</div>

50
src/pages/master/MasterPage.jsx
View File

@ -15,6 +15,9 @@ import { changeMaster } from "../../slices/localVariablesSlice";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_MASTER } from "../../utils/constants";
import GlobalModel from "../../components/common/GlobalModel";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../../components/common/Forms/SelectField";
import { useForm } from "react-hook-form";
export const MasterContext = createContext();
@ -33,6 +36,11 @@ const MasterPage = () => {
(store) => store.localVariables.selectedMaster
);
const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
const { control, handleSubmit } = useForm({
defaultValues: {
masterSelection: selectedMaster || "",
},
});
const {
data: menuData,
@ -134,8 +142,6 @@ const MasterPage = () => {
/>
</GlobalModel>
)}
<ConfirmModal
type="delete"
header={`Delete ${selectedMaster}`}
@ -164,28 +170,34 @@ const MasterPage = () => {
<div className="row page-min-h">
<div className="card">
<div
className="card-datatable table-responsive py-2 py-md-10 mx-1 mx-md-5 "
className="card-datatable table-responsive py-2 py-md-6 mx-1 mx-md-5 "
style={{ overflow: "hidden" }}
>
<div className="row mb-2">
<div className="col-12 col-md-3">
<select
className="form-select py-1 px-2"
value={selectedMaster}
onChange={(e) => dispatch(changeMaster(e.target.value))}
>
{menuLoading ? (
<option value="">Loading...</option>
) : (
menuData?.map((item) => (
<option key={item.id} value={item.name}>
{item.name}
</option>
))
<div className="col-12 col-md-3 text-start">
<AppFormController
name="masterSelection"
control={control}
render={({ field }) => (
<SelectField
label="Select Master"
options={menuData ?? []}
placeholder={menuLoading ? "Loading..." : "Choose Master"}
required
labelKey="name"
valueKey="name"
value={field.value}
onChange={(val) => {
field.onChange(val); // update form value
dispatch(changeMaster(val)); // update Redux state
}}
isLoading={menuLoading}
className="m-0 w-100 py-1 px-2"
/>
)}
</select>
/>
</div>
<div className="col-12 col-md-9 d-flex justify-content-between justify-content-md-end align-items-center gap-2 mt-2 mt-md-0">
<div className="col-8 col-md-3">
<input

12
src/pages/master/MasterTable.jsx
View File

@ -80,7 +80,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
};
return (
<div className="table-responsive">
<div className="table-responsive mt-5">
{loading ? (
<p>Loading...</p>
) : (
@ -109,8 +109,8 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
<tbody>
{currentItems.length > 0 ? (
currentItems.map((item, index) => (
<tr key={index} >
<td style={{ width: "20px" }} className="py-3">
<tr key={index} style={{ height: "40px" }}>
<td className="py-3">
<i className="bx bx-right-arrow-alt"></i>
</td>
{updatedColumns.map((col) => (
@ -230,8 +230,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
{[...Array(totalPages)].map((_, index) => (
<li
key={index}
className={`page-item ${
currentPage === index + 1 ? "active" : ""
className={`page-item ${currentPage === index + 1 ? "active" : ""
}`}
>
<button
@ -243,8 +242,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
</li>
))}
<li
className={`page-item ${
currentPage === totalPages ? "disabled" : ""
className={`page-item ${currentPage === totalPages ? "disabled" : ""
}`}
>
<button