Additional UI Fixes

AmakrushAI · Mar 8, 2024 · b96549e · b96549e
1 parent 90c03bc
commit b96549e
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 95 deletions.
diff --git a/apps/amakrushi/lang/en.json b/apps/amakrushi/lang/en.json
@@ -36,6 +36,12 @@
     "label.tap_to_speak": "Tap to speak",
     "label.manual": "User Manual - For VAWs",
     "lable.disclaimer": "Disclaimer",
+    "label.grievance_disclaimer": "If a grievance is pending, please Contact the officer for verification",
+    "label.eleg_disclaimer": "If not eligible, please apply for a grievance via KALIA Portal",
+    "label.disbursal_disclaimer": "If the payment status is failed, please link your bank account with Aadhar.",
+    "label.kalia_status": "KALIA Status",
+    "label.plant_protection":"Plant Protection",
+    "label.weather_advisory":"Weather Advisory",
     "table.personalDetails": "Personal Details",
     "table.header_date": "Date",
     "table.header_temp_max": "Temp Max",

diff --git a/apps/amakrushi/lang/or.json b/apps/amakrushi/lang/or.json
@@ -36,6 +36,12 @@
     "label.tap_to_speak": "କହିବାକୁ ଟ୍ୟାପ୍ କରନ୍ତୁ",
     "label.manual":"ବ୍ୟବହାରକାରୀ ମାନୁଆଲ - VAWs ପାଇଁ",
     "lable.disclaimer": "ଧ୍ୟାନ ଦିଅନ୍ତୁ",
+    "label.grievance_disclaimer": "ଯଦି କୌଣସି ଅଭିଯୋଗ ବିଚାରାଧୀନ ଅଛି, ଦୟାକରି ଯାଞ୍ଚ ପାଇଁ ଅଧିକାରୀଙ୍କ ସହିତ ଯୋଗାଯୋଗ କରନ୍ତୁ |",
+    "label.eleg_disclaimer": "ଯଦି ଯୋଗ୍ୟ ନୁହେଁ, ଦୟାକରି କାଳିଆ ପୋର୍ଟାଲ ମାଧ୍ୟମରେ ଅଭିଯୋଗ ପାଇଁ ଆବେଦନ କରନ୍ତୁ |",
+    "label.disbursal_disclaimer": "ଯଦି ଦେୟ ସ୍ଥିତି ବିଫଳ ହୁଏ, ଦୟାକରି ଆପଣଙ୍କର ବ୍ୟାଙ୍କ ଆକାଉଣ୍ଟକୁ ଆଧାର ସହିତ ଲିଙ୍କ୍ କରନ୍ତୁ |",
+    "label.kalia_status": "କାଳିଆ ସ୍ଥିତି",
+    "label.plant_protection":"ଉଦ୍ଭିଦ ସୁରକ୍ଷା",
+    "label.weather_advisory":"ପାଣିପାଗ ପରାମର୍ଶଦାତା",
     "table.header_date": "ତାରିଖ",
     "table.header_temp_max":"ସର୍ବାଧିକ ତାପମାତ୍ରା",
     "table.header_temp_min": "ସାର୍ବନିମ୍ନ ତାପମାତ୍ରା ",

diff --git a/apps/amakrushi/src/assets/images/kalia_status.png b/apps/amakrushi/src/assets/images/kalia_status.png
diff --git a/apps/amakrushi/src/components/HomePage/index.tsx b/apps/amakrushi/src/components/HomePage/index.tsx
@@ -216,9 +216,9 @@ const HomePage: NextPage = () => {
         console.log('clearing mssgs');
         context?.setMessages([]);
         router.push('/chat');
-        if(context?.kaliaClicked){
+        if (context?.kaliaClicked) {
           context?.sendMessage("Aadhar number - " + msg, null, true, null, true);
-        }else context?.sendMessage(msg);
+        } else context?.sendMessage(msg);
       } else {
         toast.error(t('error.disconnected'));
         return;
@@ -229,12 +229,12 @@ const HomePage: NextPage = () => {
 
   const handleInputChange = (e: any) => {
     const inputValue = e.target.value;
-    if(context?.kaliaClicked){
-      if(!/^[0-9]*$/.test(inputValue) || inputValue.length > 12){
+    if (context?.kaliaClicked) {
+      if (!/^[0-9]*$/.test(inputValue) || inputValue.length > 12) {
         toast.error('Please enter valid aadhaar number');
         // setInputMsg(inputValue.slice(0, 12));
-      }else setInputMsg(inputValue);
-    }else setInputMsg(inputValue);
+      } else setInputMsg(inputValue);
+    } else setInputMsg(inputValue);
     const cursorPosition = e.target.selectionStart;
     setCursorPosition(cursorPosition);
     // setShowExampleMessages(inputValue.length === 0);
@@ -361,56 +361,56 @@ const HomePage: NextPage = () => {
         <div className={styles.main} onClick={handleDocumentClick}>
           {context?.kaliaClicked ? <div className={styles.kaliaImg}>
             <Image
-                  src={kaliaStatusImg}
-                  width={180}
-                  height={120}
-                  alt="kaliastatus"
-                />
+              src={kaliaStatusImg}
+              width={180}
+              height={120}
+              alt="kaliastatus"
+            />
           </div> : <><div className={styles.title}>{t('label.ask_me')}</div>
-          <div className={styles.imgButtons}>
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'space-evenly',
-                width: '100%',
-                maxWidth: '500px',
-              }}>
-              <div className={styles.imgBtn} onClick={() => {context?.setKaliaClicked((props: boolean) => !props);}}>
-                <p>KALIA status</p>
-                <Image
-                  src={kaliaStatusImg}
-                  width={80}
-                  height={57}
-                  alt="kaliastatus"
-                />
+            <div className={styles.imgButtons}>
+              <div
+                style={{
+                  display: 'flex',
+                  justifyContent: 'space-evenly',
+                  width: '100%',
+                  maxWidth: '500px',
+                }}>
+                <div className={styles.imgBtn} onClick={() => { context?.setKaliaClicked((props: boolean) => !props); }}>
+                  <p>{t('label.kalia_status')}</p>
+                  <Image
+                    src={kaliaStatusImg}
+                    width={80}
+                    height={57}
+                    alt="kaliastatus"
+                  />
+                </div>
+                <div className={styles.imgBtn} onClick={() => {
+                  toast('Coming Soon!')
+                }}>
+                  <p>{t('label.plant_protection')}</p>
+                  <Image
+                    src={plantProtectionImg}
+                    width={60}
+                    height={60}
+                    alt="plantprotection"
+                  />
+                </div>
               </div>
-              <div className={styles.imgBtn} onClick={() => {
-                toast('Coming Soon!')
+              <div className={styles.imgBtn} style={{ marginTop: '20px' }} onClick={() => {
+                sendMessage('weather advisory');
               }}>
-                <p>Plant Protection</p>
+                <p>{t('label.weather_advisory')}</p>
                 <Image
-                  src={plantProtectionImg}
-                  width={60}
-                  height={60}
-                  alt="plantprotection"
+                  src={weatherAdvisoryImg}
+                  width={50}
+                  height={70}
+                  alt="weatheradvisory"
                 />
               </div>
             </div>
-            <div className={styles.imgBtn} style={{ marginTop: '20px' }} onClick={() => {
-              sendMessage('weather advisory');
-            }}>
-              <p>Weather Advisory</p>
-              <Image
-                src={weatherAdvisoryImg}
-                width={50}
-                height={70}
-                alt="weatheradvisory"
-              />
-            </div>
-          </div>
-          <div className={styles.voiceRecorder} ref={voiceRecorderRef}>
-            <RenderVoiceRecorder setInputMsg={setInputMsg} tapToSpeak={true} />
-          </div></>}
+            <div className={styles.voiceRecorder} ref={voiceRecorderRef}>
+              <RenderVoiceRecorder setInputMsg={setInputMsg} tapToSpeak={true} />
+            </div></>}
 
           {/* <div
             className={
@@ -453,9 +453,8 @@ const HomePage: NextPage = () => {
                   <div
                     key={index}
                     onClick={() => suggestionClickHandler(elem)}
-                    className={`${styles.suggestion} ${
-                      activeSuggestion === index ? styles.active : ''
-                    }`}
+                    className={`${styles.suggestion} ${activeSuggestion === index ? styles.active : ''
+                      }`}
                     onMouseEnter={(e) => suggestionHandler(e, index)}>
                     {elem}
                   </div>
@@ -467,7 +466,7 @@ const HomePage: NextPage = () => {
               rows={1}
               value={inputMsg}
               onChange={handleInputChange}
-              placeholder={!context?.kaliaClicked ? placeholder: 'Enter you Aadhar number'}
+              placeholder={!context?.kaliaClicked ? placeholder : 'Enter you Aadhar number'}
             />
             <button type="submit" className={styles.sendButton}>
               <Image

diff --git a/apps/amakrushi/src/components/chat-message-item/index.module.css b/apps/amakrushi/src/components/chat-message-item/index.module.css
@@ -140,6 +140,7 @@
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 
 }
+
 .tableContainerKalia {
   position: relative;
   display: flex;
@@ -210,16 +211,30 @@
 .tableDataColKalia {
   display: flex;
   flex-direction: row;
-  align-items: center;
-  white-space: nowrap;
   padding: 0rem 1rem;
   /* margin: 0.5rem 0rem; */
+  width: 100%;
   gap: 0.5rem;
   border: 1px solid black;
+  font-size: 13px;
+  font-weight: 500;
 }
+
 .tableDataCol:nth-child(odd) {
   background: #F2F2F2;
 }
+
 .tableDataColKalia:nth-child(odd) {
   background: #F2F2F2;
+}
+
+.kaliaCell {
+  width: 50%;
+}
+
+.divider {
+  width: 100%;
+  background: rgba(0, 0, 0, 0.1);
+  height: 2px;
+  margin: 1rem 0rem 1rem 0rem;
 }
diff --git a/apps/amakrushi/src/components/chat-message-item/index.tsx b/apps/amakrushi/src/components/chat-message-item/index.tsx
@@ -737,8 +737,8 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({ message, onSend }) => {
                   <div key={rowIndex} className={styles.tableDataRow}>
                     {chunk.map(([field, value]: [any, any], colIndex) => (
                       <div key={`${rowIndex}-${colIndex}`} className={styles.tableDataColKalia}>
-                        <div style={{ flex: 1 }}>{field}</div>
-                        <div style={{ flex: 1 }}>{value}</div>
+                        <div style={{ borderRight: '1px solid grey' }} className={styles.kaliaCell}>{field}</div>
+                        <div style={{}} className={styles.kaliaCell}>{value}</div>
                       </div>
                     ))}
                   </div>
@@ -887,7 +887,8 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({ message, onSend }) => {
               </div>
             </div>
             {/* Disclaimer Text */}
-            {dataKeys?.['Disclaimer'] && <span style={{ marginTop: '500px' }}> <b>{t('lable.disclaimer')}</b>: {dataKeys?.['Disclaimer']}</span>}
+            <div className={styles.divider}></div>
+            {dataKeys?.['Disclaimer'] && <div > <b>{t('lable.disclaimer')}</b>: {dataKeys?.['Eligibility Status'] ? t('label.eleg_disclaimer') : t('label.grievance_disclaimer')}</div>}
             <span
               className="onHover"
               style={{
@@ -929,12 +930,14 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({ message, onSend }) => {
             }></div>
           <Bubble type="text">
             <div className={styles.tableContainer}>
-              <div className={styles.tableHeader}>
+              <div className={styles.tableHeader}
+                style={{ fontSize: '13px' }}
+              >
                 <div>
-                  <b>Name of Bank</b>
+                  <b>Name of<br></br> Bank</b>
                 </div>
                 <div>IFSC Code</div>
-                <div>Payment processed <br></br> Date</div>
+                <div>Payment<br></br> processed Date</div>
                 <div>Saving Bank <br></br>Account No</div>
                 <div>Payment Status </div>
                 <div>UTR No</div>
@@ -944,21 +947,24 @@ const ChatMessageItem: FC<ChatMessageItemPropType> = ({ message, onSend }) => {
                   (el: any, idx: any) => (
                     <div
                       key={el?.['Name of Bank'] + idx}
-                      className={styles.tableDataCol}>
+                      className={styles.tableDataCol}
+                      style={{ fontSize: '13px' }}
+                    >
                       <div>
                         <b> {el['Name of Bank']}</b>
                       </div>
                       <div>{el['IFSC Code']} </div>
                       <div>{el['Payment processed Date']}</div><br></br>
-                      <div>{el['Saving Bank Account No.']}</div><br></br>
+                      <div>{el['Saving Bank Account No.']}</div>
                       <div>{el['Payment Status']}</div>
                       <div>{el['UTR No.']}</div>
                     </div>
                   )
                 )}
               </div>
             </div>
-            {disclaimer && <span style={{ marginTop: '500px' }}> <b>{t('lable.disclaimer')}</b>: {disclaimer}</span>}
+            <div className={styles.divider}></div>
+            {disclaimer && <div> <b>{t('lable.disclaimer')}</b>: {t('label.disbursal_disclaimer')}</div>}
           </Bubble>
         </div>
       );

diff --git a/apps/amakrushi/src/components/recorder/RenderVoiceRecorder.jsx b/apps/amakrushi/src/components/recorder/RenderVoiceRecorder.jsx
@@ -118,7 +118,7 @@ const RenderVoiceRecorder = ({ setInputMsg, tapToSpeak }) => {
       toast.success(`${t('message.recorder_wait')}`);
 
       // const audioElement = new Audio();
-  
+
       // const blobUrl = URL.createObjectURL(blob);
       // audioElement.src = blobUrl;
       // console.log(audioElement)
@@ -184,52 +184,62 @@ const RenderVoiceRecorder = ({ setInputMsg, tapToSpeak }) => {
       <div>
         {mediaRecorder && mediaRecorder.state === 'recording' ? (
           <div className={styles.center}>
-            <Image
-              priority
-              src={stop}
-              alt="stopIcon"
-              onClick={() => {
-                stopRecording();
-              }}
-              style={{ cursor: 'pointer' }}
-              layout="responsive"
-            />
-          </div>
-        ) : (
-          <div className={styles.center}>
-            {apiCallStatus === 'processing' ? (
+            <div className={styles.imgContainer}>
               <Image
                 priority
-                src={processing}
-                alt="processingIcon"
-                style={{ cursor: 'pointer' }}
-                layout="responsive"
-              />
-            ) : apiCallStatus === 'error' ? (
-              <Image
-                priority
-                src={error}
-                alt="errorIcon"
+                src={stop}
+                alt="stopIcon"
                 onClick={() => {
-                  setUserClickedError(true);
-                  startRecording();
+                  stopRecording();
                 }}
                 style={{ cursor: 'pointer' }}
                 layout="responsive"
               />
-            ) : (
-              <>
+            </div>
+          </div>
+        ) : (
+          <div className={styles.center}>
+            {apiCallStatus === 'processing' ? (
+              <div className={styles.imgContainer}>
+                <Image
+                  priority
+                  src={processing}
+                  alt="processingIcon"
+                  style={{ cursor: 'pointer' }}
+                  layout="responsive"
+                />
+              </div>
+            ) : apiCallStatus === 'error' ? (
+              <div className={styles.imgContainer}>
                 <Image
                   priority
-                  src={start}
-                  alt="startIcon"
+                  src={error}
+                  alt="errorIcon"
                   onClick={() => {
                     setUserClickedError(true);
                     startRecording();
                   }}
                   style={{ cursor: 'pointer' }}
                   layout="responsive"
                 />
+              </div>
+            ) : (
+              <>
+                <div className={styles.imgContainer}>
+                  <Image
+                    priority
+                    src={start}
+                    alt="startIcon"
+                    onClick={() => {
+                      setUserClickedError(true);
+                      startRecording();
+                    }}
+                    style={{ cursor: 'pointer' }}
+                    height={'10px !important'}
+                    width={'10px !important'}
+                    layout="responsive"
+                  />
+                </div>
                 {tapToSpeak ? (
                   <p style={{ color: 'black', fontSize: '12px', marginTop: '4px' }}>
                     {t('label.tap_to_speak')}