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

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

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

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

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

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

@ -43,7 +43,7 @@ const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) =>
Name Name
</Label> </Label>
<input <input
className="form-control form-control-sm" className="form-control"
{...register("name")} {...register("name")}
/> />
{errors.name && ( {errors.name && (
@ -51,12 +51,12 @@ const BucketForm = ({ selectedBucket, mode, onSubmit, onCancel, isPending }) =>
)} )}
</div> </div>
<div className="mb-3"> <div className="my-3">
<Label htmlFor="description" className="text-start" required> <Label htmlFor="description" className="text-start" required>
Description Description
</Label> </Label>
<textarea <textarea
className="form-control form-control-sm" className="form-control"
{...register("description")} {...register("description")}
rows="3" 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>; if (!loading && sorted.length === 0) return <div>No buckets found</div>;
return ( 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) => ( {sorted.map((bucket) => (
<div className="col" key={bucket.id}> <div className="col" key={bucket.id}>
<div className="card h-100"> <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" className="card text-start border-1"
style={{ background: `${!IsActive ? "#f8f6f6" : ""}` }} 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 justify-content-between">
<div <div
className={`d-flex align-items-center ${ className={`d-flex align-items-center ${
@ -61,7 +61,7 @@ const CardViewContact = ({
(contact?.name || "").trim().split(" ")[1]?.charAt(0) || "" (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>
<div> <div>
{IsActive && ( {IsActive && (

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

@ -45,7 +45,7 @@ const ManageBucket1 = () => {
return ( return (
<div className="container m-0 p-0" style={{ minHeight: "00px" }}> <div className="container m-0 p-0" style={{ minHeight: "00px" }}>
<div className="d-flex justify-content-center"> <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> </div>
{action ? ( {action ? (

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

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

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

@ -17,6 +17,8 @@ import {
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
import { useDocumentContext } from "./Documents"; import { useDocumentContext } from "./Documents";
import { isPending } from "@reduxjs/toolkit"; import { isPending } from "@reduxjs/toolkit";
import { AppFormController, AppFormProvider } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
const toBase64 = (file) => const toBase64 = (file) =>
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
@ -72,9 +74,12 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
handleSubmit, handleSubmit,
watch, watch,
setValue, setValue,
control,
reset, reset,
formState: { errors }, formState: { errors },
} = methods; } = methods;
const { mutate: UploadDocument, isPending: isUploading } = useUploadDocument( const { mutate: UploadDocument, isPending: isUploading } = useUploadDocument(
() => { () => {
showToast("Document Uploaded Successfully", "success"); showToast("Document Uploaded Successfully", "success");
@ -88,33 +93,33 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
} }
); );
const onSubmit = (data) => { const onSubmit = (data) => {
const normalizeAttachment = (attachment) => { const normalizeAttachment = (attachment) => {
if (!attachment) return null; if (!attachment) return null;
return { return {
...attachment, ...attachment,
fileSize: Math.ceil(attachment.fileSize / 1024), fileSize: Math.ceil(attachment.fileSize / 1024),
};
}; };
};
const payload = { const payload = {
...data, ...data,
attachment: normalizeAttachment(data.attachment), attachment: normalizeAttachment(data.attachment),
};
if (ManageDoc?.document) {
const DocumentPayload = {
...payload,
id: DocData.id,
tags: MergedTagsWithExistenStatus(data?.tags, DocData?.tags),
}; };
UpdateDocument({ documentId: DocData?.id, DocumentPayload });
} else { if (ManageDoc?.document) {
const DocumentPayload = { ...payload, entityId: Entity }; const DocumentPayload = {
UploadDocument(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 { const {
data: DocData, data: DocData,
@ -134,7 +139,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
const { DocumentTypes, isLoading: isTypeLoading } = useDocumentTypes( const { DocumentTypes, isLoading: isTypeLoading } = useDocumentTypes(
categoryId || null categoryId || null
); );
const {data:DocumentTags} = useDocumentTags() const { data: DocumentTags } = useDocumentTags()
// Update schema whenever document type changes // Update schema whenever document type changes
useEffect(() => { useEffect(() => {
@ -144,7 +149,7 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
(t) => String(t.id) === String(documentTypeId) (t) => String(t.id) === String(documentTypeId)
); );
if (!type) return; if (!type) return;
setSelectedType(type) setSelectedType(type)
const newSchema = DocumentPayloadSchema({ const newSchema = DocumentPayloadSchema({
isMandatory: type.isMandatory ?? false, isMandatory: type.isMandatory ?? false,
regexExpression: type.regexExpression ?? null, regexExpression: type.regexExpression ?? null,
@ -200,10 +205,10 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
t === "application/pdf" t === "application/pdf"
? ".pdf" ? ".pdf"
: t === "image/jpeg" : t === "image/jpeg"
? ".jpg,.jpeg" ? ".jpg,.jpeg"
: t === "image/png" : t === "image/png"
? ".png" ? ".png"
: "" : ""
) )
.join(",") || ""; .join(",") || "";
@ -231,200 +236,209 @@ const ManageDocument = ({ closeModal, Document_Entity, Entity }) => {
const isPending = isUploading || isUpdating; const isPending = isUploading || isUpdating;
return ( return (
<div className="p-2"> <AppFormProvider {...methods}>
<p className="fw-bold fs-6">Upload New Document</p> <div className="p-2">
<FormProvider key={documentTypeId} {...methods}> <h5 className="">Upload New Document</h5>
<form onSubmit={handleSubmit(onSubmit)} className="text-start"> <FormProvider key={documentTypeId} {...methods}>
{/* Category */} <form onSubmit={handleSubmit(onSubmit)} className="text-start">
<div className="mb-2"> {/* Category */}
<Label htmlFor="documentCategoryId" required>Document Category</Label> <div className="col-12 col-md-12 mb-2 mb-md-4">
<select <AppFormController
{...register("documentCategoryId")} name="documentCategoryId"
className="form-select form-select-sm" control={control}
> render={({ field }) => (
{isLoading && ( <SelectField
<option disabled value=""> label="Document Category"
Loading... options={DocumentCategories ?? []}
</option> placeholder="Select Category"
)} required
{!isLoading && <option value="">Select Category</option>} labelKey="name"
{DocumentCategories?.map((type) => ( valueKeyKey="id"
<option key={type.id} value={type.id}> value={field.value}
{type.name} onChange={field.onChange}
</option> isLoading={isLoading}
))} className="m-0"
</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>
)} )}
{DocumentTypes?.map((type) => ( />
<option key={type.id} value={type.id}>
{type.name} {errors.documentCategoryId && (
</option> <small className="danger-text">
))} {errors.documentCategoryId.message}
</select> </small>
{errors.documentTypeId && (
<div className="danger-text">
{errors.documentTypeId.message}
</div>
)} )}
</div> </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 */} {/* Type */}
<div className="mb-2"> {categoryId && (
<Label htmlFor="name" required> <div className="col-12 col-md-12 mb-2 mb-md-4">
Document Name <AppFormController
</Label> name="documentTypeId"
<input control={control}
type="text" render={({ field }) => (
className="form-control form-control-sm" <SelectField
{...register("name")} label="Document Type"
/> options={DocumentTypes ?? []}
{errors.name && ( placeholder="Select Document Type"
<div className="danger-text">{errors.name.message}</div> required
)} labelKey="name"
</div> valueKeyKey="id"
value={field.value}
onChange={field.onChange}
isLoading={isTypeLoading}
{/* Upload */} className="m-0"
<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
}}
/> />
{errors.documentTypeId && (
<small className="danger-text">
{errors.documentTypeId.message}
</small>
)}
</div> </div>
{errors.attachment && ( )}
<small className="danger-text">
{errors.attachment.message
? errors.attachment.message {/* Document ID */}
: errors.attachment.fileName?.message || <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.base64Data?.message ||
errors.attachment.contentType?.message || errors.attachment.contentType?.message ||
errors.attachment.fileSize?.message} errors.attachment.fileSize?.message}
</small> </small>
)} )}
{file?.base64Data && ( {file?.base64Data && (
<div className="d-flex justify-content-between text-start p-1 mt-2"> <div className="d-flex justify-content-between text-start p-1 mt-2">
<div> <div>
<span className="mb-0 text-secondary small d-block"> <span className="mb-0 text-secondary small d-block">
{file.fileName} {file.fileName}
</span> </span>
<span className="text-body-secondary small d-block"> <span className="text-body-secondary small d-block">
{(file.fileSize / 1024).toFixed(1)} KB {(file.fileSize / 1024).toFixed(1)} KB
</span> </span>
</div>
<i
className="bx bx-trash bx-sm cursor-pointer text-danger"
onClick={removeFile}
></i>
</div> </div>
<i )}
className="bx bx-trash bx-sm cursor-pointer text-danger" </div>
onClick={removeFile} </div>
></i> <div className="mb-4">
</div> <TagInput name="tags" label="Tags" placeholder="Tags.." options={DocumentTags} />
{errors.tags && (
<small className="danger-text">{errors.tags.message}</small>
)} )}
</div> </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 */} {/* Description */}
<div className="mb-2"> <div className="mb-4">
<Label htmlFor="description" required>Description</Label> <Label htmlFor="description" required>Description</Label>
<textarea <textarea
rows="2" rows="2"
className="form-control" className="form-control"
{...register("description")} {...register("description")}
></textarea> ></textarea>
{errors.description && ( {errors.description && (
<div className="danger-text">{errors.description.message}</div> <div className="danger-text">{errors.description.message}</div>
)} )}
</div> </div>
{/* Buttons */} {/* Buttons */}
<div className="d-flex justify-content-end gap-3 mt-4"> <div className="d-flex justify-content-end gap-3 mt-4">
<button <button
type="reset" type="reset"
className="btn btn-label-secondary btn-sm" className="btn btn-label-secondary btn-sm"
disabled={isPending} disabled={isPending}
onClick={closeModal} onClick={closeModal}
> >
Cancel Cancel
</button> </button>
<button <button
type="submit" type="submit"
className="btn btn-primary btn-sm" className="btn btn-primary btn-sm"
disabled={isPending} disabled={isPending}
> >
{isPending ? "Please Wait..." : " Submit"} {isPending ? "Please Wait..." : " Submit"}
</button> </button>
</div> </div>
</form> </form>
</FormProvider> </FormProvider>
</div> </div>
</AppFormProvider>
); );
}; };

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

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

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

@ -71,7 +71,7 @@ const EmpAttendance = () => {
<AttendLogs Id={attendanceId} /> <AttendLogs Id={attendanceId} />
</GlobalModel> </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 <div
className="dataTables_length text-start py-2 d-flex justify-content-between " className="dataTables_length text-start py-2 d-flex justify-content-between "
id="DataTables_Table_0_length" id="DataTables_Table_0_length"

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

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

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

@ -37,6 +37,7 @@ import SelectEmployeeServerSide, {
} from "../common/Forms/SelectFieldServerSide"; } from "../common/Forms/SelectFieldServerSide";
import { useAllocationServiceProjectTeam } from "../../hooks/useServiceProject"; import { useAllocationServiceProjectTeam } from "../../hooks/useServiceProject";
import { AppFormController } from "../../hooks/appHooks/useAppForm"; import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
const ManageExpense = ({ closeModal, expenseToEdit = null }) => { const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
const { const {
@ -182,15 +183,15 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
currencyId: data.currency.id || DEFAULT_CURRENCY, currencyId: data.currency.id || DEFAULT_CURRENCY,
billAttachments: data.documents billAttachments: data.documents
? data.documents.map((doc) => ({ ? data.documents.map((doc) => ({
fileName: doc.fileName, fileName: doc.fileName,
base64Data: null, base64Data: null,
contentType: doc.contentType, contentType: doc.contentType,
documentId: doc.documentId, documentId: doc.documentId,
fileSize: 0, fileSize: 0,
description: "", description: "",
preSignedUrl: doc.preSignedUrl, preSignedUrl: doc.preSignedUrl,
isActive: doc.isActive ?? true, isActive: doc.isActive ?? true,
})) }))
: [], : [],
}); });
} }
@ -236,7 +237,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
{expenseToEdit ? "Update Expense " : "Create New Expense"} {expenseToEdit ? "Update Expense " : "Create New Expense"}
</h5> </h5>
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}> <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"> <div className="col-12 col-md-6">
<SelectProjectField <SelectProjectField
label="Project" label="Project"
@ -259,30 +260,32 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
<Label htmlFor="expenseCategoryId" className="form-label" required> <Label htmlFor="expenseCategoryId" className="form-label" required>
Expense Category Expense Category
</Label> </Label>
<select
className="form-select " <AppFormController
id="expenseCategoryId" name="expenseCategoryId"
{...register("expenseCategoryId")} control={control}
> rules={{ required: "Expense Category is required" }}
<option value="" disabled> render={({ field }) => (
Select Category <SelectField
</option> label="" // Label already shown above
{ExpenseLoading ? ( placeholder="Select Category"
<option disabled>Loading...</option> options={expenseCategories ?? []}
) : ( value={field.value || ""}
expenseCategories?.map((expense) => ( onChange={field.onChange}
<option key={expense.id} value={expense.id}> required
{expense.name} isLoading={ExpenseLoading}
</option> className="m-0 form-select-sm w-100"
)) />
)} )}
</select> />
{errors.expensesCategoryId && (
{errors.expenseCategoryId && (
<small className="danger-text"> <small className="danger-text">
{errors.expensesCategoryId.message} {errors.expenseCategoryId.message}
</small> </small>
)} )}
</div> </div>
</div> </div>
<div className="row my-2 text-start"> <div className="row my-2 text-start">
@ -290,40 +293,40 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
<Label htmlFor="paymentModeId" className="form-label" required> <Label htmlFor="paymentModeId" className="form-label" required>
Payment Mode Payment Mode
</Label> </Label>
<select
className="form-select " <AppFormController
id="paymentModeId" name="paymentModeId"
{...register("paymentModeId")} control={control}
> rules={{ required: "Payment Mode is required" }}
<option value="" disabled> render={({ field }) => (
Select Mode <SelectField
</option> label="" // Label is shown above
{PaymentModeLoading ? ( placeholder="Select Mode"
<option disabled>Loading...</option> options={PaymentModes ?? []}
) : ( value={field.value || ""}
PaymentModes?.map((payment) => ( onChange={field.onChange}
<option key={payment.id} value={payment.id}> required
{payment.name} isLoading={PaymentModeLoading}
</option> className="m-0 form-select-sm w-100"
)) />
)} )}
</select> />
{errors.paymentModeId && ( {errors.paymentModeId && (
<small className="danger-text"> <small className="danger-text">{errors.paymentModeId.message}</small>
{errors.paymentModeId.message}
</small>
)} )}
</div> </div>
<div className="col-12 col-md-6 text-start">
<div className="col-12 col-md-6 text-start">
<AppFormController <AppFormController
name="paidById" name="paidById"
control={control} control={control}
render={({ field }) => ( render={({ field }) => (
<SelectEmployeeServerSide <SelectEmployeeServerSide
label="Paid By" required label="Paid By" required
value={field.value} value={field.value}
onChange={field.onChange} onChange={field.onChange}
isFullObject={false} isFullObject={false}
/> />
)} )}
/> />
@ -437,32 +440,37 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
</div> </div>
</div> </div>
<div className="row mb-4"> <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> <Label htmlFor="currencyId" className="form-label" required>
Select Currency Select Currency
</Label> </Label>
<select
className="form-select " <AppFormController
id="currencyId" name="currencyId"
{...register("currencyId")} control={control}
> rules={{ required: "Currency is required" }}
<option value="" disabled> render={({ field }) => (
Select Currency <SelectField
</option> label="" // Label already shown above
{currencyLoading ? ( placeholder="Select Currency"
<option disabled>Loading...</option> options={currencies?.map((currency) => ({
) : ( id: currency.id,
currencies?.map((currency) => ( name: `${currency.currencyName} (${currency.symbol})`,
<option key={currency.id} value={currency.id}> })) ?? []}
{`${currency.currencyName} (${currency.symbol}) `} value={field.value || ""}
</option> onChange={field.onChange}
)) required
isLoading={currencyLoading}
className="m-0 form-select-sm w-100"
/>
)} )}
</select> />
{errors.currencyId && ( {errors.currencyId && (
<small className="danger-text">{errors.currencyId.message}</small> <small className="danger-text">{errors.currencyId.message}</small>
)} )}
</div> </div>
{expenseCategory?.noOfPersonsRequired && ( {expenseCategory?.noOfPersonsRequired && (
<div className="col-md-6 text-start"> <div className="col-md-6 text-start">
<Label className="form-label" required> <Label className="form-label" required>
@ -553,7 +561,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
(fileError?.fileSize?.message || (fileError?.fileSize?.message ||
fileError?.contentType?.message || fileError?.contentType?.message ||
fileError?.base64Data?.message, fileError?.base64Data?.message,
fileError?.documentId?.message) fileError?.documentId?.message)
} }
</div> </div>
))} ))}
@ -578,8 +586,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
{isPending || createPending {isPending || createPending
? "Please Wait..." ? "Please Wait..."
: expenseToEdit : expenseToEdit
? "Update" ? "Update"
: "Save as Draft"} : "Save as Draft"}
</button> </button>
</div> </div>
</form> </form>

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

@ -30,6 +30,8 @@ import InputSuggestions from "../common/InputSuggestion";
import { useProfile } from "../../hooks/useProfile"; import { useProfile } from "../../hooks/useProfile";
import { blockUI } from "../../utils/blockUI"; import { blockUI } from "../../utils/blockUI";
import { SelectProjectField } from "../common/Forms/SelectFieldServerSide"; import { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
function ManagePaymentRequest({ closeModal, requestToEdit = null }) { function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
const { const {
@ -176,15 +178,15 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
isAdvancePayment: data.isAdvancePayment || false, isAdvancePayment: data.isAdvancePayment || false,
billAttachments: data.attachments billAttachments: data.attachments
? data?.attachments?.map((doc) => ({ ? data?.attachments?.map((doc) => ({
fileName: doc.fileName, fileName: doc.fileName,
base64Data: null, base64Data: null,
contentType: doc.contentType, contentType: doc.contentType,
documentId: doc.id, documentId: doc.id,
fileSize: 0, fileSize: 0,
description: "", description: "",
preSignedUrl: doc.preSignedUrl, preSignedUrl: doc.preSignedUrl,
isActive: doc.isActive ?? true, isActive: doc.isActive ?? true,
})) }))
: [], : [],
}); });
} }
@ -266,9 +268,9 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
shouldDirty: true, shouldDirty: true,
shouldValidate: true, shouldValidate: true,
}) })
} }
disabled={ disabled={
data?.recurringPayment?.isVariable && !isDraft && !isProcessed data?.recurringPayment?.isVariable && !isDraft && !isProcessed
} }
/> />
@ -281,33 +283,33 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
<Label htmlFor="expenseCategoryId" className="form-label" required> <Label htmlFor="expenseCategoryId" className="form-label" required>
Expense Category Expense Category
</Label> </Label>
<select
className="form-select " <AppFormController
id="expenseCategoryId" name="expenseCategoryId"
{...register("expenseCategoryId")} control={control}
disabled={ rules={{ required: "Expense Category is required" }}
data?.recurringPayment?.isVariable && !isDraft && !isProcessed render={({ field }) => (
} <SelectField
> label="" // Label already above
<option value="" disabled> placeholder="Select Category"
Select Category options={expenseCategories ?? []}
</option> value={field.value || ""}
{ExpenseLoading ? ( onChange={field.onChange}
<option disabled>Loading...</option> required
) : ( isLoading={ExpenseLoading}
expenseCategories?.map((expense) => ( isDisabled={data?.recurringPayment?.isVariable && !isDraft && !isProcessed}
<option key={expense.id} value={expense.id}> className="m-0 form-select-sm w-100"
{expense.name} />
</option>
))
)} )}
</select> />
{errors.expenseCategoryId && ( {errors.expenseCategoryId && (
<small className="danger-text"> <small className="danger-text">
{errors.expenseCategoryId.message} {errors.expenseCategoryId.message}
</small> </small>
)} )}
</div> </div>
</div> </div>
{/* Title and Advance Payment */} {/* Title and Advance Payment */}
@ -458,30 +460,39 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
<Label htmlFor="currencyId" className="form-label" required> <Label htmlFor="currencyId" className="form-label" required>
Currency Currency
</Label> </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 && ( {errors.currencyId && (
<small className="danger-text">{errors.currencyId.message}</small> <small className="danger-text">{errors.currencyId.message}</small>
)} )}
</div> </div>
</div> </div>
{/* Description */} {/* Description */}
@ -508,7 +519,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
</div> </div>
{/* Upload Document */} {/* Upload Document */}
<div className="row my-2 text-start"> <div className="row my-4 text-start">
<div className="col-md-12"> <div className="col-md-12">
<Label className="form-label">Upload Bill </Label> <Label className="form-label">Upload Bill </Label>
@ -559,7 +570,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
(fileError?.fileSize?.message || (fileError?.fileSize?.message ||
fileError?.contentType?.message || fileError?.contentType?.message ||
fileError?.base64Data?.message, fileError?.base64Data?.message,
fileError?.documentId?.message) fileError?.documentId?.message)
} }
</div> </div>
))} ))}
@ -582,8 +593,8 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
{createPending || isPending {createPending || isPending
? "Please Wait..." ? "Please Wait..."
: requestToEdit : requestToEdit
? "Update" ? "Update"
: "Save as Draft"} : "Save as Draft"}
</button> </button>
</div> </div>
</form> </form>

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

@ -18,6 +18,8 @@ import {
import eventBus from "../../services/eventBus"; import eventBus from "../../services/eventBus";
import { useCreateTask } from "../../hooks/useTasks"; import { useCreateTask } from "../../hooks/useTasks";
import Label from "../common/Label"; import Label from "../common/Label";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
const TaskSchema = (maxPlanned) => { const TaskSchema = (maxPlanned) => {
return z.object({ return z.object({
@ -107,7 +109,7 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
); );
const dispatch = useDispatch(); const dispatch = useDispatch();
const { loading, data: jobRoleData } = useMaster(); const { loading, data: jobRoleData } = useMaster("Job Role");
const [selectedRoles, setSelectedRoles] = useState(["all"]); const [selectedRoles, setSelectedRoles] = useState(["all"]);
const [displayedSelection, setDisplayedSelection] = useState(""); const [displayedSelection, setDisplayedSelection] = useState("");
@ -128,8 +130,8 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
const handleCheckboxChange = (event, user) => { const handleCheckboxChange = (event, user) => {
const updatedSelectedEmployees = event.target.checked const updatedSelectedEmployees = event.target.checked
? [...(watch("selectedEmployees") || []), user.id].filter( ? [...(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); : (watch("selectedEmployees") || []).filter((id) => id !== user.id);
setValue("selectedEmployees", updatedSelectedEmployees); setValue("selectedEmployees", updatedSelectedEmployees);
@ -241,48 +243,57 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
<div className="row mb-1"> <div className="row mb-1">
<div className="col-12"> <div className="col-12">
<div className="row text-start"> <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> <div>
<select <AppFormController
className="form-select form-select-sm" name="organizationId"
value={selectedOrganization || ""} control={control}
onChange={(e) => rules={{ required: "Organization is required" }}
setSelectedOrganization(e.target.value) render={({ field }) => (
} <SelectField
> label="" // No label here, use external label if needed
{isServiceLoading ? ( options={organizationList ?? []}
<option>Loading...</option> placeholder="--Select Organization--"
) : ( required
<> labelKey="name"
<option value="">--Select Organization--</option> valueKeyKey="id"
{organizationList?.map((org,index) => ( value={field.value || ""}
<option key={`${org.id}-${index}`} value={org.id}> onChange={field.onChange}
{org.name} isLoading={isServiceLoading}
</option> className="m-0 form-select-sm w-100"
))} />
</>
)} )}
</select> />
{errors.organizationId && (
<small className="danger-text">{errors.organizationId.message}</small>
)}
</div> </div>
<div> <div>
<select <AppFormController
className="form-select form-select-sm" name="serviceId"
value={selectedService || ""} control={control}
onChange={(e) => setSelectedService(e.target.value)} rules={{ required: "Service is required" }}
> render={({ field }) => (
{isOrgLoading ? ( <SelectField
<option>Loading...</option> label="" // No label as you have one above or elsewhere
) : ( options={serviceList ?? []}
<> placeholder="--Select Service--"
<option value="">--Select Service--</option> required
{serviceList?.map((service,index) => ( labelKey="name"
<option key={`${service.id}-${index}`} value={service.id}> valueKeyKey="id"
{service.name} value={field.value || ""}
</option> 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> </div>
<div <div
@ -292,12 +303,11 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
{/* Dropdown */} {/* Dropdown */}
<div className="dropdown position-relative d-inline-block"> <div className="dropdown position-relative d-inline-block">
<a <a
className={`dropdown-toggle hide-arrow cursor-pointer ${ className={`dropdown-toggle hide-arrow cursor-pointer ${selectedRoles.includes("all") ||
selectedRoles.includes("all") ||
selectedRoles.length === 0 selectedRoles.length === 0
? "text-secondary" ? "text-secondary"
: "text-primary" : "text-primary"
}`} }`}
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
> >
<i className="bx bx-slider-alt ms-2"></i> <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> <p className="text-center">Loading employees...</p>
</div> </div>
) : filteredEmployees?.length > 0 ? ( ) : filteredEmployees?.length > 0 ? (
filteredEmployees.map((emp,index) => { filteredEmployees.map((emp, index) => {
const jobRole = jobRoleData?.find( const jobRole = jobRoleData?.find(
(role) => role?.id === emp?.jobRoleId (role) => role?.id === emp?.jobRoleId
); );
@ -479,14 +489,14 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
{watch("selectedEmployees")?.length > 0 && ( {watch("selectedEmployees")?.length > 0 && (
<div className="mt-1"> <div className="mt-1">
<div className="text-start px-2"> <div className="text-start px-2">
{watch("selectedEmployees")?.map((empId,ind) => { {watch("selectedEmployees")?.map((empId, ind) => {
const emp = employees?.data?.find( const emp = employees?.data?.find(
(emp) => emp.id === empId (emp) => emp.id === empId
); );
return ( return (
emp && ( emp && (
<span <span
key={`${empId}-${ind}`} key={`${empId}-${ind}`}
className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1" className="badge rounded-pill bg-label-primary d-inline-flex align-items-center me-1 mb-1"
> >
{emp.firstName} {emp.lastName} {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 { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { getCachedData } from "../../../slices/apiDataManager";
import showToast from "../../../services/toastService"; import showToast from "../../../services/toastService";
import { useManageProjectInfra } from "../../../hooks/useProjects"; import { useManageProjectInfra } from "../../../hooks/useProjects";
import useSelect from "../../common/useSelect";
import Label from "../../common/Label"; import Label from "../../common/Label";
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
import SelectField from "../../common/Forms/SelectField";
const buildingSchema = z.object({ const buildingSchema = z.object({
Id: z.string().optional(), Id: z.string().optional(),
@ -22,14 +22,8 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
const selectedProject = useSelector( const selectedProject = useSelector(
(store) => store.localVariables.projectId (store) => store.localVariables.projectId
); );
const {
register, const methods = useForm({
handleSubmit,
formState: { errors },
setValue,
watch,
reset,
} = useForm({
resolver: zodResolver(buildingSchema), resolver: zodResolver(buildingSchema),
defaultValues: { defaultValues: {
Id: "0", Id: "0",
@ -37,12 +31,23 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
description: "", description: "",
}, },
}); });
const {
register,
handleSubmit,
control,
watch,
reset,
setValue,
formState: { errors },
} = methods;
const watchedId = watch("Id"); const watchedId = watch("Id");
const { mutate: ManageBuilding, isPending } = useManageProjectInfra({ const { mutate: ManageBuilding, isPending } = useManageProjectInfra({
onSuccessCallback: (data, variables) => { onSuccessCallback: () => {
showToast( showToast(
watchedId != "0" watchedId !== "0"
? "Building updated Successfully" ? "Building updated Successfully"
: "Building created Successfully", : "Building created Successfully",
"success" "success"
@ -79,7 +84,7 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
description: editingBuilding.description, description: editingBuilding.description,
}); });
} }
}, [editingBuilding]); }, [editingBuilding, reset]);
const onSubmitHandler = (data) => { const onSubmitHandler = (data) => {
const payload = { const payload = {
@ -88,95 +93,109 @@ const BuildingModel = ({ project, onClose, editingBuilding = null }) => {
projectId: selectedProject, projectId: selectedProject,
}; };
let infraObject = [ const infraObject = [
{ {
building: payload, building: payload,
floor: null, floor: null,
workArea: null, workArea: null,
}, },
]; ];
ManageBuilding({ infraObject, projectId: selectedProject }); ManageBuilding({ infraObject, projectId: selectedProject });
}; };
return ( return (
<form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2"> <AppFormProvider {...methods}>
<h5 className="text-center mb-2">Manage Buildings</h5> <form onSubmit={handleSubmit(onSubmitHandler)} className="row g-2">
<div className="col-12 text-start"> <h5 className="text-center mb-2">Manage Buildings</h5>
<label className="form-label">Select Building</label>
<select {/* Building Select */}
{...register("Id")} <div className="col-12 text-start">
className="select2 form-select form-select-sm" <Label htmlFor="Id" className="form-label">
> Select Building
<option value="0">Add New Building</option> </Label>
{sortedBuildings.length > 0 ? ( <AppFormController
sortedBuildings.map((b) => ( name="Id"
<option key={b.id} value={b.id}> control={control}
{b.buildingName} rules={{ required: "Building is required" }}
</option> render={({ field }) => (
)) <SelectField
) : ( label=""
<option disabled>No buildings found</option> 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> </div>
{errors.Id && <span className="danger-text">{errors.Id.message}</span>}
</div>
{/* Name */} {/* Buttons */}
<div className="col-12 text-start"> <div className="col-12 text-end mt-6 my-2">
<Label className="form-label" required> <button
{watchedId !== "0" ? "Rename Building Name" : "New Building Name"} type="reset"
</Label> className="btn btn-sm btn-label-secondary me-3"
<input disabled={isPending}
{...register("name")} onClick={() => {
type="text" onClose();
className="form-control form-control-sm" reset();
/> }}
{errors.name && ( >
<span className="danger-text">{errors.name.message}</span> Cancel
)} </button>
</div> <button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
{isPending
{/* Description */} ? "Please wait..."
<div className="col-12 text-start"> : watchedId !== "0"
<Label className="form-label" required>Description</Label> ? "Edit Building"
<textarea : "Add Building"}
{...register("description")} </button>
rows="5" </div>
maxLength="160" </form>
className="form-control form-control-sm" </AppFormProvider>
/>
{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>
); );
}; };

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 { cacheData, getCachedData } from "../../../slices/apiDataManager";
import { refreshData } from "../../../slices/localVariablesSlice"; import { refreshData } from "../../../slices/localVariablesSlice";
import showToast from "../../../services/toastService"; import showToast from "../../../services/toastService";
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
import SelectField from "../../common/Forms/SelectField";
const taskSchema = z const taskSchema = z
.object({ .object({
@ -37,17 +39,7 @@ const EditActivityModal = ({
const { activities, loading: loadingActivities } = useActivitiesMaster(); const { activities, loading: loadingActivities } = useActivitiesMaster();
const { categories, loading: loadingCategories } = useWorkCategoriesMaster(); const { categories, loading: loadingCategories } = useWorkCategoriesMaster();
const [selectedActivity, setSelectedActivity] = useState(null); const [selectedActivity, setSelectedActivity] = useState(null);
const methods = useForm({
const {
register,
handleSubmit,
formState: { errors },
reset,
setValue,
getValues,
watch,
} = useForm({
resolver: zodResolver(taskSchema),
defaultValues: { defaultValues: {
activityID: "", activityID: "",
workCategoryId: "", workCategoryId: "",
@ -55,7 +47,11 @@ const EditActivityModal = ({
completedWork: 0, completedWork: 0,
comment: "", comment: "",
}, },
resolver: zodResolver(taskSchema),
}); });
const { register, control, watch, handleSubmit, reset, setValue, getValues, formState: { errors } } = methods;
const { mutate: UpdateTask, isPending } = useManageTask({ const { mutate: UpdateTask, isPending } = useManageTask({
onSuccessCallback: (response) => { onSuccessCallback: (response) => {
showToast(response?.message, "success") showToast(response?.message, "success")
@ -63,8 +59,6 @@ const EditActivityModal = ({
} }
}); });
const activityID = watch("activityID"); const activityID = watch("activityID");
const sortedActivities = useMemo( const sortedActivities = useMemo(
@ -126,158 +120,168 @@ const EditActivityModal = ({
}); });
} }
return ( return (
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}> <AppFormProvider {...methods}>
<div className="text-center mb-1"> <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
<h5 className="mb-1">Manage Task</h5> <div className="text-center mb-1">
</div> <h5 className="mb-1">Manage Task</h5>
</div>
<div className="row g-2 text-start"> <div className="row g-2 text-start">
<div className="col-12 col-md-6"> <div className="col-12 col-md-6">
<label className="form-label">Select Building</label> <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 <input
className="form-control form-control-sm" className="form-control"
value={building?.buildingName} 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 disabled
/> />
</div> </div>
<div className="col-12 col-md-6">
<label className="form-label">Select Floor</label> <div className="col-12 text-start">
<input <label className="form-label">Select Activity</label>
className="form-control form-control-sm" <select
value={floor?.floorName} {...register("activityID")}
className="form-select"
disabled 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>
<div className="col-12 text-start"> <div className="col-12 text-start">
<label className="form-label">Select Work Area</label> <label className="form-label">Comment</label>
<input <textarea {...register("comment")} rows="2" className="form-control" />
className="form-control form-control-sm" {errors.comment && (
value={workArea?.areaName} <div className="danger-text">{errors.comment.message}</div>
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>
))
)} )}
</select> </div>
{errors.activityID && (
<p className="danger-text">{errors.activityID.message}</p>
)}
</div>
<div className="col-12 text-start"> <div className="col-12 text-end mt-5">
<label className="form-label">Select Work Category</label> <button
<select type="button"
{...register("workCategoryId")} className="btn btn-sm btn-label-secondary me-2"
className="form-select form-select-sm" onClick={onClose}
> disabled={isPending}
<option disabled>Select Category</option> >
{loadingCategories ? ( Cancel
<option>Loading...</option> </button>
) : ( <button
sortedCategories.map((c) => ( type="submit"
<option key={c.id} value={c.id}> className="btn btn-sm btn-primary"
{c.name} disabled={isPending}
</option> >
)) {isPending ? "Please Wait..." : "Edit Task"}
)} </button>
</select> </div>
{errors.workCategoryId && ( </form>
<p className="danger-text">{errors.workCategoryId.message}</p> </AppFormProvider>
)}
</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>
); );
}; };

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

@ -6,6 +6,8 @@ import showToast from "../../../services/toastService";
import { useManageProjectInfra } from "../../../hooks/useProjects"; import { useManageProjectInfra } from "../../../hooks/useProjects";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import Label from "../../common/Label"; import Label from "../../common/Label";
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
import SelectField from "../../common/Forms/SelectField";
// Schema // Schema
const floorSchema = z.object({ const floorSchema = z.object({
@ -27,17 +29,12 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
); );
const [selectedBuilding, setSelectedBuilding] = useState(null); const [selectedBuilding, setSelectedBuilding] = useState(null);
const { const methods = useForm({
register,
handleSubmit,
setValue,
reset,
watch,
formState: { errors },
} = useForm({
defaultValues, defaultValues,
resolver: zodResolver(floorSchema), resolver: zodResolver(floorSchema),
}); });
const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
const watchId = watch("id"); const watchId = watch("id");
const watchBuildingId = watch("buildingId"); const watchBuildingId = watch("buildingId");
const { mutate: ManageFloor, isPending } = useManageProjectInfra({ const { mutate: ManageFloor, isPending } = useManageProjectInfra({
@ -48,7 +45,7 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
: "Floor created Successfully", : "Floor created Successfully",
"success" "success"
); );
reset({ id: "0", floorName: ""}); reset({ id: "0", floorName: "" });
// onClose?.(); // onClose?.();
}, },
}); });
@ -98,94 +95,139 @@ const FloorModel = ({ project, onClose, onSubmit }) => {
}; };
return ( return (
<form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}> <AppFormProvider {...methods}>
<div className="text-center mb-1"> <form className="row g-2" onSubmit={handleSubmit(onFormSubmit)}>
<h5 className="mb-1">Manage Floor</h5> <div className="text-center mb-1">
</div> <h5 className="mb-1">Manage Floor</h5>
<div className="col-12 text-start"> </div>
<Label className="form-label" required>Select Building</Label> <div className="col-12 text-start">
<select <Label className="form-label" required>
{...register("buildingId")} Select Building
className="form-select form-select-sm" </Label>
onChange={handleBuildingChange} <AppFormController
> name="buildingId"
<option value="0">Select Building</option> control={control}
{project?.length > 0 && rules={{ required: "Building is required" }}
project render={({ field }) => (
.filter((b) => b.buildingName) <SelectField
.sort((a, b) => a.buildingName.localeCompare(b.buildingName)) label=""
.map((b) => ( placeholder="Select Building"
<option key={b.id} value={b.id}> options={
{b.buildingName} project
</option> ?.filter((b) => b.buildingName)
))} .sort((a, b) => a.buildingName.localeCompare(b.buildingName))
</select> .map((b) => ({ id: String(b.id), name: b.buildingName })) ?? []
{errors.buildingId && ( }
<p className="danger-text">{errors.buildingId.message}</p> value={field.value || ""}
)} onChange={(value) => {
</div> field.onChange(value);
setValue("id", "0");
{watchBuildingId !== "0" && ( setValue("floorName", "");
<> }}
<div className="col-12 text-start"> required
<label className="form-label">Select Floor</label> noOptionsMessage={() => (!project || project.length === 0 ? "No buildings found" : null)}
<select className="m-0 form-select-sm w-100"
{...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>
)} )}
</div> />
</> {errors.buildingId && <p className="danger-text">{errors.buildingId.message}</p>}
)} </div>
<div className="col-12 text-end mt-6 my-2"> {watchBuildingId !== "0" && (
<button <>
type="button" <div className="col-12 text-start">
className="btn btn-sm btn-label-secondary me-3" <Label className="form-label">
disabled={isPending} Select Floor
onClick={onClose} </Label>
>
Cancel <AppFormController
</button> name="id"
<button control={control}
type="submit" rules={{ required: "Floor is required" }}
className="btn btn-sm btn-primary" render={({ field }) => {
disabled={isPending} // Prepare options
> const floorOptions = [
{isPending { id: "0", name: "Add New Floor" },
? "Please Wait" ...(selectedBuilding?.floors
: watchId !== "0" ?.filter((f) => f.floorName)
? "Edit Floor" .sort((a, b) => a.floorName.localeCompare(b.floorName))
: "Add Floor"} .map((f) => ({ id: f.id, name: f.floorName })) ?? []),
</button> ];
</div> return (
</form> <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, useGroups,
useWorkCategoriesMaster, useWorkCategoriesMaster,
} from "../../../hooks/masterHook/useMaster"; } from "../../../hooks/masterHook/useMaster";
import { useManageTask, useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects"; import { useManageTask, useProjectAssignedOrganizationsName, useProjectAssignedServices } from "../../../hooks/useProjects";
import showToast from "../../../services/toastService"; import showToast from "../../../services/toastService";
import Label from "../../common/Label"; import Label from "../../common/Label";
import { useSelectedProject } from "../../../slices/apiDataManager"; import { useSelectedProject } from "../../../slices/apiDataManager";
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
import SelectField from "../../common/Forms/SelectField";
const taskSchema = z.object({ const taskSchema = z.object({
buildingID: z.string().min(1, "Building is required"), buildingID: z.string().min(1, "Building is required"),
@ -76,19 +78,13 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
setValue("activityID", ""); setValue("activityID", "");
}; };
const methods = useForm({
const {
register,
handleSubmit,
watch,
setValue,
reset,
formState: { errors },
} = useForm({
resolver: zodResolver(taskSchema),
defaultValues: defaultModel, defaultValues: defaultModel,
resolver: zodResolver(taskSchema),
}); });
const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [activityData, setActivityData] = useState([]); const [activityData, setActivityData] = useState([]);
const [categoryData, setCategoryData] = useState([]); const [categoryData, setCategoryData] = useState([]);
@ -112,10 +108,10 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
const { mutate: CreateTask, isPending } = useManageTask({ const { mutate: CreateTask, isPending } = useManageTask({
onSuccessCallback: (response) => { onSuccessCallback: (response) => {
showToast(response?.message, "success"); showToast(response?.message, "success");
setValue("activityID",""), setValue("activityID", ""),
setValue("plannedWork",0), setValue("plannedWork", 0),
setValue("completedWork",0) setValue("completedWork", 0)
setValue("comment","") setValue("comment", "")
}, },
}); });
useEffect(() => { useEffect(() => {
@ -148,224 +144,290 @@ const TaskModel = ({ project, onSubmit, onClose }) => {
}; };
return ( return (
<form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}> <AppFormProvider {...methods}>
<div className="text-center mb-1"> <form className="row g-2" onSubmit={handleSubmit(onSubmitForm)}>
<h5 className="mb-1">Manage Task</h5> <div className="text-center mb-1">
</div> <h5 className="mb-1">Manage Task</h5>
<div className="col-6 text-start"> </div>
<Label className="form-label" required>Select Building</Label> {/* Select Building */}
<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 && (
<div className="col-6 text-start"> <div className="col-6 text-start">
<Label className="form-label" required>Select Floor</Label> <AppFormController
<select name="buildingID"
className="form-select form-select-sm" control={control}
{...register("floorId")} render={({ field }) => (
> <SelectField
<option value="">Select Floor</option> label="Select Building"
{selectedBuilding.floors options={project ?? []}
?.sort((a, b) => a.floorName.localeCompare(b.floorName)) placeholder="Select Building"
?.map((f) => ( required
<option key={f.id} value={f.id}> labelKey="buildingName"
{f.floorName} valueKey="id"
</option> value={field.value}
))} onChange={(value) => {
</select> field.onChange(value);
{errors.floorId && ( setValue("floorId", "");
<p className="danger-text">{errors.floorId.message}</p> setValue("workAreaId", "");
)} setSelectedService("");
</div> setSelectedGroup("");
)} }}
className="m-0"
{/* 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>
)} )}
</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 && ( {errors.buildingID && (
<p className="danger-text">{errors.comment.message}</p> <small className="danger-text">{errors.buildingID.message}</small>
)} )}
</div> </div>
)}
<div className="col-12 text-end mt-6 my-2"> {/* Select Floor */}
<button {selectedBuilding && (
type="button" <div className="col-6 text-start">
className="btn btn-sm btn-label-secondary me-3" <AppFormController
onClick={onClose} name="floorId"
> control={control}
Cancel render={({ field }) => (
</button> <SelectField
<button label="Select Floor"
type="submit" options={selectedBuilding?.floors ?? []}
className="btn btn-sm btn-primary" placeholder={
// disabled={isSubmitting} selectedBuilding?.floors?.length > 0
disabled={isPending} ? "Select Floor"
> : "No Floor Found"
{isPending ? "Please Wait..." : "Add Task"} }
</button> required
</div> labelKey="floorName"
</form> 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 { useManageProjectInfra } from "../../../hooks/useProjects";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import Label from "../../common/Label"; import Label from "../../common/Label";
import { AppFormController, AppFormProvider } from "../../../hooks/appHooks/useAppForm";
import SelectField from "../../common/Forms/SelectField";
const workAreaSchema = z.object({ const workAreaSchema = z.object({
id: z.string().optional(), id: z.string().optional(),
@ -26,19 +28,14 @@ const defaultModel = {
const WorkAreaModel = ({ project, onSubmit, onClose }) => { const WorkAreaModel = ({ project, onSubmit, onClose }) => {
const [selectedBuilding, setSelectedBuilding] = useState(null); const [selectedBuilding, setSelectedBuilding] = useState(null);
const [selectedFloor, setSelectedFloor] = useState(null); const [selectedFloor, setSelectedFloor] = useState(null);
const selectedProject = useSelector((store) => store.localVariables.projectId) const selectedProject = useSelector((store) => store.localVariables.projectId);
const { const methods = useForm({
register,
handleSubmit,
formState: { errors },
setValue,
reset,
watch,
} = useForm({
resolver: zodResolver(workAreaSchema),
defaultValues: defaultModel, defaultValues: defaultModel,
resolver: zodResolver(workAreaSchema),
}); });
const { register, control, watch, handleSubmit, reset, setValue, formState: { errors } } = methods;
const watchBuildingId = watch("buildingId"); const watchBuildingId = watch("buildingId");
const watchFloorId = watch("floorId"); const watchFloorId = watch("floorId");
const watchWorkAreaId = watch("id"); const watchWorkAreaId = watch("id");
@ -104,99 +101,122 @@ const WorkAreaModel = ({ project, onSubmit, onClose }) => {
}; };
return ( return (
<form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}> <AppFormProvider {...methods}>
<div className="text-center mb-1"> <form className="row g-2 p-2 p-md-1" onSubmit={handleSubmit(onSubmitForm)}>
<h5 className="mb-1">Manage Work Area</h5> <div className="text-center mb-1">
</div> <h5 className="mb-1">Manage Work Area</h5>
<div className="col-12 col-sm-6 text-start"> </div>
<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" && (
<div className="col-12 col-sm-6 text-start"> <div className="col-12 col-sm-6 text-start">
<Label className="form-label" required>Select Floor</Label> <AppFormController
<select name="buildingId"
{...register("floorId")} control={control}
className="form-select form-select-sm" render={({ field }) => (
> <SelectField
<option value="0"> label="Select Building"
{selectedBuilding?.floor?.length > 0 options={project ?? []}
? "NO Floor Found" placeholder="Select Building"
: "Select Floor"} required
</option> labelKey="buildingName"
valueKey="id"
value={field.value}
onChange={field.onChange}
className="m-0"
/>
)}
/>
{selectedBuilding?.floors?.map((f) => ( {errors.buildingId && (
<option key={f.id} value={f.id}> <small className="danger-text">{errors.buildingId.message}</small>
{f.floorName}
</option>
))}
</select>
{errors.floorId && (
<p className="danger-text">{errors.floorId.message}</p>
)} )}
</div> </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> {watchBuildingId !== "0" && (
{watchWorkAreaId === "0" <div className="col-12 col-sm-6 text-start">
? "Enter Work Area Name" <AppFormController
: "Edit Work Area Name"} name="floorId"
</Label> control={control}
<input render={({ field }) => (
type="text" <SelectField
className="form-control form-control-sm" label="Select Floor"
placeholder="Work Area" options={selectedBuilding?.floors ?? []}
{...register("areaName")} 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 && ( {errors.floorId && (
<p className="danger-text">{errors.areaName.message}</p> <small className="danger-text">{errors.floorId.message}</small>
)} )}
</div> </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> {watchFloorId !== "0" && (
</form> <>
<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, useOrganizationsList,
} from "../../hooks/useOrganization"; } from "../../hooks/useOrganization";
import { localToUtc } from "../../utils/appUtils"; 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 currentDate = new Date().toLocaleDateString("en-CA");
const formatDate = (date) => { const formatDate = (date) => {
@ -42,8 +44,8 @@ const ManageProjectInfo = ({ project, onClose }) => {
1, 1,
true true
); );
const { mutate: UpdateProject, isPending } = useUpdateProject(() => {onClose?.()}); const { mutate: UpdateProject, isPending } = useUpdateProject(() => { onClose?.() });
const {mutate:CeateProject,isPending:isCreating} = useCreateProject(()=>{onClose?.()}) const { mutate: CeateProject, isPending: isCreating } = useCreateProject(() => { onClose?.() })
const { const {
register, register,
@ -74,7 +76,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
pmcId: projects_Details?.pmc?.id || "", pmcId: projects_Details?.pmc?.id || "",
}); });
setAddressLength(projects_Details?.projectAddress?.length || 0); setAddressLength(projects_Details?.projectAddress?.length || 0);
}, [project, projects_Details, reset,data]); }, [project, projects_Details, reset, data]);
const onSubmitForm = (formData) => { const onSubmitForm = (formData) => {
if (project) { if (project) {
@ -85,8 +87,8 @@ const ManageProjectInfo = ({ project, onClose }) => {
id: project, id: project,
}; };
UpdateProject({ projectId: project, payload: payload }); UpdateProject({ projectId: project, payload: payload });
}else{ } else {
let payload = { let payload = {
...formData, ...formData,
startDate: localToUtc(formData.startDate), startDate: localToUtc(formData.startDate),
endDate: localToUtc(formData.endDate), endDate: localToUtc(formData.endDate),
@ -122,7 +124,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
type="text" type="text"
id="name" id="name"
name="name" name="name"
className="form-control form-control-sm" className="form-control "
placeholder="Project Name" placeholder="Project Name"
{...register("name")} {...register("name")}
/> />
@ -143,7 +145,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
type="text" type="text"
id="shortName" id="shortName"
name="shortName" name="shortName"
className="form-control form-control-sm" className="form-control "
placeholder="Short Name" placeholder="Short Name"
{...register("shortName")} {...register("shortName")}
/> />
@ -164,7 +166,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
type="text" type="text"
id="contactPerson" id="contactPerson"
name="contactPerson" name="contactPerson"
className="form-control form-control-sm" className="form-control "
placeholder="Contact Person" placeholder="Contact Person"
maxLength={50} maxLength={50}
{...register("contactPerson")} {...register("contactPerson")}
@ -190,6 +192,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
placeholder="DD-MM-YYYY" placeholder="DD-MM-YYYY"
maxDate={new Date()} // optional: restrict future dates maxDate={new Date()} // optional: restrict future dates
className="w-100" className="w-100"
size="md"
/> />
{errors.startDate && ( {errors.startDate && (
@ -213,6 +216,7 @@ const ManageProjectInfo = ({ project, onClose }) => {
placeholder="DD-MM-YYYY" placeholder="DD-MM-YYYY"
minDate={getValues("startDate")} // optional: restrict future dates minDate={getValues("startDate")} // optional: restrict future dates
className="w-100" className="w-100"
size="md"
/> />
{errors.endDate && ( {errors.endDate && (
@ -225,103 +229,108 @@ const ManageProjectInfo = ({ project, onClose }) => {
)} )}
</div> </div>
<div className="col-12 "> <div className="col-12">
<label className="form-label" htmlFor="modalEditUserStatus"> <Label htmlFor="modalEditUserStatus" className="form-label">
Status Status
</label> </Label>
<select
id="modalEditUserStatus" <AppFormController
name="modalEditUserStatus" name="projectStatusId"
className="select2 form-select form-select-sm" control={control}
aria-label="Default select example" rules={{ required: "Status is required" }}
{...register("projectStatusId", { render={({ field }) => (
required: "Status is required", <SelectField
valueAsNumber: false, label="" // Label is already above
})} placeholder="Select Status"
> options={PROJECT_STATUS?.map((status) => ({
{PROJECT_STATUS.map((status) => ( id: status.id,
<option key={status.id} value={status.id}> name: status.label,
{status.label} })) ?? []}
</option> value={field.value || ""}
))} onChange={field.onChange}
</select> required
className="m-0 form-select-sm w-100"
/>
)}
/>
{errors.projectStatusId && ( {errors.projectStatusId && (
<div <div className="danger-text text-start" style={{ fontSize: "12px" }}>
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.projectStatusId.message} {errors.projectStatusId.message}
</div> </div>
)} )}
</div> </div>
<div className="col-12 ">
<label className="form-label" htmlFor="modalEditUserStatus"> <div className="col-12">
<Label htmlFor="promoterId" className="form-label">
Promoter Promoter
</label> </Label>
<select
className="select2 form-select form-select-sm" <AppFormController
aria-label="Default select example" name="promoterId"
{...register("promoterId", { control={control}
required: "Promoter is required", rules={{ required: "Promoter is required" }}
valueAsNumber: false, render={({ field }) => (
})} <SelectField
> label="" // Label is already above
{isLoading ? ( placeholder="Select Promoter"
<option>Loading...</option> options={data?.data ?? []}
) : ( value={field.value || ""}
<> onChange={field.onChange}
<option value="">Select Promoter</option> required
{data?.data?.map((org) => ( isLoading={isLoading}
<option key={org.id} value={org.id}> className="m-0 form-select-sm w-100"
{org.name} noOptionsMessage={() =>
</option> !isLoading && (!data?.data || data.data.length === 0)
))} ? "No promoters found"
</> : null
}
/>
)} )}
</select> />
{errors.promoterId && ( {errors.promoterId && (
<div <div className="danger-text text-start" style={{ fontSize: "12px" }}>
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.promoterId.message} {errors.promoterId.message}
</div> </div>
)} )}
</div> </div>
<div className="col-12 ">
<label className="form-label" htmlFor="modalEditUserStatus"> <div className="col-12">
<Label htmlFor="pmcId" className="form-label">
PMC PMC
</label> </Label>
<select
className="select2 form-select form-select-sm" <AppFormController
aria-label="Default select example" name="pmcId"
{...register("pmcId", { control={control}
required: "Promoter is required", rules={{ required: "PMC is required" }}
valueAsNumber: false, render={({ field }) => (
})} <SelectField
> label="" // Label is already above
{isLoading ? ( placeholder="Select PMC"
<option>Loading...</option> options={data?.data ?? []}
) : ( value={field.value || ""}
<> onChange={field.onChange}
<option value="">Select PMC</option> required
{data?.data?.map((org) => ( isLoading={isLoading}
<option key={org.id} value={org.id}> className="m-0 form-select-sm w-100"
{org.name} noOptionsMessage={() =>
</option> !isLoading && (!data?.data || data.data.length === 0)
))} ? "No PMC found"
</> : null
}
/>
)} )}
</select> />
{errors.pmcId && ( {errors.pmcId && (
<div <div className="danger-text text-start" style={{ fontSize: "12px" }}>
className="danger-text text-start"
style={{ fontSize: "12px" }}
>
{errors.pmcId.message} {errors.pmcId.message}
</div> </div>
)} )}
</div> </div>
<div className="d-flex justify-content-between text-secondary text-tiny text-wrap"> <div className="d-flex justify-content-between text-secondary text-tiny text-wrap">
<span> <span>
<i className="bx bx-sm bx-info-circle"></i> Not found PMC and <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" className="btn btn-primary btn-sm"
disabled={isPending || isCreating || loading} disabled={isPending || isCreating || loading}
> >
{isPending||isCreating ? "Please Wait..." : project ? "Update" : "Submit"} {isPending || isCreating ? "Please Wait..." : project ? "Update" : "Submit"}
</button> </button>
</div> </div>
</form> </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 GlobalModel from "../common/GlobalModel";
import { setService } from "../../slices/globalVariablesSlice"; import { setService } from "../../slices/globalVariablesSlice";
import { SpinnerLoader } from "../common/Loader"; 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 ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
const projectId = useSelectedProject(); const projectId = useSelectedProject();
@ -52,6 +55,12 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
const { data: assignedServices, isLoading: servicesLoading } = const { data: assignedServices, isLoading: servicesLoading } =
useProjectAssignedServices(projectId); useProjectAssignedServices(projectId);
const { control } = useForm({
defaultValues: {
serviceId: selectedService || "",
},
});
useEffect(() => { useEffect(() => {
setProject(projectInfra); setProject(projectInfra);
}, [data, projects_Details]); }, [data, projects_Details]);
@ -60,6 +69,11 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
setProject(response); setProject(response);
}; };
const handleServiceChange = (serviceId) => {
dispatch(setService(serviceId));
};
return ( return (
<> <>
{showModalBuilding && ( {showModalBuilding && (
@ -115,37 +129,39 @@ const ProjectInfra = ({ data, onDataChange, eachSiteEngineer }) => {
<div className="card-body" style={{ padding: "0.5rem" }}> <div className="card-body" style={{ padding: "0.5rem" }}>
<div className="align-items-center"> <div className="align-items-center">
<div className="row "> <div className="row ">
<div <div className="col-md-4 col-12 dataTables_length text-start py-2 px-2">
className="dataTables_length text-start py-2 px-6 col-md-4 col-12" <div className="ms-4 mt-n1">
id="DataTables_Table_0_length" {!servicesLoading && assignedServices?.length > 0 && (
> assignedServices.length > 1 ? (
{!servicesLoading && <AppFormController
assignedServices?.length > 0 && name="serviceId"
(assignedServices.length > 1 ? ( control={control}
<label> render={({ field }) => (
<select <SelectField
name="DataTables_Table_0_length" label="Select Service"
aria-controls="DataTables_Table_0" options={[{ id: "", name: "All Projects" }, ...(assignedServices ?? [])]}
className="form-select form-select-sm" placeholder="Choose a Service"
aria-label="Select Service" required
value={selectedService} labelKey="name"
onChange={(e) => dispatch(setService(e.target.value))} valueKey="id"
> value={field.value}
<option value="">All Services</option> onChange={(val) => {
{assignedServices.map((service) => ( field.onChange(val);
<option key={service.id} value={service.id}> handleServiceChange(val);
{service.name} }}
</option> isLoading={servicesLoading}
))} />
</select> )}
</label> />
) : ( ) : (
<h5>{assignedServices[0].name}</h5> <h5>{assignedServices[0].name}</h5>
))} )
)}
</div>
</div> </div>
{/* Buttons Section (aligned to right) */} {/* 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 && ( {ManageInfra && (
<> <>
<button <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 { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod"; import { z } from "zod";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
export const ProjectPermissionSchema = z.object({ export const ProjectPermissionSchema = z.object({
employeeId: z.string().min(1, "Employee is required"), employeeId: z.string().min(1, "Employee is required"),
@ -46,26 +48,26 @@ const ProjectPermission = () => {
); );
useEffect(() => { 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 selectedEmpPermissions?.permissions
?.filter((perm) => perm.isEnabled) ?.filter((p) => p.isEnabled)
?.map((perm) => perm.id) || []; ?.map((p) => p.id) || [];
setValue("selectedPermissions", enabledPerms, { shouldValidate: true }); const hasChanges =
}, [selectedEmpPermissions, setValue, selectedEmployee]); selectedPermissions.length !== existingEnabledIds.length ||
selectedPermissions.some((id) => !existingEnabledIds.includes(id));
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 { mutate: updatePermission, isPending } = const { mutate: updatePermission, isPending } =
useUpdateProjectLevelEmployeePermission(); useUpdateProjectLevelEmployeePermission();
@ -115,35 +117,42 @@ const hasChanges =
<form className="row" onSubmit={handleSubmit(onSubmit)}> <form className="row" onSubmit={handleSubmit(onSubmit)}>
<div className="d-flex justify-content-between align-items-end gap-2 mb-3"> <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="text-start d-flex align-items-center gap-2">
<div className="d-block"> {/* <div className="d-block">
<label className="form-label">Select Employee</label> <label className="form-label">Select Employee</label>
</div> </div> */}
<div className="d-block">
{" "} <div className="d-block flex-grow-1">
<select <AppFormController
className="form-select form-select-sm" name="employeeId"
{...register("employeeId")} control={control}
disabled={isPending} render={({ field }) => (
> <SelectField
{loading ? ( label="Select Employee"
<option value="">Loading...</option> options={
) : ( employees
<> ?.sort((a, b) =>
<option value="">-- Select Employee --</option> `${a?.firstName} ${a?.lastName}`.localeCompare(
{[...employees] `${b?.firstName} ${b?.lastName}`
?.sort((a, b) => )
`${a?.firstName} ${a?.firstName}`?.localeCompare(
`${b?.firstName} ${b?.lastName}`
) )
) ?.map((emp) => ({
?.map((emp) => ( id: emp.id,
<option key={emp.id} value={emp.id}> name: `${emp.firstName} ${emp.lastName}`,
{emp.firstName} {emp.lastName} })) ?? []
</option> }
))} placeholder="-- Select Employee --"
</> required
labelKey="name"
valueKeyKey="id"
value={field.value}
onChange={field.onChange}
isLoading={loading}
disabled={isPending}
className="m-0"
/>
)} )}
</select> />
{errors.employeeId && ( {errors.employeeId && (
<div className="d-block text-danger small"> <div className="d-block text-danger small">
{errors.employeeId.message} {errors.employeeId.message}
@ -152,6 +161,7 @@ const hasChanges =
</div> </div>
</div> </div>
<div className="mt-3 text-end"> <div className="mt-3 text-end">
{hasChanges && ( {hasChanges && (
<button <button

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

@ -2,8 +2,11 @@ import React, { useState } from "react";
import TeamEmployeeList from "./TeamEmployeeList"; import TeamEmployeeList from "./TeamEmployeeList";
import { useOrganization } from "../../../hooks/useDirectory"; import { useOrganization } from "../../../hooks/useDirectory";
import { useOrganizationsList } from "../../../hooks/useOrganization"; import { useOrganizationsList } from "../../../hooks/useOrganization";
import { useProjectAssignedOrganizationsName } from "../../../hooks/useProjects"; import { useProjectAssignedOrganizationsName } from "../../../hooks/useProjects";
import { useSelectedProject } from "../../../slices/apiDataManager"; 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 TeamAssignToProject = ({ closeModal }) => {
const [searchText, setSearchText] = useState(""); const [searchText, setSearchText] = useState("");
@ -11,54 +14,48 @@ const TeamAssignToProject = ({ closeModal }) => {
const project = useSelectedProject(); const project = useSelectedProject();
const { data, isLoading, isError, error } = const { data, isLoading, isError, error } =
useProjectAssignedOrganizationsName(project); useProjectAssignedOrganizationsName(project);
const { control, watch, formState: { errors } } = useForm({
defaultValues: { organizationId: "" },
});
return ( return (
<div className="container"> <div className="container">
{/* <p className="fs-5 fs-seminbod ">Assign Employee To Project </p> */} {/* <p className="fs-5 fs-seminbod ">Assign Employee To Project </p> */}
<h5 className="mb-4">Assign Employee To Project</h5> <h5 className="mb-4">Assign Employee To Project</h5>
<div className="row align-items-center gx-5"> <div className="row align-items-center gx-5 text-start">
<div className="col"> <div className="col-12 col-md-6 mb-2">
<div className="d-flex flex-grow-1 align-items-center gap-2"> <AppFormController
{isLoading ? ( name="organizationId"
<select className="form-select form-select-sm w-100" disabled> control={control}
<option value="">Loading...</option> rules={{ required: "Organization is required" }}
</select> render={({ field }) => (
) : data?.length === 0 ? ( <SelectField
<p className="mb-0 badge bg-label-secondary">No organizations found</p> label="Select Organization"
) : ( options={data ?? []}
<> placeholder="Choose an Organization"
<label required
htmlFor="organization" labelKey="name"
className="form-label mb-0 text-nowrap" valueKey="id"
> value={field.value}
Select Organization onChange={field.onChange}
</label> isLoading={isLoading}
<select className="m-0 w-100"
id="organization" />
className="form-select form-select-sm w-100" )}
value={selectedOrg || ""} />
onChange={(e) => setSelectedOrg(e.target.value)} {errors.organizationId && (
> <small className="danger-text">{errors.organizationId.message}</small>
<option value="">Select</option>
{data.map((org) => (
<option key={org.id} value={org.id}>
{org.name}
</option>
))}
</select>
</>
)} )}
</div> </div>
</div> <div className="col-12 col-md-6 mt-n5">
<div className="col"> <div className="d-flex flex-column">
<div className="d-flex flex-grow-1 align-items-center gap-2"> <label htmlFor="search" className="form-label mb-1">
<label htmlFor="search" className="form-label mb-0 text-nowrap">
Search Employee Search Employee
</label> </label>
<input <input
id="search" id="search"
type="search" type="search"
className="form-control form-control-sm w-100" className="form-control w-100"
placeholder="Search..." placeholder="Search..."
value={searchText} value={searchText}
onChange={(e) => setSearchText(e.target.value)} 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 GlobalModel from "../../common/GlobalModel";
import TeamAssignToProject from "./TeamAssignToProject"; import TeamAssignToProject from "./TeamAssignToProject";
import { SpinnerLoader } from "../../common/Loader"; 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 Teams = () => {
const selectedProject = useSelectedProject(); const selectedProject = useSelectedProject();
@ -30,9 +33,15 @@ const Teams = () => {
const [employees, setEmployees] = useState([]); const [employees, setEmployees] = useState([]);
const [selectedEmployee, setSelectedEmployee] = useState(null); const [selectedEmployee, setSelectedEmployee] = useState(null);
const [deleteEmployee, setDeleteEmplyee] = 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 [activeEmployee, setActiveEmployee] = useState(false);
const { control, watch } = useForm({
defaultValues: {
selectedService: "",
searchTerm: "",
},
});
const selectedService = watch("selectedService");
const searchTerm = watch("searchTerm");
const { data: assignedServices, isLoading: servicesLoading } = const { data: assignedServices, isLoading: servicesLoading } =
useProjectAssignedServices(selectedProject); useProjectAssignedServices(selectedProject);
@ -95,26 +104,23 @@ const Teams = () => {
const filteredEmployees = useMemo(() => { const filteredEmployees = useMemo(() => {
if (!projectEmployees) return []; if (!projectEmployees) return [];
let filtered = projectEmployees; let filtered = projectEmployees;
if (activeEmployee) { if (activeEmployee) {
filtered = projectEmployees.filter((emp) => !emp.isActive); filtered = projectEmployees.filter((emp) => !emp.isActive);
} }
// Apply search filter if present
if (searchTerm?.trim()) { if (searchTerm?.trim()) {
const lower = searchTerm.toLowerCase(); const lower = searchTerm.toLowerCase();
filtered = filtered.filter((emp) => { filtered = filtered.filter((emp) => {
const fullName = `${emp.firstName ?? ""} ${emp.lastName ?? ""}`.toLowerCase(); const fullName = `${emp.firstName ?? ""} ${emp.lastName ?? ""}`.toLowerCase();
const jobRole = getJobRole(emp?.jobRoleId)?.toLowerCase(); return fullName.includes(lower) || (emp.jobRoleName ?? "").toLowerCase().includes(lower);
return fullName.includes(lower) || jobRole.includes(lower);
}); });
} }
return filtered; return filtered;
}, [projectEmployees, searchTerm, activeEmployee]); }, [projectEmployees, searchTerm, activeEmployee]);
const handleSearch = (e) => setSearchTerm(e.target.value);
const employeeHandler = useCallback( const employeeHandler = useCallback(
(msg) => { (msg) => {
if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) { if (filteredEmployees.some((emp) => emp.employeeId == msg.employeeId)) {
@ -124,6 +130,7 @@ const Teams = () => {
[filteredEmployees, refetch] [filteredEmployees, refetch]
); );
useEffect(() => { useEffect(() => {
eventBus.on("employee", employeeHandler); eventBus.on("employee", employeeHandler);
return () => eventBus.off("employee", employeeHandler); return () => eventBus.off("employee", employeeHandler);
@ -154,62 +161,68 @@ const Teams = () => {
<div className="card card-action mb-6"> <div className="card card-action mb-6">
<div className="card-body"> <div className="card-body">
<div className="row align-items-center justify-content-between mb-4 g-3"> <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="col-md-6 col-12 d-flex flex-wrap align-items-center gap-3">
<div className="d-flex flex-wrap align-items-center gap-3"> {!servicesLoading && assignedServices && (
<div> <>
{!servicesLoading && ( {assignedServices.length === 1 && (
<> <h5 className="mb-2">{assignedServices[0].name}</h5>
{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>
<div className="form-check form-switch d-flex align-items-center text-nowrap"> {assignedServices.length > 1 && (
<input <div className="col-12 col-md-6 mb-2 text-start">
type="checkbox" <AppFormController
className="form-check-input" name="selectedService"
id="activeEmployeeSwitch" control={control}
checked={activeEmployee} render={({ field }) => (
onChange={handleToggleActive} <SelectField
/> label="Select Service"
<label options={[{ id: "", name: "All Services" }, ...assignedServices]}
className="form-check-label ms-2" placeholder="Choose a Service"
htmlFor="activeEmployeeSwitch" labelKey="name"
> valueKey="id"
{activeEmployee ? "Active Employees" : "In-active Employees"} value={field.value}
</label> onChange={field.onChange}
</div> 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> </div>
<div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3"> <div className="col-md-6 col-12 d-flex justify-content-md-end align-items-center justify-content-start gap-3 mt-n1">
<input <div className="col-12 col-md-4">
type="search" <AppFormController
className="form-control form-control-sm" name="searchTerm"
placeholder="Search by Name or Role" control={control}
aria-controls="DataTables_Table_0" render={({ field }) => (
style={{ maxWidth: "200px" }} <input
value={searchTerm} type="search"
onChange={handleSearch} className="form-control form-control-sm w-100"
/> placeholder="Search by Name or Role"
value={field.value}
onChange={field.onChange}
/>
)}
/>
</div>
{HasAssignUserPermission && ( {HasAssignUserPermission && (
<button <button
@ -246,74 +259,73 @@ const Teams = () => {
</tr> </tr>
</thead> </thead>
<tbody className="table-border-bottom-0"> <tbody className="table-border-bottom-0">
{filteredEmployees && {filteredEmployees
filteredEmployees .sort((a, b) =>
.sort((a, b) => (a.firstName || "").localeCompare(b.firstName || "")
(a.firstName || "").localeCompare(b.firstName || "") )
) .map((emp) => (
.map((emp) => ( <tr key={emp.id}>
<tr key={emp.id}> <td>
<td> <div className="d-flex justify-content-start align-items-center">
<div className="d-flex justify-content-start align-items-center"> <Avatar
<Avatar firstName={emp.firstName}
firstName={emp.firstName} lastName={emp.lastName}
lastName={emp.lastName} />
/> <div className="d-flex flex-column">
<div className="d-flex flex-column"> <a
<a onClick={() =>
onClick={() => navigate(
navigate( `/employee/${emp.employeeId}?for=attendance`
`/employee/${emp.employeeId}?for=attendance` )
) }
} className="text-heading text-truncate cursor-pointer"
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)}
> >
<i className="bx bx-trash me-1 text-danger"></i> <span className="fw-normal">
</button> {emp.firstName}{" "}
) : ( {emp.lastName}
<span>Not in project</span> </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>
</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> </tbody>
</table> </table>
)} )}

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

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

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

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

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

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

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

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

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

@ -32,7 +32,7 @@ const ContactInfro = ({ onNext }) => {
<input <input
id="firstName" id="firstName"
type="text" type="text"
className={`form-control form-control-sm`} className={`form-control `}
{...register("firstName")} {...register("firstName")}
/> />
{errors.firstName && ( {errors.firstName && (
@ -46,7 +46,7 @@ const ContactInfro = ({ onNext }) => {
<input <input
id="lastName" id="lastName"
type="text" type="text"
className={`form-control form-control-sm `} className={`form-control `}
{...register("lastName")} {...register("lastName")}
/> />
{errors.lastName && ( {errors.lastName && (
@ -60,7 +60,7 @@ const ContactInfro = ({ onNext }) => {
<input <input
id="email" id="email"
type="email" type="email"
className={`form-control form-control-sm `} className={`form-control `}
{...register("email")} {...register("email")}
/> />
{errors.email && ( {errors.email && (
@ -74,7 +74,7 @@ const ContactInfro = ({ onNext }) => {
<input <input
id="contactNumber" id="contactNumber"
type="text" type="text"
className={`form-control form-control-sm `} className={`form-control `}
{...register("contactNumber")} {...register("contactNumber")}
inputMode="tel" inputMode="tel"
placeholder="+91 9876543210" 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 showToast from '../../services/toastService';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { EditTenant } from './TenantSchema'; import { EditTenant } from './TenantSchema';
import { AppFormController } from '../../hooks/appHooks/useAppForm';
import SelectField from '../common/Forms/SelectField';
const EditProfile = ({ TenantId, onClose }) => { const EditProfile = ({ TenantId, onClose }) => {
const { data, isLoading, isError, error } = useTenantDetails(TenantId); 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 onSubmit = (formData) => {
const tenantPayload = { ...formData, contactName: `${formData.firstName} ${formData.lastName}`, id: data.id, } 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)}> <form className="row g-6" onSubmit={handleSubmit(onSubmit)}>
<h5>Edit Tenant</h5> <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> <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>} {errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
</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> <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>} {errors.lastName && <div className="danger-text">{errors.lastName.message}</div>}
</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> <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" /> placeholder="+91 9876543210" />
{errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>} {errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>}
</div> </div>
<div className="col-sm-6 mt-1 text-start"> <div className="col-sm-6 text-start">
<Label htmlFor="domainName" >Domain Name</Label> <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>} {errors.domainName && <div className="danger-text">{errors.domainName.message}</div>}
</div> </div>
<div className="col-sm-6 mt-1 text-start"> <div className="col-sm-6 text-start">
<Label htmlFor="taxId" >Tax ID</Label> <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>} {errors.taxId && <div className="danger-text">{errors.taxId.message}</div>}
</div> </div>
<div className="col-sm-6 mt-1 text-start"> <div className="col-sm-6 text-start">
<Label htmlFor="officeNumber" >Office Number</Label> <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>} {errors.officeNumber && <div className="danger-text">{errors.officeNumber.message}</div>}
</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"> <div className="col-sm-6 text-start">
<Label htmlFor="organizationSize" required> <AppFormController
Organization Size name="industryId"
</Label> 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 {errors.industryId && (
className="form-select form-select-sm" <small className="danger-text">{errors.industryId.message}</small>
{...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>
)} )}
</div> </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> <Label htmlFor="billingAddress" required>Billing Address</Label>
<textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} /> <textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} />
{errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>} {errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>}
</div> </div>
<div className="col-12 mt-1 text-start"> <div className="col-12 text-start">
<Label htmlFor="description">Description</Label> <Label htmlFor="description">Description</Label>
<textarea id="description" className="form-control" {...register("description")} rows={2} /> <textarea id="description" className="form-control" {...register("description")} rows={2} />
{errors.description && <div className="danger-text">{errors.description.message}</div>} {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 moment from "moment";
import { useGlobalServices } from "../../hooks/masterHook/useMaster"; import { useGlobalServices } from "../../hooks/masterHook/useMaster";
import SelectMultiple from "../common/SelectMultiple"; 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 OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
const { data, isError, isLoading: industryLoading } = useIndustries(); const { data, isError, isLoading: industryLoading } = useIndustries();
@ -53,7 +56,8 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
// onSubmitTenant(data); // onSubmitTenant(data);
// onNext(); // onNext();
const tenantPayload = { ...data, onBoardingDate: moment.utc(data.onBoardingDate, "DD-MM-YYYY").toISOString() } 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 ( return (
<div className="row g-2 text-start"> <div className="row g-6 text-start">
<div className="col-sm-6"> <div className="col-sm-6">
<Label htmlFor="organizationName" required> <Label htmlFor="organizationName" required>
Organization Name Organization Name
@ -75,7 +79,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
<input <input
id="organizationName" id="organizationName"
className={`form-control form-control-sm `} className={`form-control `}
{...register("organizationName")} {...register("organizationName")}
/> />
{errors.organizationName && ( {errors.organizationName && (
@ -89,7 +93,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
</Label> </Label>
<input <input
id="officeNumber" id="officeNumber"
className={`form-control form-control-sm `} className={`form-control `}
{...register("officeNumber")} {...register("officeNumber")}
/> />
{errors.officeNumber && ( {errors.officeNumber && (
@ -103,7 +107,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
</Label> </Label>
<input <input
id="domainName" id="domainName"
className={`form-control form-control-sm `} className={`form-control `}
{...register("domainName")} {...register("domainName")}
/> />
{errors.domainName && ( {errors.domainName && (
@ -117,7 +121,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
</Label> </Label>
<input <input
id="taxId" id="taxId"
className={`form-control form-control-sm `} className={`form-control `}
{...register("taxId")} {...register("taxId")}
/> />
{errors.taxId && ( {errors.taxId && (
@ -131,6 +135,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
</Label> </Label>
<DatePicker <DatePicker
name="onBoardingDate" name="onBoardingDate"
size="md"
control={control} control={control}
placeholder="DD-MM-YYYY" placeholder="DD-MM-YYYY"
maxDate={new Date()} maxDate={new Date()}
@ -143,73 +148,79 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
)} )}
</div> </div>
<div className="col-sm-6"> <div className="col-sm-6 mb-2 mb-md-4">
<Label htmlFor="organizationSize" required> <AppFormController
Organization Size name="organizationSize"
</Label> control={control}
render={({ field }) => (
<select <SelectField
id="organizationSize" label="Organization Size"
className="form-select shadow-none border py-1 px-2" placeholder="Select Organization Size"
style={{ fontSize: "0.875rem" }} // Bootstrap's small text size options={orgSize ?? []}
{...register("organizationSize", { required: "Organization size is required" })} labelKey="name"
> valueKey="val"
{orgSize.map((org) => ( value={field.value}
<option key={org.val} value={org.val}> onChange={field.onChange}
{org.name} className="shadow-none border py-1 px-2 small m-0"
</option> required
))} />
</select> )}
/>
{errors.organizationSize && ( {errors.organizationSize && (
<div className="danger-text">{errors.organizationSize.message}</div> <small className="danger-text">{errors.organizationSize.message}</small>
)} )}
</div> </div>
<div className="col-sm-6 mt-n3">
<div className="col-sm-6"> <AppFormController
<Label htmlFor="industryId" required> name="industryId"
Industry control={control} // make sure `control` comes from useForm
</Label> render={({ field }) => (
<select <SelectField
id="industryId" label="Industry"
className="form-select shadow-none border py-1 px-2 small" placeholder={industryLoading ? "Loading..." : "Select Industry"}
{...register("industryId")} options={data ?? []}
> labelKey="name"
{industryLoading ? ( valueKeyKey="id"
<option value="">Loading...</option> value={field.value}
) : ( onChange={field.onChange}
data?.map((indu) => ( isLoading={industryLoading}
<option key={indu.id} value={indu.id}> className="shadow-none border py-1 px-2 small"
{indu.name} required
</option> />
))
)} )}
</select> />
{errors.industryId && ( {errors.industryId && (
<div className="danger-text">{errors.industryId.message}</div> <div className="danger-text">{errors.industryId.message}</div>
)} )}
</div> </div>
<div className="col-sm-6"> <div className="col-sm-6 mb-2 mb-md-4 mt-n3">
<Label htmlFor="reference" required>Reference</Label> <AppFormController
<select name="reference"
id="reference" control={control}
className="form-select shadow-none border py-1 px-2 small" render={({ field }) => (
{...register("reference")} <SelectField
> label="Reference"
{reference.map((org) => ( placeholder="Select Reference"
<option key={org.val} value={org.val}> options={reference ?? []}
{org.name} labelKey="name"
</option> valueKey="val"
))} value={field.value}
</select> onChange={field.onChange}
className="shadow-none border py-1 px-2 small m-0"
required
/>
)}
/>
{errors.reference && ( {errors.reference && (
<div className="danger-text">{errors.reference.message}</div> <small className="danger-text">{errors.reference.message}</small>
)} )}
</div> </div>
<div className="col-sm-6">
<div className="col-sm-6 mt-n3">
<SelectMultiple <SelectMultiple
name="serviceIds" name="serviceIds"
label="Services" label="Services"
@ -229,7 +240,7 @@ const OrganizationInfo = ({ onNext, onPrev, onSubmitTenant }) => {
<textarea <textarea
id="description" id="description"
rows={3} rows={3}
className={`form-control form-control-sm `} className={`form-control `}
{...register("description")} {...register("description")}
/> />
{errors.description && ( {errors.description && (

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

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

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

@ -114,9 +114,8 @@ const TenantsList = ({
align: "text-center", align: "text-center",
getValue: (t) => ( getValue: (t) => (
<span <span
className={`badge ${ className={`badge ${getTenantStatus(t.tenantStatus?.id) || "secondary"
getTenantStatus(t.tenantStatus?.id) || "secondary" }`}
}`}
> >
{t.tenantStatus?.name || "Unknown"} {t.tenantStatus?.name || "Unknown"}
</span> </span>
@ -151,13 +150,12 @@ const TenantsList = ({
<tbody> <tbody>
{data?.data.length > 0 ? ( {data?.data.length > 0 ? (
data.data.map((tenant) => ( data.data.map((tenant) => (
<tr key={tenant.id}> <tr key={tenant.id} style={{ height: "50px" }}>
{TenantColumns.map((col) => ( {TenantColumns.map((col) => (
<td <td
key={col.key} key={col.key}
className={`d-table-cell px-3 py-2 align-middle ${ className={`d-table-cell px-3 py-2 align-middle ${col.align ?? ""
col.align ?? "" }`}
}`}
> >
{col.customRender {col.customRender
? col.customRender(tenant) ? 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 Avatar from "../common/Avatar";
import { PaymentHistorySkeleton } from "./CollectionSkeleton"; import { PaymentHistorySkeleton } from "./CollectionSkeleton";
import { usePaymentAjustmentHead } from "../../hooks/masterHook/useMaster"; import { usePaymentAjustmentHead } from "../../hooks/masterHook/useMaster";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
const AddPayment = ({ onClose }) => { const AddPayment = ({ onClose }) => {
const { addPayment } = useCollectionContext(); const { addPayment } = useCollectionContext();
@ -60,7 +62,7 @@ const AddPayment = ({ onClose }) => {
<Label required>TransanctionId</Label> <Label required>TransanctionId</Label>
<input <input
type="text" type="text"
className="form-control form-control-sm" className="form-control "
{...register("transactionId")} {...register("transactionId")}
/> />
{errors.transactionId && ( {errors.transactionId && (
@ -78,10 +80,10 @@ const AddPayment = ({ onClose }) => {
minDate={ minDate={
data?.clientSubmitedDate data?.clientSubmitedDate
? new Date( ? new Date(
new Date(data?.clientSubmitedDate).setDate( new Date(data?.clientSubmitedDate).setDate(
new Date(data?.clientSubmitedDate).getDate() + 1 new Date(data?.clientSubmitedDate).getDate() + 1
)
) )
)
: null : null
} }
maxDate={new Date()} maxDate={new Date()}
@ -93,33 +95,30 @@ const AddPayment = ({ onClose }) => {
)} )}
</div> </div>
<div className="col-12 col-md-6 mb-2"> <div className="col-12 col-md-6 mb-2">
<Label <Label htmlFor="paymentAdjustmentHeadId" className="form-label" required>
htmlFor="paymentAdjustmentHeadId"
className="form-label"
required
>
Payment Adjustment Head Payment Adjustment Head
</Label> </Label>
<select
className="form-select form-select-sm " <AppFormController
{...register("paymentAdjustmentHeadId")} name="paymentAdjustmentHeadId"
> control={control}
{isPaymentTypeLoading ? ( rules={{ required: "Payment Adjustment Head is required" }}
<option>Loading..</option> render={({ field }) => (
) : ( <SelectField
<> label="" // Label is already above
<option value="">Select Payment Head</option> placeholder="Select Payment Head"
{paymentTypes?.data options={paymentTypes?.data
?.sort((a, b) => a.name.localeCompare(b.name)) ?.sort((a, b) => a.name.localeCompare(b.name)) ?? []}
?.map((type) => ( value={field.value || ""}
<option key={type.id} value={type.id}> onChange={field.onChange}
{type.name} required
</option> isLoading={isPaymentTypeLoading}
))} className="m-0 form-select-sm w-100"
</> />
)} )}
</select> />
{errors.paymentAdjustmentHeadId && ( {errors.paymentAdjustmentHeadId && (
<small className="danger-text"> <small className="danger-text">
{errors.paymentAdjustmentHeadId.message} {errors.paymentAdjustmentHeadId.message}
@ -127,6 +126,7 @@ const AddPayment = ({ onClose }) => {
)} )}
</div> </div>
<div className="col-12 col-md-6 mb-2"> <div className="col-12 col-md-6 mb-2">
<Label htmlFor="amount" className="form-label" required> <Label htmlFor="amount" className="form-label" required>
Amount Amount
@ -134,7 +134,7 @@ const AddPayment = ({ onClose }) => {
<input <input
type="number" type="number"
id="amount" id="amount"
className="form-control form-control-sm" className="form-control "
min="1" min="1"
step="0.01" step="0.01"
inputMode="decimal" inputMode="decimal"
@ -150,7 +150,7 @@ const AddPayment = ({ onClose }) => {
</Label> </Label>
<textarea <textarea
id="comment" id="comment"
className="form-control form-control-sm" className="form-control "
{...register("comment")} {...register("comment")}
/> />
{errors.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 { SelectProjectField } from "../common/Forms/SelectFieldServerSide";
import { ITEMS_PER_PAGE } from "../../utils/constants"; import { ITEMS_PER_PAGE } from "../../utils/constants";
import { useOrganizationsList } from "../../hooks/useOrganization"; import { useOrganizationsList } from "../../hooks/useOrganization";
import { AppFormController } from "../../hooks/appHooks/useAppForm";
import SelectField from "../common/Forms/SelectField";
const ManageCollection = ({ collectionId, onClose }) => { const ManageCollection = ({ collectionId, onClose }) => {
const { data, isError, isLoading, error } = useCollection(collectionId); const { data, isError, isLoading, error } = useCollection(collectionId);
@ -189,38 +191,35 @@ const ManageCollection = ({ collectionId, onClose }) => {
</div> </div>
<div className="col-12 col-md-6 mb-2"> <div className="col-12 col-md-6 mb-2">
<Label htmlFor="name" required> <Label htmlFor="billedToId" required>
Bill To Bill To
</Label> </Label>
<div className="d-flex align-items-center gap-2">
<select <AppFormController
className="select2 form-select form-select flex-grow-1" name="billedToId"
aria-label="Default select example" control={control}
{...register("billedToId", { rules={{ required: "Client is required" }}
required: "Client is required", render={({ field }) => (
valueAsNumber: false, <SelectField
})} label="" // Label already shown above
> placeholder="Select Client"
{isLoading ? ( options={organization?.data ?? []}
<option>Loading...</option> value={field.value || ""}
) : ( onChange={field.onChange}
<> required
<option value="">Select Client</option> isLoading={isLoading}
{organization?.data?.map((org) => ( className="m-0 flex-grow-1"
<option key={org.id} value={org.id}> />
{org.name} )}
</option> />
))}
</> {errors?.billedToId && (
)}
</select>
</div>
{errors?.clientId && (
<span className="danger-text">{errors.billedToId.message}</span> <span className="danger-text">{errors.billedToId.message}</span>
)} )}
</div> </div>
<div className="col-12 col-md-6 mb-2">
<div className="col-12 col-md-6 mb-4">
<Label required>Title</Label> <Label required>Title</Label>
<input <input
type="text" type="text"
@ -231,7 +230,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
<small className="danger-text">{errors.title.message}</small> <small className="danger-text">{errors.title.message}</small>
)} )}
</div> </div>
<div className="col-12 col-md-6 mb-2"> <div className="col-12 col-md-6 mb-2">
<Label required>Invoice Number</Label> <Label required>Invoice Number</Label>
<input <input
type="text" type="text"
@ -257,7 +256,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
</small> </small>
)} )}
</div> </div>
<div className="col-12 col-md-6 mb-2"> <div className="col-12 col-md-6 mb-4">
<Label required>Invoice Date</Label> <Label required>Invoice Date</Label>
<DatePicker <DatePicker
className="w-100" className="w-100"
@ -272,7 +271,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
</small> </small>
)} )}
</div> </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> <Label required>Expected Payment Date</Label>
<DatePicker <DatePicker
className="w-100" className="w-100"
@ -287,7 +286,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
</small> </small>
)} )}
</div> </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> <Label required>Submission Date (Client)</Label>
<DatePicker <DatePicker
className="w-100" className="w-100"
@ -341,7 +340,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
</small> </small>
)} )}
</div> </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"> <div className="col-md-12">
<Label htmlFor="description" className="form-label" required> <Label htmlFor="description" className="form-label" required>
Description Description
@ -360,7 +359,7 @@ const ManageCollection = ({ collectionId, onClose }) => {
</div> </div>
</div> </div>
<div className="col-12"> <div className="col-12 my-3">
<Label className="form-label" required> <Label className="form-label" required>
Upload Bill{" "} Upload Bill{" "}
</Label> </Label>

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

@ -12,6 +12,8 @@ const SelectField = ({
labelKey = "name", labelKey = "name",
isLoading = false, isLoading = false,
}) => { }) => {
const [position, setPosition] = useState("bottom");
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const dropdownRef = useRef(null); const dropdownRef = useRef(null);
@ -34,10 +36,26 @@ const SelectField = ({
setOpen(false); 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 ( return (
<div className="mb-3 position-relative" ref={dropdownRef}> <div className="position-relative mb-3" ref={dropdownRef}>
{label && ( {label && (
<Label className="form-label" required={required}> <Label className="form-label" required={required}>
{label} {label}
@ -60,32 +78,45 @@ const SelectField = ({
</button> </button>
{open && !isLoading && ( {open && !isLoading && (
<ul <div
className="dropdown-menu w-100 shadow-sm show animate__fadeIn" className="w-full px-1 shadow-md rounded p-1"
style={{ style={{
position: "absolute", position: "absolute",
top: "100%", top: position === "bottom" ? "100%" : "auto",
bottom: position === "top" ? "100%" : "auto",
left: 0, left: 0,
zIndex: 1050, zIndex: 1050,
marginTop: "4px",
borderRadius: "0.375rem", marginTop: position === "bottom" ? "2px" : "0",
overflow: "hidden", marginBottom: position === "top" ? "2px" : "0",
}} }}
> >
{options.map((option, i) => ( <ul
<li key={i}> className="dropdown-menu w-100 show border-0 rounded px-1 py-1"
<button style={{
type="button" position: "static",
className={`dropdown-item ${
option[valueKey] === value ? "active" : "" maxHeight: "220px",
}`} overflowY: "auto",
onClick={() => handleSelect(option)} overflowX: "hidden",
> }}
{option[labelKey]} id="vertical-example"
</button> >
</li> {options.map((option, i) => (
))} <li key={i}>
</ul> <button
type="button"
className={`dropdown-item rounded text-truncate ${
option[valueKey] === value ? "active" : ""
}`}
onClick={() => handleSelect(option)}
>
{option[labelKey]}
</button>
</li>
))}
</ul>
</div>
)} )}
</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 React, { useEffect, useState } from "react";
import Label from "./Label"; 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 { setValue, watch } = useFormContext();
const tags = watch(name) || []; const tags = watch(name) || [];
const [input, setInput] = useState(""); const [input, setInput] = useState("");
@ -70,7 +70,7 @@ const TagInput = ({ label, name, placeholder, color = "#e9ecef", required = fals
</Label> </Label>
<div <div
className="form-control form-control-sm p-1" className={`form-control form-control-sm-${size}`}
style={{ minHeight: "33px", position: "relative" }} style={{ minHeight: "33px", position: "relative" }}
> >
<div className="d-flex flex-wrap align-items-center gap-1"> <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> </div>
{masterFeatures && ( {masterFeatures && (
<div className="col-12 text-end"> <div className="col-12 text-end mt-5">
<button <button
type="reset" type="reset"
className="btn btn-sm btn-label-secondary me-3" 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>} {errors.name && <p className="text-danger">{errors.name.message}</p>}
</div> </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> <Label className="form-label" htmlFor="description" required>Description</Label>
<textarea <textarea
rows="3" 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 <button
type="button" type="button"
className="btn btn-sm btn-label-secondary me-3" className="btn btn-sm btn-label-secondary me-3"

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

@ -9,6 +9,8 @@ import {
useUpdateDocumentCategory, useUpdateDocumentCategory,
} from "../../hooks/masterHook/useMaster"; } from "../../hooks/masterHook/useMaster";
import Label from "../common/Label"; 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( export const Document_Entity = Object.entries(DOCUMENTS_ENTITIES).map(
([key, value]) => ({ key, value }) ([key, value]) => ({ key, value })
@ -34,6 +36,7 @@ const ManageDocumentCategory = ({ data, onClose }) => {
register, register,
handleSubmit, handleSubmit,
reset, reset,
control,
formState: { errors }, formState: { errors },
} = methods; } = methods;
@ -89,7 +92,7 @@ const ManageDocumentCategory = ({ data, onClose }) => {
<input <input
type="text" type="text"
{...register("name")} {...register("name")}
className={`form-control form-control-sm `} className={`form-control `}
/> />
{errors.name && ( {errors.name && (
<p className="danger-text">{errors.name.message}</p> <p className="danger-text">{errors.name.message}</p>
@ -97,36 +100,43 @@ const ManageDocumentCategory = ({ data, onClose }) => {
</div> </div>
<div className="col-12"> <div className="col-12">
<Label required >Select Entity</Label> <AppFormController
<select name="entityTypeId"
className="form-select form-select-sm" control={control}
{...register("entityTypeId")} render={({ field }) => (
> <SelectField
<option value="" disabled>Select entity</option> label="Select Entity"
{Document_Entity.map((entity) => ( options={Document_Entity ?? []}
<option key={entity.key} value={entity.value}> placeholder="Select entity"
{entity.key} required
</option> labelKey="key"
))} valueKey="value"
</select> value={field.value}
onChange={field.onChange}
className="m-0 w-100"
/>
)}
/>
{errors.entityTypeId && ( {errors.entityTypeId && (
<p className="danger-text">{errors.entityTypeId.message}</p> <p className="danger-text">{errors.entityTypeId.message}</p>
)} )}
</div> </div>
<div className="col-12">
<div className="col-12 my-3">
<Label required >Description</Label> <Label required >Description</Label>
<textarea <textarea
rows="3" rows="3"
{...register("description")} {...register("description")}
className={`form-control form-control-sm`} className={`form-control `}
/> />
{errors.description && ( {errors.description && (
<p className="danger-text">{errors.description.message}</p> <p className="danger-text">{errors.description.message}</p>
)} )}
</div> </div>
<div className="d-flex flex-row justify-content-end gap-3 "> <div className="d-flex flex-row justify-content-end gap-3">
<button <button
type="button" type="button"
className="btn btn-sm btn-label-secondary" className="btn btn-sm btn-label-secondary"
@ -137,16 +147,16 @@ const ManageDocumentCategory = ({ data, onClose }) => {
</button> </button>
<button <button
type="submit" type="submit"
className="btn btn-sm btn-primary me-3" className="btn btn-sm btn-primary"
disabled={isPending || Updating} disabled={isPending || Updating}
> >
{isPending || Updating {isPending || Updating
? "Please Wait..." ? "Please Wait..."
: data : data
? "Update" ? "Update"
: "Submit"} : "Submit"}
</button> </button>
</div> </div>
</form> </form>
</div> </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 { useCreateDocumentType, useDocumentCategories, useUpdateDocumentType } from "../../hooks/masterHook/useMaster";
import { DOCUMENTS_ENTITIES } from "../../utils/constants"; import { DOCUMENTS_ENTITIES } from "../../utils/constants";
import Label from "../common/Label"; 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( export const Document_Entity = Object.entries(DOCUMENTS_ENTITIES).map(
@ -33,21 +35,22 @@ const ManageDocumentType = ({ data, onClose, documentCategories = [] }) => {
isValidationRequired: true, isValidationRequired: true,
isMandatory: true, isMandatory: true,
documentCategoryId: "", documentCategoryId: "",
entityTypeId:"" entityTypeId: ""
}, },
}); });
const { const {
register, register,
handleSubmit, handleSubmit,
reset,watch, reset, watch,
control,
formState: { errors }, formState: { errors },
} = methods; } = methods;
const selectedDocumentEntity = watch("entityTypeId") const selectedDocumentEntity = watch("entityTypeId")
const {DocumentCategories,isLoading} = useDocumentCategories(selectedDocumentEntity) const { DocumentCategories, isLoading } = useDocumentCategories(selectedDocumentEntity)
const { mutate: createDocType, isPending: creating } = useCreateDocumentType(() => const { mutate: createDocType, isPending: creating } = useCreateDocumentType(() =>
onClose?.() onClose?.()
@ -55,15 +58,15 @@ const ManageDocumentType = ({ data, onClose, documentCategories = [] }) => {
const { mutate: updateDocType, isPending: updating } = useUpdateDocumentType(() => const { mutate: updateDocType, isPending: updating } = useUpdateDocumentType(() =>
onClose?.() onClose?.()
); );
const onSubmit = (payload) => { const onSubmit = (payload) => {
const { entityTypeId, ...rest } = payload; const { entityTypeId, ...rest } = payload;
if (data) { if (data) {
updateDocType({ id: data.id, payload: { ...rest, id: data.id } }); updateDocType({ id: data.id, payload: { ...rest, id: data.id } });
} else { } else {
createDocType(rest); createDocType(rest);
} }
}; };
useEffect(() => { useEffect(() => {
@ -76,7 +79,7 @@ const onSubmit = (payload) => {
isValidationRequired: data.isValidationRequired ?? true, isValidationRequired: data.isValidationRequired ?? true,
isMandatory: data.isMandatory ?? true, isMandatory: data.isMandatory ?? true,
documentCategoryId: data.documentCategory?.id ?? "", documentCategoryId: data.documentCategory?.id ?? "",
entityTypeId:data.documentCategory?.entityTypeId ?? "" entityTypeId: data.documentCategory?.entityTypeId ?? ""
}); });
} }
}, [data]); }, [data]);
@ -96,7 +99,7 @@ const onSubmit = (payload) => {
<input <input
type="text" type="text"
{...register("name")} {...register("name")}
className={`form-control form-control-sm `} className={`form-control `}
/> />
{errors.name && <a className="text-danger">{errors.name.message}</a>} {errors.name && <a className="text-danger">{errors.name.message}</a>}
</div> </div>
@ -107,7 +110,7 @@ const onSubmit = (payload) => {
<input <input
type="text" type="text"
{...register("regexExpression")} {...register("regexExpression")}
className="form-control form-control-sm" className="form-control "
/> />
</div> </div>
@ -117,7 +120,7 @@ const onSubmit = (payload) => {
<input <input
type="text" type="text"
{...register("allowedContentType")} {...register("allowedContentType")}
className={`form-control form-control form-control-sm`} className={`form-control form-control `}
/> />
{errors.allowedContentType && ( {errors.allowedContentType && (
<a className="text-danger">{errors.allowedContentType.message}</a> <a className="text-danger">{errors.allowedContentType.message}</a>
@ -130,7 +133,7 @@ const onSubmit = (payload) => {
<input <input
type="number" type="number"
{...register("maxSizeAllowedInMB", { valueAsNumber: true })} {...register("maxSizeAllowedInMB", { valueAsNumber: true })}
className={`form-control form-control-sm`} className={`form-control `}
/> />
{errors.maxSizeAllowedInMB && ( {errors.maxSizeAllowedInMB && (
<a className="text-danger">{errors.maxSizeAllowedInMB.message}</a> <a className="text-danger">{errors.maxSizeAllowedInMB.message}</a>
@ -156,47 +159,59 @@ const onSubmit = (payload) => {
/> />
<label className="form-check-label">Mandatory</label> <label className="form-check-label">Mandatory</label>
</div> </div>
<div className="col-12"> {/* Document Entity */}
<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 */}
<div className="col-12"> <div className="col-12">
<Label required> Document Category</Label> <AppFormController
<select name="entityTypeId"
{...register("documentCategoryId")} control={control}
className={`form-select form-select-sm`} render={({ field }) => (
> <SelectField
label="Document Entity"
{isLoading && <option value="" disabled>Loading....</option> } options={Document_Entity ?? []}
<option value="">-- Select Category --</option> placeholder="-- Select Category --"
{!isLoading && DocumentCategories?.map((cat) => ( required
<option key={cat.id} value={cat.id}> labelKey="key"
{cat.name} valueKey="value"
</option> value={field.value}
))} onChange={field.onChange}
</select> className="m-0 w-100"
{errors.documentCategoryId && ( />
<a className="text-danger">{errors.documentCategoryId.message}</a> )}
/>
{errors.entityTypeId && (
<small className="text-danger">{errors.entityTypeId.message}</small>
)} )}
</div> </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 */} {/* Buttons */}
<div className="d-flex flex-row justify-content-end gap-3 "> <div className="d-flex flex-row justify-content-end gap-3 ">
<button <button
type="button" type="button"
className="btn btn-sm btn-label-secondary" className="btn btn-sm btn-label-secondary"
onClick={onClose} onClick={onClose}
@ -212,10 +227,10 @@ const onSubmit = (payload) => {
{creating || updating {creating || updating
? "Please Wait..." ? "Please Wait..."
: data : data
? "Update" ? "Update"
: "Submit"} : "Submit"}
</button> </button>
</div> </div>
</form> </form>
</FormProvider> </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>} {errors.name && <p className="danger-text">{errors.name.message}</p>}
</div> </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> <Label className="form-label" htmlFor="description" required>
Description Description
</Label> </Label>

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

@ -145,7 +145,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
<input <input
type="text" type="text"
{...register("activityName")} {...register("activityName")}
className={`form-control form-control-sm ${ className={`form-control ${
errors.activityName ? "is-invalid" : "" errors.activityName ? "is-invalid" : ""
}`} }`}
/> />
@ -161,7 +161,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
<input <input
type="text" type="text"
{...register("unitOfMeasurement")} {...register("unitOfMeasurement")}
className={`form-control form-control-sm ${ className={`form-control ${
errors.unitOfMeasurement ? "is-invalid" : "" errors.unitOfMeasurement ? "is-invalid" : ""
}`} }`}
/> />
@ -203,7 +203,7 @@ const ManageActivity = ({ activity = null, whichGroup = null, close }) => {
></input> ></input>
<input <input
{...register(`checkList.${index}.description`)} {...register(`checkList.${index}.description`)}
className="form-control form-control-sm" className="form-control "
placeholder={`Checklist item ${index + 1}`} placeholder={`Checklist item ${index + 1}`}
onChange={(e) => onChange={(e) =>
handleChecklistChange(index, e.target.value) 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 <input
type="text" type="text"
{...register("name")} {...register("name")}
className={`form-control form-control-sm ${errors.name ? "is-invalids" : "" className={`form-control ${errors.name ? "is-invalids" : ""
}`} }`}
/> />
{errors.name && ( {errors.name && (
@ -76,7 +76,7 @@ const ManageGroup = ({ group = null, whichService = null, close }) => {
<textarea <textarea
rows="3" rows="3"
{...register("description")} {...register("description")}
className={`form-control form-control-sm ${errors.description ? "is-invalids" : "" className={`form-control ${errors.description ? "is-invalids" : ""
}`} }`}
></textarea> ></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>} {errors.name && <p className="danger-text">{errors.name.message}</p>}
</div> </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> <Label className="form-label" htmlFor="description" required>
Description Description
</Label> </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" id="accordionExample">
<div className="accordion-item active shadow-none"> <div className="accordion-item active shadow-none">
{/* Service Header */} {/* 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> <p className="m-0 fw-bold fs-6">{service.name}</p>
<button <button
className="btn btn-sm btn-primary" 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>
<div className="mb-3"> <div className="my-3">
<Label htmlFor="description" required> <Label htmlFor="description" required>
Description Description
</Label> </Label>

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

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

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

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

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

@ -223,7 +223,7 @@ const PurchasePaymentDetails = ({ purchaseId = null }) => {
label="Select Document Type" label="Select Document Type"
options={InvoiceDocTypes ?? []} options={InvoiceDocTypes ?? []}
placeholder="Choose Type" placeholder="Choose Type"
labelKeyKey="name" labelKey="name"
valueKeyKey="id" valueKeyKey="id"
value={field.value} value={field.value}
onChange={field.onChange} 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 { useSelectedProject } from "../../slices/apiDataManager";
import { useProjectAssignedServices } from "../../hooks/useProjects"; import { useProjectAssignedServices } from "../../hooks/useProjects";
import { setService } from "../../slices/globalVariablesSlice"; 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 TaskPlanning = () => {
const selectedProject = useSelectedProject(); const selectedProject = useSelectedProject();
const selectedService = useCurrentService(); const selectedService = useCurrentService();
const dispatch = useDispatch(); const dispatch = useDispatch();
const { control } = useForm({
defaultValues: {
serviceFilter: selectedService ?? ""
},
});
const { projectNames = [], loading: projectLoading } = useProjectName(); const { projectNames = [], loading: projectLoading } = useProjectName();
@ -29,6 +38,7 @@ const TaskPlanning = () => {
if (projectLoading) { if (projectLoading) {
return <div className="text-center py-5">Loading...</div>; return <div className="text-center py-5">Loading...</div>;
} }
return ( return (
<div className="container-fluid"> <div className="container-fluid">
<Breadcrumb <Breadcrumb
@ -43,25 +53,31 @@ const TaskPlanning = () => {
{data?.length === 0 ? ( {data?.length === 0 ? (
<p className="badge bg-label-secondary m-0">Service not assigned</p> <p className="badge bg-label-secondary m-0">Service not assigned</p>
) : ( ) : (
<select <AppFormController
name="DataTables_Table_0_length" name="serviceFilter"
aria-controls="DataTables_Table_0" control={control}
className="form-select form-select-sm" render={({ field }) => (
aria-label="Select Service" <SelectField
value={selectedService ?? ""} label="Services"
onChange={(e) => dispatch(setService(e.target.value))} placeholder="All Services"
> options={[{ id: "", name: "All Services" }, ...(data ?? [])]}
<option value="">All Services</option> labelKey="name"
{!servicesLoading && valueKey="id"
data?.map((service) => ( isLoading={servicesLoading}
<option key={service.id} value={service.id}> value={field.value}
{service.name} onChange={(val) => {
</option> field.onChange(val);
))} dispatch(setService(val));
</select> }}
className="m-0"
/>
)}
/>
)} )}
</div> </div>
{/* Planning Component */} {/* Planning Component */}
{selectedProject ? ( {selectedProject ? (
<InfraPlanning /> <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 SubTask from "../../components/Activities/SubTask";
import { useProjectAssignedServices } from "../../hooks/useProjects"; import { useProjectAssignedServices } from "../../hooks/useProjects";
import { useSelectedProject } from "../../slices/apiDataManager"; 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(); const DailyProgrssContext = createContext();
export const useDailyProgrssContext = () => { export const useDailyProgrssContext = () => {
@ -23,9 +26,9 @@ export const useDailyProgrssContext = () => {
}; };
const DailyProgrssReport = () => { const DailyProgrssReport = () => {
const selectedProject = useSelectedProject() const selectedProject = useSelectedProject()
const [service, setService] = useState(""); const [service, setService] = useState("");
const [filter,setFilter] = useState('') const [filter, setFilter] = useState('')
const { setOffcanvasContent, setShowTrigger } = useFab(); const { setOffcanvasContent, setShowTrigger } = useFab();
const { data, isLoading, isError, error } = useProjectAssignedServices(selectedProject); const { data, isLoading, isError, error } = useProjectAssignedServices(selectedProject);
@ -41,8 +44,14 @@ const DailyProgrssReport = () => {
filter, filter,
}; };
const handleFilter = (filterObj)=>{ const { control } = useForm({
setFilter(filterObj) defaultValues: {
serviceFilter: ""
}
});
const handleFilter = (filterObj) => {
setFilter(filterObj)
} }
useEffect(() => { useEffect(() => {
@ -89,32 +98,38 @@ const DailyProgrssReport = () => {
/> />
<div className="card card-fullscreen p-5"> <div className="card card-fullscreen p-5">
{data?.length > 0 && (<div className="col-sm-4 col-md-3 col-12"> {data?.length > 0 && (
<select <div className="col-sm-4 col-md-3 col-12 text-start">
className="form-select form-select-sm" <AppFormController
value={service ?? ""} name="serviceFilter"
onChange={(e) => setService(e.target.value)} control={control}
> defaultValue={service ?? ""}
{isLoading ? ( render={({ field }) => (
<option value="lading" disabled>Loading...</option> <SelectField
) : ( label="Services"
<> options={[{ id: "", name: "All Projects" }, ...(data ?? [])]}
<option value=""> placeholder="Select Service"
All Services labelKey="name"
</option> valueKey="id"
{data?.map((service) => ( isLoading={isLoading}
<option key={service.id} value={service.id}> value={field.value}
{service.name} onChange={(val) => {
</option> field.onChange(val);
))} setService(val);
</> }}
)} className="m-0"
</select> />
</div>)} )}
/>
</div>
)}
<div> <div>
<TaskReportList /> <TaskReportList />
</div> </div>
</div> </div>
</DailyProgrssContext.Provider> </DailyProgrssContext.Provider>
</div> </div>
); );

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

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

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

@ -15,6 +15,9 @@ import { changeMaster } from "../../slices/localVariablesSlice";
import { useHasUserPermission } from "../../hooks/useHasUserPermission"; import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_MASTER } from "../../utils/constants"; import { MANAGE_MASTER } from "../../utils/constants";
import GlobalModel from "../../components/common/GlobalModel"; 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(); export const MasterContext = createContext();
@ -33,6 +36,11 @@ const MasterPage = () => {
(store) => store.localVariables.selectedMaster (store) => store.localVariables.selectedMaster
); );
const hasMasterPermission = useHasUserPermission(MANAGE_MASTER); const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
const { control, handleSubmit } = useForm({
defaultValues: {
masterSelection: selectedMaster || "",
},
});
const { const {
data: menuData, data: menuData,
@ -46,9 +54,9 @@ const MasterPage = () => {
isError: isMasterError, isError: isMasterError,
} = useMaster(); } = useMaster();
const { mutate: DeleteMaster, isPending: isDeleting } = useDeleteMasterItem(); const { mutate: DeleteMaster, isPending: isDeleting } = useDeleteMasterItem();
const [isDeleletingServiceItem,setDeleletingServiceItem] = useState({isOpen:false,ItemId:null,whichItem:null}) const [isDeleletingServiceItem, setDeleletingServiceItem] = useState({ isOpen: false, ItemId: null, whichItem: null })
const {mutate:DeleteSericeGroup,isPending:deletingGroup} =useDeleteServiceGroup() const { mutate: DeleteSericeGroup, isPending: deletingGroup } = useDeleteServiceGroup()
const {mutate:DeleteAcivity,isPending:deletingActivity} = useDeleteActivity() const { mutate: DeleteAcivity, isPending: deletingActivity } = useDeleteActivity()
const [modalConfig, setModalConfig] = useState(null); const [modalConfig, setModalConfig] = useState(null);
const [deleteData, setDeleteData] = useState(null); const [deleteData, setDeleteData] = useState(null);
@ -89,15 +97,15 @@ const MasterPage = () => {
}; };
const handleDeleteServiceItem =()=>{ const handleDeleteServiceItem = () => {
if(!isDeleletingServiceItem.ItemId) return if (!isDeleletingServiceItem.ItemId) return
debugger debugger
if(isDeleletingServiceItem.whichItem === "activity"){ if (isDeleletingServiceItem.whichItem === "activity") {
DeleteAcivity(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})}) DeleteAcivity(isDeleletingServiceItem.ItemId, { onSuccess: () => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null }) })
}else{ } else {
DeleteSericeGroup(isDeleletingServiceItem.ItemId,{onSuccess:()=>setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})}) DeleteSericeGroup(isDeleletingServiceItem.ItemId, { onSuccess: () => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null }) })
} }
} }
@ -115,7 +123,7 @@ const MasterPage = () => {
); );
return ( return (
<MasterContext.Provider value={{setDeleletingServiceItem}}> <MasterContext.Provider value={{ setDeleletingServiceItem }}>
{modalConfig && ( {modalConfig && (
<GlobalModel <GlobalModel
size={ size={
@ -134,8 +142,6 @@ const MasterPage = () => {
/> />
</GlobalModel> </GlobalModel>
)} )}
<ConfirmModal <ConfirmModal
type="delete" type="delete"
header={`Delete ${selectedMaster}`} header={`Delete ${selectedMaster}`}
@ -145,15 +151,15 @@ const MasterPage = () => {
onSubmit={handleDeleteSubmit} onSubmit={handleDeleteSubmit}
onClose={() => setDeleteData(null)} onClose={() => setDeleteData(null)}
/> />
<ConfirmModal <ConfirmModal
type="delete" type="delete"
header={`Delete ${isDeleletingServiceItem?.whichItem}`} header={`Delete ${isDeleletingServiceItem?.whichItem}`}
message={`Are you sure you want to delete this ${isDeleletingServiceItem?.whichItem}?`} message={`Are you sure you want to delete this ${isDeleletingServiceItem?.whichItem}?`}
isOpen={!!isDeleletingServiceItem?.isOpen} isOpen={!!isDeleletingServiceItem?.isOpen}
loading={deletingActivity} loading={deletingActivity}
onSubmit={handleDeleteServiceItem} onSubmit={handleDeleteServiceItem}
onClose={() => setDeleletingServiceItem({isOpen:false,ItemId:null,whichItem:null})} onClose={() => setDeleletingServiceItem({ isOpen: false, ItemId: null, whichItem: null })}
/> />
<div className="container-fluid"> <div className="container-fluid">
@ -161,31 +167,37 @@ const MasterPage = () => {
data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]} data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]}
/> />
<div className="row page-min-h"> <div className="">
<div className="card"> <div className="card page-min-h">
<div <div
className="card-datatable table-responsive py-2 py-md-10 mx-1 mx-md-5 " className="card-datatable table-responsive py-2 py-md-6 mx-1 mx-md-5 overflow-visible"
style={{ overflow: "hidden" }}
> >
<div className="row mb-2"> <div className="row mb-2">
<div className="col-12 col-md-3"> <div className="col-12 col-md-3 text-start">
<select <AppFormController
className="form-select py-1 px-2" name="masterSelection"
control={control}
value={selectedMaster} render={({ field }) => (
onChange={(e) => dispatch(changeMaster(e.target.value))} <SelectField
> label="Select Master"
{menuLoading ? ( options={menuData ?? []}
<option value="">Loading...</option> placeholder={menuLoading ? "Loading..." : "Choose Master"}
) : ( required
menuData?.map((item) => ( labelKey="name"
<option key={item.id} value={item.name}> valueKey="name"
{item.name} value={field.value}
</option> 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>
<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-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"> <div className="col-8 col-md-3">
<input <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{" "} <i className="bx bx-plus-circle me-2"></i> <span className="d-none d-md-inline-block">Add{" "}
{selectedMaster}</span> {selectedMaster}</span>
</button> </button>
)} )}
</div> </div>
@ -220,7 +232,7 @@ const MasterPage = () => {
</div> </div>
</div> </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 ( return (
<div className="table-responsive"> <div className="table-responsive mt-5">
{loading ? ( {loading ? (
<p>Loading...</p> <p>Loading...</p>
) : ( ) : (
@ -92,14 +92,14 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
{" "} {" "}
{selectedMaster === "Activity" ? "Activity" : "Name"} {selectedMaster === "Activity" ? "Activity" : "Name"}
</th> </th>
<th className="text-start d-none d-md-table-cell"> <th className="text-start d-none d-md-table-cell">
{" "} {" "}
{selectedMaster === "Activity" {selectedMaster === "Activity"
? "Unit" ? "Unit"
: selectedMaster === "Document Type" : selectedMaster === "Document Type"
? "Content Type" ? "Content Type"
: "Description"} : "Description"}
</th> </th>
<th className={` ${!hasMasterPermission && "d-none"}`}> <th className={` ${!hasMasterPermission && "d-none"}`}>
Actions Actions
@ -109,15 +109,15 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
<tbody> <tbody>
{currentItems.length > 0 ? ( {currentItems.length > 0 ? (
currentItems.map((item, index) => ( currentItems.map((item, index) => (
<tr key={index} > <tr key={index} style={{ height: "40px" }}>
<td style={{ width: "20px" }} className="py-3"> <td className="py-3">
<i className="bx bx-right-arrow-alt"></i> <i className="bx bx-right-arrow-alt"></i>
</td> </td>
{updatedColumns.map((col) => ( {updatedColumns.map((col) => (
<td className={`text-start mx-2 py-3 ${col.key === "description" && "d-none d-md-table-cell"}`} key={col.key} > <td className={`text-start mx-2 py-3 ${col.key === "description" && "d-none d-md-table-cell"}`} key={col.key} >
{col.key === "description" ? ( {col.key === "description" ? (
item[col.key] !== undefined && item[col.key] !== undefined &&
item[col.key] !== null ? ( item[col.key] !== null ? (
item[col.key].length > 80 ? ( item[col.key].length > 80 ? (
<>{item[col.key].slice(0, 80)}...</> <>{item[col.key].slice(0, 80)}...</>
) : ( ) : (
@ -137,7 +137,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
<td className={!hasMasterPermission ? "d-none" : "py-3"}> <td className={!hasMasterPermission ? "d-none" : "py-3"}>
{(selectedMaster === "Application Role" || {(selectedMaster === "Application Role" ||
selectedMaster === "Work Category") && selectedMaster === "Work Category") &&
item?.isSystem ? ( item?.isSystem ? (
<> <>
<button <button
aria-label="Modify" aria-label="Modify"
@ -230,9 +230,8 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
{[...Array(totalPages)].map((_, index) => ( {[...Array(totalPages)].map((_, index) => (
<li <li
key={index} key={index}
className={`page-item ${ className={`page-item ${currentPage === index + 1 ? "active" : ""
currentPage === index + 1 ? "active" : "" }`}
}`}
> >
<button <button
className="page-link" className="page-link"
@ -243,9 +242,8 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
</li> </li>
))} ))}
<li <li
className={`page-item ${ className={`page-item ${currentPage === totalPages ? "disabled" : ""
currentPage === totalPages ? "disabled" : "" }`}
}`}
> >
<button <button
className="page-link" className="page-link"