added updated functionality

src/components/Tenanat/EditProfile.jsx

@@ -0,0 +1,184 @@
+import React, { useEffect, useState } from 'react';
+import Label from '../common/Label';
+import { useFormContext,useForm,FormProvider } from 'react-hook-form';
+import { useIndustries, useTenantDetails, useUpdateTenantDetails } from '../../hooks/useTenant';
+import { orgSize, reference } from '../../utils/constants';
+import { LogoUpload } from './LogoUpload';
+import showToast from '../../services/toastService';
+
+const EditProfile = ({ TenantId,onClose }) => {
+  const { data, isLoading, isError, error } = useTenantDetails(TenantId);
+  const [logoPreview, setLogoPreview] = useState(null);
+  const [logoName, setLogoName] = useState("");
+  const { data: Industries, isLoading: industryLoading, isError: industryError } = useIndustries();
+  const {mutate:UpdateTenant,isPending,} = useUpdateTenantDetails(()=>{
+    showToast("Tenant Details Updated Successfully","success")
+    onClose()
+    
+  })
+  const methods = useForm({
+    defaultValues: {
+      firstName: "",
+      lastName: "",
+      email: "",
+      contactNumber: "",
+      description: "",
+      domainName: "",
+      billingAddress: "",
+      taxId: "",
+      logoImage: "",
+      officeNumber: "",
+      organizationSize: "",
+      industryId: "",
+      reference: "",
+    }
+  });
+
+  const { register, reset, handleSubmit, formState: { errors } } = methods;
+
+  const onSubmit = (formData) => {
+    const tenantPayload = {...formData,contactName:`${formData.firstName} ${formData.lastName}`,id:data.id,}
+     UpdateTenant({id:data.id,tenantPayload})
+  };
+
+  useEffect(() => {
+    if (data && Industries) {
+      const [first = "", last = ""] = (data.contactName ?? "").split(" ");
+      reset({
+        firstName: first,
+        lastName: last,
+        contactNumber: data.contactNumber ?? "",
+        description: data.description ?? "",
+        domainName: data.domainName ?? "",
+        billingAddress: data.billingAddress ?? "",
+        taxId: data.taxId ?? "",
+        logoImage: data.logoImage ?? "",
+        officeNumber: data.officeNumber ?? "",
+        organizationSize: data.organizationSize ?? "",
+        industryId: data.industry?.id ?? "",
+        reference: data.reference ?? "",
+      });
+      setLogoPreview(data.logoImage)
+    }
+  }, [data, Industries, reset]);
+
+  if (isLoading) return <div>Loading...</div>;
+  if (isError) return <div>{error?.message}</div>;
+
+
+  return (
+      <FormProvider {...methods}>
+    <form className="row g-6" onSubmit={handleSubmit(onSubmit)}>
+      <h6>Edit Tenant</h6>
+
+      <div className="col-sm-6 mt-1">
+        <Label htmlFor="firstName" required>First Name</Label>
+        <input id="firstName" type="text" className="form-control form-control-sm" {...register("firstName")} />
+        {errors.firstName && <div className="danger-text">{errors.firstName.message}</div>}
+      </div>
+
+      <div className="col-sm-6 mt-1">
+        <Label htmlFor="lastName" required>Last Name</Label>
+        <input id="lastName" type="text" className="form-control form-control-sm" {...register("lastName")} />
+        {errors.lastName && <div className="danger-text">{errors.lastName.message}</div>}
+      </div>
+
+
+
+      <div className="col-sm-6 mt-1">
+        <Label htmlFor="contactNumber" required>Contact Number</Label>
+        <input id="contactNumber" type="text" className="form-control form-control-sm" {...register("contactNumber")} />
+        {errors.contactNumber && <div className="danger-text">{errors.contactNumber.message}</div>}
+      </div>
+
+      <div className="col-sm-6 mt-1">
+        <Label htmlFor="domainName" required>Domain Name</Label>
+        <input id="domainName" type="text" className="form-control form-control-sm" {...register("domainName")} />
+        {errors.domainName && <div className="danger-text">{errors.domainName.message}</div>}
+      </div>
+
+      <div className="col-sm-6 mt-1">
+        <Label htmlFor="taxId" required>Tax ID</Label>
+        <input id="taxId" type="text" className="form-control form-control-sm" {...register("taxId")} />
+        {errors.taxId && <div className="danger-text">{errors.taxId.message}</div>}
+      </div>
+
+      <div className="col-sm-6 mt-1">
+        <Label htmlFor="officeNumber" required>Office Number</Label>
+        <input id="officeNumber" type="text" className="form-control form-control-sm" {...register("officeNumber")} />
+        {errors.officeNumber && <div className="danger-text">{errors.officeNumber.message}</div>}
+      </div>
+
+      <div className="col-sm-6 mt-1">
+        <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">
+        <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">
+        <Label htmlFor="organizationSize" required>
+          Organization Size
+        </Label>
+
+        <select
+          className="form-select form-select-sm"
+          {...register("organizationSize")}
+        >
+          {orgSize.map((org) => (
+            <option key={org.val} value={org.val}>
+              {org.name}
+            </option>
+          ))}
+        </select>
+        {errors.organizationSize && (
+          <div className="danger-text">{errors.organizationSize.message}</div>
+        )}
+      </div>
+
+      <div className="col-12 mt-1">
+        <Label htmlFor="billingAddress" required>Billing Address</Label>
+        <textarea id="billingAddress" className="form-control" {...register("billingAddress")} rows={2} />
+        {errors.billingAddress && <div className="danger-text">{errors.billingAddress.message}</div>}
+      </div>
+
+      <div className="col-12 mt-1">
+        <Label htmlFor="description">Description</Label>
+        <textarea id="description" className="form-control" {...register("description")} rows={2} />
+        {errors.description && <div className="danger-text">{errors.description.message}</div>}
+      </div>
+
+      <div className="col-sm-12">
+        <Label htmlFor="logImage">Logo Image</Label>
+        <LogoUpload
+          preview={logoPreview}
+          setPreview={setLogoPreview}
+          fileName={logoName}
+          setFileName={setLogoName}
+        />
+      </div>
+
+      <div className="d-flex justify-content-center gap-2 mt-3">
+        <button type="submit" disabled={isPending} className="btn btn-sm btn-primary">Submit</button>
+        <button type="button" disabled={isPending} className="btn btn-sm btn-secondary">Camcel</button>
+      </div>
+    </form>
+    </FormProvider>
+  );
+};
+
+export default EditProfile;

src/components/Tenanat/Profile.jsx

@@ -1,158 +1,170 @@
-import React from "react";
+import React, { useState } from "react";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
+import EditProfile from "./EditProfile";
+import GlobalModel from "../common/GlobalModel";
+import { useTenantContext } from "../../pages/Tenant/TenantPage";
+import { useTenantDetailsContext } from "../../pages/Tenant/TenantDetails";
 
 const Profile = ({ data }) => {
-  // const {logoImage,name,domainName,contactName,contactNumber,officeNumber} = data;
+  const {setEditTenant} = useTenantDetailsContext()
   return (
-    <div className="container-fuid">
+    <>
-      <div className="row">
+      <div className="container-fuid">
-        <div className="col-12 ">
+       
-          <div className="d-flex flex-wrap align-items-start position-relative ">
+        <div className="row">
-            <div className=" d-flex align-items-start gap-2">
+          <div className="col-12 ">
-              <img
+            <div className="d-flex flex-wrap align-items-start position-relative ">
-                src={data.logoImage}
+              <div className=" d-flex align-items-start gap-2">
-                alt="Preview"
+                <img
-                className="img-thumbnail rounded"
+                  src={data.logoImage}
-                style={{ maxHeight: "35px" }}
+                  alt="Preview"
-              />
+                  className="img-thumbnail rounded"
-            </div>
+                  style={{ maxHeight: "35px" }}
-            <div className="ms-2 ">
+                />
-              <h4 className="m-0">{data.name}</h4>
-              <div className="block">
-                <i className="bx bx-globe text-primary bx-xs me-1"></i>
-                <span>{data?.domainName}</span>
               </div>
-              <span className="badge text-bg-primary  position-absolute top-0 end-0">
+              <div className="ms-2 ">
-                {data?.tenantStatus?.name}
+                <h4 className="m-0">{data.name}</h4>
-              </span>
+                <div className="block">
+                  <i className="bx bx-globe text-primary bx-xs me-1"></i>
+                  <span>{data?.domainName}</span>
+                </div>
+                <span
+                  className="position-absolute top-0 end-0 cursor-auto"
+                  onClick={() => setEditTenant(true)}
+                >
+                  <i className="bx bx-edit bs-sm text-primary"></i>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="divider text-start">
+            <div className="divider-text">Profile</div>
+          </div>
+          {data?.description && (
+            <div className="col rounded-2 bg-light justify-content-start p-2">
+              <p className="m-0">{data?.description}</p>
+            </div>
+          )}
+
+          <div className="row ">
+            <div className="col-12 col-md-6 d-flex align-items-center">
+              <i className="bx bx-sm bx-user me-1"></i>
+              <span className="fw-semibold">Contact Person:</span>
+              <span className="ms-2">{data.contactName}</span>
+            </div>
+
+            <div className="col-12 col-md-6 d-flex align-items-center my-4 m-0">
+              <i className="bx bx-sm bx-envelope me-1"></i>
+              <span className="fw-semibold">Email:</span>
+              <span className="ms-2">{data.email}</span>
+            </div>
+            <div className="col-12 col-md-6 d-flex align-items-center">
+              <i className="bx bx-sm bx-mobile me-1"></i>
+              <span className="fw-semibold">Contact Number:</span>
+              <span className="ms-2">{data.contactNumber}</span>
+            </div>
+
+            <div className="col-12  d-flex text-wrap align-items-start my-4 m-0">
+              <i className="bx bx-sm bx-mark me-1"></i>
+              <span className="fw-semibold">Address:</span>
+              <span className="ms-2">{data.billingAddress}</span>
             </div>
           </div>
         </div>
         <div className="divider text-start">
-          <div className="divider-text">Profile</div>
+          <div className="divider-text">Organization</div>
         </div>
-         {data?.description && (
+
-            <div className="col rounded-2 bg-light justify-content-start p-2">
+        <div className="col-12  d-flex align-items-center">
-          <p className="m-0">{data?.description}</p>
+          <i class="bx bx-sm bxs-building"></i>
+          <span className="fw-semibold">Industry:</span>
+          <span className="ms-2">{data.industry.name}</span>
         </div>
-         )}
-        
-
         <div className="row ">
+          {data.taxId && (
+            <div className="col-12 col-md-6 d-flex align-items-center">
+              <i className="bx bx-sm bx-id-card me-1"></i>
+              <span className="fw-semibold">Tax Id:</span>
+              <span className="ms-2">{data.taxId}</span>
+            </div>
+          )}
+          <div className="col-12 col-md-6 d-flex align-items-center my-4 m-0">
+            <i className="bx bx-sm bx-group me-1"></i>
+            <span className="fw-semibold">Organization Size:</span>
+            <span className="ms-2">{data.organizationSize}</span>
+          </div>
           <div className="col-12 col-md-6 d-flex align-items-center">
-            <i className="bx bx-sm bx-user me-1"></i>
+            <i className="bx bx-sm bxs-calendar"></i>
-            <span className="fw-semibold">Contact Person:</span>
+            <span className="fw-semibold">On-Boarding Date:</span>
-            <span className="ms-2">{data.contactName}</span>
+            <span className="ms-2">
+              {formatUTCToLocalTime(data.onBoardingDate)}
+            </span>
+          </div>
+
+          <table className="table table-bordered text-center text-nowrap table-responsive my-4">
+            <tbody>
+              <tr>
+                <td colspan="1">
+                  <strong>Status</strong>
+                </td>
+                <td colspan="1">
+                  <strong>Active</strong>
+                </td>
+                <td colspan="1">
+                  <strong>In-Progress</strong>
+                </td>
+                <td colspan="1">
+                  <strong>On Hold</strong>
+                </td>
+                <td>
+                  <strong>In-Active</strong>
+                </td>
+                <td>
+                  <strong>Completed</strong>
+                </td>
+              </tr>
+              <tr>
+                <td>
+                  <strong>Projects</strong>
+                </td>
+                <td>
+                  <strong>{data?.activeProjects}</strong>
+                </td>
+                <td>
+                  <strong>{data?.inProgressProjects}</strong>
+                </td>
+                <td>
+                  <strong>{data?.onHoldProjects}</strong>
+                </td>
+                <td>
+                  <strong>{data?.inActiveProjects}</strong>
+                </td>
+                <td>
+                  <strong>{data?.completedProjects}</strong>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div className="row">
+          <div className="col-12 col-md-6 d-flex align-items-center">
+            <i className="bx bx-sm bx-group me-1"></i>
+            <span className="fw-semibold">Activite Employees:</span>
+            <span className="ms-2">{data.activeEmployees}</span>
           </div>
 
           <div className="col-12 col-md-6 d-flex align-items-center my-4 m-0">
-            <i className="bx bx-sm bx-envelope me-1"></i>
+            <i className="bx bx-sm bx-group me-1"></i>
-            <span className="fw-semibold">Email:</span>
+            <span className="fw-semibold">In-Active Employee:</span>
-            <span className="ms-2">{data.email}</span>
+            <span className="ms-2">{data.inActiveEmployees}</span>
-          </div>
-          <div className="col-12 col-md-6 d-flex align-items-center">
-            <i className="bx bx-sm bx-mobile me-1"></i>
-            <span className="fw-semibold">Contact Number:</span>
-            <span className="ms-2">{data.contactNumber}</span>
-          </div>
-
-          <div className="col-12  d-flex text-wrap align-items-start my-4 m-0">
-            <i className="bx bx-sm bx-mark me-1"></i>
-            <span className="fw-semibold">Address:</span>
-            <span className="ms-2">{data.billingAddress}</span>
           </div>
         </div>
       </div>
-      <div className="divider text-start">
+    </>
-        <div className="divider-text">Organization</div>
-      </div>
-
-      <div className="col-12  d-flex align-items-center">
-        <i class="bx bx-sm bxs-building"></i>
-        <span className="fw-semibold">Industry:</span>
-        <span className="ms-2">{data.industry.name}</span>
-      </div>
-      <div className="row ">
-        {data.taxId && (
-          <div className="col-12 col-md-6 d-flex align-items-center">
-            <i className="bx bx-sm bx-id-card me-1"></i>
-            <span className="fw-semibold">Tax Id:</span>
-            <span className="ms-2">{data.taxId}</span>
-          </div>
-        )}
-        <div className="col-12 col-md-6 d-flex align-items-center my-4 m-0">
-          <i className="bx bx-sm bx-group me-1"></i>
-          <span className="fw-semibold">Organization Size:</span>
-          <span className="ms-2">{data.organizationSize}</span>
-        </div>
-        <div className="col-12 col-md-6 d-flex align-items-center">
-          <i className="bx bx-sm bxs-calendar"></i>
-          <span className="fw-semibold">On-Boarding Date:</span>
-          <span className="ms-2">
-            {formatUTCToLocalTime(data.onBoardingDate)}
-          </span>
-        </div>
-
-        <table className="table table-bordered text-center text-nowrap table-responsive my-4">
-          <tbody>
-            <tr>
-              <td colspan="1">
-                <strong>Status</strong>
-              </td>
-              <td colspan="1">
-                <strong>Active</strong>
-              </td>
-              <td colspan="1">
-                <strong>In-Progress</strong>
-              </td>
-              <td colspan="1">
-                <strong>On Hold</strong>
-              </td>
-              <td>
-                <strong>In-Active</strong>
-              </td>
-              <td>
-                <strong>Completed</strong>
-              </td>
-            </tr>
-            <tr>
-              <td>
-                <strong>Projects</strong>
-              </td>
-              <td>
-                <strong>{data?.activeProjects}</strong>
-              </td>
-              <td>
-                <strong>{data?.inProgressProjects}</strong>
-              </td>
-              <td>
-                <strong>{data?.onHoldProjects}</strong>
-              </td>
-              <td>
-                <strong>{data?.inActiveProjects}</strong>
-              </td>
-              <td>
-                <strong>{data?.completedProjects}</strong>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div className="row">
-        <div className="col-12 col-md-6 d-flex align-items-center">
-          <i className="bx bx-sm bx-group me-1"></i>
-          <span className="fw-semibold">Activite Employees:</span>
-          <span className="ms-2">{data.activeEmployees}</span>
-        </div>
-
-        <div className="col-12 col-md-6 d-flex align-items-center my-4 m-0">
-          <i className="bx bx-sm bx-group me-1"></i>
-          <span className="fw-semibold">In-Active Employee:</span>
-          <span className="ms-2">{data.inActiveEmployees}</span>
-        </div>
-      </div>
-    </div>
   );
 };
 
 export default Profile;
+//  <span className="badge text-bg-primary  position-absolute top-0 end-0">
+//                 {data?.tenantStatus?.name}
+//               </span>

src/components/Tenanat/TenantSchema.js

@@ -115,3 +115,20 @@ export const getStepFields = (stepIndex) => {
 
   return stepFieldMap[stepIndex] || [];
 };
+
+export const EditTenant = z.object({
+  firstName: z.string().min(1, { message: "First Name is required!" }),
+  lastName: z.string().min(1, { message: "Last Name is required!" }),
+  description: z.string().optional(),
+  domainName: z.string().min(1, { message: "Domain Name is required!" }),
+  billingAddress: z.string().min(1, { message: "Billing Address is required!" }),
+  taxId: z.string().min(1, { message: "Tax ID is required!" }),
+  logoImage: z.string().optional(),
+  officeNumber: z.string().min(1, { message: "Office Number is required!" }),
+  contactNumber: z
+    .string()
+    .min(10, { message: "Contact Number must be at least 10 digits!" }),
+  organizationSize: z.string().min(1, { message: "Organization Size is required!" }),
+  industryId: z.string().min(1,{ message: "Invalid Industry ID!" }),
+  reference: z.string().optional(),
+});

src/hooks/useTenant.js

@@ -72,6 +72,7 @@ export const useSubscriptionPlan=(freq)=>{
   return useQuery({
     queryKey:['SubscriptionPlan',freq],
     queryFn:async()=>{
+      console.log("call")
       const res = await TenantRepository.getSubscriptionPlan(freq);
       return res.data;
     }
@@ -98,6 +99,22 @@ export const useCreateTenant = (onSuccessCallback)=>{
 
   })
 }
+export const useUpdateTenantDetails = (onSuccessCallback)=>{
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn:async({id,tenantPayload})=> TenantRepository.updateTenantDetails(id,tenantPayload),
+    onSuccess:(_,variables)=>{
+      const {id} = variables.tenantPayload;
+       queryClient.invalidateQueries({queryKey:["Tenant",id]})
+       queryClient.invalidateQueries({queryKey:["Tenants"]})
+        if(onSuccessCallback) onSuccessCallback()
+    },
+     onError:(error)=>{
+    showToast(error.response.message || error.message || `Something went wrong`,"error")
+  }
+  })
+}
 
 export const useAddSubscription =(onSuccessCallback)=>{
   const queryClient  = useQueryClient()

src/pages/Tenant/TenantDetails.jsx

@@ -1,14 +1,25 @@
-import React from "react";
+import React, { createContext, useContext,useState } from "react";
 import { useParams } from "react-router-dom";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import Profile from "../../components/Tenanat/profile";
 import { useTenantDetails } from "../../hooks/useTenant";
 import Organization from "../../components/Tenanat/Organization";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
+import GlobalModel from "../../components/common/GlobalModel";
+import EditProfile from "../../components/Tenanat/EditProfile";
+
+const TenantDetailsContext = createContext();
+export const useTenantDetailsContext = () => useContext(TenantDetailsContext);
+
 
 const TenantDetails = () => {
   const { tenantId } = useParams();
   const { data, isLoading, isError, error } = useTenantDetails(tenantId);
+  const [editTenant, setEditTenant] = useState(false);
+  const contextValues ={
+    setEditTenant,editTenant
+  }
+  
 
   const tabs = [
     {
@@ -43,10 +54,13 @@ const TenantDetails = () => {
       ),
     },
   ];
+  
   if (isLoading) return <div className="my-4">Loading...</div>;
   if (isError) return <div>{error.message}</div>;
   return (
-    <div className="container-fluid py-0">
+    <>
+    <TenantDetailsContext.Provider value={contextValues}>
+       <div className="container-fluid py-0">
       <Breadcrumb
         data={[
           { label: "Home", link: "/dashboard" },
@@ -91,7 +105,15 @@ const TenantDetails = () => {
           ))}
         </div>
       </div>
+     
     </div>
+    </TenantDetailsContext.Provider>
+    {editTenant && (
+        <GlobalModel size="lg" isOpen={editTenant} closeModal={()=>setEditTenant(false)}>
+           <EditProfile TenantId={tenantId} onClose={()=>setEditTenant(false)}/>
+        </GlobalModel>
+      )}
+      </>
   );
 };
 

src/repositories/TenantRepository.jsx

@@ -13,6 +13,7 @@ export const TenantRepository = {
     api.get(`/api/Tenant/list/subscription-plan?frequency=${freq}`),
 
   createTenant: (data) => api.post("/api/Tenant/create", data),
+  updateTenantDetails :(id,data)=> api.put(`/api/Tenant/edit/${id}`,data),
 
   addSubscription: (data) => api.post("/api/Tenant/add-subscription", data),
 };