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

Merge pull request 'Adding_dropdown :- Adding custome dropdown across all the modal.' (#533) from Adding_dropdown into Purchase_Invoice_Management

Browse Source 
Reviewed-on: #533
merged
This commit is contained in:
pramod.mahajan 2025-12-06 11:30:46 +00:00
commit 8b3ca8d57a
58 changed files with 2541 additions and 2031 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Dashboard/ProjectProgressChart.jsx
View File

@ -1,6 +1,6 @@
import React, { useState } from "react";
import LineChart from "../Charts/LineChart";
import { useProjects } from "../../hooks/useProjects";
import { useProjectName } from "../../hooks/useProjects";
import { useDashboard_Data } from "../../hooks/useDashboard_Data";
import { useSelector } from "react-redux";
@ -11,7 +11,7 @@ const ProjectProgressChart = ({
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const { projects } = useProjects();
const { projectNames } = useProjectName();
const [range, setRange] = useState(DefaultRange);
const [showAllEmployees, setShowAllEmployees] = useState(false);
@ -79,7 +79,9 @@ const ProjectProgressChart = ({
})
);
const selectedProjectData = projects?.find((p) => p.id === selectedProject);
const selectedProjectData = projectNames?.find(
(p) => p.id === selectedProject
);
const selectedProjectName = selectedProjectData?.shortName?.trim()
? selectedProjectData.shortName
: selectedProjectData?.name;

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 ? (

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

@ -19,6 +19,8 @@ import SelectMultiple from "../common/SelectMultiple";
import { ContactSchema, defaultContactValue } from "./DirectorySchema";
import InputSuggestions from "../common/InputSuggestion";
import Label from "../common/Label";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
const ManageContact = ({ contactId, closeModal }) => {
// fetch master data
@ -194,7 +196,7 @@ const ManageContact = ({ contactId, closeModal }) => {
Name
</Label>
<input
className="form-control form-control-sm"
className="form-control "
{...register("name")}
/>
{errors.name && (
@ -210,6 +212,7 @@ const ManageContact = ({ contactId, closeModal }) => {
value={watch("organization") || ""}
onChange={(val) => setValue("organization", val, { shouldValidate: true })}
error={errors.organization?.message}
size="md"
/>
</div>
@ -222,7 +225,7 @@ const ManageContact = ({ contactId, closeModal }) => {
Designation
</Label>
<input
className="form-control form-control-sm"
className="form-control "
{...register("designation")}
onChange={handleDesignationChange}
/>
@ -257,7 +260,7 @@ const ManageContact = ({ contactId, closeModal }) => {
</div>
{/* Emails + Phones */}
<div className="row mt-1">
<div className="row mt-3">
<div className="col-md-6">
{emailFields.map((field, index) => (
<div
@ -265,22 +268,39 @@ const ManageContact = ({ contactId, closeModal }) => {
className="row d-flex align-items-center mb-1"
>
<div className="col-5 text-start">
<label className="form-label">Label</label>
<select
className="form-select form-select-sm"
{...register(`contactEmails.${index}.label`)}
>
<option value="Work">Work</option>
<option value="Personal">Personal</option>
<option value="Other">Other</option>
</select>
<AppFormController
name={`contactEmails.${index}.label`}
control={control}
render={({ field }) => (
<SelectField
label="Label"
options={[
{ id: "Work", name: "Work" },
{ id: "Personal", name: "Personal" },
{ id: "Other", name: "Other" }
]}
placeholder="Choose a Label"
required
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
className="m-0"
/>
)}
/>
{errors.contactEmails?.[index]?.label && (
<small className="danger-text">
{errors.contactEmails[index].label.message}
</small>
)}
</div>
<div className="col-7 text-start">
<div className="col-7 text-start mt-n3">
<label className="form-label">Email</label>
<div className="d-flex align-items-center">
<input
type="email"
className="form-control form-control-sm"
className="form-control "
{...register(`contactEmails.${index}.emailAddress`)}
placeholder="email@example.com"
/>
@ -308,27 +328,43 @@ const ManageContact = ({ contactId, closeModal }) => {
<div className="col-md-6">
{phoneFields.map((field, index) => (
<div
key={field.id}
className="row d-flex align-items-center mb-2"
>
<div key={field.id} className="row d-flex align-items-center mb-2">
<div className="col-5 text-start">
<label className="form-label">Label</label>
<select
className="form-select form-select-sm"
{...register(`contactPhones.${index}.label`)}
>
<option value="Office">Office</option>
<option value="Personal">Personal</option>
<option value="Business">Business</option>
</select>
<AppFormController
name={`contactPhones.${index}.label`}
control={control}
render={({ field }) => (
<SelectField
label="Label"
options={[
{ id: "Office", name: "Office" },
{ id: "Personal", name: "Personal" },
{ id: "Business", name: "Business" }
]}
placeholder="Choose a Label"
required
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
className="m-0"
/>
)}
/>
{errors.contactPhones?.[index]?.label && (
<small className="danger-text">
{errors.contactPhones[index].label.message}
</small>
)}
</div>
<div className="col-7 text-start">
<div className="col-7 text-start mt-n3">
<label className="form-label">Phone</label>
<div className="d-flex align-items-center">
<input
type="text"
className="form-control form-control-sm"
className="form-control "
{...register(`contactPhones.${index}.phoneNumber`)}
placeholder="9876543210"
/>
@ -350,42 +386,43 @@ const ManageContact = ({ contactId, closeModal }) => {
</small>
)}
</div>
</div>
))}
</div>
</div>
{/* Category + Projects */}
<div className="row my-1">
<div className="row">
<div className="col-md-6 text-start">
<label className="form-label">Category</label>
<select
className="form-select form-select-sm"
{...register("contactCategoryId")}
>
{contactCategoryLoading && !contactCategory ? (
<option disabled value="">
Loading...
</option>
) : (
<>
<option disabled value="">
Select Category
</option>
{contactCategory?.map((cate) => (
<option key={cate.id} value={cate.id}>
{cate.name}
</option>
))}
</>
<AppFormController
name="contactCategoryId"
control={control}
rules={{ required: "Category is required" }}
render={({ field }) => (
<SelectField
label="Category"
required
options={contactCategory ?? []}
placeholder="Select Category"
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
isLoading={contactCategoryLoading && !contactCategory}
className="m-0"
/>
)}
</select>
/>
{errors.contactCategoryId && (
<small className="danger-text">
{errors.contactCategoryId.message}
</small>
)}
</div>
<div className="col-12 col-md-6 text-start">
<SelectMultiple
name="projectIds"
@ -402,13 +439,14 @@ const ManageContact = ({ contactId, closeModal }) => {
</div>
{/* Tags */}
<div className="col-12 text-start">
<div className="col-12 text-start mt-3">
<TagInput
name="tags"
label="Tags"
options={contactTags}
isRequired={true}
placeholder="Enter Tag"
size="sm"
/>
{errors.tags && (
<small className="danger-text">{errors.tags.message}</small>
@ -417,8 +455,8 @@ const ManageContact = ({ contactId, closeModal }) => {
{/* Buckets */}
<div className="row">
<div className="col-md-12 mt-1 text-start">
<label className="form-label ">Select Bucket</label>
<div className="col-md-12 mt-3 text-start">
<label className="form-label mb-2">Select Bucket</label>
<ul className="d-flex flex-wrap px-1 list-unstyled mb-0">
{bucketsLoaging && <p>Loading...</p>}
{buckets?.map((item) => (
@ -454,15 +492,15 @@ const ManageContact = ({ contactId, closeModal }) => {
<div className="col-12 text-start">
<label className="form-label">Address</label>
<textarea
className="form-control form-control-sm"
className="form-control "
rows="2"
{...register("address")}
/>
</div>
<div className="col-12 text-start">
<div className="col-12 text-start mt-3">
<label className="form-label">Description</label>
<textarea
className="form-control form-control-sm"
className="form-control "
rows="2"
{...register("description")}
/>

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

@ -17,6 +17,8 @@ import {
import showToast from "../../services/toastService";
import { useDocumentContext } from "./Documents";
import { isPending } from "@reduxjs/toolkit";
import { AppFormController, AppFormProvider } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
const toBase64 = (file) =>
new Promise((resolve, reject) => {
@ -72,9 +74,12 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
handleSubmit,
watch,
setValue,
control,
reset,
formState: { errors },
} = methods;
const { mutate: UploadDocument, isPending: isUploading } = useUploadDocument(
() => {
showToast("Document Uploaded Successfully", "success");
@ -231,66 +236,74 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
const isPending = isUploading || isUpdating;
return (
<AppFormProvider {...methods}>
<div className="p-2">
<p className="fw-bold fs-6">Upload New Document</p>
<h5 className="">Upload New Document</h5>
<FormProvider key={documentTypeId} {...methods}>
<form onSubmit={handleSubmit(onSubmit)} className="text-start">
{/* Category */}
<div className="mb-2">
<Label htmlFor="documentCategoryId" required>Document Category</Label>
<select
{...register("documentCategoryId")}
className="form-select form-select-sm"
>
{isLoading && (
<option disabled value="">
Loading...
</option>
<div className="col-12 col-md-12 mb-2 mb-md-4">
<AppFormController
name="documentCategoryId"
control={control}
render={({ field }) => (
<SelectField
label="Document Category"
options={DocumentCategories ?? []}
placeholder="Select Category"
required
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
isLoading={isLoading}
className="m-0"
/>
)}
{!isLoading && <option value="">Select Category</option>}
{DocumentCategories?.map((type) => (
<option key={type.id} value={type.id}>
{type.name}
</option>
))}
</select>
/>
{errors.documentCategoryId && (
<div className="danger-text">
<small className="danger-text">
{errors.documentCategoryId.message}
</div>
</small>
)}
</div>
{/* Type */}
{categoryId && (
<div className="mb-2">
<Label htmlFor="documentTypeId" required>Document Type</Label>
<select
{...register("documentTypeId")}
className="form-select form-select-sm"
>
{isTypeLoading && (
<option disabled value="">
Loading...
</option>
<div className="col-12 col-md-12 mb-2 mb-md-4">
<AppFormController
name="documentTypeId"
control={control}
render={({ field }) => (
<SelectField
label="Document Type"
options={DocumentTypes ?? []}
placeholder="Select Document Type"
required
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
isLoading={isTypeLoading}
className="m-0"
/>
)}
{DocumentTypes?.map((type) => (
<option key={type.id} value={type.id}>
{type.name}
</option>
))}
</select>
/>
{errors.documentTypeId && (
<div className="danger-text">
<small className="danger-text">
{errors.documentTypeId.message}
</div>
</small>
)}
</div>
)}
{/* Document ID */}
<div className="mb-2">
<div className="mb-4">
<label
htmlFor="documentId"
required={selectedType?.isMandatory ?? false}
@ -299,7 +312,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
</label>
<input
type="text"
className="form-control form-control-sm"
className="form-control "
{...register("documentId")}
/>
{errors.documentId && (
@ -314,7 +327,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
</Label>
<input
type="text"
className="form-control form-control-sm"
className="form-control "
{...register("name")}
/>
{errors.name && (
@ -325,7 +338,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
{/* Upload */}
<div className="row my-2">
<div className="row my-4">
<div className="col-md-12">
<Label htmlFor="attachment" required>Upload Document</Label>
@ -384,7 +397,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
)}
</div>
</div>
<div className="mb-2">
<div className="mb-4">
<TagInput name="tags" label="Tags" placeholder="Tags.." options={DocumentTags} />
{errors.tags && (
<small className="danger-text">{errors.tags.message}</small>
@ -392,7 +405,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
</div>
{/* Description */}
<div className="mb-2">
<div className="mb-4">
<Label htmlFor="description" required>Description</Label>
<textarea
rows="2"
@ -425,6 +438,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
</form>
</FormProvider>
</div>
</AppFormProvider>
);
};

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

@ -21,7 +21,7 @@ const EmpActivities = ({ employee }) => {
if (isLoading) return <div>Loading...</div>
return (
<>
<div className="card h-100 mt-4">
<div className="card page-min-h mt-3">
<div className="card-body">
<div className="my-0 text-start">
<DateRangePicker

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

@ -71,7 +71,7 @@ const EmpAttendance = () => {
<AttendLogs Id={attendanceId} />
</GlobalModel>
)}
<div className="card px-4 mt-5 py-2 " style={{ minHeight: "500px" }}>
<div className="card px-4 mt-3 py-2 " style={{ minHeight: "500px" }}>
<div
className="dataTables_length text-start py-2 d-flex justify-content-between "
id="DataTables_Table_0_length"

4
src/components/Employee/EmpDashboard.jsx
View File

@ -18,7 +18,7 @@ const EmpDashboard = ({ profile }) => {
<EmpOverview profile={profile}></EmpOverview>
</div>
<div className="col col-sm-6 pt-5">
<div className="col col-sm-6 mt-3">
<div className="card ">
<div className="card-body">
<small className="card-text text-uppercase text-body-secondary small text-start d-block">
@ -82,7 +82,7 @@ const EmpDashboard = ({ profile }) => {
</div>
</div>
</div>
<div className="col-12 col-sm-6 pt-5">
<div className="col-12 col-sm-6 pt-2">
<EmpReportingManager
employeeId={profile?.id}
employee={profile}

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

@ -9,7 +9,9 @@ const EmpDocuments = ({ profile, loggedInUser }) => {
const { employeeId } = useParams()
return (
<>
<div className="mt-3">
<Documents Document_Entity={DOCUMENTS_ENTITIES.EmployeeEntity} Entity={employeeId} />
</div>
</>
);
};

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

@ -5,7 +5,7 @@ const EmpOverview = ({ profile }) => {
const { loggedInUserProfile } = useProfile();
return (
<div className="row">
<div className="row mt-n2">
<div className="col-12 mb-4">
<div className="card">
<div className="card-body">

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

@ -17,6 +17,8 @@ import DatePicker from "../common/DatePicker";
import { defatEmployeeObj, employeeSchema } from "./EmployeeSchema";
import { useOrganizationsList } from "../../hooks/useOrganization";
import { ITEMS_PER_PAGE } from "../../utils/constants";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
const ManageEmployee = ({ employeeId, onClosed }) => {
const dispatch = useDispatch();
@ -147,7 +149,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
message: "Only letters are allowed",
},
})}
className="form-control form-control-sm"
className="form-control "
id="firstName"
placeholder="First Name"
onInput={(e) => {
@ -173,7 +175,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
message: "Only letters are allowed",
},
})}
className="form-control form-control-sm"
className="form-control "
id="middleName"
placeholder="Middle Name"
onInput={(e) => {
@ -201,7 +203,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
message: "Only letters are allowed",
},
})}
className="form-control form-control-sm"
className="form-control "
id="lastName"
placeholder="Last Name"
onInput={(e) => {
@ -231,7 +233,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
type="email"
id="email"
{...register("email")}
className="form-control form-control-sm"
className="form-control "
placeholder="example@domain.com"
maxLength={80}
aria-describedby="Email"
@ -255,7 +257,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
keyboardType="numeric"
id="phoneNumber"
{...register("phoneNumber")}
className="form-control form-control-sm"
className="form-control "
placeholder="Phone Number"
inputMode="numeric"
maxLength={10}
@ -272,7 +274,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
</div>
<div className="row mb-3"></div>
<div className="row mb-3">
<div className="col-sm-4">
{/* <div className="col-sm-4">
<Label className="form-text text-start" required>
Gender
</Label>
@ -300,7 +302,44 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
{errors.gender.message}
</div>
)}
</div> */}
<div className="col-sm-4">
<Label className="form-text text-start" required>
Gender
</Label>
<div className="">
<AppFormController
name="gender"
control={control}
render={({ field }) => (
<SelectField
label=""
options={[
{ id: "Male", name: "Male" },
{ id: "Female", name: "Female" },
{ id: "Other", name: "Other" },
]}
placeholder="Select Gender"
required
labelKey="name"
valueKey="id"
value={field.value}
onChange={field.onChange}
/>
)}
/>
</div>
{errors.gender && (
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
{errors.gender.message}
</div>
)}
</div>
<div className="col-sm-4">
<Label className="form-text text-start" required>
Birth Date
@ -358,7 +397,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<textarea
id="currentAddress"
className="form-control form-control-sm"
className="form-control "
placeholder="Current Address"
aria-label="Current Address"
aria-describedby="basic-icon-default-message2"
@ -388,7 +427,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<textarea
id="permanentAddress"
className="form-control form-control-sm"
className="form-control "
placeholder="Permanent Address"
aria-label="Permanent Address"
aria-describedby="basic-icon-default-message2"
@ -419,25 +458,34 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<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 Organization
</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>
<AppFormController
name="organizationId"
control={control}
render={({ field }) => (
<SelectField
label="" // Already showing label above
options={
organzationList?.data
?.sort((a, b) => a?.name?.localeCompare(b?.name))
?.map((item) => ({
id: item.id,
name: item.name,
})) || []
}
placeholder="Select Organization"
required
labelKey="name"
valueKey="id"
value={field.value}
onChange={field.onChange}
className="m-0 form-select-sm w-100"
/>
)}
/>
</div>
{errors.organizationId && (
<div
className="danger-text text-start justify-content-center"
@ -448,6 +496,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
)}
</div>
<div className="col-sm-6 d-flex align-items-center mt-2">
<label className="form-check-label d-flex align-items-center">
<input
@ -468,46 +517,42 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
</div>
</div>
<div className="row mb-3">
<div className="col-sm-4">
<Label className="form-text text-start" required>
Official Designation
</Label>
<div className="input-group">
<select
className="form-select form-select-sm"
{...register("jobRoleId")}
id="jobRoleId"
aria-label=""
>
<option disabled value="">
Select Role
</option>
{[...job_role]
.sort((a, b) => a?.name?.localeCompare(b.name))
.map((item) => (
<option value={item?.id} key={item.id}>
{item?.name}{" "}
</option>
))}
</select>
</div>
<div className="col-sm-4 text-start">
<AppFormController
name="jobRoleId"
control={control}
render={({ field }) => (
<SelectField
label="Official Designation"
required
options={[...job_role].sort((a, b) =>
a?.name?.localeCompare(b?.name)
)}
placeholder="Select Role"
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
className="m-0"
/>
)}
/>
{errors.jobRoleId && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
{errors.jobRoleId.message}
</div>
)}
</div>
<div className="col-sm-4">
<div className="col-sm-4 mt-n1">
<Label className="form-text text-start" required>
Emergency Contact Person
</Label>
<input
type="text"
{...register("emergencyContactPerson")}
className="form-control form-control-sm"
className="form-control "
id="emergencyContactPerson"
maxLength={50}
placeholder="Contact Person"
@ -521,14 +566,14 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
</div>
)}
</div>
<div className="col-sm-4">
<div className="col-sm-4 mt-n1">
<Label className="form-text text-start" required>
Emergency Phone Number
</Label>
<input
type="text"
{...register("emergencyPhoneNumber")}
className="form-control form-control-sm phone-mask"
className="form-control phone-mask"
id="emergencyPhoneNumber"
placeholder="Phone Number"
inputMode="numeric"
@ -551,7 +596,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<input
type="text"
{...register("aadharNumber")}
className="form-control form-control-sm"
className="form-control "
id="aadharNumber"
placeholder="AADHAR Number"
maxLength={12}
@ -569,7 +614,7 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
<input
type="text"
{...register("panNumber")}
className="form-control form-control-sm"
className="form-control "
id="panNumber"
placeholder="PAN Number"
maxLength={10}

120
src/components/Expenses/ManageExpense.jsx
View File

@ -37,6 +37,7 @@ import SelectEmployeeServerSide, {
} from "../common/Forms/SelectFieldServerSide";
import { useAllocationServiceProjectTeam } from "../../hooks/useServiceProject";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
const {
@ -259,30 +260,32 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
<Label htmlFor="expenseCategoryId" className="form-label" required>
Expense Category
</Label>
<select
className="form-select "
id="expenseCategoryId"
{...register("expenseCategoryId")}
>
<option value="" disabled>
Select Category
</option>
{ExpenseLoading ? (
<option disabled>Loading...</option>
) : (
expenseCategories?.map((expense) => (
<option key={expense.id} value={expense.id}>
{expense.name}
</option>
))
<AppFormController
name="expenseCategoryId"
control={control}
rules={{ required: "Expense Category is required" }}
render={({ field }) => (
<SelectField
label="" // Label already shown above
placeholder="Select Category"
options={expenseCategories ?? []}
value={field.value || ""}
onChange={field.onChange}
required
isLoading={ExpenseLoading}
className="m-0 form-select-sm w-100"
/>
)}
</select>
{errors.expensesCategoryId && (
/>
{errors.expenseCategoryId && (
<small className="danger-text">
{errors.expensesCategoryId.message}
{errors.expenseCategoryId.message}
</small>
)}
</div>
</div>
<div className="row my-2 text-start">
@ -290,30 +293,30 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
<Label htmlFor="paymentModeId" className="form-label" required>
Payment Mode
</Label>
<select
className="form-select "
id="paymentModeId"
{...register("paymentModeId")}
>
<option value="" disabled>
Select Mode
</option>
{PaymentModeLoading ? (
<option disabled>Loading...</option>
) : (
PaymentModes?.map((payment) => (
<option key={payment.id} value={payment.id}>
{payment.name}
</option>
))
<AppFormController
name="paymentModeId"
control={control}
rules={{ required: "Payment Mode is required" }}
render={({ field }) => (
<SelectField
label="" // Label is shown above
placeholder="Select Mode"
options={PaymentModes ?? []}
value={field.value || ""}
onChange={field.onChange}
required
isLoading={PaymentModeLoading}
className="m-0 form-select-sm w-100"
/>
)}
</select>
/>
{errors.paymentModeId && (
<small className="danger-text">
{errors.paymentModeId.message}
</small>
<small className="danger-text">{errors.paymentModeId.message}</small>
)}
</div>
<div className="col-12 col-md-6 text-start">
<AppFormController
name="paidById"
@ -441,28 +444,33 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
<Label htmlFor="currencyId" className="form-label" required>
Select Currency
</Label>
<select
className="form-select "
id="currencyId"
{...register("currencyId")}
>
<option value="" disabled>
Select Currency
</option>
{currencyLoading ? (
<option disabled>Loading...</option>
) : (
currencies?.map((currency) => (
<option key={currency.id} value={currency.id}>
{`${currency.currencyName} (${currency.symbol}) `}
</option>
))
<AppFormController
name="currencyId"
control={control}
rules={{ required: "Currency is required" }}
render={({ field }) => (
<SelectField
label="" // Label already shown above
placeholder="Select Currency"
options={currencies?.map((currency) => ({
id: currency.id,
name: `${currency.currencyName} (${currency.symbol})`,
})) ?? []}
value={field.value || ""}
onChange={field.onChange}
required
isLoading={currencyLoading}
className="m-0 form-select-sm w-100"
/>
)}
</select>
/>
{errors.currencyId && (
<small className="danger-text">{errors.currencyId.message}</small>
)}
</div>
{expenseCategory?.noOfPersonsRequired && (
<div className="col-md-6 text-start">
<Label className="form-label" required>

89
src/components/PaymentRequest/ManagePaymentRequest.jsx
View File

@ -30,6 +30,8 @@ import InputSuggestions from "../common/InputSuggestion";
import { useProfile } from "../../hooks/useProfile";
import { blockUI } from "../../utils/blockUI";
import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
const {
@ -281,33 +283,33 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
<Label htmlFor="expenseCategoryId" className="form-label" required>
Expense Category
</Label>
<select
className="form-select "
id="expenseCategoryId"
{...register("expenseCategoryId")}
disabled={
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
}
>
<option value="" disabled>
Select Category
</option>
{ExpenseLoading ? (
<option disabled>Loading...</option>
) : (
expenseCategories?.map((expense) => (
<option key={expense.id} value={expense.id}>
{expense.name}
</option>
))
<AppFormController
name="expenseCategoryId"
control={control}
rules={{ required: "Expense Category is required" }}
render={({ field }) => (
<SelectField
label="" // Label already above
placeholder="Select Category"
options={expenseCategories ?? []}
value={field.value || ""}
onChange={field.onChange}
required
isLoading={ExpenseLoading}
isDisabled={data?.recurringPayment?.isVariable && !isDraft && !isProcessed}
className="m-0 form-select-sm w-100"
/>
)}
</select>
/>
{errors.expenseCategoryId && (
<small className="danger-text">
{errors.expenseCategoryId.message}
</small>
)}
</div>
</div>
{/* Title and Advance Payment */}
@ -458,30 +460,39 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
<Label htmlFor="currencyId" className="form-label" required>
Currency
</Label>
<select
id="currencyId"
className="form-select "
{...register("currencyId")}
disabled={
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
<AppFormController
name="currencyId"
control={control}
rules={{ required: "Currency is required" }}
render={({ field }) => (
<SelectField
label="" // Label already above
placeholder="Select Currency"
options={currencyData?.map((currency) => ({
id: currency.id,
name: `${currency.currencyName} (${currency.symbol})`,
})) ?? []}
value={field.value || ""}
onChange={field.onChange}
required
isLoading={currencyLoading}
isDisabled={data?.recurringPayment?.isVariable && !isDraft && !isProcessed}
noOptionsMessage={() =>
!currencyLoading && !currencyError && (!currencyData || currencyData.length === 0)
? "No currency found"
: null
}
>
<option value="">Select Currency</option>
className="m-0 form-select-sm w-100"
/>
)}
/>
{currencyLoading && <option>Loading...</option>}
{!currencyLoading &&
!currencyError &&
currencyData?.map((currency) => (
<option key={currency.id} value={currency.id}>
{`${currency.currencyName} (${currency.symbol})`}
</option>
))}
</select>
{errors.currencyId && (
<small className="danger-text">{errors.currencyId.message}</small>
)}
</div>
</div>
{/* Description */}
@ -508,7 +519,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
</div>
{/* Upload Document */}
<div className="row my-2 text-start">
<div className="row my-4 text-start">
<div className="col-md-12">
<Label className="form-label">Upload Bill </Label>

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

@ -18,6 +18,8 @@ import {
import eventBus from "../../services/eventBus";
import { useCreateTask } from "../../hooks/useTasks";
import Label from "../common/Label";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
const TaskSchema = (maxPlanned) => {
return z.object({
@ -107,7 +109,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
);
const dispatch = useDispatch();
const { loading, data: jobRoleData } = useMaster();
const { loading, data: jobRoleData } = useMaster("Job Role");
const [selectedRoles, setSelectedRoles] = useState(["all"]);
const [displayedSelection, setDisplayedSelection] = useState("");
@ -241,48 +243,57 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
<div className="row mb-1">
<div className="col-12">
<div className="row text-start">
<div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center">
<div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center mt-4">
<div>
<select
className="form-select form-select-sm"
value={selectedOrganization || ""}
onChange={(e) =>
setSelectedOrganization(e.target.value)
}
>
{isServiceLoading ? (
<option>Loading...</option>
) : (
<>
<option value="">--Select Organization--</option>
{organizationList?.map((org,index) => (
<option key={`${org.id}-${index}`} value={org.id}>
{org.name}
</option>
))}
</>
<AppFormController
name="organizationId"
control={control}
rules={{ required: "Organization is required" }}
render={({ field }) => (
<SelectField
label="" // No label here, use external label if needed
options={organizationList ?? []}
placeholder="--Select Organization--"
required
labelKey="name"
valueKeyKey="id"
value={field.value || ""}
onChange={field.onChange}
isLoading={isServiceLoading}
className="m-0 form-select-sm w-100"
/>
)}
/>
{errors.organizationId && (
<small className="danger-text">{errors.organizationId.message}</small>
)}
</select>
</div>
<div>
<select
className="form-select form-select-sm"
value={selectedService || ""}
onChange={(e) => setSelectedService(e.target.value)}
>
{isOrgLoading ? (
<option>Loading...</option>
) : (
<>
<option value="">--Select Service--</option>
{serviceList?.map((service,index) => (
<option key={`${service.id}-${index}`} value={service.id}>
{service.name}
</option>
))}
</>
<AppFormController
name="serviceId"
control={control}
rules={{ required: "Service is required" }}
render={({ field }) => (
<SelectField
label="" // No label as you have one above or elsewhere
options={serviceList ?? []}
placeholder="--Select Service--"
required
labelKey="name"
valueKeyKey="id"
value={field.value || ""}
onChange={field.onChange}
isLoading={isOrgLoading}
className="m-0 form-select-sm w-100"
/>
)}
/>
{errors.serviceId && (
<small className="danger-text">{errors.serviceId.message}</small>
)}
</select>
</div>
</div>
<div
@ -292,8 +303,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
{/* Dropdown */}
<div className="dropdown position-relative d-inline-block">
<a
className={`dropdown-toggle hide-arrow cursor-pointer ${
selectedRoles.includes("all") ||
className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") ||
selectedRoles.length === 0
? "text-secondary"
: "text-primary"

103
src/components/Project/Infrastructure/BuildingModel.jsx
View File

@ -3,11 +3,11 @@ import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useSelector } from "react-redux";
import { getCachedData } from "../../../slices/apiDataManager";
import showToast from "../../../services/toastService";
import { useManageProjectInfra } from "../../../hooks/useProjects";
import useSelect from "../../common/useSelect";
import Label from "../../common/Label";
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
import SelectField from "../../common/Forms/SelectField";
const buildingSchema = z.object({
Id: z.string().optional(),
@ -22,14 +22,8 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
const selectedProject = useSelector(
(store) => store.localVariables.projectId
);
const {
register,
handleSubmit,
formState: { errors },
setValue,
watch,
reset,
} = useForm({
const methods = useForm({
resolver: zodResolver(buildingSchema),
defaultValues: {
Id: "0",
@ -37,12 +31,23 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
description: "",
},
});
const {
register,
handleSubmit,
control,
watch,
reset,
setValue,
formState: { errors },
} = methods;
const watchedId = watch("Id");
const { mutate: ManageBuilding, isPending } = useManageProjectInfra({
onSuccessCallback: (data, variables) => {
onSuccessCallback: () => {
showToast(
watchedId != "0"
watchedId !== "0"
? "Building updated Successfully"
: "Building created Successfully",
"success"
@ -79,7 +84,7 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
description: editingBuilding.description,
});
}
}, [editingBuilding]);
}, [editingBuilding, reset]);
const onSubmitHandler = (data) => {
const payload = {
@ -88,36 +93,54 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
projectId: selectedProject,
};
let infraObject = [
const infraObject = [
{
building: payload,
floor: null,
workArea: null,
},
];
ManageBuilding({ infraObject, projectId: selectedProject });
};
return (
<AppFormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
<h5 className="text-center mb-2">Manage Buildings</h5>
{/* Building Select */}
<div className="col-12 text-start">
<label className="form-label">Select Building</label>
<select
{...register("Id")}
className="select2 form-select form-select-sm"
>
<option value="0">Add New Building</option>
{sortedBuildings.length > 0 ? (
sortedBuildings.map((b) => (
<option key={b.id} value={b.id}>
{b.buildingName}
</option>
))
) : (
<option disabled>No buildings found</option>
<Label htmlFor="Id" className="form-label">
Select Building
</Label>
<AppFormController
name="Id"
control={control}
rules={{ required: "Building is required" }}
render={({ field }) => (
<SelectField
label=""
placeholder="Select Building"
options={[
{ id: "0", name: "Add New Building" },
...(sortedBuildings?.map((b) => ({
id: String(b.id),
name: b.buildingName,
})) ?? []),
]}
value={field.value || ""}
onChange={field.onChange}
required
noOptionsMessage={() =>
!sortedBuildings || sortedBuildings.length === 0
? "No buildings found"
: null
}
className="m-0 form-select-sm w-100"
/>
)}
</select>
/>
{errors.Id && <span className="danger-text">{errors.Id.message}</span>}
</div>
@ -129,27 +152,28 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
<input
{...register("name")}
type="text"
className="form-control form-control-sm"
className="form-control "
/>
{errors.name && (
<span className="danger-text">{errors.name.message}</span>
)}
{errors.name && <span className="danger-text">{errors.name.message}</span>}
</div>
{/* Description */}
<div className="col-12 text-start">
<Label className="form-label" required>Description</Label>
<Label className="form-label" required>
Description
</Label>
<textarea
{...register("description")}
rows="5"
maxLength="160"
className="form-control form-control-sm"
className="form-control "
/>
{errors.description && (
<span className="danger-text">{errors.description.message}</span>
)}
</div>
{/* Buttons */}
<div className="col-12 text-end mt-6 my-2">
<button
type="reset"
@ -162,21 +186,16 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
>
Cancel
</button>
<button
type="submit"
className="btn btn-sm btn-primary"
disabled={isPending}
>
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
{isPending
? "Please wait..."
: watchedId !== "0"
? "Edit Building"
: "Add Building"}
</button>
</div>
</form>
</AppFormProvider>
);
};

82
src/components/Project/Infrastructure/EditActivityModal.jsx
View File

@ -12,6 +12,8 @@ import { useManageTask } from "../../../hooks/useProjects";
import { cacheData, getCachedData } from "../../../slices/apiDataManager";
import { refreshData } from "../../../slices/localVariablesSlice";
import showToast from "../../../services/toastService";
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
import SelectField from "../../common/Forms/SelectField";
const taskSchema = z
.object({
@ -37,17 +39,7 @@ const EditActivityModal = ({
const { activities, loading: loadingActivities } = useActivitiesMaster();
const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
const [selectedActivity, setSelectedActivity] = useState(null);
const {
register,
handleSubmit,
formState: { errors },
reset,
setValue,
getValues,
watch,
} = useForm({
resolver: zodResolver(taskSchema),
const methods = useForm({
defaultValues: {
activityID: "",
workCategoryId: "",
@ -55,7 +47,11 @@ const EditActivityModal = ({
completedWork: 0,
comment: "",
},
resolver: zodResolver(taskSchema),
});
const { register, control, watch, handleSubmit, reset, setValue, getValues, formState: { errors } } = methods;
const { mutate: UpdateTask, isPending } = useManageTask({
onSuccessCallback: (response) => {
showToast(response?.message, "success")
@ -63,8 +59,6 @@ const EditActivityModal = ({
}
});
const activityID = watch("activityID");
const sortedActivities = useMemo(
@ -126,6 +120,7 @@ const EditActivityModal = ({
});
}
return (
<AppFormProvider {...methods}>
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
<div className="text-center mb-1">
<h5 className="mb-1">Manage Task</h5>
@ -135,7 +130,7 @@ const EditActivityModal = ({
<div className="col-12 col-md-6">
<label className="form-label">Select Building</label>
<input
className="form-control form-control-sm"
className="form-control"
value={building?.buildingName}
disabled
/>
@ -144,7 +139,7 @@ const EditActivityModal = ({
<div className="col-12 col-md-6">
<label className="form-label">Select Floor</label>
<input
className="form-control form-control-sm"
className="form-control"
value={floor?.floorName}
disabled
/>
@ -154,7 +149,7 @@ const EditActivityModal = ({
<div className="col-12 text-start">
<label className="form-label">Select Work Area</label>
<input
className="form-control form-control-sm"
className="form-control"
value={workArea?.areaName}
disabled
/>
@ -162,7 +157,7 @@ const EditActivityModal = ({
<div className="col-12 text-start">
<label className="form-label">Select Service</label>
<input
className="form-control form-control-sm"
className="form-control"
value={
workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
}
@ -175,7 +170,7 @@ const EditActivityModal = ({
<label className="form-label">Select Activity</label>
<select
{...register("activityID")}
className="form-select form-select-sm"
className="form-select"
disabled
>
<option >Select Activity</option>
@ -195,36 +190,44 @@ const EditActivityModal = ({
</div>
<div className="col-12 text-start">
<label className="form-label">Select Work Category</label>
<select
{...register("workCategoryId")}
className="form-select form-select-sm"
>
<option disabled>Select Category</option>
{loadingCategories ? (
<option>Loading...</option>
) : (
sortedCategories.map((c) => (
<option key={c.id} value={c.id}>
{c.name}
</option>
))
<AppFormController
name="workCategoryId"
control={control}
render={({ field }) => (
<SelectField
label="Select Work Category"
placeholder="Select Category"
options={
loadingCategories
? []
: sortedCategories?.map((c) => ({
id: String(c.id),
name: c.name,
})) ?? []
}
isLoading={loadingCategories}
labelKey="name"
valueKey="id"
value={field.value}
onChange={field.onChange}
className="m-0"
/>
)}
</select>
/>
{errors.workCategoryId && (
<p className="danger-text">{errors.workCategoryId.message}</p>
<small className="danger-text">{errors.workCategoryId.message}</small>
)}
</div>
<div className="col-5 text-start">
<label className="form-label">Planned Work</label>
<input
{...register("plannedWork", { valueAsNumber: true })}
type="number"
step="0.01" // <-- allows 2 decimal places
className="form-control form-control-sm"
className="form-control"
/>
{errors.plannedWork && (
<p className="danger-text">{errors.plannedWork.message}</p>
)}
@ -236,7 +239,7 @@ const EditActivityModal = ({
{...register("completedWork", { valueAsNumber: true })}
type="number"
disabled={getValues("completedWork") > 0}
className="form-control form-control-sm"
className="form-control"
/>
{errors.completedWork && (
<p className="danger-text">{errors.completedWork.message}</p>
@ -246,7 +249,7 @@ const EditActivityModal = ({
<div className="col-2 text-start">
<label className="form-label">Unit</label>
<input
className="form-control form-control-sm"
className="form-control"
disabled
value={selectedActivity?.unitOfMeasurement || ""}
/>
@ -278,6 +281,7 @@ const EditActivityModal = ({
</button>
</div>
</form>
</AppFormProvider>
);
};

126
src/components/Project/Infrastructure/FloorModel.jsx
View File

@ -6,6 +6,8 @@ import showToast from "../../../services/toastService";
import { useManageProjectInfra } from "../../../hooks/useProjects";
import { useSelector } from "react-redux";
import Label from "../../common/Label";
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
import SelectField from "../../common/Forms/SelectField";
// Schema
const floorSchema = z.object({
@ -27,17 +29,12 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
);
const [selectedBuilding, setSelectedBuilding] = useState(null);
const {
register,
handleSubmit,
setValue,
reset,
watch,
formState: { errors },
} = useForm({
const methods = useForm({
defaultValues,
resolver: zodResolver(floorSchema),
});
const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
const watchId = watch("id");
const watchBuildingId = watch("buildingId");
const { mutate: ManageFloor, isPending } = useManageProjectInfra({
@ -98,62 +95,106 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
};
return (
<AppFormProvider {...methods}>
<form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
<div className="text-center mb-1">
<h5 className="mb-1">Manage Floor</h5>
</div>
<div className="col-12 text-start">
<Label className="form-label" required>Select Building</Label>
<select
{...register("buildingId")}
className="form-select form-select-sm"
onChange={handleBuildingChange}
>
<option value="0">Select Building</option>
{project?.length > 0 &&
<Label className="form-label" required>
Select Building
</Label>
<AppFormController
name="buildingId"
control={control}
rules={{ required: "Building is required" }}
render={({ field }) => (
<SelectField
label=""
placeholder="Select Building"
options={
project
.filter((b) => b.buildingName)
?.filter((b) => b.buildingName)
.sort((a, b) => a.buildingName.localeCompare(b.buildingName))
.map((b) => (
<option key={b.id} value={b.id}>
{b.buildingName}
</option>
))}
</select>
{errors.buildingId && (
<p className="danger-text">{errors.buildingId.message}</p>
.map((b) => ({ id: String(b.id), name: b.buildingName })) ?? []
}
value={field.value || ""}
onChange={(value) => {
field.onChange(value);
setValue("id", "0");
setValue("floorName", "");
}}
required
noOptionsMessage={() => (!project || project.length === 0 ? "No buildings found" : null)}
className="m-0 form-select-sm w-100"
/>
)}
/>
{errors.buildingId && <p className="danger-text">{errors.buildingId.message}</p>}
</div>
{watchBuildingId !== "0" && (
<>
<div className="col-12 text-start">
<label className="form-label">Select Floor</label>
<select
{...register("id")}
className="form-select form-select-sm"
onChange={handleFloorChange}
>
<option value="0">Add New Floor</option>
{selectedBuilding?.floors?.length > 0 &&
selectedBuilding.floors
.filter((f) => f.floorName)
<Label className="form-label">
Select Floor
</Label>
<AppFormController
name="id"
control={control}
rules={{ required: "Floor is required" }}
render={({ field }) => {
// Prepare options
const floorOptions = [
{ id: "0", name: "Add New Floor" },
...(selectedBuilding?.floors
?.filter((f) => f.floorName)
.sort((a, b) => a.floorName.localeCompare(b.floorName))
.map((f) => (
<option key={f.id} value={f.id}>
{f.floorName}
</option>
))}
</select>
.map((f) => ({ id: f.id, name: f.floorName })) ?? []),
];
return (
<SelectField
label=""
placeholder="Select Floor"
options={floorOptions}
value={field.value || "0"} // default to "0"
onChange={(val) => {
field.onChange(val); // update react-hook-form
if (val === "0") {
setValue("floorName", ""); // clear for new floor
} else {
const floor = selectedBuilding?.floors?.find(f => f.id === val);
setValue("floorName", floor?.floorName || "");
}
}}
required
noOptionsMessage={() =>
!selectedBuilding?.floors || selectedBuilding.floors.length === 0
? "No floors found"
: null
}
className="m-0 form-select-sm w-100"
/>
);
}}
/>
{errors.id && (
<span className="danger-text">{errors.id.message}</span>
)}
</div>
<div className="col-12 text-start">
<Label className="form-label" required>
{watchId !== "0" ? "Edit Floor Name" : "New Floor Name"}
</Label>
<input
{...register("floorName")}
className="form-control form-control-sm"
className="form-control"
placeholder="Floor Name"
/>
{errors.floorName && (
@ -186,6 +227,7 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
</div>
</form>
</AppFormProvider>
);
};

294
src/components/Project/Infrastructure/TaskModel.jsx
View File

@ -12,6 +12,8 @@ import { useManageTask, useProjectAssignedOrganizationsName, useProjectAssigned
import showToast from "../../../services/toastService";
import Label from "../../common/Label";
import { useSelectedProject } from "../../../slices/apiDataManager";
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
import SelectField from "../../common/Forms/SelectField";
const taskSchema = z.object({
buildingID: z.string().min(1, "Building is required"),
@ -76,19 +78,13 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
setValue("activityID", "");
};
const {
register,
handleSubmit,
watch,
setValue,
reset,
formState: { errors },
} = useForm({
resolver: zodResolver(taskSchema),
const methods = useForm({
defaultValues: defaultModel,
resolver: zodResolver(taskSchema),
});
const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
const [isSubmitting, setIsSubmitting] = useState(false);
const [activityData, setActivityData] = useState([]);
const [categoryData, setCategoryData] = useState([]);
@ -148,152 +144,217 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
};
return (
<AppFormProvider {...methods}>
<form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
<div className="text-center mb-1">
<h5 className="mb-1">Manage Task</h5>
</div>
{/* Select Building */}
<div className="col-6 text-start">
<Label className="form-label" required>Select Building</Label>
<select
className="form-select form-select-sm"
{...register("buildingID")}
>
<option value="">Select Building</option>
{project
?.filter((b) => b?.buildingName)
?.sort((a, b) => a?.buildingName.localeCompare(b.buildingName))
?.map((b) => (
<option key={b.id} value={b.id}>
{b.buildingName}
</option>
))}
</select>
<AppFormController
name="buildingID"
control={control}
render={({ field }) => (
<SelectField
label="Select Building"
options={project ?? []}
placeholder="Select Building"
required
labelKey="buildingName"
valueKey="id"
value={field.value}
onChange={(value) => {
field.onChange(value);
setValue("floorId", "");
setValue("workAreaId", "");
setSelectedService("");
setSelectedGroup("");
}}
className="m-0"
/>
)}
/>
{errors.buildingID && (
<p className="danger-text">{errors.buildingID.message}</p>
<small className="danger-text">{errors.buildingID.message}</small>
)}
</div>
{/* Select Floor */}
{selectedBuilding && (
<div className="col-6 text-start">
<Label className="form-label" required>Select Floor</Label>
<select
className="form-select form-select-sm"
{...register("floorId")}
>
<option value="">Select Floor</option>
{selectedBuilding.floors
?.sort((a, b) => a.floorName.localeCompare(b.floorName))
?.map((f) => (
<option key={f.id} value={f.id}>
{f.floorName}
</option>
))}
</select>
<AppFormController
name="floorId"
control={control}
render={({ field }) => (
<SelectField
label="Select Floor"
options={selectedBuilding?.floors ?? []}
placeholder={
selectedBuilding?.floors?.length > 0
? "Select Floor"
: "No Floor Found"
}
required
labelKey="floorName"
valueKey="id"
value={field.value}
onChange={(value) => {
field.onChange(value);
setValue("workAreaId", "");
}}
className="m-0"
/>
)}
/>
{errors.floorId && (
<p className="danger-text">{errors.floorId.message}</p>
<small className="danger-text">{errors.floorId.message}</small>
)}
</div>
)}
{/* Work Area Selection */}
{/* Select Work Area */}
{selectedFloor && (
<div className="col-12 text-start">
<Label className="form-label" required>Select Work Area</Label>
<select
className="form-select form-select-sm"
{...register("workAreaId")}
>
<option value="">Select Work Area</option>
{selectedFloor.workAreas
?.sort((a, b) => a.areaName.localeCompare(b.areaName))
?.map((w) => (
<option key={w.id} value={w.id}>
{w.areaName}
</option>
))}
</select>
<AppFormController
name="workAreaId"
control={control}
render={({ field }) => (
<SelectField
label="Select Work Area"
options={selectedFloor?.workAreas ?? []}
placeholder="Select Work Area"
required
labelKey="areaName"
valueKey="id"
value={field.value}
onChange={(value) => {
field.onChange(value);
setSelectedService("");
setSelectedGroup("");
}}
className="m-0"
/>
)}
/>
{errors.workAreaId && (
<p className="danger-text">{errors.workAreaId.message}</p>
<small className="danger-text">{errors.workAreaId.message}</small>
)}
</div>
)}
{/* Services Selection */}
{/* Select Service */}
{selectedWorkArea && (
<div className="col-12 text-start">
<Label className="form-label" required>Select Service</Label>
<select
className="form-select form-select-sm"
{...register("serviceId")}
value={selectedService}
// onChange={handleServiceChange}
onChange={(e) => {
handleServiceChange(e);
setValue("serviceId", e.target.value);
<AppFormController
name="serviceId"
control={control}
render={({ field }) => (
<SelectField
label="Select Service"
options={assignedServices ?? []}
placeholder="Select Service"
required
labelKey="name"
valueKey="id"
value={field.value}
onChange={(value) => {
field.onChange(value);
setSelectedService(value);
setSelectedGroup("");
setValue("activityGroupId", "");
setValue("activityID", "");
}}
>
<option value="">Select Service</option>
{servicesLoading && <option>Loading...</option>}
{assignedServices?.map((service) => (
<option key={service.id} value={service.id}>
{service.name}
</option>
))}
</select>
isLoading={servicesLoading}
className="m-0"
/>
)}
/>
{errors.serviceId && (
<small className="danger-text">{errors.serviceId.message}</small>
)}
</div>
)}
{/* Activity Group (Organization) Selection */}
{/* Select Activity Group */}
{selectedService && (
<div className="col-12 text-start">
<Label className="form-label" required>Select Activity Group</Label>
<select
className="form-select form-select-sm"
{...register("activityGroupId")}
value={selectedGroup}
onChange={handleGroupChange}
>
<option value="">Select Group</option>
{groupsLoading && <option>Loading...</option>}
{groups?.map((g) => (
<option key={g.id} value={g.id}>{g.name}</option>
))}
</select>
{errors.activityGroupId && <p className="danger-text">{errors.activityGroupId.message}</p>}
<AppFormController
name="activityGroupId"
control={control}
render={({ field }) => (
<SelectField
label="Select Activity Group"
options={groups ?? []}
placeholder="Select Activity Group"
required
labelKey="name"
valueKey="id"
value={field.value}
onChange={(value) => {
field.onChange(value);
setSelectedGroup(value);
setValue("activityID", "");
}}
isLoading={groupsLoading}
className="m-0"
/>
)}
/>
{errors.activityGroupId && (
<small className="danger-text">{errors.activityGroupId.message}</small>
)}
</div>
)}
{/* Activity Selection */}
{/* Select Activity */}
{selectedGroup && (
<div className="col-12 text-start">
<Label className="form-label" required>Select Activity</Label>
<select className="form-select form-select-sm" {...register("activityID")}>
<option value="">Select Activity</option>
{activitiesLoading && <option>Loading...</option>}
{activities?.map((a) => (
<option key={a.id} value={a.id}>{a.activityName}</option>
))}
</select>
{errors.activityID && <p className="danger-text">{errors.activityID.message}</p>}
<AppFormController
name="activityID"
control={control}
render={({ field }) => (
<SelectField
label="Select Activity"
options={activities ?? []}
placeholder="Select Activity"
required
labelKey="activityName"
valueKey="id"
value={field.value}
onChange={field.onChange}
isLoading={activitiesLoading}
className="m-0"
/>
)}
/>
{errors.activityID && (
<small className="danger-text">{errors.activityID.message}</small>
)}
</div>
)}
{watchActivityId && (
<div className="col-12 text-start">
<label className="form-label">Select Work Category</label>
<select
className="form-select form-select-sm"
{...register("workCategoryId")}
>
{categoryData.map((c) => (
<option key={c.id} value={c.id}>
{c.name}
</option>
))}
</select>
<AppFormController
name="workCategoryId"
control={control}
render={({ field }) => (
<SelectField
label="Select Work Category"
options={categoryData ?? []}
placeholder="Select Work Category"
required
labelKey="name"
valueKey="id"
value={field.value}
onChange={field.onChange}
className="m-0"
/>
)}
/>
{errors.workCategoryId && (
<p className="danger-text">{errors.workCategoryId.message}</p>
<small className="danger-text">{errors.workCategoryId.message}</small>
)}
</div>
)}
@ -304,7 +365,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
<Label className="form-label" required>Planned Work</Label>
<input
type="number"
className="form-control form-control-sm"
className="form-control "
{...register("plannedWork", { valueAsNumber: true })}
/>
{errors.plannedWork && (
@ -315,7 +376,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
<label className="form-label">Completed Work</label>
<input
type="number"
className="form-control form-control-sm"
className="form-control "
{...register("completedWork", { valueAsNumber: true })}
/>
{errors.completedWork && (
@ -326,7 +387,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
<label className="form-label">Unit</label>
<input
type="text"
className="form-control form-control-sm"
className="form-control "
disabled
value={selectedActivity?.unitOfMeasurement || ""}
/>
@ -366,6 +427,7 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
</button>
</div>
</form>
</AppFormProvider>
);
};

132
src/components/Project/Infrastructure/WorkAreaModel.jsx
View File

@ -6,6 +6,8 @@ import showToast from "../../../services/toastService";
import { useManageProjectInfra } from "../../../hooks/useProjects";
import { useSelector } from "react-redux";
import Label from "../../common/Label";
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
import SelectField from "../../common/Forms/SelectField";
const workAreaSchema = z.object({
id: z.string().optional(),
@ -26,19 +28,14 @@ const defaultModel = {
const WorkAreaModel = ({ project, onSubmit, onClose }) => {
const [selectedBuilding, setSelectedBuilding] = useState(null);
const [selectedFloor, setSelectedFloor] = useState(null);
const selectedProject = useSelector((store) => store.localVariables.projectId)
const {
register,
handleSubmit,
formState: { errors },
setValue,
reset,
watch,
} = useForm({
resolver: zodResolver(workAreaSchema),
const selectedProject = useSelector((store) => store.localVariables.projectId);
const methods = useForm({
defaultValues: defaultModel,
resolver: zodResolver(workAreaSchema),
});
const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
const watchBuildingId = watch("buildingId");
const watchFloorId = watch("floorId");
const watchWorkAreaId = watch("id");
@ -104,69 +101,91 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
};
return (
<AppFormProvider {...methods}>
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
<div className="text-center mb-1">
<h5 className="mb-1">Manage Work Area</h5>
</div>
<div className="col-12 col-sm-6 text-start">
<Label className="form-label" required>Select Building</Label>
<select
{...register("buildingId")}
className="form-select form-select-sm"
>
<option value="0">Select Building</option>
{project?.map((b) => (
<option key={b.id} value={b.id}>
{b.buildingName}
</option>
))}
</select>
<AppFormController
name="buildingId"
control={control}
render={({ field }) => (
<SelectField
label="Select Building"
options={project ?? []}
placeholder="Select Building"
required
labelKey="buildingName"
valueKey="id"
value={field.value}
onChange={field.onChange}
className="m-0"
/>
)}
/>
{errors.buildingId && (
<p className="danger-text">{errors.buildingId.message}</p>
<small className="danger-text">{errors.buildingId.message}</small>
)}
</div>
{watchBuildingId !== "0" && (
<div className="col-12 col-sm-6 text-start">
<Label className="form-label" required>Select Floor</Label>
<select
{...register("floorId")}
className="form-select form-select-sm"
>
<option value="0">
{selectedBuilding?.floor?.length > 0
? "NO Floor Found"
: "Select Floor"}
</option>
{selectedBuilding?.floors?.map((f) => (
<option key={f.id} value={f.id}>
{f.floorName}
</option>
))}
</select>
<AppFormController
name="floorId"
control={control}
render={({ field }) => (
<SelectField
label="Select Floor"
options={selectedBuilding?.floors ?? []}
placeholder={
selectedBuilding?.floors?.length > 0
? "Select Floor"
: "No Floor Found"
}
required
labelKey="floorName"
valueKey="id"
value={field.value}
onChange={(value) => {
field.onChange(value);
setValue("areaName", ""); // reset Work Area name when floor changes
}}
className="m-0"
/>
)}
/>
{errors.floorId && (
<p className="danger-text">{errors.floorId.message}</p>
<small className="danger-text">{errors.floorId.message}</small>
)}
</div>
)}
{watchFloorId !== "0" && (
<>
<div className="col-12 text-start">
<label className="form-label">Select Work Area</label>
<select
{...register("id")}
className="form-select form-select-sm"
onChange={handleWrokAreaChange}
>
<option value="0">Create New Work Area</option>
{selectedFloor?.workAreas?.length > 0 &&
selectedFloor?.workAreas?.map((w) => (
<option key={w.id} value={w.id}>
{w.areaName}
</option>
))}
</select>
<AppFormController
name="id"
control={control}
render={({ field }) => (
<SelectField
label="Select Work Area"
options={selectedFloor?.workAreas ?? []}
placeholder="Create New Work Area"
required={false}
labelKey="areaName"
valueKey="id"
value={field.value}
onChange={(value) => {
field.onChange(value);
handleWrokAreaChange({ target: { value } }); // preserve your existing handler
}}
className="m-0"
/>
)}
/>
</div>
<div className="col-12 text-start">
@ -177,7 +196,7 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
</Label>
<input
type="text"
className="form-control form-control-sm"
className="form-control"
placeholder="Work Area"
{...register("areaName")}
/>
@ -197,6 +216,7 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
</div>
</form>
</AppFormProvider>
);
};

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

@ -17,6 +17,8 @@ import {
useOrganizationsList,
} from "../../hooks/useOrganization";
import { localToUtc } from "../../utils/appUtils";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
const currentDate = new Date().toLocaleDateString("en-CA");
const formatDate = (date) => {
@ -122,7 +124,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
type="text"
id="name"
name="name"
className="form-control form-control-sm"
className="form-control "
placeholder="Project Name"
{...register("name")}
/>
@ -143,7 +145,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
type="text"
id="shortName"
name="shortName"
className="form-control form-control-sm"
className="form-control "
placeholder="Short Name"
{...register("shortName")}
/>
@ -164,7 +166,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
type="text"
id="contactPerson"
name="contactPerson"
className="form-control form-control-sm"
className="form-control "
placeholder="Contact Person"
maxLength={50}
{...register("contactPerson")}
@ -190,6 +192,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
placeholder="DD-MM-YYYY"
maxDate={new Date()} // optional: restrict future dates
className="w-100"
size="md"
/>
{errors.startDate && (
@ -213,6 +216,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
placeholder="DD-MM-YYYY"
minDate={getValues("startDate")} // optional: restrict future dates
className="w-100"
size="md"
/>
{errors.endDate && (
@ -226,102 +230,107 @@ const ManageProjectInfo = ({ project, onClose }) => {
</div>
<div className="col-12">
<label className="form-label" htmlFor="modalEditUserStatus">
<Label htmlFor="modalEditUserStatus" className="form-label">
Status
</label>
<select
id="modalEditUserStatus"
name="modalEditUserStatus"
className="select2 form-select form-select-sm"
aria-label="Default select example"
{...register("projectStatusId", {
required: "Status is required",
valueAsNumber: false,
})}
>
{PROJECT_STATUS.map((status) => (
<option key={status.id} value={status.id}>
{status.label}
</option>
))}
</select>
</Label>
<AppFormController
name="projectStatusId"
control={control}
rules={{ required: "Status is required" }}
render={({ field }) => (
<SelectField
label="" // Label is already above
placeholder="Select Status"
options={PROJECT_STATUS?.map((status) => ({
id: status.id,
name: status.label,
})) ?? []}
value={field.value || ""}
onChange={field.onChange}
required
className="m-0 form-select-sm w-100"
/>
)}
/>
{errors.projectStatusId && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
{errors.projectStatusId.message}
</div>
)}
</div>
<div className="col-12">
<label className="form-label" htmlFor="modalEditUserStatus">
<Label htmlFor="promoterId" className="form-label">
Promoter
</label>
<select
className="select2 form-select form-select-sm"
aria-label="Default select example"
{...register("promoterId", {
required: "Promoter is required",
valueAsNumber: false,
})}
>
{isLoading ? (
<option>Loading...</option>
) : (
<>
<option value="">Select Promoter</option>
{data?.data?.map((org) => (
<option key={org.id} value={org.id}>
{org.name}
</option>
))}
</>
</Label>
<AppFormController
name="promoterId"
control={control}
rules={{ required: "Promoter is required" }}
render={({ field }) => (
<SelectField
label="" // Label is already above
placeholder="Select Promoter"
options={data?.data ?? []}
value={field.value || ""}
onChange={field.onChange}
required
isLoading={isLoading}
className="m-0 form-select-sm w-100"
noOptionsMessage={() =>
!isLoading && (!data?.data || data.data.length === 0)
? "No promoters found"
: null
}
/>
)}
</select>
/>
{errors.promoterId && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
{errors.promoterId.message}
</div>
)}
</div>
<div className="col-12">
<label className="form-label" htmlFor="modalEditUserStatus">
<Label htmlFor="pmcId" className="form-label">
PMC
</label>
<select
className="select2 form-select form-select-sm"
aria-label="Default select example"
{...register("pmcId", {
required: "Promoter is required",
valueAsNumber: false,
})}
>
{isLoading ? (
<option>Loading...</option>
) : (
<>
<option value="">Select PMC</option>
{data?.data?.map((org) => (
<option key={org.id} value={org.id}>
{org.name}
</option>
))}
</>
</Label>
<AppFormController
name="pmcId"
control={control}
rules={{ required: "PMC is required" }}
render={({ field }) => (
<SelectField
label="" // Label is already above
placeholder="Select PMC"
options={data?.data ?? []}
value={field.value || ""}
onChange={field.onChange}
required
isLoading={isLoading}
className="m-0 form-select-sm w-100"
noOptionsMessage={() =>
!isLoading && (!data?.data || data.data.length === 0)
? "No PMC found"
: null
}
/>
)}
</select>
/>
{errors.pmcId && (
<div
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
<div className="danger-text text-start" style={{ fontSize: "12px" }}>
{errors.pmcId.message}
</div>
)}
</div>
<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

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

@ -30,6 +30,9 @@ import { useParams } from "react-router-dom";
import GlobalModel from "../common/GlobalModel";
import { setService } from "../../slices/globalVariablesSlice";
import { SpinnerLoader } from "../common/Loader";
import { useForm } from "react-hook-form";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
const projectId = useSelectedProject();
@ -52,6 +55,12 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
const { data: assignedServices, isLoading: servicesLoading } =
useProjectAssignedServices(projectId);
const { control } = useForm({
defaultValues: {
serviceId: selectedService || "",
},
});
useEffect(() => {
setProject(projectInfra);
}, [data, projects_Details]);
@ -60,6 +69,11 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
setProject(response);
};
const handleServiceChange = (serviceId) => {
dispatch(setService(serviceId));
};
return (
<>
{showModalBuilding && (
@ -115,37 +129,39 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
<div className="card-body" style={{ padding: "0.5rem" }}>
<div className="align-items-center">
<div className="row ">
<div
className="dataTables_length text-start py-2 px-6 col-md-4 col-12"
id="DataTables_Table_0_length"
>
{!servicesLoading &&
assignedServices?.length > 0 &&
(assignedServices.length > 1 ? (
<label>
<select
name="DataTables_Table_0_length"
aria-controls="DataTables_Table_0"
className="form-select form-select-sm"
aria-label="Select Service"
value={selectedService}
onChange={(e) => dispatch(setService(e.target.value))}
>
<option value="">All Services</option>
{assignedServices.map((service) => (
<option key={service.id} value={service.id}>
{service.name}
</option>
))}
</select>
</label>
<div className="col-md-4 col-12 dataTables_length text-start py-2 px-2">
<div className="ms-4 mt-n1">
{!servicesLoading && assignedServices?.length > 0 && (
assignedServices.length > 1 ? (
<AppFormController
name="serviceId"
control={control}
render={({ field }) => (
<SelectField
label="Select Service"
options={[{ id: "", name: "All Projects" }, ...(assignedServices ?? [])]}
placeholder="Choose a Service"
required
labelKey="name"
valueKey="id"
value={field.value}
onChange={(val) => {
field.onChange(val);
handleServiceChange(val);
}}
isLoading={servicesLoading}
/>
)}
/>
) : (
<h5>{assignedServices[0].name}</h5>
))}
)
)}
</div>
</div>
{/* Buttons Section (aligned to right) */}
<div className="col-md-8 col-12 text-end mb-1">
<div className="col-md-8 col-12 text-end mt-4">
{ManageInfra && (
<>
<button

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

@ -10,6 +10,8 @@ import { useForm, Controller } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import showToast from "../../services/toastService";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
export const ProjectPermissionSchema = z.object({
employeeId: z.string().min(1, "Employee is required"),
@ -115,35 +117,42 @@ const hasChanges =
<form className="row" onSubmit={handleSubmit(onSubmit)}>
<div className="d-flex justify-content-between align-items-end gap-2 mb-3">
<div className="text-start d-flex align-items-center gap-2">
<div className="d-block">
{/* <div className="d-block">
<label className="form-label">Select Employee</label>
</div>
<div className="d-block">
{" "}
<select
className="form-select form-select-sm"
{...register("employeeId")}
disabled={isPending}
>
{loading ? (
<option value="">Loading...</option>
) : (
<>
<option value="">-- Select Employee --</option>
{[...employees]
</div> */}
<div className="d-block flex-grow-1">
<AppFormController
name="employeeId"
control={control}
render={({ field }) => (
<SelectField
label="Select Employee"
options={
employees
?.sort((a, b) =>
`${a?.firstName} ${a?.firstName}`?.localeCompare(
`${a?.firstName} ${a?.lastName}`.localeCompare(
`${b?.firstName} ${b?.lastName}`
)
)
?.map((emp) => (
<option key={emp.id} value={emp.id}>
{emp.firstName} {emp.lastName}
</option>
))}
</>
?.map((emp) => ({
id: emp.id,
name: `${emp.firstName} ${emp.lastName}`,
})) ?? []
}
placeholder="-- Select Employee --"
required
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
isLoading={loading}
disabled={isPending}
className="m-0"
/>
)}
</select>
/>
{errors.employeeId && (
<div className="d-block text-danger small">
{errors.employeeId.message}
@ -152,6 +161,7 @@ const hasChanges =
</div>
</div>
<div className="mt-3 text-end">
{hasChanges && (
<button

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 || "")
)

157
src/components/RecurringExpense/ManageRecurringExpense.jsx
View File

@ -28,6 +28,8 @@ import { useEmployeesName } from "../../hooks/useEmployees";
import PmsEmployeeInputTag from "../common/PmsEmployeeInputTag";
import HoverPopup from "../common/HoverPopup";
import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
const {
@ -200,30 +202,32 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
<Label htmlFor="expenseCategoryId" className="form-label" required>
Expense Category
</Label>
<select
className="form-select"
id="expenseCategoryId"
{...register("expenseCategoryId")}
>
<option value="" disabled>
Select Category
</option>
{ExpenseLoading ? (
<option disabled>Loading...</option>
) : (
expenseCategories?.map((expense) => (
<option key={expense.id} value={expense.id}>
{expense.name}
</option>
))
<AppFormController
name="expenseCategoryId"
control={control}
rules={{ required: "Expense Category is required" }}
render={({ field }) => (
<SelectField
label="" // Label is already above
placeholder="Select Category"
options={expenseCategories ?? []}
value={field.value || ""}
onChange={field.onChange}
required
isLoading={ExpenseLoading}
className="m-0 form-select-sm w-100"
/>
)}
</select>
/>
{errors.expenseCategoryId && (
<small className="danger-text">
{errors.expenseCategoryId.message}
</small>
)}
</div>
</div>
{/* Title and Is Variable */}
@ -375,34 +379,45 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
<Label htmlFor="currencyId" className="form-label" required>
Currency
</Label>
<select
id="currencyId"
className="form-select"
{...register("currencyId")}
>
<option value="">Select Currency</option>
{currencyLoading && <option>Loading...</option>}
<AppFormController
name="currencyId"
control={control}
rules={{ required: "Currency is required" }}
render={({ field }) => (
<SelectField
label="" // Label already shown above
placeholder="Select Currency"
options={currencyData?.map((currency) => ({
id: currency.id,
name: `${currency.currencyName} (${currency.symbol})`,
})) ?? []}
value={field.value || ""}
onChange={field.onChange}
required
isLoading={currencyLoading}
noOptionsMessage={() =>
!currencyLoading && !currencyError && (!currencyData || currencyData.length === 0)
? "No currency found"
: null
}
className="m-0 form-select-sm w-100"
/>
)}
/>
{!currencyLoading &&
!currencyError &&
currencyData?.map((currency) => (
<option key={currency.id} value={currency.id}>
{`${currency.currencyName} (${currency.symbol})`}
</option>
))}
</select>
{errors.currencyId && (
<small className="danger-text">{errors.currencyId.message}</small>
)}
</div>
</div>
{/* Frequency To and Status Id */}
<div className="row my-2 text-start mt-n2">
<div className="col-md-6">
<div className="d-flex justify-content-start align-items-center gap-2">
<Label htmlFor="frequency" className="form-label mb-0" required>
<Label htmlFor="frequency" className="form-label mb-1" required>
Frequency
</Label>
<HoverPopup
@ -415,51 +430,69 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
</p>
}
>
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer"></i>
<i className="bx bx-info-circle bx-xs text-muted cursor-pointer mb-1"></i>
</HoverPopup>
</div>
<select
id="frequency"
className="form-select mt-1"
{...register("frequency", { valueAsNumber: true })}
>
<option value="">Select Frequency</option>
{Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => (
<option key={key} value={key}>
{label}
</option>
))}
</select>
<AppFormController
name="frequency"
control={control}
rules={{ required: "Frequency is required" }}
render={({ field }) => (
<SelectField
label="" // Label shown above
placeholder="Select Frequency"
options={Object.entries(FREQUENCY_FOR_RECURRING).map(([key, label]) => ({
id: key,
name: label,
}))}
value={field.value || ""}
onChange={field.onChange}
required
className="m-0 mt-1"
/>
)}
/>
{errors.frequency && (
<small className="danger-text">{errors.frequency.message}</small>
)}
</div>
<div className="col-md-6">
<Label htmlFor="statusId" className="form-label" required>
Status
</Label>
<select
id="statusId"
className="form-select"
{...register("statusId")}
>
<option value="">Select Status</option>
{statusLoading && <option>Loading...</option>}
{!statusLoading &&
!statusError &&
statusData?.map((status) => (
<option key={status.id} value={status.id}>
{status.name}
</option>
))}
</select>
<AppFormController
name="statusId"
control={control}
rules={{ required: "Status is required" }}
render={({ field }) => (
<SelectField
label="" // Label already shown above
placeholder="Select Status"
options={statusData ?? []}
value={field.value || ""}
onChange={field.onChange}
required
isLoading={statusLoading}
noOptionsMessage={() =>
!statusLoading && !statusError && (!statusData || statusData.length === 0)
? "No status found"
: null
}
className="m-0 form-select-sm w-100"
/>
)}
/>
{errors.statusId && (
<small className="danger-text">{errors.statusId.message}</small>
)}
</div>
</div>
{/* Payment Buffer Days and End Date */}
@ -564,7 +597,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
</div>
{/* Description */}
<div className="row my-2 text-start">
<div className="row my-4 text-start">
<div className="col-md-12">
<Label htmlFor="description" className="form-label" required>
Description

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

@ -23,6 +23,8 @@ import {
useServiceProject,
useUpdateServiceProject,
} from "../../hooks/useServiceProject";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
const ManageServiceProject = ({ serviceProjectId, onClose }) => {
const {
@ -117,51 +119,54 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
</div>
<div className="row text-start">
<div className="col-12 mb-2">
<Label htmlFor="name" required>
<Label htmlFor="clientId" required>
Client
</Label>
<div className="d-flex align-items-center gap-2">
<select
className="select2 form-select form-select-sm flex-grow-1"
aria-label="Default select example"
{...register("clientId", {
required: "Client is required",
valueAsNumber: false,
})}
>
{isLoading ? (
<option>Loading...</option>
) : (
<>
<option value="">Select Client</option>
{organization?.data?.map((org) => (
<option key={org.id} value={org.id}>
{org.name}
</option>
))}
</>
<div className="d-flex align-items-center gap-2 w-100">
<div className="flex-grow-1" style={{ minWidth: "250px" }}>
<AppFormController
name="clientId"
control={control}
rules={{ required: "Client is required" }}
render={({ field }) => (
<SelectField
label=""
options={organization?.data ?? []}
placeholder="Select Client"
required
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
isLoading={isLoading}
className="m-0 w-100"
/>
)}
</select>
/>
</div>
<i
className="bx bx-plus-circle bx-xs cursor-pointer text-primary "
onClick={() => {
onClose();
openOrgModal({ startStep: 2 }); // Step 4 = ManagOrg
openOrgModal({ startStep: 2 });
}}
/>
</div>
{errors?.clientId && (
<span className="danger-text">{errors.clientId.message}</span>
<small className="danger-text">{errors.clientId.message}</small>
)}
</div>
<div className="col-12 mb-2">
<div className="col-12 mb-4">
<Label htmlFor="name" required>
Project Name
</Label>
<input
type="text"
className="form-control form-control-sm"
className="form-control "
{...register("name")}
placeholder="Enter Project Name.."
/>
@ -175,7 +180,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
</Label>
<input
type="text"
className="form-control form-control-sm"
className="form-control "
{...register("shortName")}
placeholder="Enter Project Short Name.."
/>
@ -184,23 +189,37 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
)}
</div>
<div className="col-12 col-md-6">
<Label htmlFor="name" required>
<Label htmlFor="statusId" required>
Select Status
</Label>
<select
className="form-select form-select-sm"
{...register("statusId")}
>
<option>Select Service</option>
{PROJECT_STATUS?.map((status) => (
<option key={status.id} value={status.id}>{status.label}</option>
))}
</select>
<AppFormController
name="statusId"
control={control}
render={({ field }) => (
<SelectField
label="" // label already above
options={PROJECT_STATUS?.map((status) => ({
id: status.id,
name: status.label,
}))}
placeholder="Select Status"
required
labelKey="name"
valueKey="id"
value={field.value}
onChange={field.onChange}
className="form-select w-100"
/>
)}
/>
{errors?.statusId && (
<span className="danger-text">{errors.statusId.message}</span>
)}
</div>
<div className="col-12 mb-2">
<div className="col-12 mb-4">
<SelectMultiple
options={data?.data}
isLoading={isLoading}
@ -214,13 +233,13 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
)}
</div>
<div className="col-12 col-md-6 mb-2">
<div className="col-12 col-md-6 mb-4">
<Label htmlFor="name" required>
Contact Person
</Label>
<input
type="text"
className="form-control form-control-sm"
className="form-control "
{...register("contactName")}
placeholder="Enter Employee name.."
/>
@ -234,7 +253,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
</Label>
<input
type="text"
className="form-control form-control-sm"
className="form-control "
{...register("contactEmail")}
placeholder="Enter Employee Email.."
/>
@ -242,14 +261,14 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
<span className="danger-text">{errors.contactEmail.message}</span>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<div className="col-12 col-md-6 mb-4">
<Label htmlFor="name" required>
Contact Number
</Label>
<input
type="text"
maxLength={10}
className="form-control form-control-sm"
className="form-control "
{...register("contactPhone")}
placeholder="Enter Employee Contact.."
onInput={(e) => {
@ -268,6 +287,7 @@ const ManageServiceProject = ({ serviceProjectId, onClose }) => {
name="assignedDate"
className="w-100"
control={control}
size="md"
/>
</div>
<div className="col-12 col-md-12 mb-2">
@ -297,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

52
src/components/collections/AddPayment.jsx
View File

@ -12,6 +12,8 @@ import { formatUTCToLocalTime } from "../../utils/dateUtils";
import Avatar from "../common/Avatar";
import { PaymentHistorySkeleton } from "./CollectionSkeleton";
import { usePaymentAjustmentHead } from "../../hooks/masterHook/useMaster";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
const AddPayment = ({ onClose }) => {
const { addPayment } = useCollectionContext();
@ -60,7 +62,7 @@ const AddPayment = ({ onClose }) => {
<Label required>TransanctionId</Label>
<input
type="text"
className="form-control form-control-sm"
className="form-control "
{...register("transactionId")}
/>
{errors.transactionId && (
@ -94,32 +96,29 @@ const AddPayment = ({ onClose }) => {
</div>
<div className="col-12 col-md-6 mb-2">
<Label
htmlFor="paymentAdjustmentHeadId"
className="form-label"
required
>
<Label htmlFor="paymentAdjustmentHeadId" className="form-label" required>
Payment Adjustment Head
</Label>
<select
className="form-select form-select-sm "
{...register("paymentAdjustmentHeadId")}
>
{isPaymentTypeLoading ? (
<option>Loading..</option>
) : (
<>
<option value="">Select Payment Head</option>
{paymentTypes?.data
?.sort((a, b) => a.name.localeCompare(b.name))
?.map((type) => (
<option key={type.id} value={type.id}>
{type.name}
</option>
))}
</>
<AppFormController
name="paymentAdjustmentHeadId"
control={control}
rules={{ required: "Payment Adjustment Head is required" }}
render={({ field }) => (
<SelectField
label="" // Label is already above
placeholder="Select Payment Head"
options={paymentTypes?.data
?.sort((a, b) => a.name.localeCompare(b.name)) ?? []}
value={field.value || ""}
onChange={field.onChange}
required
isLoading={isPaymentTypeLoading}
className="m-0 form-select-sm w-100"
/>
)}
</select>
/>
{errors.paymentAdjustmentHeadId && (
<small className="danger-text">
{errors.paymentAdjustmentHeadId.message}
@ -127,6 +126,7 @@ const AddPayment = ({ onClose }) => {
)}
</div>
<div className="col-12 col-md-6 mb-2">
<Label htmlFor="amount" className="form-label" required>
Amount
@ -134,7 +134,7 @@ const AddPayment = ({ onClose }) => {
<input
type="number"
id="amount"
className="form-control form-control-sm"
className="form-control "
min="1"
step="0.01"
inputMode="decimal"
@ -150,7 +150,7 @@ const AddPayment = ({ onClose }) => {
</Label>
<textarea
id="comment"
className="form-control form-control-sm"
className="form-control "
{...register("comment")}
/>
{errors.comment && (

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

@ -19,6 +19,8 @@ import { formatDate } from "../../utils/dateUtils";
import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
import { ITEMS_PER_PAGE } from "../../utils/constants";
import { useOrganizationsList } from "../../hooks/useOrganization";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
const ManageCollection = ({ collectionId, onClose }) => {
const { data, isError, isLoading, error } = useCollection(collectionId);
@ -189,38 +191,35 @@ const ManageCollection = ({ collectionId, onClose }) => {
</div>
<div className="col-12 col-md-6 mb-2">
<Label htmlFor="name" required>
<Label htmlFor="billedToId" required>
Bill To
</Label>
<div className="d-flex align-items-center gap-2">
<select
className="select2 form-select form-select flex-grow-1"
aria-label="Default select example"
{...register("billedToId", {
required: "Client is required",
valueAsNumber: false,
})}
>
{isLoading ? (
<option>Loading...</option>
) : (
<>
<option value="">Select Client</option>
{organization?.data?.map((org) => (
<option key={org.id} value={org.id}>
{org.name}
</option>
))}
</>
<AppFormController
name="billedToId"
control={control}
rules={{ required: "Client is required" }}
render={({ field }) => (
<SelectField
label="" // Label already shown above
placeholder="Select Client"
options={organization?.data ?? []}
value={field.value || ""}
onChange={field.onChange}
required
isLoading={isLoading}
className="m-0 flex-grow-1"
/>
)}
</select>
</div>
{errors?.clientId && (
/>
{errors?.billedToId && (
<span className="danger-text">{errors.billedToId.message}</span>
)}
</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"
@ -257,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"
@ -272,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"
@ -360,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>

49
src/components/common/Forms/SelectField.jsx
View File

@ -12,6 +12,8 @@ const SelectField = ({
labelKey = "name",
isLoading = false,
}) => {
const [position, setPosition] = useState("bottom");
const [open, setOpen] = useState(false);
const dropdownRef = useRef(null);
@ -34,10 +36,26 @@ const SelectField = ({
setOpen(false);
};
const toggleDropdown = () => setOpen((prev) => !prev);
const toggleDropdown = () => {
if (!open) {
const rect = dropdownRef.current?.getBoundingClientRect();
const viewportHeight = window.innerHeight;
const spaceBelow = viewportHeight - rect.bottom;
const dropdownHeight = 200;
if (spaceBelow < dropdownHeight) {
setPosition("top"); // open upward
} else {
setPosition("bottom"); // open downward
}
}
setOpen((prev) => !prev);
};
return (
<div className="mb-3 position-relative" ref={dropdownRef}>
<div className="position-relative mb-3" ref={dropdownRef}>
{label && (
<Label className="form-label" required={required}>
{label}
@ -60,23 +78,35 @@ const SelectField = ({
</button>
{open && !isLoading && (
<ul
className="dropdown-menu w-100 shadow-sm show animate__fadeIn"
<div
className="w-full px-1 shadow-md rounded p-1"
style={{
position: "absolute",
top: "100%",
top: position === "bottom" ? "100%" : "auto",
bottom: position === "top" ? "100%" : "auto",
left: 0,
zIndex: 1050,
marginTop: "4px",
borderRadius: "0.375rem",
overflow: "hidden",
marginTop: position === "bottom" ? "2px" : "0",
marginBottom: position === "top" ? "2px" : "0",
}}
>
<ul
className="dropdown-menu w-100 show border-0 rounded px-1 py-1"
style={{
position: "static",
maxHeight: "220px",
overflowY: "auto",
overflowX: "hidden",
}}
id="vertical-example"
>
{options.map((option, i) => (
<li key={i}>
<button
type="button"
className={`dropdown-item ${
className={`dropdown-item rounded text-truncate ${
option[valueKey] === value ? "active" : ""
}`}
onClick={() => handleSelect(option)}
@ -86,6 +116,7 @@ const SelectField = ({
</li>
))}
</ul>
</div>
)}
</div>
);

4
src/components/common/TagInput.jsx
View File

@ -2,7 +2,7 @@ import { useFormContext, useWatch } from "react-hook-form";
import React, { useEffect, useState } from "react";
import Label from "./Label";
const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = false, options = [] }) => {
const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = false, options = [],size="sm" }) => {
const { setValue, watch } = useFormContext();
const tags = watch(name) || [];
const [input, setInput] = useState("");
@ -70,7 +70,7 @@ const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = fals
</Label>
<div
className="form-control form-control-sm p-1"
className={`form-control form-control-sm-${size}`}
style={{ minHeight: "33px", position: "relative" }}
>
<div className="d-flex flex-wrap align-items-center gap-1">

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}

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

@ -7,11 +7,20 @@ import { setProjectId } from "../../slices/localVariablesSlice";
import { useSelectedProject } from "../../slices/apiDataManager";
import { useProjectAssignedServices } from "../../hooks/useProjects";
import { setService } from "../../slices/globalVariablesSlice";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../../components/common/Forms/SelectField";
import { useForm } from "react-hook-form";
const TaskPlanning = () => {
const selectedProject = useSelectedProject();
const selectedService = useCurrentService();
const dispatch = useDispatch();
const { control } = useForm({
defaultValues: {
serviceFilter: selectedService ?? ""
},
});
const { projectNames = [], loading: projectLoading } = useProjectName();
@ -29,6 +38,7 @@ const TaskPlanning = () => {
if (projectLoading) {
return <div className="text-center py-5">Loading...</div>;
}
return (
<div className="container-fluid">
<Breadcrumb
@ -43,25 +53,31 @@ const TaskPlanning = () => {
{data?.length === 0 ? (
<p className="badge bg-label-secondary m-0">Service not assigned</p>
) : (
<select
name="DataTables_Table_0_length"
aria-controls="DataTables_Table_0"
className="form-select form-select-sm"
aria-label="Select Service"
value={selectedService ?? ""}
onChange={(e) => dispatch(setService(e.target.value))}
>
<option value="">All Services</option>
{!servicesLoading &&
data?.map((service) => (
<option key={service.id} value={service.id}>
{service.name}
</option>
))}
</select>
<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"
/>
)}
/>
)}
</div>
{/* Planning Component */}
{selectedProject ? (
<InfraPlanning />

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

@ -10,6 +10,9 @@ import { useFab } from "../../Context/FabContext";
import SubTask from "../../components/Activities/SubTask";
import { useProjectAssignedServices } from "../../hooks/useProjects";
import { useSelectedProject } from "../../slices/apiDataManager";
import SelectField from "../../components/common/Forms/SelectField";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import { useForm } from "react-hook-form";
const DailyProgrssContext = createContext();
export const useDailyProgrssContext = () => {
@ -41,6 +44,12 @@ const DailyProgrssReport = () => {
filter,
};
const { control } = useForm({
defaultValues: {
serviceFilter: ""
}
});
const handleFilter = (filterObj) => {
setFilter(filterObj)
}
@ -89,32 +98,38 @@ const DailyProgrssReport = () => {
/>
<div className="card card-fullscreen p-5">
{data?.length > 0 && (<div className="col-sm-4 col-md-3 col-12">
<select
className="form-select form-select-sm"
value={service ?? ""}
onChange={(e) => setService(e.target.value)}
>
{isLoading ? (
<option value="lading" disabled>Loading...</option>
) : (
<>
<option value="">
All Services
</option>
{data?.map((service) => (
<option key={service.id} value={service.id}>
{service.name}
</option>
))}
</>
{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"
/>
)}
</select>
</div>)}
/>
</div>
)}
<div>
<TaskReportList />
</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>

56
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}`}
@ -161,31 +167,37 @@ const MasterPage = () => {
data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]}
/>
<div className="row page-min-h">
<div className="card">
<div className="">
<div className="card page-min-h">
<div
className="card-datatable table-responsive py-2 py-md-10 mx-1 mx-md-5 "
style={{ overflow: "hidden" }}
className="card-datatable table-responsive py-2 py-md-6 mx-1 mx-md-5 overflow-visible"
>
<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