UI updation in Organization.

This commit is contained in:
Kartik Sharma 2025-12-03 11:17:06 +05:30 committed by pramod.mahajan
parent 21c2a5cf7d
commit 4a66dad07a
5 changed files with 41 additions and 40 deletions

View File

@ -96,11 +96,11 @@ const AssignOrg = ({ setStep }) => {
<div className="d-flex justify-content-between align-items-center text-start mb-1"> <div className="d-flex justify-content-between align-items-center text-start mb-1">
<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"> <div className="text-end">
<button <button
@ -113,60 +113,60 @@ const AssignOrg = ({ setStep }) => {
</div> </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> <div className="d-flex text-secondary mb-3"> <i className="bx bx-sm bx-info-circle me-2" /> Organization Info</div>
{/* Contact Info */} {/* Contact Info */}
<div className="col-md-6 mb-3"> <div className="col-md-12 mb-4">
<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-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>
<div className="col-md-6 mb-3"> <div className="col-md-12 mb-4">
<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-0 fw-semibold"
style={{ minWidth: "130px" }} style={{ minWidth: "130px" }}
> >
<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>
<div className="text-muted">{orgData.contactNumber}</div> <div className="text-muted">{orgData.contactNumber}</div>
</div> </div>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-12 mb-4">
<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-0 fw-semibold"
style={{ minWidth: "130px" }} style={{ minWidth: "130px" }}
> >
<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">{orgData.email}</div> <div className="text-muted text-wrap">{orgData.email}</div>
</div> </div>
</div> </div>
<div className="col-12 mb-3"> <div className="col-12 mb-4">
<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-0 fw-semibold"
style={{ maxWidth: "130px" }} style={{ maxWidth: "130px" }}
> >
<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">{orgData.sprid}</div> <div className="text-muted">{orgData.sprid}</div>
</div> </div>
</div> </div>
<div className="col-12 mb-3"> <div className="col-12 mb-4">
<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-0 fw-semibold"
style={{ minWidth: "130px" }} 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 text-start">{orgData.address}</div>
</div> </div>

View File

@ -189,7 +189,7 @@ const ManagOrg = () => {
)} )}
</div> </div>
<div className="d-flex justify-content-between gap-2 my-2"> <div className="d-flex justify-content-between gap-2 my-5">
<button <button
type="button" type="button"
className="btn btn-sm btn-outline-secondary" className="btn btn-sm btn-outline-secondary"

View File

@ -45,7 +45,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
return ( return (
<div className="d-block mt-4"> <div className="d-block mt-4">
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="row align-items-center g-2"> <div className="row align-items-center g-2 mb-3">
{/* Input Section */} {/* Input Section */}
<div className="col-12 col-md-8 d-block d-md-flex align-items-center gap-2 m-0 text-start"> <div className="col-12 col-md-8 d-block d-md-flex align-items-center gap-2 m-0 text-start">
<Label className="text-nowrap mb-1 mb-md-0" required> <Label className="text-nowrap mb-1 mb-md-0" required>
@ -88,7 +88,7 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
<div className="py-2 text-tiny text-center"> <div className="py-2 text-tiny text-center">
<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-2 text-start text-black mt-3">
<div className="mt-1"> <div className="mt-1">
<img <img
src="/public/assets/img/orgLogo.png" src="/public/assets/img/orgLogo.png"
@ -97,19 +97,19 @@ const OrgPickerFromSPId = ({ title, placeholder }) => {
height={50} height={50}
/> />
</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 mb-3">
<span className="fs-6 fw-semibold">{org.name}</span> <span className="fs-6 fw-semibold mb-2">{org.name}</span>
<div className="d-flex gap-2"> <div className="d-flex gap-2">
<small <small
className=" fw-semibold text-uppercase" className=" fw-semibold text-uppercase mb-2"
style={{ letterSpacing: "1px" }} style={{ letterSpacing: "1px" }}
> >
SPRID :{" "} SPRID :{" "}
</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 mb-4">
<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">

View File

@ -122,6 +122,7 @@ const OrganizationsList = ({searchText}) => {
{organizationsColumns.map((col) => ( {organizationsColumns.map((col) => (
<td <td
key={col.key} key={col.key}
style={{ height: "50px" }}
className={`d-table-cell ${col.align ?? ""}`} className={`d-table-cell ${col.align ?? ""}`}
> >
{col.customRender {col.customRender

View File

@ -9,7 +9,7 @@ const VieworgDataanization = ({ orgId }) => {
return ( return (
<div className="row text-black text-black text-start "> <div className="row text-black text-black text-start ">
{/* Header */} {/* Header */}
<div className="col-12 mb-3"> <div className="col-12 mb-5">
<div className="d-flex justify-content-between align-items-center text-start mb-1"> <div className="d-flex justify-content-between align-items-center text-start mb-1">
<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
@ -18,7 +18,7 @@ const VieworgDataanization = ({ orgId }) => {
width={40} width={40}
height={40} height={40}
/>{" "} />{" "}
<p className="fw-semibold fs-6 m-0">{data?.name}</p> <p className="fw-semibold fs-5 mt-2 m-0">{data?.name}</p>
</div> </div>
<div className="text-end"> <div className="text-end">
<span <span
@ -30,12 +30,12 @@ const VieworgDataanization = ({ orgId }) => {
</div> </div>
</div> </div>
</div> </div>
<div className="d-flex text-secondary mb-2"> <div className="d-flex text-secondary mb-5">
{" "} {" "}
<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-5">
<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-0 fw-semibold"
@ -46,7 +46,7 @@ const VieworgDataanization = ({ orgId }) => {
<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-5">
<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-0 fw-semibold"
@ -57,7 +57,7 @@ const VieworgDataanization = ({ orgId }) => {
<div className="text-muted">{data?.contactNumber}</div> <div className="text-muted">{data?.contactNumber}</div>
</div> </div>
</div> </div>
<div className="col-md-12 mb-3"> <div className="col-md-12 mb-5">
<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-0 fw-semibold"
@ -68,32 +68,32 @@ const VieworgDataanization = ({ orgId }) => {
<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-12 mb-5">
<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-0 fw-semibold"
style={{ maxWidth: "130px" }} style={{ maxWidth: "130px" }}
> >
<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">{data?.sprid}</div>
</div> </div>
</div> </div>
<div className="col-6 mb-3"> <div className="col-12 mb-5">
<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-0 fw-semibold"
style={{ maxWidth: "130px" }} 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">{data?.activeEmployeeCount}</div>
</div> </div>
</div> </div>
<div className="col-12 mb-3"> <div className="col-12 mb-5">
<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-0 fw-semibold"
@ -104,7 +104,7 @@ const VieworgDataanization = ({ orgId }) => {
<div className="text-muted text-start">{data?.address}</div> <div className="text-muted text-start">{data?.address}</div>
</div> </div>
</div> </div>
<div className="col-12 mb-3"> <div className="col-12 mb-5">
<div <div
className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer" className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
data-bs-toggle="collapse" data-bs-toggle="collapse"
@ -162,7 +162,7 @@ const VieworgDataanization = ({ orgId }) => {
</div> </div>
{/* Services Section */} {/* Services Section */}
<div className="col-12 mb-3"> <div className="col-12 mb-5">
<div <div
className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer" className="d-flex justify-content-between align-items-center text-secondary mb-2 cursor-pointer"
data-bs-toggle="collapse" data-bs-toggle="collapse"
@ -180,7 +180,7 @@ const VieworgDataanization = ({ orgId }) => {
{data?.services && data.services.length > 0 ? ( {data?.services && data.services.length > 0 ? (
<div className="row"> <div className="row">
{data.services.map((service) => ( {data.services.map((service) => (
<div key={service.id} className="col-md-12 mb-3"> <div key={service.id} className="col-md-12 mb-5">
<div className="card h-100 shadow-sm border-0"> <div className="card h-100 shadow-sm border-0">
<div className="card-body"> <div className="card-body">
<h6 className="fw-semibold mb-1"> <h6 className="fw-semibold mb-1">