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

Adding_dropdown :- Adding custome dropdown across all the modal. #533

Merged
pramod.mahajan merged 18 commits from Adding_dropdown into Purchase_Invoice_Management 2025-12-06 11:30:46 +00:00
Conversation 0 Commits 18 Files Changed 58 +2541 -2031
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">

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

@ -40,7 +40,7 @@ const CardViewContact = ({
className="card text-start border-1"
style={{ background: `${!IsActive ? "#f8f6f6" : ""}` }}
>
<div className="card-body px-1 py-2 pb-0">
<div className="card-body px-1 py-2 pb-0">
<div className="d-flex justify-content-between">
<div
className={`d-flex align-items-center ${
@ -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")}
/>

426
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");
@ -88,33 +93,33 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
}
);
const onSubmit = (data) => {
const normalizeAttachment = (attachment) => {
if (!attachment) return null;
return {
...attachment,
fileSize: Math.ceil(attachment.fileSize / 1024),
const normalizeAttachment = (attachment) => {
if (!attachment) return null;
return {
...attachment,
fileSize: Math.ceil(attachment.fileSize / 1024),
};
};
};
const payload = {
...data,
attachment: normalizeAttachment(data.attachment),
};
if (ManageDoc?.document) {
const DocumentPayload = {
...payload,
id: DocData.id,
tags: MergedTagsWithExistenStatus(data?.tags, DocData?.tags),
const payload = {
...data,
attachment: normalizeAttachment(data.attachment),
};
UpdateDocument({ documentId: DocData?.id, DocumentPayload });
} else {
const DocumentPayload = { ...payload, entityId: Entity };
UploadDocument(DocumentPayload);
}
};
if (ManageDoc?.document) {
const DocumentPayload = {
...payload,
id: DocData.id,
tags: MergedTagsWithExistenStatus(data?.tags, DocData?.tags),
};
UpdateDocument({ documentId: DocData?.id, DocumentPayload });
} else {
const DocumentPayload = { ...payload, entityId: Entity };
UploadDocument(DocumentPayload);
}
};
const {
data: DocData,
@ -134,7 +139,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
const { DocumentTypes, isLoading: isTypeLoading } = useDocumentTypes(
categoryId || null
);
const {data:DocumentTags} = useDocumentTags()
const { data: DocumentTags } = useDocumentTags()
// Update schema whenever document type changes
useEffect(() => {
@ -144,7 +149,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
(t) => String(t.id) === String(documentTypeId)
);
if (!type) return;
setSelectedType(type)
setSelectedType(type)
const newSchema = DocumentPayloadSchema({
isMandatory: type.isMandatory ?? false,
regexExpression: type.regexExpression ?? null,
@ -200,10 +205,10 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
t === "application/pdf"
? ".pdf"
: t === "image/jpeg"
? ".jpg,.jpeg"
: t === "image/png"
? ".png"
: ""
? ".jpg,.jpeg"
: t === "image/png"
? ".png"
: ""
)
.join(",") || "";
@ -231,200 +236,209 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
const isPending = isUploading || isUpdating;
return (
<div className="p-2">
<p className="fw-bold fs-6">Upload New Document</p>
<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>
)}
{!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">
{errors.documentCategoryId.message}
</div>
)}
</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>
<AppFormProvider {...methods}>
<div className="p-2">
<h5 className="">Upload New Document</h5>
<FormProvider key={documentTypeId} {...methods}>
<form onSubmit={handleSubmit(onSubmit)} className="text-start">
{/* Category */}
<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"
/>
)}
{DocumentTypes?.map((type) => (
<option key={type.id} value={type.id}>
{type.name}
</option>
))}
</select>
{errors.documentTypeId && (
<div className="danger-text">
{errors.documentTypeId.message}
</div>
/>
{errors.documentCategoryId && (
<small className="danger-text">
{errors.documentCategoryId.message}
</small>
)}
</div>
)}
{/* Document ID */}
<div className="mb-2">
<label
htmlFor="documentId"
required={selectedType?.isMandatory ?? false}
>
Document ID
</label>
<input
type="text"
className="form-control form-control-sm"
{...register("documentId")}
/>
{errors.documentId && (
<div className="danger-text">{errors.documentId.message}</div>
)}
</div>
{/* Document Name */}
<div className="mb-2">
<Label htmlFor="name" required>
Document Name
</Label>
<input
type="text"
className="form-control form-control-sm"
{...register("name")}
/>
{errors.name && (
<div className="danger-text">{errors.name.message}</div>
)}
</div>
{/* Upload */}
<div className="row my-2">
<div className="col-md-12">
<Label htmlFor="attachment" required>Upload Document</Label>
<div
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
style={{ cursor: "pointer" }}
onClick={() => document.getElementById("attachment").click()}
>
<i className="bx bx-cloud-upload d-block bx-lg"></i>
<span className="text-muted d-block">
Click to select or click here to browse
</span>
<small className="text-muted">
({selectedType?.allowedContentType || "PDF/JPG/PNG"}, max{" "}
{selectedType?.maxSizeAllowedInMB ?? 25}MB)
</small>
<input
type="file"
id="attachment"
accept={selectedType?.allowedContentType}
style={{ display: "none" }}
onChange={(e) => {
onFileChange(e);
e.target.value = ""; // reset input
}}
{/* Type */}
{categoryId && (
<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"
/>
)}
/>
{errors.documentTypeId && (
<small className="danger-text">
{errors.documentTypeId.message}
</small>
)}
</div>
{errors.attachment && (
<small className="danger-text">
{errors.attachment.message
? errors.attachment.message
: errors.attachment.fileName?.message ||
)}
{/* Document ID */}
<div className="mb-4">
<label
htmlFor="documentId"
required={selectedType?.isMandatory ?? false}
>
Document ID
</label>
<input
type="text"
className="form-control "
{...register("documentId")}
/>
{errors.documentId && (
<div className="danger-text">{errors.documentId.message}</div>
)}
</div>
{/* Document Name */}
<div className="mb-2">
<Label htmlFor="name" required>
Document Name
</Label>
<input
type="text"
className="form-control "
{...register("name")}
/>
{errors.name && (
<div className="danger-text">{errors.name.message}</div>
)}
</div>
{/* Upload */}
<div className="row my-4">
<div className="col-md-12">
<Label htmlFor="attachment" required>Upload Document</Label>
<div
className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
style={{ cursor: "pointer" }}
onClick={() => document.getElementById("attachment").click()}
>
<i className="bx bx-cloud-upload d-block bx-lg"></i>
<span className="text-muted d-block">
Click to select or click here to browse
</span>
<small className="text-muted">
({selectedType?.allowedContentType || "PDF/JPG/PNG"}, max{" "}
{selectedType?.maxSizeAllowedInMB ?? 25}MB)
</small>
<input
type="file"
id="attachment"
accept={selectedType?.allowedContentType}
style={{ display: "none" }}
onChange={(e) => {
onFileChange(e);
e.target.value = ""; // reset input
}}
/>
</div>
{errors.attachment && (
<small className="danger-text">
{errors.attachment.message
? errors.attachment.message
: errors.attachment.fileName?.message ||
errors.attachment.base64Data?.message ||
errors.attachment.contentType?.message ||
errors.attachment.fileSize?.message}
</small>
)}
</small>
)}
{file?.base64Data && (
<div className="d-flex justify-content-between text-start p-1 mt-2">
<div>
<span className="mb-0 text-secondary small d-block">
{file.fileName}
</span>
<span className="text-body-secondary small d-block">
{(file.fileSize / 1024).toFixed(1)} KB
</span>
{file?.base64Data && (
<div className="d-flex justify-content-between text-start p-1 mt-2">
<div>
<span className="mb-0 text-secondary small d-block">
{file.fileName}
</span>
<span className="text-body-secondary small d-block">
{(file.fileSize / 1024).toFixed(1)} KB
</span>
</div>
<i
className="bx bx-trash bx-sm cursor-pointer text-danger"
onClick={removeFile}
></i>
</div>
<i
className="bx bx-trash bx-sm cursor-pointer text-danger"
onClick={removeFile}
></i>
</div>
)}
</div>
</div>
<div className="mb-4">
<TagInput name="tags" label="Tags" placeholder="Tags.." options={DocumentTags} />
{errors.tags && (
<small className="danger-text">{errors.tags.message}</small>
)}
</div>
</div>
<div className="mb-2">
<TagInput name="tags" label="Tags" placeholder="Tags.." options={DocumentTags} />
{errors.tags && (
<small className="danger-text">{errors.tags.message}</small>
)}
</div>
{/* Description */}
<div className="mb-2">
<Label htmlFor="description" required>Description</Label>
<textarea
rows="2"
className="form-control"
{...register("description")}
></textarea>
{errors.description && (
<div className="danger-text">{errors.description.message}</div>
)}
</div>
{/* Description */}
<div className="mb-4">
<Label htmlFor="description" required>Description</Label>
<textarea
rows="2"
className="form-control"
{...register("description")}
></textarea>
{errors.description && (
<div className="danger-text">{errors.description.message}</div>
)}
</div>
{/* Buttons */}
<div className="d-flex justify-content-end gap-3 mt-4">
<button
type="reset"
className="btn btn-label-secondary btn-sm"
disabled={isPending}
onClick={closeModal}
>
Cancel
</button>
<button
type="submit"
className="btn btn-primary btn-sm"
disabled={isPending}
>
{isPending ? "Please Wait..." : " Submit"}
</button>
</div>
</form>
</FormProvider>
</div>
{/* Buttons */}
<div className="d-flex justify-content-end gap-3 mt-4">
<button
type="reset"
className="btn btn-label-secondary btn-sm"
disabled={isPending}
onClick={closeModal}
>
Cancel
</button>
<button
type="submit"
className="btn btn-primary btn-sm"
disabled={isPending}
>
{isPending ? "Please Wait..." : " Submit"}
</button>
</div>
</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}

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

@ -6,10 +6,12 @@ import { useParams } from "react-router-dom";
import { DOCUMENTS_ENTITIES } from "../../utils/constants";
const EmpDocuments = ({ profile, loggedInUser }) => {
const {employeeId} = useParams()
const { employeeId } = useParams()
return (
<>
<Documents Document_Entity={DOCUMENTS_ENTITIES.EmployeeEntity} Entity={employeeId} />
<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">

203
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();
@ -96,26 +98,26 @@ const ManageEmployee = ({ employeeId, onClosed }) => {
reset(
currentEmployee
? {
id: currentEmployee.id || null,
firstName: currentEmployee.firstName || "",
middleName: currentEmployee.middleName || "",
lastName: currentEmployee.lastName || "",
email: currentEmployee.email || "",
currentAddress: currentEmployee.currentAddress || "",
birthDate: formatDate(currentEmployee.birthDate) || "",
joiningDate: formatDate(currentEmployee.joiningDate) || "",
emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
emergencyContactPerson:
currentEmployee.emergencyContactPerson || "",
aadharNumber: currentEmployee.aadharNumber || "",
gender: currentEmployee.gender || "",
panNumber: currentEmployee.panNumber || "",
permanentAddress: currentEmployee.permanentAddress || "",
phoneNumber: currentEmployee.phoneNumber || "",
jobRoleId: currentEmployee.jobRoleId?.toString() || "",
organizationId: currentEmployee.organizationId || "",
hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
}
id: currentEmployee.id || null,
firstName: currentEmployee.firstName || "",
middleName: currentEmployee.middleName || "",
lastName: currentEmployee.lastName || "",
email: currentEmployee.email || "",
currentAddress: currentEmployee.currentAddress || "",
birthDate: formatDate(currentEmployee.birthDate) || "",
joiningDate: formatDate(currentEmployee.joiningDate) || "",
emergencyPhoneNumber: currentEmployee.emergencyPhoneNumber || "",
emergencyContactPerson:
currentEmployee.emergencyContactPerson || "",
aadharNumber: currentEmployee.aadharNumber || "",
gender: currentEmployee.gender || "",
panNumber: currentEmployee.panNumber || "",
permanentAddress: currentEmployee.permanentAddress || "",
phoneNumber: currentEmployee.phoneNumber || "",
jobRoleId: currentEmployee.jobRoleId?.toString() || "",
organizationId: currentEmployee.organizationId || "",
hasApplicationAccess: currentEmployee.hasApplicationAccess || false,
}
: {}
);
setCurrentAddressLength(currentEmployee?.currentAddress?.length || 0);
@ -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}

156
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 {
@ -182,15 +183,15 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
currencyId: data.currency.id || DEFAULT_CURRENCY,
billAttachments: data.documents
? data.documents.map((doc) => ({
fileName: doc.fileName,
base64Data: null,
contentType: doc.contentType,
documentId: doc.documentId,
fileSize: 0,
description: "",
preSignedUrl: doc.preSignedUrl,
isActive: doc.isActive ?? true,
}))
fileName: doc.fileName,
base64Data: null,
contentType: doc.contentType,
documentId: doc.documentId,
fileSize: 0,
description: "",
preSignedUrl: doc.preSignedUrl,
isActive: doc.isActive ?? true,
}))
: [],
});
}
@ -236,7 +237,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
{expenseToEdit ? "Update Expense " : "Create New Expense"}
</h5>
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
<div className="row my-2 text-start">
<div className="row my-2 text-start">
<div className="col-12 col-md-6">
<SelectProjectField
label="Project"
@ -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,40 +293,40 @@ 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">
<div className="col-12 col-md-6 text-start">
<AppFormController
name="paidById"
name="paidById"
control={control}
render={({ field }) => (
<SelectEmployeeServerSide
label="Paid By" required
label="Paid By" required
value={field.value}
onChange={field.onChange}
isFullObject={false}
isFullObject={false}
/>
)}
/>
@ -437,32 +440,37 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
</div>
</div>
<div className="row mb-4">
<div className="col-md-6 text-start ">
<div className="col-md-6 text-start">
<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>
@ -553,7 +561,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
(fileError?.fileSize?.message ||
fileError?.contentType?.message ||
fileError?.base64Data?.message,
fileError?.documentId?.message)
fileError?.documentId?.message)
}
</div>
))}
@ -578,8 +586,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
{isPending || createPending
? "Please Wait..."
: expenseToEdit
? "Update"
: "Save as Draft"}
? "Update"
: "Save as Draft"}
</button>
</div>
</form>

117
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 {
@ -176,15 +178,15 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
isAdvancePayment: data.isAdvancePayment || false,
billAttachments: data.attachments
? data?.attachments?.map((doc) => ({
fileName: doc.fileName,
base64Data: null,
contentType: doc.contentType,
documentId: doc.id,
fileSize: 0,
description: "",
preSignedUrl: doc.preSignedUrl,
isActive: doc.isActive ?? true,
}))
fileName: doc.fileName,
base64Data: null,
contentType: doc.contentType,
documentId: doc.id,
fileSize: 0,
description: "",
preSignedUrl: doc.preSignedUrl,
isActive: doc.isActive ?? true,
}))
: [],
});
}
@ -266,9 +268,9 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
shouldDirty: true,
shouldValidate: true,
})
}
disabled={
disabled={
data?.recurringPayment?.isVariable && !isDraft && !isProcessed
}
/>
@ -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
}
>
<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 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
}
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>
{/* 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>
@ -559,7 +570,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
(fileError?.fileSize?.message ||
fileError?.contentType?.message ||
fileError?.base64Data?.message,
fileError?.documentId?.message)
fileError?.documentId?.message)
}
</div>
))}
@ -582,8 +593,8 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
{createPending || isPending
? "Please Wait..."
: requestToEdit
? "Update"
: "Save as Draft"}
? "Update"
: "Save as Draft"}
</button>
</div>
</form>

106
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("");
@ -128,8 +130,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
const handleCheckboxChange = (event, user) => {
const updatedSelectedEmployees = event.target.checked
? [...(watch("selectedEmployees") || []), user.id].filter(
(v, i, a) => a.indexOf(v) === i
)
(v, i, a) => a.indexOf(v) === i
)
: (watch("selectedEmployees") || []).filter((id) => id !== user.id);
setValue("selectedEmployees", updatedSelectedEmployees);
@ -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"
/>
)}
</select>
/>
{errors.organizationId && (
<small className="danger-text">{errors.organizationId.message}</small>
)}
</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"
/>
)}
</select>
/>
{errors.serviceId && (
<small className="danger-text">{errors.serviceId.message}</small>
)}
</div>
</div>
<div
@ -292,12 +303,11 @@ 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"
}`}
? "text-secondary"
: "text-primary"
}`}
onClick={() => setOpen(!open)}
>
<i className="bx bx-slider-alt ms-2"></i>
@ -409,7 +419,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
<p className="text-center">Loading employees...</p>
</div>
) : filteredEmployees?.length > 0 ? (
filteredEmployees.map((emp,index) => {
filteredEmployees.map((emp, index) => {
const jobRole = jobRoleData?.find(
(role) => role?.id === emp?.jobRoleId
);
@ -479,14 +489,14 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
{watch("selectedEmployees")?.length > 0 && (
<div className="mt-1">
<div className="text-start px-2">
{watch("selectedEmployees")?.map((empId,ind) => {
{watch("selectedEmployees")?.map((empId, ind) => {
const emp = employees?.data?.find(
(emp) => emp.id === empId
);
return (
emp && (
<span
key={`${empId}-${ind}`}
key={`${empId}-${ind}`}
className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
>
{emp.firstName} {emp.lastName}

199
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,95 +93,109 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
projectId: selectedProject,
};
let infraObject = [
const infraObject = [
{
building: payload,
floor: null,
workArea: null,
},
];
ManageBuilding({ infraObject, projectId: selectedProject });
};
return (
<form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
<h5 className="text-center mb-2">Manage Buildings</h5>
<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>
<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 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"
/>
)}
/>
{errors.Id && <span className="danger-text">{errors.Id.message}</span>}
</div>
{/* Name */}
<div className="col-12 text-start">
<Label className="form-label" required>
{watchedId !== "0" ? "Rename Building Name" : "New Building Name"}
</Label>
<input
{...register("name")}
type="text"
className="form-control "
/>
{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>
<textarea
{...register("description")}
rows="5"
maxLength="160"
className="form-control "
/>
{errors.description && (
<span className="danger-text">{errors.description.message}</span>
)}
</select>
{errors.Id && <span className="danger-text">{errors.Id.message}</span>}
</div>
</div>
{/* Name */}
<div className="col-12 text-start">
<Label className="form-label" required>
{watchedId !== "0" ? "Rename Building Name" : "New Building Name"}
</Label>
<input
{...register("name")}
type="text"
className="form-control form-control-sm"
/>
{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>
<textarea
{...register("description")}
rows="5"
maxLength="160"
className="form-control form-control-sm"
/>
{errors.description && (
<span className="danger-text">{errors.description.message}</span>
)}
</div>
<div className="col-12 text-end mt-6 my-2">
<button
type="reset"
className="btn btn-sm btn-label-secondary me-3"
disabled={isPending}
onClick={() => {
onClose();
reset();
}}
>
Cancel
</button>
<button
type="submit"
className="btn btn-sm btn-primary"
disabled={isPending}
>
{isPending
? "Please wait..."
: watchedId !== "0"
? "Edit Building"
: "Add Building"}
</button>
</div>
</form>
{/* Buttons */}
<div className="col-12 text-end mt-6 my-2">
<button
type="reset"
className="btn btn-sm btn-label-secondary me-3"
disabled={isPending}
onClick={() => {
onClose();
reset();
}}
>
Cancel
</button>
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
{isPending
? "Please wait..."
: watchedId !== "0"
? "Edit Building"
: "Add Building"}
</button>
</div>
</form>
</AppFormProvider>
);
};

310
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,158 +120,168 @@ const EditActivityModal = ({
});
}
return (
<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>
</div>
<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>
</div>
<div className="row g-2 text-start">
<div className="col-12 col-md-6">
<label className="form-label">Select Building</label>
<div className="row g-2 text-start">
<div className="col-12 col-md-6">
<label className="form-label">Select Building</label>
<input
className="form-control"
value={building?.buildingName}
disabled
/>
</div>
<div className="col-12 col-md-6">
<label className="form-label">Select Floor</label>
<input
className="form-control"
value={floor?.floorName}
disabled
/>
</div>
</div>
<div className="col-12 text-start">
<label className="form-label">Select Work Area</label>
<input
className="form-control form-control-sm"
value={building?.buildingName}
className="form-control"
value={workArea?.areaName}
disabled
/>
</div>
<div className="col-12 text-start">
<label className="form-label">Select Service</label>
<input
className="form-control"
value={
workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
}
disabled
/>
</div>
<div className="col-12 col-md-6">
<label className="form-label">Select Floor</label>
<input
className="form-control form-control-sm"
value={floor?.floorName}
<div className="col-12 text-start">
<label className="form-label">Select Activity</label>
<select
{...register("activityID")}
className="form-select"
disabled
>
<option >Select Activity</option>
{loadingActivities ? (
<option>Loading...</option>
) : (
sortedActivities.map((a) => (
<option key={a.id} value={a.id}>
{a.activityName}
</option>
))
)}
</select>
{errors.activityID && (
<p className="danger-text">{errors.activityID.message}</p>
)}
</div>
<div className="col-12 text-start">
<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"
/>
)}
/>
{errors.workCategoryId && (
<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"
className="form-control"
/>
{errors.plannedWork && (
<p className="danger-text">{errors.plannedWork.message}</p>
)}
</div>
<div className="col-5 text-start">
<label className="form-label">Completed Work</label>
<input
{...register("completedWork", { valueAsNumber: true })}
type="number"
disabled={getValues("completedWork") > 0}
className="form-control"
/>
{errors.completedWork && (
<p className="danger-text">{errors.completedWork.message}</p>
)}
</div>
<div className="col-2 text-start">
<label className="form-label">Unit</label>
<input
className="form-control"
disabled
value={selectedActivity?.unitOfMeasurement || ""}
/>
</div>
</div>
<div className="col-12 text-start">
<label className="form-label">Select Work Area</label>
<input
className="form-control form-control-sm"
value={workArea?.areaName}
disabled
/>
</div>
<div className="col-12 text-start">
<label className="form-label">Select Service</label>
<input
className="form-control form-control-sm"
value={
workItem?.activityMaster?.activityGroupMaster?.service?.name || ""
}
disabled
/>
</div>
<div className="col-12 text-start">
<label className="form-label">Select Activity</label>
<select
{...register("activityID")}
className="form-select form-select-sm"
disabled
>
<option >Select Activity</option>
{loadingActivities ? (
<option>Loading...</option>
) : (
sortedActivities.map((a) => (
<option key={a.id} value={a.id}>
{a.activityName}
</option>
))
<div className="col-12 text-start">
<label className="form-label">Comment</label>
<textarea {...register("comment")} rows="2" className="form-control" />
{errors.comment && (
<div className="danger-text">{errors.comment.message}</div>
)}
</select>
{errors.activityID && (
<p className="danger-text">{errors.activityID.message}</p>
)}
</div>
</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>
))
)}
</select>
{errors.workCategoryId && (
<p className="danger-text">{errors.workCategoryId.message}</p>
)}
</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"
/>
{errors.plannedWork && (
<p className="danger-text">{errors.plannedWork.message}</p>
)}
</div>
<div className="col-5 text-start">
<label className="form-label">Completed Work</label>
<input
{...register("completedWork", { valueAsNumber: true })}
type="number"
disabled={getValues("completedWork") > 0}
className="form-control form-control-sm"
/>
{errors.completedWork && (
<p className="danger-text">{errors.completedWork.message}</p>
)}
</div>
<div className="col-2 text-start">
<label className="form-label">Unit</label>
<input
className="form-control form-control-sm"
disabled
value={selectedActivity?.unitOfMeasurement || ""}
/>
</div>
<div className="col-12 text-start">
<label className="form-label">Comment</label>
<textarea {...register("comment")} rows="2" className="form-control" />
{errors.comment && (
<div className="danger-text">{errors.comment.message}</div>
)}
</div>
<div className="col-12 text-end mt-5">
<button
type="button"
className="btn btn-sm btn-label-secondary me-2"
onClick={onClose}
disabled={isPending}
>
Cancel
</button>
<button
type="submit"
className="btn btn-sm btn-primary"
disabled={isPending}
>
{isPending ? "Please Wait..." : "Edit Task"}
</button>
</div>
</form>
<div className="col-12 text-end mt-5">
<button
type="button"
className="btn btn-sm btn-label-secondary me-2"
onClick={onClose}
disabled={isPending}
>
Cancel
</button>
<button
type="submit"
className="btn btn-sm btn-primary"
disabled={isPending}
>
{isPending ? "Please Wait..." : "Edit Task"}
</button>
</div>
</form>
</AppFormProvider>
);
};

232
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({
@ -48,7 +45,7 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
: "Floor created Successfully",
"success"
);
reset({ id: "0", floorName: ""});
reset({ id: "0", floorName: "" });
// onClose?.();
},
});
@ -98,94 +95,139 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
};
return (
<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 &&
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>
{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)
.sort((a, b) => a.floorName.localeCompare(b.floorName))
.map((f) => (
<option key={f.id} value={f.id}>
{f.floorName}
</option>
))}
</select>
</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"
placeholder="Floor Name"
/>
{errors.floorName && (
<p className="danger-text">{errors.floorName.message}</p>
<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>
<AppFormController
name="buildingId"
control={control}
rules={{ required: "Building is required" }}
render={({ field }) => (
<SelectField
label=""
placeholder="Select Building"
options={
project
?.filter((b) => b.buildingName)
.sort((a, b) => a.buildingName.localeCompare(b.buildingName))
.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"
/>
)}
</div>
</>
)}
/>
{errors.buildingId && <p className="danger-text">{errors.buildingId.message}</p>}
</div>
<div className="col-12 text-end mt-6 my-2">
<button
type="button"
className="btn btn-sm btn-label-secondary me-3"
disabled={isPending}
onClick={onClose}
>
Cancel
</button>
<button
type="submit"
className="btn btn-sm btn-primary"
disabled={isPending}
>
{isPending
? "Please Wait"
: watchId !== "0"
? "Edit Floor"
: "Add Floor"}
</button>
</div>
</form>
{watchBuildingId !== "0" && (
<>
<div className="col-12 text-start">
<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) => ({ 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"
placeholder="Floor Name"
/>
{errors.floorName && (
<p className="danger-text">{errors.floorName.message}</p>
)}
</div>
</>
)}
<div className="col-12 text-end mt-6 my-2">
<button
type="button"
className="btn btn-sm btn-label-secondary me-3"
disabled={isPending}
onClick={onClose}
>
Cancel
</button>
<button
type="submit"
className="btn btn-sm btn-primary"
disabled={isPending}
>
{isPending
? "Please Wait"
: watchId !== "0"
? "Edit Floor"
: "Add Floor"}
</button>
</div>
</form>
</AppFormProvider>
);
};

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

@ -8,10 +8,12 @@ import {
useGroups,
useWorkCategoriesMaster,
} from "../../../hooks/masterHook/useMaster";
import { useManageTask, useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
import { useManageTask, useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
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([]);
@ -112,10 +108,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
const { mutate: CreateTask, isPending } = useManageTask({
onSuccessCallback: (response) => {
showToast(response?.message, "success");
setValue("activityID",""),
setValue("plannedWork",0),
setValue("completedWork",0)
setValue("comment","")
setValue("activityID", ""),
setValue("plannedWork", 0),
setValue("completedWork", 0)
setValue("comment", "")
},
});
useEffect(() => {
@ -148,224 +144,290 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
};
return (
<form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
<div className="text-center mb-1">
<h5 className="mb-1">Manage Task</h5>
</div>
<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>
{errors.buildingID && (
<p className="danger-text">{errors.buildingID.message}</p>
)}
</div>
{selectedBuilding && (
<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 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>
{errors.floorId && (
<p className="danger-text">{errors.floorId.message}</p>
)}
</div>
)}
{/* Work Area Selection */}
{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>
{errors.workAreaId && (
<p className="danger-text">{errors.workAreaId.message}</p>
)}
</div>
)}
{/* Services Selection */}
{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);
}}
>
<option value="">Select Service</option>
{servicesLoading && <option>Loading...</option>}
{assignedServices?.map((service) => (
<option key={service.id} value={service.id}>
{service.name}
</option>
))}
</select>
</div>
)}
{/* Activity Group (Organization) Selection */}
{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>}
</div>
)}
{/* Activity Selection */}
{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>}
</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>
{errors.workCategoryId && (
<p className="danger-text">{errors.workCategoryId.message}</p>
)}
</div>
)}
{selectedActivity && selectedCategory && (
<>
<div className="col-5 text-start">
<Label className="form-label" required>Planned Work</Label>
<input
type="number"
className="form-control form-control-sm"
{...register("plannedWork", { valueAsNumber: true })}
/>
{errors.plannedWork && (
<p className="danger-text">{errors.plannedWork.message}</p>
<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"
/>
)}
</div>
<div className="col-5 text-start">
<label className="form-label">Completed Work</label>
<input
type="number"
className="form-control form-control-sm"
{...register("completedWork", { valueAsNumber: true })}
/>
{errors.completedWork && (
<p className="danger-text">{errors.completedWork.message}</p>
)}
</div>
<div className="col-2 text-start">
<label className="form-label">Unit</label>
<input
type="text"
className="form-control form-control-sm"
disabled
value={selectedActivity?.unitOfMeasurement || ""}
/>
</div>
</>
)}
{selectedActivity && selectedCategory && (
<div className="col-12 text-start">
<label className="form-label">Comment</label>
<textarea
className="form-control"
rows="2"
{...register("comment")}
/>
{errors.comment && (
<p className="danger-text">{errors.comment.message}</p>
{errors.buildingID && (
<small className="danger-text">{errors.buildingID.message}</small>
)}
</div>
)}
<div className="col-12 text-end mt-6 my-2">
<button
type="button"
className="btn btn-sm btn-label-secondary me-3"
onClick={onClose}
>
Cancel
</button>
<button
type="submit"
className="btn btn-sm btn-primary"
// disabled={isSubmitting}
disabled={isPending}
>
{isPending ? "Please Wait..." : "Add Task"}
</button>
</div>
</form>
{/* Select Floor */}
{selectedBuilding && (
<div className="col-6 text-start">
<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 && (
<small className="danger-text">{errors.floorId.message}</small>
)}
</div>
)}
{/* Select Work Area */}
{selectedFloor && (
<div className="col-12 text-start">
<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 && (
<small className="danger-text">{errors.workAreaId.message}</small>
)}
</div>
)}
{/* Select Service */}
{selectedWorkArea && (
<div className="col-12 text-start">
<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", "");
}}
isLoading={servicesLoading}
className="m-0"
/>
)}
/>
{errors.serviceId && (
<small className="danger-text">{errors.serviceId.message}</small>
)}
</div>
)}
{/* Select Activity Group */}
{selectedService && (
<div className="col-12 text-start">
<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>
)}
{/* Select Activity */}
{selectedGroup && (
<div className="col-12 text-start">
<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">
<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 && (
<small className="danger-text">{errors.workCategoryId.message}</small>
)}
</div>
)}
{selectedActivity && selectedCategory && (
<>
<div className="col-5 text-start">
<Label className="form-label" required>Planned Work</Label>
<input
type="number"
className="form-control "
{...register("plannedWork", { valueAsNumber: true })}
/>
{errors.plannedWork && (
<p className="danger-text">{errors.plannedWork.message}</p>
)}
</div>
<div className="col-5 text-start">
<label className="form-label">Completed Work</label>
<input
type="number"
className="form-control "
{...register("completedWork", { valueAsNumber: true })}
/>
{errors.completedWork && (
<p className="danger-text">{errors.completedWork.message}</p>
)}
</div>
<div className="col-2 text-start">
<label className="form-label">Unit</label>
<input
type="text"
className="form-control "
disabled
value={selectedActivity?.unitOfMeasurement || ""}
/>
</div>
</>
)}
{selectedActivity && selectedCategory && (
<div className="col-12 text-start">
<label className="form-label">Comment</label>
<textarea
className="form-control"
rows="2"
{...register("comment")}
/>
{errors.comment && (
<p className="danger-text">{errors.comment.message}</p>
)}
</div>
)}
<div className="col-12 text-end mt-6 my-2">
<button
type="button"
className="btn btn-sm btn-label-secondary me-3"
onClick={onClose}
>
Cancel
</button>
<button
type="submit"
className="btn btn-sm btn-primary"
// disabled={isSubmitting}
disabled={isPending}
>
{isPending ? "Please Wait..." : "Add Task"}
</button>
</div>
</form>
</AppFormProvider>
);
};

208
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,99 +101,122 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
};
return (
<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>
{errors.buildingId && (
<p className="danger-text">{errors.buildingId.message}</p>
)}
</div>
{watchBuildingId !== "0" && (
<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 Floor</Label>
<select
{...register("floorId")}
className="form-select form-select-sm"
>
<option value="0">
{selectedBuilding?.floor?.length > 0
? "NO Floor Found"
: "Select Floor"}
</option>
<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"
/>
)}
/>
{selectedBuilding?.floors?.map((f) => (
<option key={f.id} value={f.id}>
{f.floorName}
</option>
))}
</select>
{errors.floorId && (
<p className="danger-text">{errors.floorId.message}</p>
{errors.buildingId && (
<small className="danger-text">{errors.buildingId.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>
</div>
<div className="col-12 text-start">
<Label className="form-label" required>
{watchWorkAreaId === "0"
? "Enter Work Area Name"
: "Edit Work Area Name"}
</Label>
<input
type="text"
className="form-control form-control-sm"
placeholder="Work Area"
{...register("areaName")}
{watchBuildingId !== "0" && (
<div className="col-12 col-sm-6 text-start">
<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.areaName && (
<p className="danger-text">{errors.areaName.message}</p>
{errors.floorId && (
<small className="danger-text">{errors.floorId.message}</small>
)}
</div>
</>
)}
<div className="col-12 text-end mt-6 my-2">
<button type="button" className="btn btn-sm btn-label-secondary me-3" disabled={isPending} onClick={onClose}>
Cancel
</button>
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
{isPending ? "Please Wait.." : watchWorkAreaId === "0" ? "Add Work Area" : "Update Work Area"}
</button>
)}
</div>
</form>
{watchFloorId !== "0" && (
<>
<div className="col-12 text-start">
<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">
<Label className="form-label" required>
{watchWorkAreaId === "0"
? "Enter Work Area Name"
: "Edit Work Area Name"}
</Label>
<input
type="text"
className="form-control"
placeholder="Work Area"
{...register("areaName")}
/>
{errors.areaName && (
<p className="danger-text">{errors.areaName.message}</p>
)}
</div>
</>
)}
<div className="col-12 text-end mt-6 my-2">
<button type="button" className="btn btn-sm btn-label-secondary me-3" disabled={isPending} onClick={onClose}>
Cancel
</button>
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
{isPending ? "Please Wait.." : watchWorkAreaId === "0" ? "Add Work Area" : "Update Work Area"}
</button>
</div>
</form>
</AppFormProvider>
);
};

181
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) => {
@ -42,8 +44,8 @@ const ManageProjectInfo = ({ project, onClose }) => {
1,
true
);
const { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()});
const {mutate:CeateProject,isPending:isCreating} = useCreateProject(()=>{onClose?.()})
const { mutate: UpdateProject, isPending } = useUpdateProject(() => { onClose?.() });
const { mutate: CeateProject, isPending: isCreating } = useCreateProject(() => { onClose?.() })
const {
register,
@ -74,7 +76,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
pmcId: projects_Details?.pmc?.id || "",
});
setAddressLength(projects_Details?.projectAddress?.length || 0);
}, [project, projects_Details, reset,data]);
}, [project, projects_Details, reset, data]);
const onSubmitForm = (formData) => {
if (project) {
@ -85,8 +87,8 @@ const ManageProjectInfo = ({ project, onClose }) => {
id: project,
};
UpdateProject({ projectId: project, payload: payload });
}else{
let payload = {
} else {
let payload = {
...formData,
startDate: localToUtc(formData.startDate),
endDate: localToUtc(formData.endDate),
@ -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 && (
@ -225,103 +229,108 @@ const ManageProjectInfo = ({ project, onClose }) => {
)}
</div>
<div className="col-12 ">
<label className="form-label" htmlFor="modalEditUserStatus">
<div className="col-12">
<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">
<div className="col-12">
<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">
<div className="col-12">
<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
@ -376,7 +385,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
className="btn btn-primary btn-sm"
disabled={isPending || isCreating || loading}
>
{isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
{isPending || isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
</button>
</div>
</form>

72
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>
) : (
<h5>{assignedServices[0].name}</h5>
))}
<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

96
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"),
@ -46,26 +48,26 @@ const ProjectPermission = () => {
);
useEffect(() => {
if (!selectedEmployee) return;
if (!selectedEmployee) return;
const enabledPerms =
const enabledPerms =
selectedEmpPermissions?.permissions
?.filter((perm) => perm.isEnabled)
?.map((perm) => perm.id) || [];
setValue("selectedPermissions", enabledPerms, { shouldValidate: true });
}, [selectedEmpPermissions, setValue, selectedEmployee]);
const selectedPermissions = watch("selectedPermissions") || [];
const existingEnabledIds =
selectedEmpPermissions?.permissions
?.filter((perm) => perm.isEnabled)
?.map((perm) => perm.id) || [];
?.filter((p) => p.isEnabled)
?.map((p) => p.id) || [];
setValue("selectedPermissions", enabledPerms, { shouldValidate: true });
}, [selectedEmpPermissions, setValue, selectedEmployee]);
const selectedPermissions = watch("selectedPermissions") || [];
const existingEnabledIds =
selectedEmpPermissions?.permissions
?.filter((p) => p.isEnabled)
?.map((p) => p.id) || [];
const hasChanges =
selectedPermissions.length !== existingEnabledIds.length ||
selectedPermissions.some((id) => !existingEnabledIds.includes(id));
const hasChanges =
selectedPermissions.length !== existingEnabledIds.length ||
selectedPermissions.some((id) => !existingEnabledIds.includes(id));
const { mutate: updatePermission, isPending } =
useUpdateProjectLevelEmployeePermission();
@ -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]
?.sort((a, b) =>
`${a?.firstName} ${a?.firstName}`?.localeCompare(
`${b?.firstName} ${b?.lastName}`
</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?.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

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

@ -2,8 +2,11 @@ import React, { useState } from "react";
import TeamEmployeeList from "./TeamEmployeeList";
import { useOrganization } from "../../../hooks/useDirectory";
import { useOrganizationsList } from "../../../hooks/useOrganization";
import { useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
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)}

260
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,62 +161,68 @@ 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 && (
<>
{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>
)}
</>
<div className="col-md-6 col-12 d-flex flex-wrap align-items-center gap-3">
{!servicesLoading && assignedServices && (
<>
{assignedServices.length === 1 && (
<h5 className="mb-2">{assignedServices[0].name}</h5>
)}
</div>
<div className="form-check form-switch d-flex align-items-center text-nowrap">
<input
type="checkbox"
className="form-check-input"
id="activeEmployeeSwitch"
checked={activeEmployee}
onChange={handleToggleActive}
/>
<label
className="form-check-label ms-2"
htmlFor="activeEmployeeSwitch"
>
{activeEmployee ? "Active Employees" : "In-active Employees"}
</label>
</div>
{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 className="form-check form-switch d-flex align-items-center text-nowrap">
<input
type="checkbox"
className="form-check-input"
id="activeEmployeeSwitch"
checked={activeEmployee}
onChange={handleToggleActive}
/>
<label className="form-check-label ms-2" htmlFor="activeEmployeeSwitch">
{activeEmployee ? "Active Employees" : "In-active Employees"}
</label>
</div>
</div>
<div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3">
<input
type="search"
className="form-control form-control-sm"
placeholder="Search by Name or Role"
aria-controls="DataTables_Table_0"
style={{ maxWidth: "200px" }}
value={searchTerm}
onChange={handleSearch}
/>
<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 w-100"
placeholder="Search by Name or Role"
value={field.value}
onChange={field.onChange}
/>
)}
/>
</div>
{HasAssignUserPermission && (
<button
@ -246,74 +259,73 @@ const Teams = () => {
</tr>
</thead>
<tbody className="table-border-bottom-0">
{filteredEmployees &&
filteredEmployees
.sort((a, b) =>
(a.firstName || "").localeCompare(b.firstName || "")
)
.map((emp) => (
<tr key={emp.id}>
<td>
<div className="d-flex justify-content-start align-items-center">
<Avatar
firstName={emp.firstName}
lastName={emp.lastName}
/>
<div className="d-flex flex-column">
<a
onClick={() =>
navigate(
`/employee/${emp.employeeId}?for=attendance`
)
}
className="text-heading text-truncate cursor-pointer"
>
<span className="fw-normal">
{emp.firstName}{" "}
{emp.lastName}
</span>
</a>
</div>
</div>
</td>
<td>{emp.serviceName || "N/A"}</td>
<td>{emp.organizationName || "N/A"}</td>
<td>
{moment(emp.allocationDate).format("DD-MMM-YYYY")}
</td>
{activeEmployee && (
<td>
{emp.reAllocationDate
? moment(emp.reAllocationDate).format(
"DD-MMM-YYYY"
)
: "Present"}
</td>
)}
<td>
<span className="badge bg-label-primary me-1">
{getJobRole(emp.jobRoleId)}
</span>
</td>
<td>
{emp.isActive ? (
<button
aria-label="Delete"
type="button"
title="Remove from project"
className="btn p-0 dropdown-toggle hide-arrow"
onClick={() => setSelectedEmployee(emp)}
{filteredEmployees
.sort((a, b) =>
(a.firstName || "").localeCompare(b.firstName || "")
)
.map((emp) => (
<tr key={emp.id}>
<td>
<div className="d-flex justify-content-start align-items-center">
<Avatar
firstName={emp.firstName}
lastName={emp.lastName}
/>
<div className="d-flex flex-column">
<a
onClick={() =>
navigate(
`/employee/${emp.employeeId}?for=attendance`
)
}
className="text-heading text-truncate cursor-pointer"
>
<i className="bx bx-trash me-1 text-danger"></i>
</button>
) : (
<span>Not in project</span>
)}
<span className="fw-normal">
{emp.firstName}{" "}
{emp.lastName}
</span>
</a>
</div>
</div>
</td>
<td>{emp.serviceName || "N/A"}</td>
<td>{emp.organizationName || "N/A"}</td>
<td>
{moment(emp.allocationDate).format("DD-MMM-YYYY")}
</td>
{activeEmployee && (
<td>
{emp.reAllocationDate
? moment(emp.reAllocationDate).format(
"DD-MMM-YYYY"
)
: "Present"}
</td>
</tr>
))}
)}
<td>
<span className="badge bg-label-primary me-1">
{getJobRole(emp.jobRoleId)}
</span>
</td>
<td>
{emp.isActive ? (
<button
aria-label="Delete"
type="button"
title="Remove from project"
className="btn p-0 dropdown-toggle hide-arrow"
onClick={() => setSelectedEmployee(emp)}
>
<i className="bx bx-trash me-1 text-danger"></i>
</button>
) : (
<span>Not in project</span>
)}
</td>
</tr>
))}
</tbody>
</table>
)}

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

114
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>
))}
</>
)}
</select>
<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"
/>
)}
/>
</div>
<i
className="bx bx-plus-circle bx-xs cursor-pointer text-primary"
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,15 +233,15 @@ 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.."
placeholder="Enter Employee name.."
/>
{errors?.contactName && (
<span className="danger-text">{errors.contactName.message}</span>
@ -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({

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

@ -114,9 +114,8 @@ 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"}
</span>
@ -151,13 +150,12 @@ 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
? col.customRender(tenant)

60
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 && (
@ -78,10 +80,10 @@ const AddPayment = ({ onClose }) => {
minDate={
data?.clientSubmitedDate
? new Date(
new Date(data?.clientSubmitedDate).setDate(
new Date(data?.clientSubmitedDate).getDate() + 1
)
new Date(data?.clientSubmitedDate).setDate(
new Date(data?.clientSubmitedDate).getDate() + 1
)
)
: null
}
maxDate={new Date()}
@ -93,33 +95,30 @@ const AddPayment = ({ onClose }) => {
)}
</div>
<div className="col-12 col-md-6 mb-2">
<Label
htmlFor="paymentAdjustmentHeadId"
className="form-label"
required
>
<div className="col-12 col-md-6 mb-2">
<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 && (

63
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>
))}
</>
)}
</select>
</div>
{errors?.clientId && (
<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"
/>
)}
/>
{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"
@ -231,7 +230,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
<small className="danger-text">{errors.title.message}</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<div className="col-12 col-md-6 mb-2">
<Label required>Invoice Number</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"
@ -287,7 +286,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
</small>
)}
</div>
<div className="col-12 col-md-6 mb-2">
<div className="col-12 col-md-6 mb-2">
<Label required>Submission Date (Client)</Label>
<DatePicker
className="w-100"
@ -341,7 +340,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
</small>
)}
</div>
<div className="col-12 my-2 text-start mb-2">
<div className="col-12 my-2 text-start mb-2">
<div className="col-md-12">
<Label htmlFor="description" className="form-label" required>
Description
@ -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>

75
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,32 +78,45 @@ 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",
}}
>
{options.map((option, i) => (
<li key={i}>
<button
type="button"
className={`dropdown-item ${
option[valueKey] === value ? "active" : ""
}`}
onClick={() => handleSelect(option)}
>
{option[labelKey]}
</button>
</li>
))}
</ul>
<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 rounded text-truncate ${
option[valueKey] === value ? "active" : ""
}`}
onClick={() => handleSelect(option)}
>
{option[labelKey]}
</button>
</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"

50
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,36 +100,43 @@ 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>
)}
</div>
<div className="d-flex flex-row justify-content-end gap-3 ">
<div className="d-flex flex-row justify-content-end gap-3">
<button
type="button"
className="btn btn-sm btn-label-secondary"
@ -137,16 +147,16 @@ 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
? "Please Wait..."
: data
? "Update"
: "Submit"}
? "Update"
: "Submit"}
</button>
</div>
</form>
</div>

127
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(
@ -33,21 +35,22 @@ const ManageDocumentType = ({ data, onClose, documentCategories = [] }) => {
isValidationRequired: true,
isMandatory: true,
documentCategoryId: "",
entityTypeId:""
entityTypeId: ""
},
});
const {
const {
register,
handleSubmit,
reset,watch,
reset, watch,
control,
formState: { errors },
} = methods;
const selectedDocumentEntity = watch("entityTypeId")
const {DocumentCategories,isLoading} = useDocumentCategories(selectedDocumentEntity)
const { DocumentCategories, isLoading } = useDocumentCategories(selectedDocumentEntity)
const { mutate: createDocType, isPending: creating } = useCreateDocumentType(() =>
onClose?.()
@ -55,15 +58,15 @@ const ManageDocumentType = ({ data, onClose, documentCategories = [] }) => {
const { mutate: updateDocType, isPending: updating } = useUpdateDocumentType(() =>
onClose?.()
);
const onSubmit = (payload) => {
const { entityTypeId, ...rest } = payload;
const onSubmit = (payload) => {
const { entityTypeId, ...rest } = payload;
if (data) {
updateDocType({ id: data.id, payload: { ...rest, id: data.id } });
} else {
createDocType(rest);
}
};
if (data) {
updateDocType({ id: data.id, payload: { ...rest, id: data.id } });
} else {
createDocType(rest);
}
};
useEffect(() => {
@ -76,7 +79,7 @@ const onSubmit = (payload) => {
isValidationRequired: data.isValidationRequired ?? true,
isMandatory: data.isMandatory ?? true,
documentCategoryId: data.documentCategory?.id ?? "",
entityTypeId:data.documentCategory?.entityTypeId ?? ""
entityTypeId: data.documentCategory?.entityTypeId ?? ""
});
}
}, [data]);
@ -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,47 +159,59 @@ const onSubmit = (payload) => {
/>
<label className="form-check-label">Mandatory</label>
</div>
<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>
{errors.entityTypeId && (
<a className="text-danger">{errors.entityTypeId.message}</a>
)}
</div>
{/* Category */}
{/* Document Entity */}
<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>
{errors.documentCategoryId && (
<a className="text-danger">{errors.documentCategoryId.message}</a>
<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 && (
<small className="text-danger">{errors.entityTypeId.message}</small>
)}
</div>
{/* 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 && (
<small className="text-danger">{errors.documentCategoryId.message}</small>
)}
</div>
{/* Buttons */}
<div className="d-flex flex-row justify-content-end gap-3 ">
<button
<button
type="button"
className="btn btn-sm btn-label-secondary"
onClick={onClose}
@ -212,10 +227,10 @@ const onSubmit = (payload) => {
{creating || updating
? "Please Wait..."
: data
? "Update"
: "Submit"}
? "Update"
: "Submit"}
</button>
</div>
</form>
</FormProvider>

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 />

67
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 = () => {
@ -23,9 +26,9 @@ export const useDailyProgrssContext = () => {
};
const DailyProgrssReport = () => {
const selectedProject = useSelectedProject()
const selectedProject = useSelectedProject()
const [service, setService] = useState("");
const [filter,setFilter] = useState('')
const [filter, setFilter] = useState('')
const { setOffcanvasContent, setShowTrigger } = useFab();
const { data, isLoading, isError, error } = useProjectAssignedServices(selectedProject);
@ -41,8 +44,14 @@ const DailyProgrssReport = () => {
filter,
};
const handleFilter = (filterObj)=>{
setFilter(filterObj)
const { control } = useForm({
defaultValues: {
serviceFilter: ""
}
});
const handleFilter = (filterObj) => {
setFilter(filterObj)
}
useEffect(() => {
@ -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>
))}
</>
)}
</select>
</div>)}
{data?.length > 0 && (
<div className="col-sm-4 col-md-3 col-12 text-start">
<AppFormController
name="serviceFilter"
control={control}
defaultValue={service ?? ""}
render={({ field }) => (
<SelectField
label="Services"
options={[{ id: "", name: "All Projects" }, ...(data ?? [])]}
placeholder="Select Service"
labelKey="name"
valueKey="id"
isLoading={isLoading}
value={field.value}
onChange={(val) => {
field.onChange(val);
setService(val);
}}
className="m-0"
/>
)}
/>
</div>
)}
<div>
<TaskReportList />
</div>
</div>
</DailyProgrssContext.Provider>
</div>
);

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

@ -71,8 +71,7 @@ const ChangePasswordPage = () => {
const bodyContxt = (
<div className="row">
<div className="row">
<h5 className="mb-2">Change Password</h5>
<p className="mb-4 text-black">
@ -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>

88
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,
@ -46,9 +54,9 @@ const MasterPage = () => {
isError: isMasterError,
} = useMaster();
const { mutate: DeleteMaster, isPending: isDeleting } = useDeleteMasterItem();
const [isDeleletingServiceItem,setDeleletingServiceItem] = useState({isOpen:false,ItemId:null,whichItem:null})
const {mutate:DeleteSericeGroup,isPending:deletingGroup} =useDeleteServiceGroup()
const {mutate:DeleteAcivity,isPending:deletingActivity} = useDeleteActivity()
const [isDeleletingServiceItem, setDeleletingServiceItem] = useState({ isOpen: false, ItemId: null, whichItem: null })
const { mutate: DeleteSericeGroup, isPending: deletingGroup } = useDeleteServiceGroup()
const { mutate: DeleteAcivity, isPending: deletingActivity } = useDeleteActivity()
const [modalConfig, setModalConfig] = useState(null);
const [deleteData, setDeleteData] = useState(null);
@ -89,15 +97,15 @@ const MasterPage = () => {
};
const handleDeleteServiceItem =()=>{
if(!isDeleletingServiceItem.ItemId) return
const handleDeleteServiceItem = () => {
if (!isDeleletingServiceItem.ItemId) return
debugger
if(isDeleletingServiceItem.whichItem === "activity"){
DeleteAcivity(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})})
}else{
DeleteSericeGroup(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})})
if (isDeleletingServiceItem.whichItem === "activity") {
DeleteAcivity(isDeleletingServiceItem.ItemId, { onSuccess: () => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null }) })
} else {
DeleteSericeGroup(isDeleletingServiceItem.ItemId, { onSuccess: () => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null }) })
}
}
@ -115,7 +123,7 @@ const MasterPage = () => {
);
return (
<MasterContext.Provider value={{setDeleletingServiceItem}}>
<MasterContext.Provider value={{ setDeleletingServiceItem }}>
{modalConfig && (
<GlobalModel
size={
@ -134,8 +142,6 @@ const MasterPage = () => {
/>
</GlobalModel>
)}
<ConfirmModal
type="delete"
header={`Delete ${selectedMaster}`}
@ -145,15 +151,15 @@ const MasterPage = () => {
onSubmit={handleDeleteSubmit}
onClose={() => setDeleteData(null)}
/>
<ConfirmModal
type="delete"
header={`Delete ${isDeleletingServiceItem?.whichItem}`}
message={`Are you sure you want to delete this ${isDeleletingServiceItem?.whichItem}?`}
isOpen={!!isDeleletingServiceItem?.isOpen}
loading={deletingActivity}
onSubmit={handleDeleteServiceItem}
onClose={() => setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})}
onSubmit={handleDeleteServiceItem}
onClose={() => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null })}
/>
<div className="container-fluid">
@ -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
@ -204,7 +216,7 @@ const MasterPage = () => {
}
>
<i className="bx bx-plus-circle me-2"></i> <span className="d-none d-md-inline-block">Add{" "}
{selectedMaster}</span>
{selectedMaster}</span>
</button>
)}
</div>
@ -220,7 +232,7 @@ const MasterPage = () => {
</div>
</div>
</div>
</MasterContext.Provider>
</MasterContext.Provider>
);
};

26
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>
) : (
@ -92,14 +92,14 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
{" "}
{selectedMaster === "Activity" ? "Activity" : "Name"}
</th>
<th className="text-start d-none d-md-table-cell">
<th className="text-start d-none d-md-table-cell">
{" "}
{selectedMaster === "Activity"
? "Unit"
: selectedMaster === "Document Type"
? "Content Type"
: "Description"}
? "Content Type"
: "Description"}
</th>
<th className={` ${!hasMasterPermission && "d-none"}`}>
Actions
@ -109,15 +109,15 @@ 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) => (
<td className={`text-start mx-2 py-3 ${col.key === "description" && "d-none d-md-table-cell"}`} key={col.key} >
{col.key === "description" ? (
item[col.key] !== undefined &&
item[col.key] !== null ? (
item[col.key] !== null ? (
item[col.key].length > 80 ? (
<>{item[col.key].slice(0, 80)}...</>
) : (
@ -137,7 +137,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
<td className={!hasMasterPermission ? "d-none" : "py-3"}>
{(selectedMaster === "Application Role" ||
selectedMaster === "Work Category") &&
item?.isSystem ? (
item?.isSystem ? (
<>
<button
aria-label="Modify"
@ -230,9 +230,8 @@ 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
className="page-link"
@ -243,9 +242,8 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
</li>
))}
<li
className={`page-item ${
currentPage === totalPages ? "disabled" : ""
}`}
className={`page-item ${currentPage === totalPages ? "disabled" : ""
}`}
>
<button
className="page-link"