From fbee419971bdff63ad9e243255af28f4f5f22e51 Mon Sep 17 00:00:00 2001
From: pitabash-eGov <pitabash.choudhdry@egovernments.org>
Date: Tue, 23 Jul 2024 13:52:12 +0530
Subject: [PATCH] UI/UX audit for rate analysis

---
 .../employee/ViewAnalysisStatementPage.js     |  2 +-
 .../src/pages/employee/viewUtilization.js     |  2 +-
 .../src/components/SORDetailsTemplate.js      | 33 ++++++++++++-------
 .../components/extra_charges_view_table.js    | 18 +++++-----
 .../src/components/rateAmountGroup.js         |  2 +-
 .../src/components/ratecardbutton.js          |  2 +-
 .../src/components/specficAmountTable.js      |  6 ++--
 7 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Estimate/src/pages/employee/ViewAnalysisStatementPage.js b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Estimate/src/pages/employee/ViewAnalysisStatementPage.js
index 6577edb0aa..a253be511b 100644
--- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Estimate/src/pages/employee/ViewAnalysisStatementPage.js
+++ b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Estimate/src/pages/employee/ViewAnalysisStatementPage.js
@@ -468,7 +468,7 @@ const ViewAnalysisStatement = () => {
         { downloadStatus&&<MultiLink onHeadClick={() => HandleDownloadPdf()} downloadBtnClassName={"employee-download-btn-className"} label={t("CS_COMMON_DOWNLOAD")} /> }
       </div>
       <div>
-      <CitizenInfoLabel textType={"Componenet"} style={{margin:"0px", maxWidth:"100%", marginBottom:"1.5rem"}} info={t("CS_INFO")} text={t("STATEMENT_ANALYSIS_INFO_RATE")}  />
+      <CitizenInfoLabel className="doc-banner" textType={"Componenet"} style={{margin:"0px", maxWidth:"100%", marginBottom:"1.5rem"}} info={t("CS_INFO")} text={t("STATEMENT_ANALYSIS_INFO_RATE")}  />
       </div>
       <ViewComposer data={config} isLoading={false} />
       {toast?.show && <Toast label={toast?.label} error={toast?.error} isDleteBtn={true} onClose={handleToastClose}></Toast>}
diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Measurement/src/pages/employee/viewUtilization.js b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Measurement/src/pages/employee/viewUtilization.js
index b560d89bb1..24ca6b5127 100644
--- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/Measurement/src/pages/employee/viewUtilization.js
+++ b/frontend/micro-ui/web/micro-ui-internals/packages/modules/Measurement/src/pages/employee/viewUtilization.js
@@ -446,7 +446,7 @@ const ViewUtilization = () => {
         {downloadStatus&&<MultiLink onHeadClick={() => HandleDownloadPdf()} downloadBtnClassName={"employee-download-btn-className"} label={t("CS_COMMON_DOWNLOAD")} />}
       </div>
       <div>
-      <CitizenInfoLabel textType={"Componenet"} style={{margin:"0px", maxWidth:"100%", marginBottom:"1.5rem"}} info={t("CS_INFO")} text={t("STATEMENT_UTILIZATION_INFO_RATE")} />
+      <CitizenInfoLabel className="doc-banner" textType={"Componenet"} style={{margin:"0px", maxWidth:"100%", marginBottom:"1.5rem"}} info={t("CS_INFO")} text={t("STATEMENT_UTILIZATION_INFO_RATE")} />
       </div>
       <ViewComposer data={config} isLoading={false} />
       {toast?.show && (
diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/SORDetailsTemplate.js b/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/SORDetailsTemplate.js
index a325bbadad..85441cccc9 100644
--- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/SORDetailsTemplate.js
+++ b/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/SORDetailsTemplate.js
@@ -90,8 +90,7 @@ const SORDetailsTemplate = (props) => {
     { label: t("RA_QTY"), key: "quantity" },
   ];
 
-  if(pageType === "VIEW")
-  {
+  if (pageType === "VIEW") {
     columns.unshift({ label: t("RA_SNO"), key: "sno" });
   }
 
@@ -131,16 +130,21 @@ const SORDetailsTemplate = (props) => {
     let obj = {};
     switch (index) {
       case 1:
-        obj = pageType === "VIEW" ? { width: "1rem" } : { width: "8rem" };
+        obj = pageType === "VIEW" ? { width: "1rem", textAlign: "left" } : { width: "8rem" };
         break;
       case 2:
-        obj = pageType === "VIEW" ? { width: "8rem" } : { width: "70rem" };
+        obj = pageType === "VIEW" ? { width: "8rem", textAlign: "left" } : { width: "70rem" };
         break;
       case 3:
-        obj = pageType === "VIEW" ? { width: "70rem" } : { width: "10rem" };
+        obj = pageType === "VIEW" ? { width: "70rem", textAlign: "left" } : { width: "10rem" };
         break;
       case 4:
-        obj = pageType === "VIEW" ? { width: "10rem" } : (pageType === "VIEW" ? { width: "15rem", textAlign: "right" } : { width: "15rem" });
+        obj =
+          pageType === "VIEW"
+            ? { width: "10rem", textAlign: "left" }
+            : pageType === "VIEW"
+            ? { width: "15rem", textAlign: "right" }
+            : { width: "15rem" };
         break;
       case 5:
         obj = pageType === "VIEW" ? { width: "15rem", textAlign: "right" } : { width: "15rem" };
@@ -184,11 +188,18 @@ const SORDetailsTemplate = (props) => {
 
   return (
     <div
-      style={{
+      style={
+        pageType !== "VIEW"?{
+        
         paddingRight: "4%",
-      }}
+      }:
+      {
+        
+        paddingRight: "0%",
+      }
+    }
     >
-      <div className="search-sor-container">
+      <div style={{ display: "flex", width: "70.25%", justifyContent: "space-between", flexWrap: "wrap" }}>
         <span className="search-sor-label">{t(`RA_${props?.config?.sorType}_HEADER`)}</span>
         {pageType !== "VIEW" && (
           <div className="search-sor-button">
@@ -202,7 +213,7 @@ const SORDetailsTemplate = (props) => {
           </div>
         )}
       </div>
-      <table className="reports-table sub-work-table" style={pageType === "VIEW" ? {} : {width:"104%"}}>
+      <table className="reports-table sub-work-table" style={pageType === "VIEW" ? {} : { width: "104%" }}>
         <thead>
           <tr>
             {/*SORDetails?.filter((ob) => ob?.sorType === props?.config?.sorType).length > 0 &&
@@ -231,7 +242,7 @@ const SORDetailsTemplate = (props) => {
                             onChange={(e) => {
                               const { value } = e.target;
                               if (value ? has4DecimalPlaces(parseFloat(value)) : true) {
-                                let detailsPicked = window.location.href.includes("update") ? SORDetails : formData
+                                let detailsPicked = window.location.href.includes("update") ? SORDetails : formData;
                                 let newSOR = detailsPicked?.map((obj) => {
                                   if (obj?.sorCode === row?.sorCode) {
                                     return { ...obj, quantity: value };
diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/extra_charges_view_table.js b/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/extra_charges_view_table.js
index 3d0d8f360c..2a6da45a15 100644
--- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/extra_charges_view_table.js
+++ b/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/extra_charges_view_table.js
@@ -32,25 +32,25 @@ const ExtraChargesViewTable = (props) => {
     let obj = {};
     switch (index) {
       case 1:
-        obj = { width: "1rem" };
+        obj = { width: "1rem",textAlign: "left" };
         break;
       case 2:
-        obj = { width: "70rem" };
+        obj = { width: "70rem",textAlign: "left" };
         break;
       case 3:
-        obj = { width: "10rem" };
+        obj = { width: "10rem" ,textAlign: "left"};
         break;
       case 4:
-        obj = { width: "10rem" };
+        obj = { width: "10rem" ,textAlign: "left"};
         break;
       case 5:
-        obj = pageType === "VIEW" ? { width: "15rem", textAlign: "right" } : { width: "15rem" };
+        obj = pageType === "VIEW" ? { width: "15rem", textAlign: "right" } : { width: "15rem" ,textAlign: "right"};
         break;
       case 6:
-        obj = pageType === "VIEW" ? { width: "16rem", textAlign: "right" } : { width: "15rem" };
+        obj = pageType === "VIEW" ? { width: "16rem", textAlign: "right" } : { width: "15rem" ,textAlign: "right"};
         break;
       case 7:
-        obj = pageType === "VIEW" ? { width: "14rem", textAlign: "right" } : { width: "10rem" };
+        obj = pageType === "VIEW" ? { width: "14rem", textAlign: "right" } : { width: "10rem" ,textAlign: "right"};
         break;
       case 8:
         obj = { width: "3%" };
@@ -75,7 +75,7 @@ const ExtraChargesViewTable = (props) => {
   return (
     <div
       style={{
-        paddingRight: "4%",
+        paddingRight: "0%",
       }}
     >
       <div className="search-sor-container">
@@ -85,7 +85,7 @@ const ExtraChargesViewTable = (props) => {
         <thead>
           <tr>
             {columns.map((column, index) => (
-              <th key={index}>{column.label}</th>
+              <th key={index} style={getStyles(index + 1)}>{column.label}</th>
             ))}
           </tr>
         </thead>
diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/rateAmountGroup.js b/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/rateAmountGroup.js
index 3117798b50..24dfeb3a4b 100644
--- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/rateAmountGroup.js
+++ b/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/rateAmountGroup.js
@@ -81,7 +81,7 @@ const RateAmountGroup = (props) => {
           flexDirection: "row",
           width: "100%",
           justifyContent: "flex-end",
-          paddingRight: "2%",
+          paddingRight: "0%",
           alignItems: "center",
           marginTop: "-30px",
         }}
diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/ratecardbutton.js b/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/ratecardbutton.js
index b521de2dfd..51e6b9ddcf 100644
--- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/ratecardbutton.js
+++ b/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/ratecardbutton.js
@@ -75,7 +75,7 @@ const RateCardWithRightButton = (props) => {
         </div>
 
         <div style={bannerStyle}>
-          <CitizenInfoLabel style={{ margin: "0px" }} info={t("RA_ACTIVE_RATE_INFO_LABEL")} text={t("RA_ACTIVE_RATE_INFO_CONTENT_LABEL")} />
+          <CitizenInfoLabel className="doc-banner" textType={"Componenet"} style={{ margin: "0px", padding:"8px" }} info={t("RA_ACTIVE_RATE_INFO_LABEL")} text={t("RA_ACTIVE_RATE_INFO_CONTENT_LABEL")} />
         </div>
       </div>
     </React.Fragment>
diff --git a/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/specficAmountTable.js b/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/specficAmountTable.js
index ae82c42afe..31931e6cad 100644
--- a/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/specficAmountTable.js
+++ b/frontend/micro-ui/web/micro-ui-internals/packages/modules/RateAnalysis/src/components/specficAmountTable.js
@@ -20,7 +20,7 @@ const TableWithOutHead = (props) => {
     return fields?.map((row, index) => {
       return (
         <tr key={index}>
-          <td className="flex" style={{ width: "60%", margin: "0px", padding: "10px", textAlign: "right", paddingRight: "30px" }}>
+          <td className="flex" style={{ width: "60%", margin: "0px", padding: "10px", textAlign: "left", paddingRight: "30px" }}>
             { index===2?`${t(row?.name)}/ ${t(qty)} ${t(uom)}`:t(row?.name)}
           </td>
 
@@ -44,14 +44,14 @@ const TableWithOutHead = (props) => {
           flexDirection: "row",
           width: "100%",
           justifyContent: "flex-end",
-          paddingRight: "4%",
+          paddingRight: "0%",
           alignItems: "center",
           marginTop: "-30px",
         }}
       >
         <table
           className="table reports-table sub-work-table measurement-table-custom"
-          style={{ width: "40%", justifyContent: "right", paddingRight: "2%", alignItems: "right" }}
+          style={{ width: "40%", justifyContent: "right", paddingRight: "0%", alignItems: "right" }}
         >
           <tbody>{renderBody()}</tbody>
         </table>