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

Merge pull request 'Cancel button not closing All fields popup in masters' (#362) from Kartik_Bug#979 into Issues_Aug_2W

Browse Source 
Reviewed-on: #362
Merged
This commit is contained in:
pramod.mahajan 2025-09-01 09:23:29 +00:00
commit d9456db01e
15 changed files with 787 additions and 768 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

265
src/components/master/CreateActivity.jsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect,useCallback } from "react"; import React, { useState, useEffect, useCallback } from "react";
import { useFieldArray, useForm } from "react-hook-form"; import { useFieldArray, 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";
@ -7,7 +7,7 @@ import { MasterRespository } from "../../repositories/MastersRepository";
import { clearApiCacheKey } from "../../slices/apiCacheSlice"; import { clearApiCacheKey } from "../../slices/apiCacheSlice";
import { getCachedData, cacheData } from "../../slices/apiDataManager"; import { getCachedData, cacheData } from "../../slices/apiDataManager";
import showToast from "../../services/toastService"; import showToast from "../../services/toastService";
import {useCreateActivity} from "../../hooks/masterHook/useMaster"; import { useCreateActivity } from "../../hooks/masterHook/useMaster";
const schema = z.object({ const schema = z.object({
activityName: z.string().min(1, { message: "Activity Name is required" }), activityName: z.string().min(1, { message: "Activity Name is required" }),
@ -24,74 +24,74 @@ const schema = z.object({
}); });
const CreateActivity = ({ onClose }) => { const CreateActivity = ({ onClose }) => {
const maxDescriptionLength = 255; const maxDescriptionLength = 255;
const { mutate: createActivity, isPending: isLoading } = useCreateActivity(() => onClose?.()); const { mutate: createActivity, isPending: isLoading } = useCreateActivity(() => onClose?.());
const { const {
register, register,
handleSubmit, handleSubmit,
control, control,
setValue, setValue,
clearErrors, clearErrors,
setError, setError,
getValues, getValues,
reset, reset,
formState: { errors }, formState: { errors },
} = useForm({ } = useForm({
resolver: zodResolver(schema), resolver: zodResolver(schema),
defaultValues: { defaultValues: {
activityName: "", activityName: "",
unitOfMeasurement: "", unitOfMeasurement: "",
checkList: [], checkList: [],
}, },
}); });
const { const {
fields: checkListItems, fields: checkListItems,
append, append,
remove, remove,
} = useFieldArray({ } = useFieldArray({
control, control,
name: "checkList", name: "checkList",
}); });
const addChecklistItem = useCallback(() => { const addChecklistItem = useCallback(() => {
const values = getValues("checkList"); const values = getValues("checkList");
const lastIndex = checkListItems.length - 1; const lastIndex = checkListItems.length - 1;
if ( if (
checkListItems.length > 0 && checkListItems.length > 0 &&
(!values?.[lastIndex] || values[lastIndex].description.trim() === "") (!values?.[lastIndex] || values[lastIndex].description.trim() === "")
) { ) {
setError(`checkList.${lastIndex}.description`, { setError(`checkList.${lastIndex}.description`, {
type: "manual", type: "manual",
message: "Please fill this checklist item before adding another.", message: "Please fill this checklist item before adding another.",
}); });
return; return;
} }
clearErrors(`checkList.${lastIndex}.description`); clearErrors(`checkList.${lastIndex}.description`);
append({ id: null, description: "", isMandatory: false }); append({ id: null, description: "", isMandatory: false });
}, [checkListItems, getValues, append, setError, clearErrors]); }, [checkListItems, getValues, append, setError, clearErrors]);
const removeChecklistItem = useCallback((index) => { const removeChecklistItem = useCallback((index) => {
remove(index); remove(index);
}, [remove]); }, [remove]);
const handleChecklistChange = useCallback((index, value) => { const handleChecklistChange = useCallback((index, value) => {
setValue(`checkList.${index}`, value); setValue(`checkList.${index}`, value);
}, [setValue]); }, [setValue]);
const onSubmit = (formData) => { const onSubmit = (formData) => {
createActivity(formData); createActivity(formData);
}; };
// const onSubmit = (data) => { // const onSubmit = (data) => {
// setIsLoading(true); // setIsLoading(true);
// MasterRespository.createActivity(data) // MasterRespository.createActivity(data)
// .then( ( resp ) => // .then( ( resp ) =>
// { // {
// const cachedData = getCachedData("Activity"); // const cachedData = getCachedData("Activity");
// const updatedData = [ ...cachedData, resp?.data ]; // const updatedData = [ ...cachedData, resp?.data ];
// cacheData("Activity", updatedData); // cacheData("Activity", updatedData);
@ -104,15 +104,15 @@ const onSubmit = (formData) => {
// setIsLoading(false); // setIsLoading(false);
// }); // });
// }; // };
const handleClose = useCallback(() => { const handleClose = useCallback(() => {
reset(); reset();
onClose(); onClose();
}, [reset, onClose]); }, [reset, onClose]);
useEffect(() => { useEffect(() => {
const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]')); const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el)); tooltipTriggerList.forEach((el) => new bootstrap.Tooltip(el));
}, []); }, []);
return ( return (
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
@ -123,9 +123,8 @@ useEffect(() => {
<input <input
type="text" type="text"
{...register("activityName")} {...register("activityName")}
className={`form-control form-control-sm ${ className={`form-control form-control-sm ${errors.activityName ? "is-invalid" : ""
errors.activityName ? "is-invalid" : "" }`}
}`}
/> />
{errors.activityName && ( {errors.activityName && (
<p className="danger-text">{errors.activityName.message}</p> <p className="danger-text">{errors.activityName.message}</p>
@ -137,9 +136,8 @@ useEffect(() => {
<input <input
type="text" type="text"
{...register("unitOfMeasurement")} {...register("unitOfMeasurement")}
className={`form-control form-control-sm ${ className={`form-control form-control-sm ${errors.unitOfMeasurement ? "is-invalid" : ""
errors.unitOfMeasurement ? "is-invalid" : "" }`}
}`}
/> />
{errors.unitOfMeasurement && ( {errors.unitOfMeasurement && (
<p className="danger-text">{errors.unitOfMeasurement.message}</p> <p className="danger-text">{errors.unitOfMeasurement.message}</p>
@ -147,68 +145,68 @@ useEffect(() => {
</div> </div>
<div className="col-md-12 text-start mt-1"> <div className="col-md-12 text-start mt-1">
<p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List" }</p> <p className="py-1 my-0">{checkListItems.length > 0 ? "Check List" : "Add Check List"}</p>
{checkListItems.length > 0 && ( {checkListItems.length > 0 && (
<table className="table mt-1 border-0"> <table className="table mt-1 border-0">
<thead className="py-0 my-0 table-border-top-0"> <thead className="py-0 my-0 table-border-top-0">
<tr className="py-1"> <tr className="py-1">
<th colSpan={2} className="py-1"> <th colSpan={2} className="py-1">
<small>Name</small> <small>Name</small>
</th> </th>
<th colSpan={2} className="py-1 text-center"> <th colSpan={2} className="py-1 text-center">
<small>Is Mandatory</small> <small>Is Mandatory</small>
</th> </th>
<th className="text-center py-1">Action</th> <th className="text-center py-1">Action</th>
</tr>
</thead>
<tbody className="table-border-bottom-0 ">
{checkListItems.map((item, index) => (
<tr key={index} className="border-top-0">
<td colSpan={2} className="border-top-0 border-0">
<input
className="d-none"
{...register(`checkList.${index}.id`)}
></input>
<input
{...register(`checkList.${index}.description`)}
className="form-control form-control-sm"
placeholder={`Checklist item ${index + 1}`}
onChange={(e) =>
handleChecklistChange(index, e.target.value)
}
/>
{errors.checkList?.[index]?.description && (
<small
style={{ fontSize: "10px" }}
className="danger-text"
>
{errors.checkList[index]?.description?.message}
</small>
)}
</td>
<td colSpan={2} className="text-center border-0">
<input
className="form-check-input"
type="checkbox"
{...register(`checkList.${index}.isMandatory`)}
defaultChecked={item.isMandatory}
/>
</td>
<td className="text-center border-0">
<button
type="button"
onClick={() => removeChecklistItem(index)}
className="btn btn-xs btn-icon btn-text-secondary"
>
<i className="bx bxs-minus-circle text-danger" data-bs-toggle="tooltip"
title="Remove Check"
data-bs-original-title="Remove check"></i>
</button>
</td>
</tr> </tr>
))} </thead>
</tbody> <tbody className="table-border-bottom-0 ">
</table> {checkListItems.map((item, index) => (
<tr key={index} className="border-top-0">
<td colSpan={2} className="border-top-0 border-0">
<input
className="d-none"
{...register(`checkList.${index}.id`)}
></input>
<input
{...register(`checkList.${index}.description`)}
className="form-control form-control-sm"
placeholder={`Checklist item ${index + 1}`}
onChange={(e) =>
handleChecklistChange(index, e.target.value)
}
/>
{errors.checkList?.[index]?.description && (
<small
style={{ fontSize: "10px" }}
className="danger-text"
>
{errors.checkList[index]?.description?.message}
</small>
)}
</td>
<td colSpan={2} className="text-center border-0">
<input
className="form-check-input"
type="checkbox"
{...register(`checkList.${index}.isMandatory`)}
defaultChecked={item.isMandatory}
/>
</td>
<td className="text-center border-0">
<button
type="button"
onClick={() => removeChecklistItem(index)}
className="btn btn-xs btn-icon btn-text-secondary"
>
<i className="bx bxs-minus-circle text-danger" data-bs-toggle="tooltip"
title="Remove Check"
data-bs-original-title="Remove check"></i>
</button>
</td>
</tr>
))}
</tbody>
</table>
)} )}
<button <button
type="button" type="button"
@ -216,8 +214,8 @@ useEffect(() => {
onClick={addChecklistItem} onClick={addChecklistItem}
> >
<i className="bx bx-plus-circle" data-bs-toggle="tooltip" <i className="bx bx-plus-circle" data-bs-toggle="tooltip"
title="Add Check" title="Add Check"
data-bs-original-title="Add check" ></i> data-bs-original-title="Add check" ></i>
</button> </button>
</div> </div>
@ -226,12 +224,13 @@ useEffect(() => {
{isLoading ? "Please Wait" : "Submit"} {isLoading ? "Please Wait" : "Submit"}
</button> </button>
<button <button
type="reset" type="button" // ✅ change to button
className="btn btn-sm btn-label-secondary" className="btn btn-sm btn-label-secondary"
onClick={handleClose} onClick={handleClose}
> >
Cancel Cancel
</button> </button>
</div> </div>
</div> </div>
</form> </form>

115
src/components/master/CreateContactCategory.jsx
View File

@ -1,43 +1,43 @@
import React, { useEffect,useState } from 'react' import React, { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'; 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 { MasterRespository } from '../../repositories/MastersRepository'; import { MasterRespository } from '../../repositories/MastersRepository';
import { clearApiCacheKey } from '../../slices/apiCacheSlice'; import { clearApiCacheKey } from '../../slices/apiCacheSlice';
import { getCachedData,cacheData } from '../../slices/apiDataManager'; import { getCachedData, cacheData } from '../../slices/apiDataManager';
import showToast from '../../services/toastService'; import showToast from '../../services/toastService';
import {useCreateContactCategory} from '../../hooks/masterHook/useMaster'; import { useCreateContactCategory } from '../../hooks/masterHook/useMaster';
const schema = z.object({ const schema = z.object({
name: z.string().min(1, { message: "Category name is required" }), name: z.string().min(1, { message: "Category name is required" }),
description: z.string().min(1, { message: "Description is required" }) description: z.string().min(1, { message: "Description is required" })
.max(255, { message: "Description cannot exceed 255 characters" }), .max(255, { message: "Description cannot exceed 255 characters" }),
}); });
const CreateContactCategory = ({onClose}) => { const CreateContactCategory = ({ onClose }) => {
const { const {
register, register,
handleSubmit, handleSubmit,
formState: { errors }, formState: { errors },
reset, reset,
} = useForm({ } = useForm({
resolver: zodResolver(schema), resolver: zodResolver(schema),
defaultValues: { defaultValues: {
name: "", name: "",
description: "", description: "",
}, },
}); });
const [descriptionLength, setDescriptionLength] = useState(0); const [descriptionLength, setDescriptionLength] = useState(0);
const maxDescriptionLength = 255; const maxDescriptionLength = 255;
const { mutate: createContactCategory, isPending: isLoading } = useCreateContactCategory(() => onClose?.()); const { mutate: createContactCategory, isPending: isLoading } = useCreateContactCategory(() => onClose?.());
const onSubmit = (payload) => { const onSubmit = (payload) => {
createContactCategory(payload); createContactCategory(payload);
}; };
// const onSubmit = (data) => { // const onSubmit = (data) => {
// setIsLoading(true) // setIsLoading(true)
// MasterRespository.createContactCategory(data).then((resp)=>{ // MasterRespository.createContactCategory(data).then((resp)=>{
@ -54,27 +54,27 @@ const onSubmit = (payload) => {
// setIsLoading(false) // setIsLoading(false)
// }) // })
// }; // };
const resetForm = () => { const resetForm = () => {
reset({ name: "", description: "" }); reset({ name: "", description: "" });
setDescriptionLength(0); setDescriptionLength(0);
}; };
useEffect(() => {
return () => resetForm();
}, []);
useEffect(() => {
return () => resetForm();
}, []);
return (<> return (<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label">Category Name</label> <label className="form-label">Category Name</label>
<input type="text" <input type="text"
{...register("name")} {...register("name")}
className={`form-control ${errors.name ? 'is-invalids' : ''}`} className={`form-control ${errors.name ? 'is-invalids' : ''}`}
/> />
{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"> <div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">Description</label> <label className="form-label" htmlFor="description">Description</label>
<textarea <textarea
rows="3" rows="3"
{...register("description")} {...register("description")}
@ -87,28 +87,31 @@ useEffect(() => {
<div className="text-end small text-muted"> <div className="text-end small text-muted">
{maxDescriptionLength - descriptionLength} characters left {maxDescriptionLength - descriptionLength} characters left
</div> </div>
{errors.description && ( {errors.description && (
<p className="text-danger">{errors.description.message}</p> <p className="text-danger">{errors.description.message}</p>
)} )}
</div> </div>
<div className="col-12 text-center"> <div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3"> <button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading? "Please Wait...":"Submit"} {isLoading ? "Please Wait..." : "Submit"}
</button> </button>
<button <button
type="reset" type="button" // ✅ not reset
className="btn btn-sm btn-label-secondary " className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal" onClick={() => {
aria-label="Close" resetForm(); // clear inputs
onClose?.(); // close modal from parent
}}
> >
Cancel Cancel
</button> </button>
</div> </div>
</form> </form>
</> </>
) )
} }

115
src/components/master/CreateContactTag.jsx
View File

@ -1,42 +1,42 @@
import React, { useEffect,useState } from 'react' import React, { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'; 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 { MasterRespository } from '../../repositories/MastersRepository'; import { MasterRespository } from '../../repositories/MastersRepository';
import { clearApiCacheKey } from '../../slices/apiCacheSlice'; import { clearApiCacheKey } from '../../slices/apiCacheSlice';
import { getCachedData,cacheData } from '../../slices/apiDataManager'; import { getCachedData, cacheData } from '../../slices/apiDataManager';
import showToast from '../../services/toastService'; import showToast from '../../services/toastService';
import {useCreateContactTag} from '../../hooks/masterHook/useMaster'; import { useCreateContactTag } from '../../hooks/masterHook/useMaster';
const schema = z.object({ const schema = z.object({
name: z.string().min(1, { message: "Tag name is required" }), name: z.string().min(1, { message: "Tag name is required" }),
description: z.string().min(1, { message: "Description is required" }) description: z.string().min(1, { message: "Description is required" })
.max(255, { message: "Description cannot exceed 255 characters" }), .max(255, { message: "Description cannot exceed 255 characters" }),
}); });
const CreateContactTag = ({onClose}) => { const CreateContactTag = ({ onClose }) => {
const { const {
register, register,
handleSubmit, handleSubmit,
formState: { errors }, formState: { errors },
reset, reset,
} = useForm({ } = useForm({
resolver: zodResolver(schema), resolver: zodResolver(schema),
defaultValues: { defaultValues: {
name: "", name: "",
description: "", description: "",
}, },
}); });
const [descriptionLength, setDescriptionLength] = useState(0); const [descriptionLength, setDescriptionLength] = useState(0);
const maxDescriptionLength = 255; const maxDescriptionLength = 255;
const { mutate: createContactTag, isPending: isLoading } = useCreateContactTag(() => onClose?.()); const { mutate: createContactTag, isPending: isLoading } = useCreateContactTag(() => onClose?.());
const onSubmit = (payload) => { const onSubmit = (payload) => {
createContactTag(payload); createContactTag(payload);
}; };
// const onSubmit = (data) => { // const onSubmit = (data) => {
// setIsLoading(true) // setIsLoading(true)
// MasterRespository.createContactTag(data).then((resp)=>{ // MasterRespository.createContactTag(data).then((resp)=>{
@ -54,27 +54,27 @@ const onSubmit = (payload) => {
// setIsLoading(false) // setIsLoading(false)
// }) // })
// }; // };
const resetForm = () => { const resetForm = () => {
reset({ name: "", description: "" }); reset({ name: "", description: "" });
setDescriptionLength(0); setDescriptionLength(0);
}; };
useEffect(() => {
return () => resetForm();
}, []);
useEffect(() => {
return () => resetForm();
}, []);
return (<> return (<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label">Tag Name</label> <label className="form-label">Tag Name</label>
<input type="text" <input type="text"
{...register("name")} {...register("name")}
className={`form-control ${errors.name ? 'is-invalids' : ''}`} className={`form-control ${errors.name ? 'is-invalids' : ''}`}
/> />
{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"> <div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">Description</label> <label className="form-label" htmlFor="description">Description</label>
<textarea <textarea
rows="3" rows="3"
{...register("description")} {...register("description")}
@ -87,28 +87,31 @@ useEffect(() => {
<div className="text-end small text-muted"> <div className="text-end small text-muted">
{maxDescriptionLength - descriptionLength} characters left {maxDescriptionLength - descriptionLength} characters left
</div> </div>
{errors.description && ( {errors.description && (
<p className="text-danger">{errors.description.message}</p> <p className="text-danger">{errors.description.message}</p>
)} )}
</div> </div>
<div className="col-12 text-center"> <div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3"> <button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading? "Please Wait...":"Submit"} {isLoading ? "Please Wait..." : "Submit"}
</button> </button>
<button <button
type="reset" type="button" // ✅ not reset
className="btn btn-sm btn-label-secondary " className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal" onClick={() => {
aria-label="Close" resetForm(); // clear inputs
onClose?.(); // close modal from parent
}}
> >
Cancel Cancel
</button> </button>
</div> </div>
</form> </form>
</> </>
) )
} }

111
src/components/master/CreateJobRole.jsx
View File

@ -1,21 +1,21 @@
import React, { useEffect,useState } from 'react' import React, { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'; 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 { MasterRespository } from '../../repositories/MastersRepository'; import { MasterRespository } from '../../repositories/MastersRepository';
import { clearApiCacheKey } from '../../slices/apiCacheSlice'; import { clearApiCacheKey } from '../../slices/apiCacheSlice';
import { getCachedData,cacheData } from '../../slices/apiDataManager'; import { getCachedData, cacheData } from '../../slices/apiDataManager';
import showToast from '../../services/toastService'; import showToast from '../../services/toastService';
import {useCreateJobRole} from '../../hooks/masterHook/useMaster'; import { useCreateJobRole } from '../../hooks/masterHook/useMaster';
const schema = z.object({ const schema = z.object({
role: z.string().min(1, { message: "Role is required" }), role: z.string().min(1, { message: "Role is required" }),
description: z.string().min(1, { message: "Description is required" }) description: z.string().min(1, { message: "Description is required" })
.max(255, { message: "Description cannot exceed 255 characters" }), .max(255, { message: "Description cannot exceed 255 characters" }),
}); });
const CreateJobRole = ({onClose}) => { const CreateJobRole = ({ onClose }) => {
const maxDescriptionLength = 255; const maxDescriptionLength = 255;
const [descriptionLength, setDescriptionLength] = useState(0); const [descriptionLength, setDescriptionLength] = useState(0);
@ -39,34 +39,34 @@ const CreateJobRole = ({onClose}) => {
setDescriptionLength(0); setDescriptionLength(0);
}; };
const { mutate: createJobRole, isPending:isLoading } = useCreateJobRole(() => { const { mutate: createJobRole, isPending: isLoading } = useCreateJobRole(() => {
onClose?.(); onClose?.();
} ); });
// const onSubmit = (data) => { // const onSubmit = (data) => {
// setIsLoading(true) // setIsLoading(true)
// const result = { // const result = {
// name: data.role, // name: data.role,
// description: data.description, // description: data.description,
// }; // };
// MasterRespository.createJobRole(result).then((resp)=>{
// setIsLoading(false)
// resetForm()
// const cachedData = getCachedData("Job Role");
// const updatedData = [...cachedData, resp?.data];
// cacheData("Job Role", updatedData);
// showToast("JobRole Added successfully.", "success");
// onClose() // MasterRespository.createJobRole(result).then((resp)=>{
// }).catch((error)=>{ // setIsLoading(false)
// showToast(error.message, "error"); // resetForm()
// setIsLoading(false) // const cachedData = getCachedData("Job Role");
// }) // const updatedData = [...cachedData, resp?.data];
// cacheData("Job Role", updatedData);
// showToast("JobRole Added successfully.", "success");
// };
// onClose()
// }).catch((error)=>{
// showToast(error.message, "error");
// setIsLoading(false)
// })
// };
const onSubmit = (data) => { const onSubmit = (data) => {
const payload = { const payload = {
name: data.role, name: data.role,
@ -87,20 +87,20 @@ const CreateJobRole = ({onClose}) => {
}, []); }, []);
return (<> return (<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
{/* <div className="col-12 col-md-12"> {/* <div className="col-12 col-md-12">
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Job Role</label> <label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Job Role</label>
</div> */} </div> */}
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label">Role</label> <label className="form-label">Role</label>
<input type="text" <input type="text"
{...register("role")} {...register("role")}
className={`form-control ${errors.role ? 'is-invalids' : ''}`} className={`form-control ${errors.role ? 'is-invalids' : ''}`}
/> />
{errors.role && <p className="text-danger">{errors.role.message}</p>} {errors.role && <p className="text-danger">{errors.role.message}</p>}
</div> </div>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">Description</label> <label className="form-label" htmlFor="description">Description</label>
<textarea <textarea
rows="3" rows="3"
{...register("description")} {...register("description")}
@ -113,28 +113,31 @@ const CreateJobRole = ({onClose}) => {
<div className="text-end small text-muted"> <div className="text-end small text-muted">
{maxDescriptionLength - descriptionLength} characters left {maxDescriptionLength - descriptionLength} characters left
</div> </div>
{errors.description && ( {errors.description && (
<p className="text-danger">{errors.description.message}</p> <p className="text-danger">{errors.description.message}</p>
)} )}
</div> </div>
<div className="col-12 text-center"> <div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3"> <button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading? "Please Wait...":"Submit"} {isLoading ? "Please Wait..." : "Submit"}
</button> </button>
<button <button
type="reset" type="button" // ✅ change from reset → button
className="btn btn-sm btn-label-secondary " className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal" onClick={() => {
aria-label="Close" resetForm(); // optional: clears form
onClose?.(); // ✅ close modal via parent
}}
> >
Cancel Cancel
</button> </button>
</div> </div>
</form> </form>
</> </>
) )
} }

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

@ -233,13 +233,13 @@ const CreateRole = ({ modalType, onClose }) => {
{isLoading ? "Please Wait..." : "Submit"} {isLoading ? "Please Wait..." : "Submit"}
</button> </button>
<button <button
type="reset" type="button"
className="btn btn-sm btn-label-secondary" className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal" onClick={onClose}
aria-label="Close"
> >
Cancel Cancel
</button> </button>
</div> </div>
)} )}
</form> </form>

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

@ -1,96 +1,96 @@
import React, { useEffect,useState } from 'react' import React, { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'; 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 { MasterRespository } from '../../repositories/MastersRepository'; import { MasterRespository } from '../../repositories/MastersRepository';
import { clearApiCacheKey } from '../../slices/apiCacheSlice'; import { clearApiCacheKey } from '../../slices/apiCacheSlice';
import { getCachedData,cacheData } from '../../slices/apiDataManager'; import { getCachedData, cacheData } from '../../slices/apiDataManager';
import showToast from '../../services/toastService'; import showToast from '../../services/toastService';
import {useCreateWorkCategory} from '../../hooks/masterHook/useMaster'; import { useCreateWorkCategory } from '../../hooks/masterHook/useMaster';
const schema = z.object({ const schema = z.object({
name: z.string().min(1, { message: "Category name is required" }), name: z.string().min(1, { message: "Category name is required" }),
description: z.string().min(1, { message: "Description is required" }) description: z.string().min(1, { message: "Description is required" })
.max(255, { message: "Description cannot exceed 255 characters" }), .max(255, { message: "Description cannot exceed 255 characters" }),
}); });
const CreateWorkCategory = ({onClose}) => { const CreateWorkCategory = ({ onClose }) => {
const { const {
register, register,
handleSubmit, handleSubmit,
formState: { errors }, formState: { errors },
reset, reset,
} = useForm({ } = useForm({
resolver: zodResolver(schema), resolver: zodResolver(schema),
defaultValues: { defaultValues: {
name: "", name: "",
description: "", description: "",
}, },
});
const [descriptionLength, setDescriptionLength] = useState(0);
const maxDescriptionLength = 255;
const { mutate: createWorkCategory, isPending: isLoading } = useCreateWorkCategory(() => {
resetForm();
onClose?.();
});
const onSubmit = (payload) => {
createWorkCategory(payload)
};
// const onSubmit = (data) => {
// setIsLoading(true)
// MasterRespository.createWorkCategory(data).then((resp)=>{
// setIsLoading(false)
// resetForm()
// const cachedData = getCachedData("Work Category");
// const updatedData = [...cachedData, resp?.data];
// cacheData("Work Category", updatedData);
// showToast("Work Category Added successfully.", "success");
// onClose()
// }).catch((error)=>{
// showToast(error?.response?.data?.message, "error");
// setIsLoading(false)
// })
// };
const resetForm = () => {
reset({
name: "",
description: "",
}); });
setDescriptionLength(0);
};
useEffect(() => { const [descriptionLength, setDescriptionLength] = useState(0);
return () => resetForm(); const maxDescriptionLength = 255;
}, []);
const { mutate: createWorkCategory, isPending: isLoading } = useCreateWorkCategory(() => {
resetForm();
onClose?.();
});
const onSubmit = (payload) => {
createWorkCategory(payload)
};
// const onSubmit = (data) => {
// setIsLoading(true)
// MasterRespository.createWorkCategory(data).then((resp)=>{
// setIsLoading(false)
// resetForm()
// const cachedData = getCachedData("Work Category");
// const updatedData = [...cachedData, resp?.data];
// cacheData("Work Category", updatedData);
// showToast("Work Category Added successfully.", "success");
// onClose()
// }).catch((error)=>{
// showToast(error?.response?.data?.message, "error");
// setIsLoading(false)
// })
// };
const resetForm = () => {
reset({
name: "",
description: "",
});
setDescriptionLength(0);
};
useEffect(() => {
return () => resetForm();
}, []);
return (<> return (<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
{/* <div className="col-12 col-md-12">
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Work Category</label>
</div> */}
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Create Work Category</label> <label className="form-label">Category Name</label>
<input type="text"
{...register("name")}
className={`form-control ${errors.name ? 'is-invalids' : ''}`}
/>
{errors.name && <p className="text-danger">{errors.name.message}</p>}
</div> </div>
<div className="col-12 col-md-12">
<div className="col-12 col-md-12"> <label className="form-label" htmlFor="description">Description</label>
<label className="form-label">Category Name</label>
<input type="text"
{...register("name")}
className={`form-control ${errors.name ? 'is-invalids' : ''}`}
/>
{errors.name && <p className="text-danger">{errors.name.message}</p>}
</div>
<div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">Description</label>
<textarea <textarea
rows="3" rows="3"
{...register("description")} {...register("description")}
@ -103,28 +103,30 @@ useEffect(() => {
<div className="text-end small text-muted"> <div className="text-end small text-muted">
{maxDescriptionLength - descriptionLength} characters left {maxDescriptionLength - descriptionLength} characters left
</div> </div>
{errors.description && ( {errors.description && (
<p className="text-danger">{errors.description.message}</p> <p className="text-danger">{errors.description.message}</p>
)} )}
</div> </div>
<div className="col-12 text-center"> <div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3"> <button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading? "Please Wait...":"Submit"} {isLoading ? "Please Wait..." : "Submit"}
</button> </button>
<button <button
type="reset" type="button" // ✅ not reset
className="btn btn-sm btn-label-secondary " className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal" onClick={() => {
aria-label="Close" resetForm(); // clear inputs
onClose?.(); // close modal from parent
}}
> >
Cancel Cancel
</button> </button>
</div> </div>
</form> </form>
</> </>
) )
} }

8
src/components/master/DeleteMaster.jsx
View File

@ -34,13 +34,15 @@ const DeleteMaster = ({ master, onClose }) => {
)} )}
</button> </button>
<button <button
type="reset" type="button" // ✅ not reset
className="btn btn-label-secondary" className="btn btn-label-secondary"
data-bs-dismiss="modal" onClick={() => {
aria-label="Close" onClose?.(); // properly close modal
}}
> >
Cancel Cancel
</button> </button>
</div> </div>
</div> </div>
); );

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

@ -241,7 +241,7 @@ useEffect(() => {
{isLoading ? "Please Wait" : "Submit"} {isLoading ? "Please Wait" : "Submit"}
</button> </button>
<button <button
type="button" type="button" // ✅ change to button
className="btn btn-sm btn-label-secondary" className="btn btn-sm btn-label-secondary"
onClick={onClose} onClick={onClose}
> >

132
src/components/master/EditContactCategory.jsx
View File

@ -1,49 +1,49 @@
import React, { useEffect,useState } from 'react' import React, { useEffect, useState } from 'react'
import { useForm } from 'react-hook-form'; 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 { MasterRespository } from '../../repositories/MastersRepository'; import { MasterRespository } from '../../repositories/MastersRepository';
import { clearApiCacheKey } from '../../slices/apiCacheSlice'; import { clearApiCacheKey } from '../../slices/apiCacheSlice';
import { getCachedData,cacheData } from '../../slices/apiDataManager'; import { getCachedData, cacheData } from '../../slices/apiDataManager';
import showToast from '../../services/toastService'; import showToast from '../../services/toastService';
import {useUpdateContactCategory} from '../../hooks/masterHook/useMaster'; import { useUpdateContactCategory } from '../../hooks/masterHook/useMaster';
const schema = z.object({ const schema = z.object({
name: z.string().min(1, { message: "Category name is required" }), name: z.string().min(1, { message: "Category name is required" }),
description: z.string().min(1, { message: "Description is required" }) description: z.string().min(1, { message: "Description is required" })
.max(255, { message: "Description cannot exceed 255 characters" }), .max(255, { message: "Description cannot exceed 255 characters" }),
}); });
const EditContactCategory= ({data,onClose}) => { const EditContactCategory = ({ data, onClose }) => {
const { const {
register, register,
handleSubmit, handleSubmit,
formState: { errors }, formState: { errors },
reset, reset,
} = useForm({ } = useForm({
resolver: zodResolver(schema), resolver: zodResolver(schema),
defaultValues: { defaultValues: {
name: data?.name || "", name: data?.name || "",
description: data?.description || "", description: data?.description || "",
}, },
}); });
const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0); const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
const maxDescriptionLength = 255; const maxDescriptionLength = 255;
const { mutate: updateContactCategory, isPending: isLoading } = useUpdateContactCategory(() => onClose?.()); const { mutate: updateContactCategory, isPending: isLoading } = useUpdateContactCategory(() => onClose?.());
const onSubmit = (formData) => { const onSubmit = (formData) => {
const payload = { const payload = {
id: data?.id, id: data?.id,
name: formData.name, name: formData.name,
description: formData.description, description: formData.description,
};
updateContactCategory({ id: data?.id, payload });
}; };
// const onSubmit = (formdata) => {
updateContactCategory({id:data?.id,payload});
};
// const onSubmit = (formdata) => {
// setIsLoading(true) // setIsLoading(true)
// const result = { // const result = {
// id:data?.id, // id:data?.id,
@ -51,8 +51,8 @@ const onSubmit = (formData) => {
// description: formdata.description, // description: formdata.description,
// }; // };
// MasterRespository.updateContactCategory(data?.id,result).then((resp)=>{ // MasterRespository.updateContactCategory(data?.id,result).then((resp)=>{
// setIsLoading(false) // setIsLoading(false)
// showToast("Contact Category Updated successfully.", "success"); // showToast("Contact Category Updated successfully.", "success");
@ -70,30 +70,30 @@ const onSubmit = (formData) => {
// showToast(error?.response?.data?.message, "error") // showToast(error?.response?.data?.message, "error")
// setIsLoading(false) // setIsLoading(false)
// }) // })
// }; // };
const resetForm = () => { const resetForm = () => {
reset({ name: "", description: "" }); reset({ name: "", description: "" });
setDescriptionLength(0); setDescriptionLength(0);
}; };
useEffect(() => {
return () => resetForm();
}, []);
useEffect(() => {
return () => resetForm();
}, []);
return (<> return (<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label">Category Name</label> <label className="form-label">Category Name</label>
<input type="text" <input type="text"
{...register("name")} {...register("name")}
className={`form-control ${errors.name ? 'is-invalids' : ''}`} className={`form-control ${errors.name ? 'is-invalids' : ''}`}
/> />
{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"> <div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">Description</label> <label className="form-label" htmlFor="description">Description</label>
<textarea <textarea
rows="3" rows="3"
{...register("description")} {...register("description")}
@ -106,28 +106,30 @@ useEffect(() => {
<div className="text-end small text-muted"> <div className="text-end small text-muted">
{maxDescriptionLength - descriptionLength} characters left {maxDescriptionLength - descriptionLength} characters left
</div> </div>
{errors.description && ( {errors.description && (
<p className="text-danger">{errors.description.message}</p> <p className="text-danger">{errors.description.message}</p>
)} )}
</div> </div>
<div className="col-12 text-center"> <div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3"> <button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading? "Please Wait...":"Submit"} {isLoading ? "Please Wait..." : "Submit"}
</button> </button>
<button <button
type="button" type="button" // ✅ not reset
className="btn btn-sm btn-label-secondary " className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal" onClick={() => {
aria-label="Close" resetForm(); // clear inputs
onClose?.(); // close modal from parent
}}
> >
Cancel Cancel
</button> </button>
</div> </div>
</form> </form>
</> </>
) )
} }

134
src/components/master/EditContactTag.jsx
View File

@ -1,49 +1,49 @@
import React,{useState,useEffect} from 'react' import React, { useState, useEffect } from 'react'
import {useForm} from 'react-hook-form'; 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 { MasterRespository } from '../../repositories/MastersRepository'; import { MasterRespository } from '../../repositories/MastersRepository';
import { clearApiCacheKey } from '../../slices/apiCacheSlice'; import { clearApiCacheKey } from '../../slices/apiCacheSlice';
import { getCachedData,cacheData } from '../../slices/apiDataManager'; import { getCachedData, cacheData } from '../../slices/apiDataManager';
import showToast from '../../services/toastService'; import showToast from '../../services/toastService';
import {useUpdateContactTag} from '../../hooks/masterHook/useMaster'; import { useUpdateContactTag } from '../../hooks/masterHook/useMaster';
const schema = z.object({ const schema = z.object({
name: z.string().min(1, { message: "Tag name is required" }), name: z.string().min(1, { message: "Tag name is required" }),
description: z.string().min(1, { message: "Description is required" }) description: z.string().min(1, { message: "Description is required" })
.max(255, { message: "Description cannot exceed 255 characters" }), .max(255, { message: "Description cannot exceed 255 characters" }),
}); });
const EditContactTag= ({data,onClose}) => { const EditContactTag = ({ data, onClose }) => {
const { const {
register, register,
handleSubmit, handleSubmit,
formState: { errors }, formState: { errors },
reset reset
} = useForm({ } = useForm({
resolver: zodResolver(schema), resolver: zodResolver(schema),
defaultValues: { defaultValues: {
name: data?.name || "", name: data?.name || "",
description: data?.description || "", description: data?.description || "",
}, },
}); });
const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0); const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
const maxDescriptionLength = 255; const maxDescriptionLength = 255;
const { mutate: updateContactTag, isPending: isLoading } = useUpdateContactTag(() => onClose?.()); const { mutate: updateContactTag, isPending: isLoading } = useUpdateContactTag(() => onClose?.());
const onSubmit = (formData) => { const onSubmit = (formData) => {
const payload = { const payload = {
id: data?.id, id: data?.id,
name: formData.name, name: formData.name,
description: formData.description, description: formData.description,
}; };
debugger debugger
updateContactTag({ id: data?.id, payload} ); updateContactTag({ id: data?.id, payload });
} }
// const onSubmit = (formdata) => { // const onSubmit = (formdata) => {
// setIsLoading(true) // setIsLoading(true)
// const result = { // const result = {
// id:data?.id, // id:data?.id,
@ -51,8 +51,8 @@ const onSubmit = (formData) => {
// description: formdata.description, // description: formdata.description,
// }; // };
// MasterRespository.updateContactTag(data?.id,result).then((resp)=>{ // MasterRespository.updateContactTag(data?.id,result).then((resp)=>{
// setIsLoading(false) // setIsLoading(false)
// showToast("Contact Tag Updated successfully.", "success"); // showToast("Contact Tag Updated successfully.", "success");
@ -70,30 +70,30 @@ const onSubmit = (formData) => {
// showToast(error?.response?.data?.message, "error") // showToast(error?.response?.data?.message, "error")
// setIsLoading(false) // setIsLoading(false)
// }) // })
// }; // };
const resetForm = () => { const resetForm = () => {
reset({ name: "", description: "" }); reset({ name: "", description: "" });
setDescriptionLength(0); setDescriptionLength(0);
}; };
useEffect(() => {
return () => resetForm();
}, []);
useEffect(() => {
return () => resetForm();
}, []);
return (<> return (<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label">Tag Name</label> <label className="form-label">Tag Name</label>
<input type="text" <input type="text"
{...register("name")} {...register("name")}
className={`form-control ${errors.name ? 'is-invalids' : ''}`} className={`form-control ${errors.name ? 'is-invalids' : ''}`}
/> />
{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"> <div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">Description</label> <label className="form-label" htmlFor="description">Description</label>
<textarea <textarea
rows="3" rows="3"
{...register("description")} {...register("description")}
@ -106,28 +106,30 @@ useEffect(() => {
<div className="text-end small text-muted"> <div className="text-end small text-muted">
{maxDescriptionLength - descriptionLength} characters left {maxDescriptionLength - descriptionLength} characters left
</div> </div>
{errors.description && ( {errors.description && (
<p className="text-danger">{errors.description.message}</p> <p className="text-danger">{errors.description.message}</p>
)} )}
</div> </div>
<div className="col-12 text-center"> <div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3"> <button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading? "Please Wait...":"Submit"} {isLoading ? "Please Wait..." : "Submit"}
</button> </button>
<button <button
type="button" type="button" // ✅ not reset
className="btn btn-sm btn-label-secondary " className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal" onClick={() => {
aria-label="Close" resetForm(); // clear inputs
onClose?.(); // close modal from parent
}}
> >
Cancel Cancel
</button> </button>
</div> </div>
</form> </form>
</> </>
) )
} }

110
src/components/master/EditJobRole.jsx
View File

@ -1,24 +1,24 @@
import React, { useEffect,useState } from 'react' import React, { useEffect, useState } from 'react'
import { useForm ,Controller} from 'react-hook-form'; import { useForm, Controller } from 'react-hook-form';
import { set, z } from 'zod'; import { set, z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { MasterRespository } from '../../repositories/MastersRepository'; import { MasterRespository } from '../../repositories/MastersRepository';
import { cacheData,getCachedData } from '../../slices/apiDataManager'; import { cacheData, getCachedData } from '../../slices/apiDataManager';
import showToast from '../../services/toastService'; import showToast from '../../services/toastService';
import {useUpdateJobRole} from '../../hooks/masterHook/useMaster'; import { useUpdateJobRole } from '../../hooks/masterHook/useMaster';
const schema = z.object({ const schema = z.object({
role: z.string().min(1, { message: "Role is required" }), role: z.string().min(1, { message: "Role is required" }),
description: z.string().min(1, { message: "Description is required" }) description: z.string().min(1, { message: "Description is required" })
.max(255, { message: "Description cannot exceed 255 characters" }), .max(255, { message: "Description cannot exceed 255 characters" }),
}); });
const EditJobRole = ({data,onClose}) => { const EditJobRole = ({ data, onClose }) => {
const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0); const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
const maxDescriptionLength = 255; const maxDescriptionLength = 255;
const { const {
@ -35,38 +35,38 @@ const [descriptionLength, setDescriptionLength] = useState(data?.description?.le
}, },
}); });
const { mutate: updateJobRole, isPendin:isLoading } = useUpdateJobRole(() => { const { mutate: updateJobRole, isPendin: isLoading } = useUpdateJobRole(() => {
onClose?.(); onClose?.();
}); });
// const onSubmit = (formdata) => { // const onSubmit = (formdata) => {
// setIsLoading(true) // setIsLoading(true)
// const result = { // const result = {
// id:data?.id, // id:data?.id,
// name: formdata?.role, // name: formdata?.role,
// description: formdata.description, // description: formdata.description,
// }; // };
// MasterRespository.updateJobRole(data?.id,result).then((resp)=>{
// setIsLoading(false)
// showToast("JobRole Update successfully.", "success");
// const cachedData = getCachedData("Job Role");
// if (cachedData) {
// const updatedData = cachedData.map((role) =>
// role.id === data?.id ? { ...role, ...resp.data } : role
// );
// cacheData("Job Role", updatedData);
// }
// onClose() // MasterRespository.updateJobRole(data?.id,result).then((resp)=>{
// }).catch((error)=>{ // setIsLoading(false)
// showToast(error.message, "error") // showToast("JobRole Update successfully.", "success");
// setIsLoading(false) // const cachedData = getCachedData("Job Role");
// }) // if (cachedData) {
// }; // const updatedData = cachedData.map((role) =>
// role.id === data?.id ? { ...role, ...resp.data } : role
// );
// cacheData("Job Role", updatedData);
// }
// onClose()
// }).catch((error)=>{
// showToast(error.message, "error")
// setIsLoading(false)
// })
// };
const onSubmit = (formData) => { const onSubmit = (formData) => {
updateJobRole({ updateJobRole({
@ -93,22 +93,22 @@ const [descriptionLength, setDescriptionLength] = useState(data?.description?.le
}); });
return () => sub.unsubscribe(); return () => sub.unsubscribe();
}, [watch]); }, [watch]);
return (<> return (<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
{/* <div className="col-12 col-md-12"> {/* <div className="col-12 col-md-12">
<label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Job Role</label> <label className="fs-5 text-dark text-center d-flex align-items-center justify-content-center flex-wrap">Edit Job Role</label>
</div> */} </div> */}
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label">Role</label> <label className="form-label">Role</label>
<input type="text" <input type="text"
{...register("role")} {...register("role")}
className={`form-control ${errors.role ? 'is-invalids' : ''}`} className={`form-control ${errors.role ? 'is-invalids' : ''}`}
/> />
{errors.role && <p className="text-danger">{errors.role.message}</p>} {errors.role && <p className="text-danger">{errors.role.message}</p>}
</div> </div>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">Description</label> <label className="form-label" htmlFor="description">Description</label>
<textarea <textarea
rows="3" rows="3"
{...register("description")} {...register("description")}
@ -125,25 +125,25 @@ const [descriptionLength, setDescriptionLength] = useState(data?.description?.le
<p className="text-danger">{errors.description.message}</p> <p className="text-danger">{errors.description.message}</p>
)} )}
</div> </div>
<div className="col-12 text-center"> <div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3"> <button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading? "Please Wait...":"Submit"} {isLoading ? "Please Wait..." : "Submit"}
</button> </button>
<button <button
type="button" type="button"
className="btn btn-sm btn-label-secondary" className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal" onClick={onClose} // 👈 This will now close the popup
aria-label="Close"
> >
Cancel Cancel
</button> </button>
</div> </div>
</form> </form>
</> </>
) )
} }

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

@ -190,87 +190,87 @@ const EditMaster = ({ master, onClose }) => {
)} )}
</div> </div>
<div className="col-12 text-start"> <div className="col-12 text-start">
{/* Scrollable Container with Border */} {/* Scrollable Container with Border */}
<div <div
className="border rounded p-3" className="border rounded p-3"
style={{ style={{
maxHeight: "350px", maxHeight: "350px",
overflowY: "auto", overflowY: "auto",
overflowX: "hidden", // Prevent horizontal scrollbar overflowX: "hidden", // Prevent horizontal scrollbar
paddingRight: "10px", paddingRight: "10px",
}} }}
> >
{masterFeatures.map((feature, featureIndex) => ( {masterFeatures.map((feature, featureIndex) => (
<div key={feature.id} className="mb-3"> <div key={feature.id} className="mb-3">
{/* Feature Group Title */} {/* Feature Group Title */}
<div className="fw-semibold mb-2">{feature.name}</div> <div className="fw-semibold mb-2">{feature.name}</div>
{/* Permissions Grid */} {/* Permissions Grid */}
<div className="row"> <div className="row">
{feature.featurePermissions.map((perm, permIndex) => { {feature.featurePermissions.map((perm, permIndex) => {
const refIndex = featureIndex * 10 + permIndex; const refIndex = featureIndex * 10 + permIndex;
return ( return (
<div <div
key={perm.id} key={perm.id}
className="col-12 col-sm-6 col-md-4 mb-3 d-flex align-items-start" className="col-12 col-sm-6 col-md-4 mb-3 d-flex align-items-start"
>
<label
className="form-check-label d-flex align-items-center"
htmlFor={perm.id}
>
<input
type="checkbox"
className="form-check-input me-2"
id={perm.id}
{...register(`permissions.${perm.id}`, {
value: initialPermissions[perm.id] || false,
})}
/>
{perm.name}
</label>
{/* Info Icon */}
<div style={{ display: "flex", alignItems: "center" }}>
<div
ref={(el) => (popoverRefs.current[refIndex] = el)}
tabIndex="0"
className="d-flex align-items-center justify-content-center"
data-bs-toggle="popover"
data-bs-trigger="focus"
data-bs-placement="right"
data-bs-html="true"
data-bs-content={`<div class="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
>
&nbsp;
<svg
xmlns="http://www.w3.org/2000/svg"
width="13"
height="13"
fill="currentColor"
className="bi bi-info-circle"
viewBox="0 0 16 16"
> >
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" /> <label
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" /> className="form-check-label d-flex align-items-center"
</svg> htmlFor={perm.id}
</div> >
</div> <input
type="checkbox"
className="form-check-input me-2"
id={perm.id}
{...register(`permissions.${perm.id}`, {
value: initialPermissions[perm.id] || false,
})}
/>
{perm.name}
</label>
{/* Info Icon */}
<div style={{ display: "flex", alignItems: "center" }}>
<div
ref={(el) => (popoverRefs.current[refIndex] = el)}
tabIndex="0"
className="d-flex align-items-center justify-content-center"
data-bs-toggle="popover"
data-bs-trigger="focus"
data-bs-placement="right"
data-bs-html="true"
data-bs-content={`<div class="border border-secondary rounded custom-popover p-2 px-3">${perm.description}</div>`}
>
&nbsp;
<svg
xmlns="http://www.w3.org/2000/svg"
width="13"
height="13"
fill="currentColor"
className="bi bi-info-circle"
viewBox="0 0 16 16"
>
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.547 1.11l1.91-2.011c.241-.256.384-.592.287-.984-.172-.439-.58-.827-1.13-.967a.664.664 0 0 1-.58-.309l-.15-.241-.002-.002zM8 4c-.535 0-.943.372-.943.836 0 .464.408.836.943.836.535 0 .943-.372.943-.836 0-.464-.408-.836-.943-.836z" />
</svg>
</div>
</div>
</div>
);
})}
</div> </div>
);
})} <hr className="my-2" />
</div>
))}
</div> </div>
<hr className="my-2" /> {/* Error Display */}
{errors.permissions && (
<p className="text-danger">{errors.permissions.message}</p>
)}
</div> </div>
))}
</div>
{/* Error Display */}
{errors.permissions && (
<p className="text-danger">{errors.permissions.message}</p>
)}
</div>
@ -280,11 +280,11 @@ const EditMaster = ({ master, onClose }) => {
<button <button
type="button" type="button"
className="btn btn-sm btn-label-secondary" className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal" onClick={onClose}
aria-label="Close"
> >
Cancel Cancel
</button> </button>
</div> </div>
</form> </form>

176
src/components/master/EditWorkCategory.jsx
View File

@ -1,103 +1,103 @@
import React, { useEffect,useState } from 'react' import React, { useEffect, useState } from 'react'
import { useForm ,Controller} from 'react-hook-form'; import { useForm, Controller } from 'react-hook-form';
import { set, z } from 'zod'; import { set, z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { MasterRespository } from '../../repositories/MastersRepository'; import { MasterRespository } from '../../repositories/MastersRepository';
import { cacheData,getCachedData } from '../../slices/apiDataManager'; import { cacheData, getCachedData } from '../../slices/apiDataManager';
import showToast from '../../services/toastService'; import showToast from '../../services/toastService';
import {useUpdateWorkCategory} from '../../hooks/masterHook/useMaster'; import { useUpdateWorkCategory } from '../../hooks/masterHook/useMaster';
const schema = z.object({ const schema = z.object({
name: z.string().min(1, { message: "Work Category is required" }), name: z.string().min(1, { message: "Work Category is required" }),
description: z.string().min(1, { message: "Description is required" }) description: z.string().min(1, { message: "Description is required" })
.max(255, { message: "Description cannot exceed 255 characters" }), .max(255, { message: "Description cannot exceed 255 characters" }),
}); });
const EditWorkCategory = ({data,onClose}) => { const EditWorkCategory = ({ data, onClose }) => {
const {
register,
handleSubmit,
formState: { errors },
reset,
} = useForm({
resolver: zodResolver(schema),
defaultValues: {
name: data?.name || "",
description: data?.description || "",
},
});
const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0); const {
const maxDescriptionLength = 255; register,
handleSubmit,
formState: { errors },
reset,
} = useForm({
resolver: zodResolver(schema),
defaultValues: {
name: data?.name || "",
description: data?.description || "",
},
});
const { mutate: updateWorkCategory, isPending: isLoading } = useUpdateWorkCategory(() => onClose?.()); const [descriptionLength, setDescriptionLength] = useState(data?.description?.length || 0);
const maxDescriptionLength = 255;
const onSubmit = (formdata) => { const { mutate: updateWorkCategory, isPending: isLoading } = useUpdateWorkCategory(() => onClose?.());
const payload = {
id: data?.id, const onSubmit = (formdata) => {
name: formdata.name, const payload = {
description: formdata.description, id: data?.id,
name: formdata.name,
description: formdata.description,
};
updateWorkCategory({ id: data?.id, payload });
}; };
updateWorkCategory({id:data?.id,payload}); // const onSubmit = (formdata) => {
}; // setIsLoading(true)
// const result = {
// const onSubmit = (formdata) => { // id:data?.id,
// setIsLoading(true) // name: formdata?.name,
// const result = { // description: formdata.description,
// id:data?.id, // };
// name: formdata?.name,
// description: formdata.description,
// };
// MasterRespository.updateWorkCategory(data?.id,result).then((resp)=>{
// setIsLoading(false)
// showToast("Work Category Update successfully.", "success");
// MasterRespository.updateWorkCategory(data?.id,result).then((resp)=>{ // const cachedData = getCachedData("Work Category");
// setIsLoading(false) // if (cachedData) {
// showToast("Work Category Update successfully.", "success");
// const cachedData = getCachedData("Work Category"); // const updatedData = cachedData.map((category) =>
// if (cachedData) { // category.id === data?.id ? { ...category, ...resp.data } : category
// );
// const updatedData = cachedData.map((category) => // cacheData("Work Category", updatedData);
// category.id === data?.id ? { ...category, ...resp.data } : category // }
// );
// cacheData("Work Category", updatedData); // onClose()
// } // }).catch((error)=>{
// showToast(error?.response?.data?.message, "error")
// onClose() // setIsLoading(false)
// }).catch((error)=>{ // })
// showToast(error?.response?.data?.message, "error")
// setIsLoading(false) // };
// }) useEffect(() => {
reset({
// }; name: data?.name || "",
useEffect(() => { description: data?.description || "",
reset({ });
name: data?.name || "", setDescriptionLength(data?.description?.length || 0);
description: data?.description || "", }, [data, reset]);
});
setDescriptionLength(data?.description?.length || 0);
}, [data, reset]);
return (<> return (<>
<form className="row g-2" onSubmit={handleSubmit(onSubmit)}> <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
<div className="col-12 col-md-12"> <div className="col-12 col-md-12">
<label className="form-label">Category Name</label> <label className="form-label">Category Name</label>
<input type="text" <input type="text"
{...register("name")} {...register("name")}
className={`form-control ${errors.name ? 'is-invalids' : ''}`} className={`form-control ${errors.name ? 'is-invalids' : ''}`}
/> />
{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"> <div className="col-12 col-md-12">
<label className="form-label" htmlFor="description">Description</label> <label className="form-label" htmlFor="description">Description</label>
<textarea <textarea
rows="3" rows="3"
{...register("description")} {...register("description")}
@ -114,25 +114,25 @@ useEffect(() => {
<p className="text-danger">{errors.description.message}</p> <p className="text-danger">{errors.description.message}</p>
)} )}
</div> </div>
<div className="col-12 text-center"> <div className="col-12 text-center">
<button type="submit" className="btn btn-sm btn-primary me-3"> <button type="submit" className="btn btn-sm btn-primary me-3">
{isLoading? "Please Wait...":"Submit"} {isLoading ? "Please Wait..." : "Submit"}
</button> </button>
<button <button
type="reset" type="button"
className="btn btn-sm btn-label-secondary" className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal" onClick={onClose}
aria-label="Close"
> >
Cancel Cancel
</button> </button>
</div> </div>
</form> </form>
</> </>
) )
} }

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

@ -17,31 +17,31 @@ const ManagePaymentMode = ({ data = null, onClose }) => {
formState: { errors }, formState: { errors },
} = useForm({ } = useForm({
resolver: zodResolver(ExpnseSchema), resolver: zodResolver(ExpnseSchema),
defaultValues: { name: "", description: "" }, defaultValues: { name: "", description: "" },
}); });
const { mutate: CreatePaymentMode, isPending } = useCreatePaymentMode(() => const { mutate: CreatePaymentMode, isPending } = useCreatePaymentMode(() =>
onClose?.() onClose?.()
); );
const {mutate:UpdatePaymentMode,isPending:Updating} = useUpdatePaymentMode(()=>onClose?.()) const { mutate: UpdatePaymentMode, isPending: Updating } = useUpdatePaymentMode(() => onClose?.())
const onSubmit = (payload) => { const onSubmit = (payload) => {
if(data){ if (data) {
UpdatePaymentMode({id:data.id,payload:{...payload,id:data.id}}) UpdatePaymentMode({ id: data.id, payload: { ...payload, id: data.id } })
}else( } else (
CreatePaymentMode(payload) CreatePaymentMode(payload)
) )
}; };
useEffect(()=>{ useEffect(() => {
if(data){ if (data) {
reset({ reset({
name:data.name ?? "", name: data.name ?? "",
description:data.description ?? "" description: data.description ?? ""
}) })
} }
},[data]) }, [data])
return ( return (
@ -76,17 +76,17 @@ const ManagePaymentMode = ({ data = null, onClose }) => {
className="btn btn-sm btn-primary me-3" className="btn btn-sm btn-primary me-3"
disabled={isPending || Updating} disabled={isPending || Updating}
> >
{isPending || Updating? "Please Wait..." : Updating ? "Update" : "Submit"} {isPending || Updating ? "Please Wait..." : Updating ? "Update" : "Submit"}
</button> </button>
<button <button
type="reset" type="button"
className="btn btn-sm btn-label-secondary " className="btn btn-sm btn-label-secondary"
data-bs-dismiss="modal" onClick={onClose} // ✅ call onClose here
aria-label="Close"
disabled={isPending || Updating} disabled={isPending || Updating}
> >
Cancel Cancel
</button> </button>
</div> </div>
</form> </form>
); );

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

@ -122,14 +122,17 @@ const MasterPage = () => {
onChange={(e) => dispatch(changeMaster(e.target.value))} onChange={(e) => dispatch(changeMaster(e.target.value))}
name="DataTables_Table_0_length" name="DataTables_Table_0_length"
aria-controls="DataTables_Table_0" aria-controls="DataTables_Table_0"
className="form-select form-select-sm" className="form-select py-1 px-2"
style={{ fontSize: "0.875rem", height: "32px", width: "150px" }}
value={selectedMaster} value={selectedMaster}
> >
{isLoading && (<option value={null}>Loading...</option>)} {isLoading && <option value="">Loading...</option>}
{(!isLoading && data) && data?.map((item) => ( {!isLoading &&
data?.map((item) => (
<option key={item.id} value={item.name}>{item.name}</option> <option key={item.id} value={item.name}>
))} {item.name}
</option>
))}
</select> </select>
</label> </label>
</div> </div>