From f430e4dc465aa6b419016e4fd1fe46f8b2b403b2 Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Wed, 6 Aug 2025 00:02:36 +0530
Subject: [PATCH] created expense masters pages

---
 src/components/master/ManageExpenseStatus.jsx | 165 ++++++++++++++++++
 src/components/master/ManageExpenseType.jsx   | 113 ++++++++++++
 src/components/master/ManagePaymentMode.jsx   |  95 ++++++++++
 3 files changed, 373 insertions(+)
 create mode 100644 src/components/master/ManageExpenseStatus.jsx
 create mode 100644 src/components/master/ManageExpenseType.jsx
 create mode 100644 src/components/master/ManagePaymentMode.jsx

diff --git a/src/components/master/ManageExpenseStatus.jsx b/src/components/master/ManageExpenseStatus.jsx
new file mode 100644
index 00000000..eccc3bf8
--- /dev/null
+++ b/src/components/master/ManageExpenseStatus.jsx
@@ -0,0 +1,165 @@
+import React, { useEffect } from "react";
+import {
+  useForm,
+  FormProvider,
+} from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import SelectMultiple from "../common/SelectMultiple";
+import { useFeatures } from "../../hooks/useMasterRole";
+import { EXPENSE_MANAGEMENT } from "../../utils/constants";
+import { useCreateExpenseStatus, useUpdateExpenseStatus } from "../../hooks/masterHook/useMaster";
+import { displayName } from "react-quill";
+import { AppColorconfig } from "../../utils/appUtils";
+
+const ExpenseStatusSchema = z.object({
+  name: z.string().min(1, { message: "Name is required" }),
+  displayName: z.string().min(1, { message: "Display Name is required" }),
+  description: z.string().min(1, { message: "Description is required" }),
+  permissionIds: z.array(z.string()).min(1, {
+    message: "At least one permission is required",
+  }),
+  color: z
+    .string()
+    .regex(/^#([0-9A-F]{3}){1,2}$/i, { message: "Invalid hex color" }),
+});
+
+const ManageExpenseStatus = ({data, onClose }) => {
+  const methods = useForm({
+    resolver: zodResolver(ExpenseStatusSchema),
+    defaultValues: {
+      name: "",
+      displayName: "",
+      description: "",
+      permissionIds: [],
+      color: AppColorconfig.colors.primary,
+    },
+  });
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = methods;
+
+  const { masterFeatures, loading } = useFeatures();
+
+  const ExpenseFeature = masterFeatures?.find(
+    (appfeature) => appfeature.id === EXPENSE_MANAGEMENT
+  );
+  const {mutate:CreateExpenseStatus,isPending:isPending} = useCreateExpenseStatus(()=>onClose?.())
+  const {mutate:UpdateExpenseStatus,isPending:Updating} = useUpdateExpenseStatus(()=>onClose?.());
+
+
+
+  const onSubmit = (payload) => {
+  if(data){
+        UpdateExpenseStatus({id:data.id,payload:{...payload,id:data.id}})
+  }else{
+     CreateExpenseStatus(payload)
+  }
+  };
+
+
+  useEffect(()=>{
+    if(data){
+     reset({
+        name:data.name ?? "",
+        displayName:data.displayName ?? "",
+        description:data.description ?? "",
+        permissionIds:data.permissionIds ?? [],
+        color:data.color ?? AppColorconfig.colors.primary
+      })
+    }
+  },[data])
+  return (
+    <FormProvider {...methods}>
+      {loading ? (
+        <div>Loading...</div>
+      ) : (
+        <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+          <div className="col-12">
+            <label className="form-label">Expense Status Name</label>
+            <input
+              type="text"
+              {...register("name")}
+              className={`form-control ${errors.name ? "is-invalid" : ""}`}
+            />
+            {errors.name && <p className="text-danger">{errors.name.message}</p>}
+          </div>
+
+          <div className="col-12">
+            <label className="form-label">Status Display Name</label>
+            <input
+              type="text"
+              {...register("displayName")}
+              className={`form-control ${errors.displayName ? "is-invalid" : ""}`}
+            />
+            {errors.displayName && (
+              <p className="text-danger">{errors.displayName.message}</p>
+            )}
+          </div>
+
+          <div className="col-12">
+            <SelectMultiple
+              name="permissionIds"
+              label="Select Permissions"
+              options={ExpenseFeature?.featurePermissions || []}
+              labelKey="name"
+              valueKey="id"
+              IsLoading={loading}
+            />
+            {errors.permissionIds && (
+              <p className="text-danger">{errors.permissionIds.message}</p>
+            )}
+          </div>
+
+          <div className="col-12">
+            <label className="form-label">Select Color</label>
+            <input
+              type="color"
+              className={`form-control form-control ${errors.color ? "is-invalid" : ""}`}
+              {...register("color")}
+            />
+            {errors.color && (
+              <p className="text-danger">{errors.color.message}</p>
+            )}
+          </div>
+
+          <div className="col-12">
+            <label className="form-label">Description</label>
+            <textarea
+              rows="3"
+              {...register("description")}
+              className={`form-control ${errors.description ? "is-invalid" : ""}`}
+            />
+            {errors.description && (
+              <p className="text-danger">{errors.description.message}</p>
+            )}
+          </div>
+
+          <div className="col-12 text-center">
+            <button
+              type="submit"
+              className="btn btn-sm btn-primary me-3"
+              disabled={isPending || Updating}
+            >
+              {isPending || Updating ? "Please Wait..." : Updating ? "Update" : "Submit"}
+            </button>
+            <button
+              type="button"
+              className="btn btn-sm btn-secondary"
+              onClick={onClose}
+              disabled={isPending || Updating}
+            >
+              Cancel
+            </button>
+          </div>
+        </form>
+      )}
+    </FormProvider>
+  );
+};
+
+export default ManageExpenseStatus;
diff --git a/src/components/master/ManageExpenseType.jsx b/src/components/master/ManageExpenseType.jsx
new file mode 100644
index 00000000..8f280af5
--- /dev/null
+++ b/src/components/master/ManageExpenseType.jsx
@@ -0,0 +1,113 @@
+import React, { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  useCreateExpenseType,
+  useUpdateExpenseType,
+} from "../../hooks/masterHook/useMaster";
+
+const ExpnseSchema = z.object({
+  name: z.string().min(1, { message: "Name is required" }),
+  noOfPersonsRequired: z.boolean().default(false),
+  description: z.string().min(1, { message: "Description is required" }),
+});
+
+const ManageExpenseType = ({ data = null, onClose }) => {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(ExpnseSchema),
+    defaultValues: { name: "", noOfPersonsRequired: false, description: "" },
+  });
+  const { mutate: UpdateExpenseType, isPending:isPendingUpdate } = useUpdateExpenseType(
+    () => onClose?.()
+  );
+  const { mutate: CreateExpenseType, isPending } = useCreateExpenseType(() =>
+    onClose?.()
+  );
+
+  const onSubmit = (payload) => {
+    if (data) {
+      UpdateExpenseType({
+        id: data.id,
+        payload: { ...payload, id: data.id },
+      });
+    } else {
+      CreateExpenseType(payload);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        name: data.name ?? "",
+        noOfPersonsRequired: data.noOfPersonsRequired ?? false,
+        description: data.description ?? "",
+      });
+    }
+  }, [data]);
+  return (
+    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+      <div className="col-12 col-md-12">
+        <label className="form-label">Expesne Type Name</label>
+        <input
+          type="text"
+          {...register("name")}
+          className={`form-control ${errors.name ? "is-invalids" : ""}`}
+        />
+        {errors.name && <p className="danger-text">{errors.name.message}</p>}
+      </div>
+      <div className="col-12 col-md-12">
+        <label className="form-label" htmlFor="description">
+          Description
+        </label>
+        <textarea
+          rows="3"
+          {...register("description")}
+          className={`form-control ${errors.description ? "is-invalids" : ""}`}
+        ></textarea>
+
+        {errors.description && (
+          <p className="danger-text">{errors.description.message}</p>
+        )}
+      </div>
+      <div className="col-12 col-md-12 d-flex align-items-center">
+        <label className="from-label">No. of Persons Required </label>{" "}
+        <input
+          type="checkbox"
+          className="form-check-input  ms-2"
+          {...register("noOfPersonsRequired")}
+        />
+      </div>
+      <div className="col-12 text-center">
+        <button
+          type="submit"
+          className="btn btn-sm btn-primary me-3"
+          disabled={isPending || isPendingUpdate}
+        >
+          {isPending || isPendingUpdate
+            ? "Please Wait..."
+            : data
+            ? "Update"
+            : "Submit"}
+        </button>
+        <button
+          type="reset"
+          className="btn btn-sm btn-label-secondary "
+          data-bs-dismiss="modal"
+          aria-label="Close"
+          disabled={isPending || isPendingUpdate}
+          onClick={()=>onClose()}
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default ManageExpenseType;
diff --git a/src/components/master/ManagePaymentMode.jsx b/src/components/master/ManagePaymentMode.jsx
new file mode 100644
index 00000000..b05856db
--- /dev/null
+++ b/src/components/master/ManagePaymentMode.jsx
@@ -0,0 +1,95 @@
+import React, { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useCreatePaymentMode, useUpdatePaymentMode } from "../../hooks/masterHook/useMaster";
+
+const ExpnseSchema = z.object({
+  name: z.string().min(1, { message: "Name is required" }),
+  description: z.string().min(1, { message: "Description is required" }),
+});
+
+const ManagePaymentMode = ({ data = null, onClose }) => {
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(ExpnseSchema),
+    defaultValues: { name: "",  description: "" },
+  });
+
+  const { mutate: CreatePaymentMode, isPending } = useCreatePaymentMode(() =>
+    onClose?.()
+  );
+  const {mutate:UpdatePaymentMode,isPending:Updating} = useUpdatePaymentMode(()=>onClose?.())
+
+  const onSubmit = (payload) => {
+    if(data){
+        UpdatePaymentMode({id:data.id,payload:{...payload,id:data.id}})
+    }else(
+        CreatePaymentMode(payload)
+    )
+    
+  };
+
+  useEffect(()=>{
+    if(data){ 
+      reset({
+        name:data.name ?? "",
+        description:data.description ?? ""
+      })
+    }
+  },[data])
+
+
+  return (
+    <form className="row g-2" onSubmit={handleSubmit(onSubmit)}>
+      <div className="col-12 col-md-12">
+        <label className="form-label">Payment Mode Name</label>
+        <input
+          type="text"
+          {...register("name")}
+          className={`form-control ${errors.name ? "is-invalids" : ""}`}
+        />
+        {errors.name && <p className="danger-text">{errors.name.message}</p>}
+      </div>
+      <div className="col-12 col-md-12">
+        <label className="form-label" htmlFor="description">
+          Description
+        </label>
+        <textarea
+          rows="3"
+          {...register("description")}
+          className={`form-control ${errors.description ? "is-invalids" : ""}`}
+        ></textarea>
+
+        {errors.description && (
+          <p className="danger-text">{errors.description.message}</p>
+        )}
+      </div>
+
+      <div className="col-12 text-center">
+        <button
+          type="submit"
+          className="btn btn-sm btn-primary me-3"
+          disabled={isPending || Updating}
+        >
+          {isPending || Updating? "Please Wait..." : Updating ? "Update" : "Submit"}
+        </button>
+        <button
+          type="reset"
+          className="btn btn-sm btn-label-secondary "
+          data-bs-dismiss="modal"
+          aria-label="Close"
+          disabled={isPending || Updating}
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default ManagePaymentMode;