UI updation in Organization view and Search button
This commit is contained in:
parent
d5df200ede
commit
31aaf14817
@ -92,95 +92,93 @@ const AssignOrg = ({ setStep }) => {
|
|||||||
return (
|
return (
|
||||||
<div className="row text-black text-start mb-3">
|
<div className="row text-black text-start mb-3">
|
||||||
{/* Organization Info Display */}
|
{/* Organization Info Display */}
|
||||||
<div className="col-12 mb-3">
|
<div className="col-12 mb-4">
|
||||||
<div className="d-flex justify-content-between align-items-center text-start mb-1">
|
<div className="d-flex justify-content-between align-items-center">
|
||||||
<div className="d-flex flex-row gap-2 align-items-center text-wrap">
|
<div className="d-flex flex-row gap-2 align-items-center text-wrap">
|
||||||
<img
|
<img
|
||||||
src="/public/assets/img/orgLogo.png"
|
src="/public/assets/img/orgLogo.png"
|
||||||
alt="logo"
|
alt="logo"
|
||||||
width={40}
|
width={40}
|
||||||
height={40}
|
height={40}
|
||||||
/> <p className="fw-semibold fs-6 m-0">{orgData.name}</p>
|
/>
|
||||||
|
<p className="fw-semibold fs-5 mt-2 m-0">{orgData.name}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-end">
|
<button
|
||||||
<button
|
type="button"
|
||||||
type="button"
|
onClick={handleEdit}
|
||||||
onClick={handleEdit}
|
className="btn btn-link p-0"
|
||||||
className="btn btn-link p-0"
|
>
|
||||||
>
|
<i className="bx bx-edit text-secondary"></i>
|
||||||
<i className="bx bx-edit text-secondary"></i>
|
</button>
|
||||||
</button>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-12 fw-semibold mb-4 mt-2 fs-6">
|
||||||
|
<i className="bx bx-sm bx-info-circle me-1" /> Organization Info
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Person */}
|
||||||
|
<div className="col-12 mb-4">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-4 col-12 fw-semibold mb-2 mb-md-0">
|
||||||
|
<i className="bx bx-sm bx-user me-1" /> Contact Person :
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-md-8 col-12 text-muted">{orgData.contactPerson}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex text-secondary mb-2"> <i className="bx bx-sm bx-info-circle me-1" /> Organization Info</div>
|
|
||||||
{/* Contact Info */}
|
{/* Contact Number */}
|
||||||
<div className="col-md-6 mb-3">
|
<div className="col-12 mb-4">
|
||||||
<div className="d-flex">
|
<div className="row">
|
||||||
<label
|
<div className="col-md-4 col-12 fw-semibold mb-2 mb-md-0">
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
<i className="bx bx-sm bx-phone me-1" /> Contact Number :
|
||||||
style={{ minWidth: "130px" }}
|
</div>
|
||||||
>
|
<div className="col-md-8 col-12 text-muted">{orgData.contactNumber}</div>
|
||||||
<i className="bx bx-sm bx-user me-1" /> Contact Person :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted">{orgData.contactPerson}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
{/* Email */}
|
||||||
<label
|
<div className="col-12 mb-4">
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
<div className="row">
|
||||||
style={{ minWidth: "130px" }}
|
<div className="col-md-4 col-12 fw-semibold mb-2 mb-md-0">
|
||||||
>
|
<i className="bx bx-sm bx-envelope me-1" /> Email Address :
|
||||||
<i className='bx bx-sm me-1 bx-phone'></i> Contact Number :
|
</div>
|
||||||
</label>
|
<div className="col-md-8 col-12 text-muted">{orgData.email}</div>
|
||||||
<div className="text-muted">{orgData.contactNumber}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-6 mb-3">
|
|
||||||
<div className="d-flex">
|
{/* SPRID */}
|
||||||
<label
|
<div className="col-12 mb-4">
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
<div className="row">
|
||||||
style={{ minWidth: "130px" }}
|
<div className="col-md-4 col-12 fw-semibold mb-2 mb-md-0">
|
||||||
>
|
<i className="bx bx-sm bx-barcode me-1" /> Service Provider Id :
|
||||||
<i className='bx bx-sm me-1 bx-envelope'></i> Email Address :
|
</div>
|
||||||
</label>
|
<div className="col-md-8 col-12 text-muted">{orgData.sprid}</div>
|
||||||
<div className="text-muted">{orgData.email}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 mb-3">
|
|
||||||
<div className="d-flex">
|
{/* Address */}
|
||||||
<label
|
<div className="col-12 mb-4">
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
<div className="row">
|
||||||
style={{ maxWidth: "130px" }}
|
<div className="col-md-4 col-12 fw-semibold mb-2 mb-md-0">
|
||||||
>
|
<i className="bx bx-sm bx-map me-1" /> Address :
|
||||||
<i className="bx bx-sm me-1 bx-barcode"></i>
|
</div>
|
||||||
Service Provider Id (SPRID) :
|
<div className="col-md-8 col-12 text-muted">{orgData.address}</div>
|
||||||
</label>
|
|
||||||
<div className="text-muted">{orgData.sprid}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-12 mb-3">
|
|
||||||
<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 :
|
|
||||||
</label>
|
|
||||||
<div className="text-muted text-start">{orgData.address}</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Form */}
|
{/* Form */}
|
||||||
<div className="text-black text-start">
|
<div className="col-12 text-black text-start">
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
{/* Show fields only if flowType is NOT default */}
|
|
||||||
{flowType !== "default" && (
|
{flowType !== "default" && (
|
||||||
<>
|
<>
|
||||||
{/* Organization Type */}
|
{/* Organization Type */}
|
||||||
<div className="mb-3 text-start">
|
<div className="mb-4">
|
||||||
<Label htmlFor="organizationTypeId" className="mb-3 fw-semibold" required>
|
<Label
|
||||||
|
htmlFor="organizationTypeId"
|
||||||
|
className="mb-3 fw-semibold"
|
||||||
|
required
|
||||||
|
>
|
||||||
Organization Type
|
Organization Type
|
||||||
</Label>
|
</Label>
|
||||||
<div className="d-flex flex-wrap gap-3 mt-1">
|
<div className="d-flex flex-wrap gap-3 mt-1">
|
||||||
@ -213,21 +211,23 @@ const AssignOrg = ({ setStep }) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Services */}
|
{/* Services */}
|
||||||
<div className="mb-3">
|
<div className="mb-4">
|
||||||
<Label htmlFor="serviceIds" className="mb-3 fw-semibold" required>
|
<Label htmlFor="serviceIds" className="mb-3 fw-semibold" required>
|
||||||
Select Services
|
Select Services
|
||||||
</Label>
|
</Label>
|
||||||
{mergedServices?.map((service) => (
|
<div className="d-flex flex-column gap-3">
|
||||||
<div key={service.id} className="form-check mb-3">
|
{mergedServices?.map((service) => (
|
||||||
<input
|
<div key={service.id} className="form-check">
|
||||||
type="checkbox"
|
<input
|
||||||
value={service.id}
|
type="checkbox"
|
||||||
{...register("serviceIds")}
|
value={service.id}
|
||||||
className="form-check-input"
|
{...register("serviceIds")}
|
||||||
/>
|
className="form-check-input"
|
||||||
<label className="form-check-label">{service.name}</label>
|
/>
|
||||||
</div>
|
<label className="form-check-label">{service.name}</label>
|
||||||
))}
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
{errors.serviceIds && (
|
{errors.serviceIds && (
|
||||||
<div className="text-danger small">
|
<div className="text-danger small">
|
||||||
{errors.serviceIds.message}
|
{errors.serviceIds.message}
|
||||||
@ -237,7 +237,7 @@ const AssignOrg = ({ setStep }) => {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Buttons: Always visible */}
|
{/* Buttons */}
|
||||||
<div className="d-flex justify-content-between mt-5">
|
<div className="d-flex justify-content-between mt-5">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@ -245,7 +245,7 @@ const AssignOrg = ({ setStep }) => {
|
|||||||
onClick={handleBack}
|
onClick={handleBack}
|
||||||
disabled={isPending}
|
disabled={isPending}
|
||||||
>
|
>
|
||||||
<i className="bx bx-chevron-left"></i>Back
|
<i className="bx bx-chevron-left"></i> Back
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
@ -262,6 +262,7 @@ const AssignOrg = ({ setStep }) => {
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -44,8 +44,8 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
|
|||||||
className="d-flex flex-row gap-6 text-start align-items-center"
|
className="d-flex flex-row gap-6 text-start align-items-center"
|
||||||
onSubmit={handleSubmit(onSubmit)}
|
onSubmit={handleSubmit(onSubmit)}
|
||||||
>
|
>
|
||||||
<div className="d-flex flex-row align-items-center gap-2">
|
<div className="d-flex flex-row align-items-center gap-2">
|
||||||
<Label className="text-secondary">Search by SPRID</Label>
|
<Label className="fw-semibold">Search by SPRID</Label>
|
||||||
<input
|
<input
|
||||||
type="search"
|
type="search"
|
||||||
{...register("spridSearchText")}
|
{...register("spridSearchText")}
|
||||||
@ -72,10 +72,10 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
|
|||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<OrgCardSkeleton />
|
<OrgCardSkeleton />
|
||||||
) : data && data?.data.length > 0 ? (
|
) : data && data?.data.length > 0 ? (
|
||||||
<div className="py-2 text-tiny text-center">
|
<div className="py-2 text-tiny text-center mt-5">
|
||||||
<div className="d-flex flex-column gap-2 border-0 bg-none">
|
<div className="d-flex flex-column gap-2 border-0 bg-none">
|
||||||
{data.data.map((org) => (
|
{data.data.map((org) => (
|
||||||
<div className="d-flex flex-row gap-2 text-start text-black ">
|
<div className="d-flex flex-row gap-4 text-start text-black ">
|
||||||
<div className="mt-1">
|
<div className="mt-1">
|
||||||
<img
|
<img
|
||||||
src="/public/assets/img/orgLogo.png"
|
src="/public/assets/img/orgLogo.png"
|
||||||
@ -85,8 +85,8 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex flex-column p-0 m-0 cursor-pointer">
|
<div className="d-flex flex-column p-0 m-0 cursor-pointer">
|
||||||
<span className="fs-6 fw-semibold">{org.name}</span>
|
<span className="fs-5 fw-semibold">{org.name}</span>
|
||||||
<div className="d-flex gap-2">
|
<div className="d-flex gap-2 mt-2">
|
||||||
<small
|
<small
|
||||||
className=" fw-semibold text-uppercase"
|
className=" fw-semibold text-uppercase"
|
||||||
style={{ letterSpacing: "1px" }}
|
style={{ letterSpacing: "1px" }}
|
||||||
@ -95,11 +95,11 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
|
|||||||
</small>
|
</small>
|
||||||
<small className="fs-6">{org.sprid}</small>
|
<small className="fs-6">{org.sprid}</small>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex flex-row gap-2">
|
<div className="d-flex flex-row gap-2 mt-2">
|
||||||
<small className="text-small fw-semibold">Address:</small>
|
<small className="text-small fw-semibold">Address:</small>
|
||||||
<div className="d-flex text-wrap">{org.address}</div>
|
<div className="d-flex text-wrap">{org.address}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="m-0 p-0">
|
<div className="m-0 p-0 mt-4">
|
||||||
{" "}
|
{" "}
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
|
|||||||
@ -22,36 +22,35 @@ const VieworgDataanization = ({ orgId }) => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="text-end">
|
<div className="text-end">
|
||||||
<span
|
<span
|
||||||
className={`badge bg-label-${
|
className={`badge bg-label-${data?.isActive ? "primary" : "secondary"
|
||||||
data?.isActive ? "primary" : "secondary"
|
} `}
|
||||||
} `}
|
|
||||||
>
|
>
|
||||||
{data?.isActive ? "Active" : "In-Active"}{" "}
|
{data?.isActive ? "Active" : "In-Active"}{" "}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex text-secondary mb-2">
|
<div className="d-flex fw-semibold fs-6 mb-4 mt-2">
|
||||||
{" "}
|
{" "}
|
||||||
<i className="bx bx-sm bx-info-circle me-1" /> Organization Info
|
<i className="bx bx-sm bx-info-circle me-1" /> Organization Info
|
||||||
</div>
|
</div>
|
||||||
{/* Contact Info */}
|
{/* Contact Info */}
|
||||||
<div className="col-md-6 mb-3">
|
<div className="col-md-12 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
className="form-label me-2 mb-1 fw-semibold"
|
||||||
style={{ minWidth: "130px" }}
|
style={{ minWidth: "200px" }}
|
||||||
>
|
>
|
||||||
<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">{data?.contactPerson}</div>
|
<div className="text-muted">{data?.contactPerson}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-md-6 mb-3">
|
<div className="col-md-12 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
className="form-label me-2 mb-1 fw-semibold"
|
||||||
style={{ minWidth: "130px" }}
|
style={{ minWidth: "200px" }}
|
||||||
>
|
>
|
||||||
<i className="bx bx-sm me-1 bx-phone"></i> Contact Number :
|
<i className="bx bx-sm me-1 bx-phone"></i> Contact Number :
|
||||||
</label>
|
</label>
|
||||||
@ -61,44 +60,44 @@ const VieworgDataanization = ({ orgId }) => {
|
|||||||
<div className="col-md-12 mb-3">
|
<div className="col-md-12 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
className="form-label me-2 mb-1 fw-semibold"
|
||||||
style={{ minWidth: "130px" }}
|
style={{ minWidth: "200px" }}
|
||||||
>
|
>
|
||||||
<i className="bx bx-sm me-1 bx-envelope"></i> Email Address :
|
<i className="bx bx-sm me-1 bx-envelope"></i> Email Address :
|
||||||
</label>
|
</label>
|
||||||
<div className="text-muted">{data?.email}</div>
|
<div className="text-muted">{data?.email}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-6 mb-3">
|
<div className="col-md-12 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
className="form-label me-2 mb-1 fw-semibold"
|
||||||
style={{ maxWidth: "130px" }}
|
style={{ maxWidth: "250px" }}
|
||||||
>
|
>
|
||||||
<i className="bx bx-sm me-1 bx-barcode"></i>
|
<i className="bx bx-sm me-2 bx-barcode"></i>
|
||||||
Service Provider Id (SPRID) :
|
Service Provider Id (SPRID) :
|
||||||
</label>
|
</label>
|
||||||
<div className="text-muted">{data?.sprid}</div>
|
<div className="text-muted ms-1">{data?.sprid}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="col-6 mb-3">
|
<div className="col-md-12 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-2 mb-0 fw-semibold"
|
className="form-label me-2 mb-1 fw-semibold"
|
||||||
style={{ maxWidth: "130px" }}
|
|
||||||
>
|
>
|
||||||
<i className="bx bx-sm me-1 bx-group"></i>
|
<i className="bx bx-sm me-2 bx-group"></i>
|
||||||
Employees :
|
Employees :
|
||||||
</label>
|
</label>
|
||||||
<div className="text-muted">{data?.activeEmployeeCount}</div>
|
<div className="text-muted" style={{ marginLeft: "104px" }}>{data?.activeEmployeeCount}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="col-12 mb-3">
|
<div className="col-md-12 mb-3">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<label
|
<label
|
||||||
className="form-label me-1 mb-0 fw-semibold"
|
className="form-label me-1 mb-1 fw-semibold"
|
||||||
style={{ minWidth: "130px" }}
|
style={{ minWidth: "207px" }}
|
||||||
>
|
>
|
||||||
<i className="bx bx-sm me-1 bx-map"></i> Address :
|
<i className="bx bx-sm me-1 bx-map"></i> Address :
|
||||||
</label>
|
</label>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user