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