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

Merge branch 'Expense_TransactionId' of https://git.marcoaiot.com/admin/marco.pms.web into Weidget_Dashboard_Services

Browse Source
This commit is contained in:
Kartik Sharma 2025-12-08 16:35:06 +05:30
commit 2eff34a016
7 changed files with 311 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

311
src/components/Organization/AssignOrg.jsx
View File

@ -89,179 +89,194 @@ const AssignOrg = ({ setStep }) => {
if (isMasterserviceLoading || isLoading) if (isMasterserviceLoading || isLoading)
return <div className="text-center">Loading....</div>; return <div className="text-center">Loading....</div>;
const showTwoColumns = startStep === 3 && flowType !== "default";
return ( return (
<div className="row text-black text-start mb-3"> <div className="row text-black text-start mb-3">
{/* Organization Info Display */} {/* Left Column */}
<div className="col-12 mb-3"> <div className={showTwoColumns ? "col-md-6" : "col-12"}>
<div className="d-flex justify-content-between align-items-center text-start mb-1"> {/* Organization Info Display */}
<div className="d-flex flex-row gap-2 align-items-center text-wrap"> <div className="d-flex justify-content-between align-items-center mb-3">
<img <div className="d-flex align-items-center gap-2">
src="/public/assets/img/orgLogo.png" <img src="/public/assets/img/orgLogo.png" alt="logo" width={40} height={40} />
alt="logo" <p className="fw-semibold fs-5 mt-2 m-0">{orgData.name}</p>
width={40}
height={40}
/> <p className="fw-semibold fs-5 mt-2 m-0">{orgData.name}</p>
</div>
<div className="text-end">
<button
type="button"
onClick={handleEdit}
className="btn btn-link p-0"
>
<i className="bx bx-edit text-secondary"></i>
</button>
</div> </div>
<button type="button" onClick={handleEdit} className="btn btn-link p-0">
<i className="bx bx-edit text-secondary"></i>
</button>
</div> </div>
</div>
<div className="d-flex text-secondary mb-3"> <i className="bx bx-sm bx-info-circle me-2" /> Organization Info</div> <div className="d-flex text-secondary mb-5">
{/* Contact Info */} <i className="bx bx-sm bx-info-circle me-2" /> Organization Info
<div className="col-md-12 mb-4"> </div>
<div className="d-flex">
<label <div className="mb-5 d-flex">
className="form-label me-2 mb-0 fw-semibold" <label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
style={{ minWidth: "130px" }}
>
<i className="bx bx-sm bx-user me-1" /> Contact Person : <i className="bx bx-sm bx-user me-1" /> Contact Person :
</label> </label>
<div className="text-muted">{orgData.contactPerson}</div> <div className="text-muted">{orgData.contactPerson}</div>
</div> </div>
</div>
<div className="col-md-12 mb-4"> <div className="mb-5 d-flex">
<div className="d-flex"> <label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
<label <i className="bx bx-sm me-1 bx-phone" /> Contact Number :
className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
<i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
</label> </label>
<div className="text-muted">{orgData.contactNumber}</div> <div className="text-muted">{orgData.contactNumber}</div>
</div> </div>
</div>
<div className="col-md-12 mb-4"> <div className="mb-5 d-flex">
<div className="d-flex"> <label className="form-label me-2 mb-0 fw-semibold" style={{ minWidth: "130px" }}>
<label <i className='bx bx-sm me-1 bx-envelope'></i> Email Address :
className="form-label me-2 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
<i className='bx bx-sm me-1 bx-envelope'></i> Email Address :
</label> </label>
<div className="text-muted text-wrap">{orgData.email}</div> <div className="text-muted text-wrap">{orgData.email}</div>
</div> </div>
</div>
<div className="col-12 mb-4"> <div className="mb-5 d-flex">
<div className="d-flex"> <label className="form-label me-2 mb-0 fw-semibold" style={{ maxWidth: "130px" }}>
<label <i className="bx bx-sm me-2 bx-barcode"></i> Service Provider Id SPRID :
className="form-label me-2 mb-0 fw-semibold"
style={{ maxWidth: "130px" }}
>
<i className="bx bx-sm me-2 bx-barcode"></i>
Service Provider Id (SPRID) :
</label> </label>
<div className="text-muted">{orgData.sprid}</div> <div className="text-muted">{orgData.sprid}</div>
</div> </div>
</div> <div className="mb-5 d-flex">
<div className="col-12 mb-4"> <label className="form-label me-1 mb-0 fw-semibold" style={{ minWidth: "135px" }}>
<div className="d-flex">
<label
className="form-label me-1 mb-0 fw-semibold"
style={{ minWidth: "130px" }}
>
<i className='bx bx-sm me-1 bx-map'></i> Address : <i className='bx bx-sm me-1 bx-map'></i> Address :
</label> </label>
<div className="text-muted text-start">{orgData.address}</div> <div className="text-muted">{orgData.address}</div>
</div> </div>
</div>
{/* Form */} {/* Assigned Services */}
<div className="text-black text-start"> {flowType !== "default" && projectServices?.length > 0 && (
<form onSubmit={handleSubmit(onSubmit)}> <div className="mb-3">
{/* Show fields only if flowType is NOT default */} <label className="form-label fw-semibold mb-2 d-flex align-items-center gap-1">
{flowType !== "default" && ( <i className="bx bx-cog fs-5"></i>
<> Assigned Services:
{/* Organization Type */} </label>
<div className="mb-3 text-start">
<Label htmlFor="organizationTypeId" className="mb-3 fw-semibold" required>
Organization Type
</Label>
<div className="d-flex flex-wrap gap-3 mt-1">
{orgType?.data.map((type) => (
<div
key={type.id}
className="form-check d-flex align-items-center gap-2 p-0 m-0"
>
<input
type="radio"
id={`organizationType-${type.id}`}
value={type.id}
{...register("organizationTypeId")}
className="form-check-input m-0"
/>
<label
className="form-check-label m-0"
htmlFor={`organizationType-${type.id}`}
>
{type.name}
</label>
</div>
))}
</div>
{errors.organizationTypeId && (
<span className="text-danger">
{errors.organizationTypeId.message}
</span>
)}
</div>
{/* Services */} <div className="d-flex flex-wrap gap-2">
<div className="mb-3"> {projectServices.map((service) => (
<Label htmlFor="serviceIds" className="mb-3 fw-semibold" required> <span
Select Services key={service.id}
</Label> className="badge bg-label-secondary"
{mergedServices?.map((service) => ( >
<div key={service.id} className="form-check mb-3"> {service.name}
<input </span>
type="checkbox" ))}
value={service.id} </div>
{...register("serviceIds")}
className="form-check-input"
/>
<label className="form-check-label">{service.name}</label>
</div>
))}
{errors.serviceIds && (
<div className="text-danger small">
{errors.serviceIds.message}
</div>
)}
</div>
</>
)}
{/* Buttons: Always visible */}
<div className="d-flex justify-content-between mt-5">
<button
type="button"
className="btn btn-sm btn-outline-secondary"
onClick={handleBack}
disabled={isPending}
>
<i className="bx bx-chevron-left"></i>Back
</button>
<button
type="submit"
className="btn btn-sm btn-primary"
disabled={isPending}
>
{isPending
? "Please wait..."
: flowType === "default"
? "Assign to Organization"
: "Assign to Project"}
</button>
</div> </div>
</form> )}
</div> </div>
{/* Right Column */}
{showTwoColumns && (
<div className="col-md-6">
{/* Form Section */}
<form onSubmit={handleSubmit(onSubmit)}>
{flowType !== "default" && (
<>
{/* Organization Type */}
<div className="mb-3">
<Label htmlFor="organizationTypeId" className="mb-2 fw-semibold" required>
Organization Type
</Label>
<div className="d-flex flex-wrap gap-3 mt-1">
{orgType?.data.map((type) => (
<div key={type.id} className="form-check d-flex align-items-center gap-2 p-0 m-0">
<input
type="radio"
id={`organizationType-${type.id}`}
value={type.id}
{...register("organizationTypeId")}
className="form-check-input m-0"
/>
<label className="form-check-label m-0" htmlFor={`organizationType-${type.id}`}>
{type.name}
</label>
</div>
))}
</div>
{errors.organizationTypeId && (
<span className="text-danger">{errors.organizationTypeId.message}</span>
)}
</div>
{/* Services */}
<div className="mb-4">
<Label htmlFor="serviceIds" className="mb-6 fw-semibold" required>
Choose Services
</Label>
{/* FIXED HEIGHT + SCROLLBAR */}
<div
className="row g-3"
style={{
maxHeight: "290px",
overflowY: "auto",
paddingRight: "6px",
}}
>
{mergedServices
?.slice() // copy array
.sort((a, b) => a.name.localeCompare(b.name))
.map((service) => (
<div key={service.id} className="col-12 col-md-6">
<div className="card h-100" style={{ minHeight: "120px" }}>
<div className="card-body d-flex align-items-start">
<input
type="checkbox"
value={service.id}
{...register("serviceIds")}
className="form-check-input me-2 mt-1"
id={`service-${service.id}`}
/>
<div>
<label
htmlFor={`service-${service.id}`}
className="fw-semibold mb-1 d-block"
>
{service.name}
</label>
<small className="text-muted d-block text-wrap">
{service.description?.length > 80
? service.description.substring(0, 80) + "..."
: service.description}
</small>
</div>
</div>
</div>
</div>
))}
</div>
{errors.serviceIds && (
<div className="text-danger small mt-1">{errors.serviceIds.message}</div>
)}
</div>
</>
)}
</form>
</div>
)}
{/* Buttons */}
<div className="d-flex justify-content-between mt-6">
<button
type="button"
className="btn btn-sm btn-outline-secondary"
onClick={handleBack}
disabled={isPending}
>
<i className="bx bx-chevron-left"></i> Back
</button>
<button type="submit" className="btn btn-sm btn-primary" disabled={isPending}>
{isPending
? "Please wait..."
: flowType === "default"
? "Assign to Organization"
: "Assign to Project"}
</button>
</div>
</div> </div>
); );
}; };

6
src/components/Organization/ManagOrg.jsx
View File

@ -148,8 +148,8 @@ const ManagOrg = () => {
)} )}
</div> </div>
<div className="mb-3 text-start"> <div className="mb-1 text-start">
<Label htmlFor="email" required> <Label htmlFor="email">
Email Address Email Address
</Label> </Label>
<input <input
@ -164,7 +164,7 @@ const ManagOrg = () => {
<div className="mb-3 text-start"> <div className="mb-3 text-start">
<SelectMultiple <SelectMultiple
name="serviceIds" name="serviceIds"
label="Select Service" label="Select Service Provided"
options={service?.data} options={service?.data}
labelKey="name" labelKey="name"
valueKey="id" valueKey="id"

219
src/components/Organization/OrgPickerFromSPId.jsx
View File

@ -1,23 +1,22 @@
import { useState } from "react"; import { useState } from "react";
import { import {
useAssignOrgToTenant,
useOrganizationBySPRID, useOrganizationBySPRID,
useOrganizationModal, useOrganizationModal,
} from "../../hooks/useOrganization"; } from "../../hooks/useOrganization";
import Label from "../common/Label"; import Label from "../common/Label";
import { useDebounce } from "../../utils/appUtils";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { spridSchema } from "./OrganizationSchema"; import { spridSchema } from "./OrganizationSchema";
import { OrgCardSkeleton } from "./OrganizationSkeleton"; import { OrgCardSkeleton } from "./OrganizationSkeleton";
import { useQueryClient } from "@tanstack/react-query"; import { useQueryClient } from "@tanstack/react-query";
// Zod schema: only allow exactly 4 digits const OrgPickerFromSPId = () => {
const { onOpen, prevStep, flowType } = useOrganizationModal();
const OrgPickerFromSPId = ({ title, placeholder }) => {
const { onClose, startStep, flowType, onOpen, prevStep, orgData } =
useOrganizationModal();
const clientQuery = useQueryClient(); const clientQuery = useQueryClient();
const [activeTab, setActiveTab] = useState("search"); // search | create
const [SPRID, setSPRID] = useState("");
const { const {
register, register,
handleSubmit, handleSubmit,
@ -28,127 +27,129 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
defaultValues: { spridSearchText: "" }, defaultValues: { spridSearchText: "" },
}); });
const [SPRID, setSPRID] = useState(""); const { data, isLoading } = useOrganizationBySPRID(SPRID);
const { data, isLoading, isError, error, refetch } =
useOrganizationBySPRID(SPRID);
const onSubmit = (formdata) => { const onSubmit = (formdata) => {
setSPRID(formdata.spridSearchText); setSPRID(formdata.spridSearchText);
}; };
const handleCrateOrg = () => { const handleCreateOrg = () => {
clientQuery.removeQueries({ queryKey: ["organization"] }); clientQuery.removeQueries({ queryKey: ["organization"] });
onOpen({ startStep: 4, orgData: null }); onOpen({ startStep: 4, orgData: null });
}; };
const SP = watch("spridSearchText"); const SP = watch("spridSearchText");
return ( return (
<div className="d-block mt-4"> <div className="mt-4">
<form onSubmit={handleSubmit(onSubmit)}> {/* Tabs */}
<div className="row align-items-center g-2 mb-3"> <ul className="nav nav-tabs mb-8">
{/* Input Section */} <li className="nav-item">
<div className="col-12 col-md-8 d-block d-md-flex align-items-center gap-2 m-0 text-start"> <button
<Label className="text-nowrap mb-1 mb-md-0" required> className={`nav-link ${activeTab === "search" ? "active" : ""}`}
Search by SPRID onClick={() => setActiveTab("search")}
</Label> type="button"
<input >
type="search" Search Organization
{...register("spridSearchText")} </button>
className="form-control form-control-sm flex-grow-1" </li>
placeholder="Enter SPRID" <li className="nav-item">
maxLength={4} <button
/> className={`nav-link ${activeTab === "create" ? "active" : ""}`}
</div> onClick={() => setActiveTab("create")}
type="button"
>
Assign Organization
</button>
</li>
</ul>
{/* Button Section */} {/* Tab Content */}
<div className="col-12 col-md-4 text-md-start text-center mt-2 mt-md-0"> {activeTab === "search" && (
<button <>
type="submit" <form onSubmit={handleSubmit(onSubmit)}>
className="btn btn-sm btn-primary w-100 w-md-auto" <div className="row align-items-end mb-3">
>
<i className="bx bx-sm bx-search-alt-2"></i> Search
</button>
</div>
</div>
</form>
<div className="text-start danger-text"> {/* Search Input */}
{" "} <div className="col-12 col-md-8 text-start">
{errors.spridSearchText && ( <Label required className="mb-1">Search by SPRID</Label>
<p className="text-danger small mt-1"> <input
{errors.spridSearchText.message} type="search"
</p> {...register("spridSearchText")}
)} className="form-control form-control-sm"
</div> placeholder="Enter SPRID"
maxLength={4}
/>
</div>
{/* ---- Organization list ---- */} {/* Search Button (always at end) */}
{isLoading ? ( <div className="col-12 col-md d-flex justify-content-md-end mt-2 mt-md-0">
<OrgCardSkeleton /> <button
) : data && data?.data.length > 0 ? ( type="submit"
<div className="py-2 text-tiny text-center"> className="btn btn-sm btn-primary"
<div className="d-flex flex-column gap-2 border-0 bg-none"> >
{data.data.map((org) => ( <i className="bx bx-sm bx-search-alt-2 me-1"></i>
<div className="d-flex flex-row gap-2 text-start text-black mt-3"> Search
<div className="mt-1"> </button>
<img </div>
src="/public/assets/img/orgLogo.png"
alt="logo" </div>
width={50} </form>
height={50}
/> {errors.spridSearchText && (
</div> <p className="text-danger small mt-1">{errors.spridSearchText.message}</p>
<div className="d-flex flex-column p-0 m-0 cursor-pointer mb-3"> )}
<span className="fs-6 fw-semibold mb-2">{org.name}</span>
<div className="d-flex gap-2"> {isLoading ? (
<small <OrgCardSkeleton />
className=" fw-semibold text-uppercase mb-2" ) : data && data?.data.length > 0 ? (
style={{ letterSpacing: "1px" }} <div className="d-flex flex-column gap-2">
> {data.data.map((org) => (
SPRID :{" "} <div key={org.sprid} className="d-flex gap-2 text-start mt-5">
</small> <div className="mt-2"><img src="/public/assets/img/orgLogo.png" alt="logo" width={50} height={50} /></div>
<small className="fs-6">{org.sprid}</small> <div className="flex-grow-1">
</div> <span className="fs-6 fw-semibold mb-2">{org.name}</span>
<div className="d-flex flex-row gap-2 mb-4"> <div className="d-flex gap-2 mt-2">
<small className="text-small fw-semibold ">Address:</small> <small className="fw-semibold text-uppercase">SPRID :</small>
<div className="d-flex text-wrap">{org.address}</div> <small>{org.sprid}</small>
</div> </div>
<div className="m-0 p-0"> <div className="d-flex gap-2 mt-2">
{" "} <small className="fw-semibold">Address:</small>
<div>{org.address}</div>
</div>
<button <button
type="submit" type="button"
className="btn btn-sm btn-primary" className="btn btn-sm btn-primary mt-5"
onClick={() => onOpen({ startStep: 3, orgData: org })} onClick={() => onOpen({ startStep: 3, orgData: org })}
> >
Select Select
</button> </button>
</div> </div>
</div> </div>
</div> ))}
))} </div>
</div> ) : SPRID ? (
</div> <div className="py-3 text-center text-secondary">
) : SPRID ? ( No organization found for "{SPRID}"
<div className="py-3 text-center text-secondary"> </div>
No organization found for "{SPRID}" ) : null}
</div> </>
) : null} )}
<div className="py-2 text-center text-tiny text-black">
<small className="d-block text-secondary">
Do not have SPRID or could not find organization ?
</small>
<button
type="button"
className="btn btn-sm btn-primary mt-3"
onClick={handleCrateOrg}
>
<i className="bx bx-plus-circle me-2"></i>
Create New Organization
</button>
</div>
{/* ---- Footer buttons ---- */} {activeTab === "create" && (
<div className={`d-flex text-secondary mt-3`}> <div className="text-center py-5">
{flowType !== "default" && ( <small className="d-block text-secondary">
{/* Do not have SPRID or want to create a new organization? */}
</small>
<button type="button" className="btn btn-sm btn-primary" onClick={handleCreateOrg}>
<i className="bx bx-plus-circle me-2"></i> Create New Organization
</button>
</div>
)}
{/* Footer Back button */}
{flowType !== "default" && (
<div className="d-flex text-secondary mt-7">
<button <button
type="button" type="button"
className="btn btn-xs btn-outline-secondary" className="btn btn-xs btn-outline-secondary"
@ -156,8 +157,8 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
> >
<i className="bx bx-chevron-left"></i> Back <i className="bx bx-chevron-left"></i> Back
</button> </button>
)} </div>
</div> )}
</div> </div>
); );
}; };

28
src/components/Organization/OrgPickerfromTenant.jsx
View File

@ -40,44 +40,46 @@ const OrgPickerfromTenant = ({ title }) => {
const contactList = [ const contactList = [
{ {
key: "name", key: "name",
label: "Name", label: (
<div style={{ width: "290px", maxWidth: "300px", overflow: "hidden", textOverflow: "ellipsis" }}>
Name
</div>
),
getValue: (org) => ( getValue: (org) => (
<div className="d-flex gap-2 py-1 "> <div className="d-flex gap-2 py-1 ">
<i className="bx bx-buildings"></i> <i className="bx bx-buildings"></i>
<span <span
className="text-truncate d-inline-block " className="text-wrap d-inline-block "
style={{ maxWidth: "150px" }}
> >
{org?.name || "N/A"} {org?.name || "N/A"}
</span> </span>
</div> </div>
), ),
align: "text-start", align: "text-start"
}, },
{ {
key: "sprid", key: "sprid",
label: "SPRID", label: "SPRID",
getValue: (org) => ( getValue: (org) => (
<span <span
className="text-truncate d-inline-block" className="text-warp d-inline-block"
style={{ maxWidth: "200px" }}
> >
{org?.sprid || "N/A"} {org?.sprid || "N/A"}
</span> </span>
), ),
align: "text-center", align: "text-start",
}, },
]; ];
return ( return (
<div className="d-block"> <div className="d-block">
<div className="d-flex align-items-center gap-2 mb-1"> <div className="d-flex align-items-center gap-2 mb-4 mt-4">
<Label className="mb-0">{title}</Label> <Label className="mb-0">{title}</Label>
<input <input
type="text" type="text"
value={searchText} value={searchText}
onChange={(e) => setSearchText?.(e.target.value)} onChange={(e) => setSearchText?.(e.target.value)}
className="form-control form-control-sm w-auto" className="form-control form-control-sm w-75"
placeholder="Enter Organization Name" placeholder="Enter Organization Name"
/> />
</div> </div>
@ -126,7 +128,8 @@ const OrgPickerfromTenant = ({ title }) => {
onOpen({ startStep: 3, orgData: row }) onOpen({ startStep: 3, orgData: row })
} }
> >
<i className='bx bx-right-arrow-circle text-primary'></i> <i className="bx bx-plus-circle text-primary"></i>
</span> </span>
</div> </div>
</td> </td>
@ -138,10 +141,9 @@ const OrgPickerfromTenant = ({ title }) => {
</div> </div>
</div> </div>
) : null} ) : null}
<div className="d-flex flex-column align-items-center text-center text-wrap text-black gap-2"> <div className="d-flex flex-column align-items-center text-center text-wrap text-black gap-2 mt-4">
<small className="mb-1"> <small className="mb-1">
Could not find organization in your database? Please search within the Could not find organization in your database? Create New Organization
global database.
</small> </small>
<button <button
type="button" type="button"

15
src/components/Organization/OrganizationModal.jsx
View File

@ -22,7 +22,7 @@ import OrgPickerfromTenant from "./OrgPickerfromTenant";
import ViewOrganization from "./ViewOrganization"; import ViewOrganization from "./ViewOrganization";
const OrganizationModal = () => { const OrganizationModal = () => {
const { isOpen, orgData, startStep, onOpen, onClose, onToggle } = const { isOpen, orgData, startStep,flowType, onOpen, onClose, onToggle } =
useOrganizationModal(); useOrganizationModal();
const { data: masterService, isLoading } = useServices(); const { data: masterService, isLoading } = useServices();
const [searchText, setSearchText] = useState(); const [searchText, setSearchText] = useState();
@ -54,7 +54,7 @@ const OrganizationModal = () => {
}; };
const RenderTitle = useMemo(() => { const RenderTitle = useMemo(() => {
if (orgData && startStep === 3 ) { if (orgData && startStep === 3) {
return "Assign Organization"; return "Assign Organization";
} }
@ -71,17 +71,17 @@ const OrganizationModal = () => {
if (startStep === 3) { if (startStep === 3) {
return "Assign Organization"; return "Assign Organization";
} }
if(startStep === 5){ if (startStep === 5) {
return "Organization Details" return "Organization Details"
} }
return `${orgData ? "Update":"Create"} Organization`; return `${orgData ? "Update" : "Assign"} Organization`;
}, [startStep, orgData]); }, [startStep, orgData]);
const contentBody = ( const contentBody = (
<div> <div>
{/* ---------- STEP 1: Service Provider- Form Own Tenant list ---------- */} {/* ---------- STEP 1: Service Provider- Form Own Tenant list ---------- */}
{startStep === 1 && <OrgPickerfromTenant title="Find Organization" />} {startStep === 1 && <OrgPickerfromTenant title="Search Organization" />}
{startStep === 2 && ( {startStep === 2 && (
<OrgPickerFromSPId <OrgPickerFromSPId
@ -99,13 +99,14 @@ const OrganizationModal = () => {
{/* ---------- STEP 3: Add New Organization ---------- */} {/* ---------- STEP 3: Add New Organization ---------- */}
{startStep === 4 && <ManagOrg />} {startStep === 4 && <ManagOrg />}
{/* ---------- STEP 3: View Organization ---------- */} {/* ---------- STEP 3: View Organization ---------- */}
{startStep === 5 && <ViewOrganization orgId={orgData}/>} {startStep === 5 && <ViewOrganization orgId={orgData} />}
</div> </div>
); );
return ( return (
<Modal <Modal
size={startStep === 3 && flowType !== "default" ? "xl" : "md"}
isOpen={isOpen} isOpen={isOpen}
onClose={onClose} onClose={onClose}
title={RenderTitle} title={RenderTitle}

3
src/components/Organization/OrganizationSchema.js
View File

@ -15,8 +15,7 @@ export const organizationSchema = z.object({
address: z.string().min(1, { message: "Address is required!" }), address: z.string().min(1, { message: "Address is required!" }),
email: z email: z
.string().trim() .string().trim()
.min(1, { message: "Email is required" }) .optional(),
.email("Invalid email address"),
serviceIds: z serviceIds: z
.array(z.string()) .array(z.string())
.min(1, { message: "Service isrequired" }), .min(1, { message: "Service isrequired" }),

12
src/components/Organization/OrganizationsList.jsx
View File

@ -4,6 +4,7 @@ import { ITEMS_PER_PAGE } from "../../utils/constants";
import Avatar from "../common/Avatar"; import Avatar from "../common/Avatar";
import { useDebounce } from "../../utils/appUtils"; import { useDebounce } from "../../utils/appUtils";
import Pagination from "../common/Pagination"; import Pagination from "../common/Pagination";
import { SpinnerLoader } from "../common/Loader";
const OrganizationsList = ({ searchText }) => { const OrganizationsList = ({ searchText }) => {
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
@ -94,6 +95,7 @@ const OrganizationsList = ({ searchText }) => {
return ( return (
<div <div
className="card-datatable table-responsive overflow-auto"
id="horizontal-example" id="horizontal-example"
> >
<div className="dataTables_wrapper no-footer px-2 "> <div className="dataTables_wrapper no-footer px-2 ">
@ -143,10 +145,18 @@ const OrganizationsList = ({ searchText }) => {
<td <td
colSpan={organizationsColumns.length + 1} colSpan={organizationsColumns.length + 1}
className="text-center" className="text-center"
style={{ height: "250px" }}
> >
<p className="fw-semibold">{isLoading ? "Loading...." : "Not Found Organization"}</p> {isLoading ? (
<div className="d-flex justify-content-center align-items-center h-100">
<SpinnerLoader />
</div>
) : (
<p className="fw-semibold mt-3">Not Found Organization</p>
)}
</td> </td>
</tr> </tr>
)} )}
</tbody> </tbody>
</table> </table>