From c71104fad8f0f2f91c34c60b3965b09e89a43bb2 Mon Sep 17 00:00:00 2001
From: "CHIEFSOFT\\ameye" <ameye@chiefsfot.com>
Date: Sat, 16 Aug 2025 08:53:48 -0400
Subject: [PATCH] offer recieved

---
 .../offers-received.component.html            | 236 ++++++++++--------
 .../offers-received.component.scss            |  81 +++---
 2 files changed, 186 insertions(+), 131 deletions(-)

diff --git a/src/app/components/offers-received/offers-received.component.html b/src/app/components/offers-received/offers-received.component.html
index fb6f6f4..293a305 100644
--- a/src/app/components/offers-received/offers-received.component.html
+++ b/src/app/components/offers-received/offers-received.component.html
@@ -1,107 +1,147 @@
 <div *ngIf="showCount==true" class="flex hdt">
-    <ion-label class="bold_text">You have {{total_offers}} Offer(s)</ion-label>
+    <ion-label *ngIf="total_offers>0" class="bold_text">You have {{total_offers}} Offer(s)</ion-label>
+
+    <div *ngIf="total_offers==0 || total_offers === null">
+        <ion-card>
+            <img alt="No Current Offer" src="https://www.wrenchboard.com/assets/images/apps/banners/active-jobs.jpg"/>
+            <ion-card-header>
+                <ion-card-subtitle>No current offer found.</ion-card-subtitle>
+            </ion-card-header>
+
+            <ion-card-content>
+                <div style="display: flex; flex-direction: row;">
+                    <div>
+                        You will be notified once you receive a new offer. You can then go to the market to show
+                        interest in any task.
+                    </div>
+                    <div>
+                        <ion-button fill="outline" (click)="getMyOffersData()">
+                            <ion-icon slot="icon-only" name="refresh"></ion-icon>
+                        </ion-button>
+                    </div>
+                </div>
+            </ion-card-content>
+        </ion-card>
+    </div>
 </div>
 
+
 <div *ngFor="let item of myOffersData">
-  <div class="offerBanner">
-    <div style="padding: 5px 0 5px 10px; color: red; font-weight: normal; font-size: 16px;"> This Offer Expires : {{item.expire | date}}</div>
-    <div style="padding-bottom: 5px; width: 100%">
-<!--      <div style="min-width: 50px; padding: 10px; max-width: 50px; max-height: 50px;" ><img-->
-<!--              class="bg_image back_image banner_image"-->
-<!--              alt="job banner" src="{{session_image_server+'/'+curr_session+'/job/'+item.job_uid}}" />-->
-<!--      </div>-->
-      <div>
-        <div style="width: 100%; flex-direction: column;">
-          <div class="offer_title" style="padding-left: 5px;">{{(item.title.length > 65) ? item.title.substring(0,64)+"...": item.title }}</div>
+    <div class="offerBanner">
+        <div style="padding: 5px 0 5px 10px; color: red; font-weight: bolder; font-size: 12px;"><span
+                style="color: #0b5e86;">You have a new offer, this offer expires on </span> {{item.expire | date}}</div>
+        <div style="padding-bottom: 5px; width: 100%">
+            <!--      <div style="min-width: 50px; padding: 10px; max-width: 50px; max-height: 50px;" ><img-->
+            <!--              class="bg_image back_image banner_image"-->
+            <!--              alt="job banner" src="{{session_image_server+'/'+curr_session+'/job/'+item.job_uid}}" />-->
+            <!--      </div>-->
+            <div>
+                <div style="width: 100%; flex-direction: column; padding: 10px;">
+                    <div class="offer_title"><span
+                            style="color: #0b5e86;">Title : </span>{{(item.title.length > 45) ? item.title.substring(0, 44) + "..." : item.title }}
+                    </div>
 
-          <div style="display: flex; width: 100%;">
-            <div style="width: 50%;" class="price">{{item.price*0.01| number : '1.2-2'}} {{item.currency}}</div>
-            <div style="text-align: right; padding: 0 5px 0 5px; width: 50%; ">
-              <ion-button
-                      size="small"
-                      (click)="openOfferDetail(item)"
-                      color="secondary" fill="outline" shape="round">{{  (currOpenOffer !='' && currOpenOffer==item.offer_uid)? 'Close': 'View'}} </ion-button>
+                    <div style="display: flex; width: 100%;">
+                        <div style="width: 50%;" class="price"><span
+                                style="color: #0b5e86;">Reward: </span>{{item.price * 0.01| number : '1.2-2'}} {{item.currency}}
+                        </div>
+                        <div style="text-align: right; padding: 0 5px 0 5px; width: 50%; ">
+                            <ion-button
+                                    size="small"
+                                    (click)="openOfferDetail(item)"
+                                    color="secondary" fill="outline"
+                                    shape="round">{{  (currOpenOffer != '' && currOpenOffer == item.offer_uid) ? 'Close' : 'View Offer'}} </ion-button>
+                        </div>
+                    </div>
+                </div>
             </div>
-          </div>
-
         </div>
-      </div>
+
+        <div *ngIf="currOpenOffer !='' && currOpenOffer==item.offer_uid"
+             style="border-radius: 10px; margin: 15px; background-color: #f5f5f0; padding: 5px; margin: 5px;">
+            <div>
+                <div style="font-size: 14px; background-color: transparent;">
+                    <div>
+                        <ion-label class="bold_text ion-text-wrap"><span
+                                class="soft_label">Title : </span> {{item.title}}</ion-label>
+                    </div>
+                    <div>
+                        <ion-label class="ion-text-wrap"><span class="soft_label" style="font-weight: bolder">Description : </span>{{item.description}}
+                        </ion-label>
+                    </div>
+                    <div>
+                        <ion-label class="ion-text-nowrap price"><span
+                                class="soft_label">Reward :</span> {{item.price * 0.01| number : '1.2-2'}} {{item.currency}}
+                            <span class="soft_label">Duration :</span> {{item.timeline_days}} day(s)
+                        </ion-label>
+                    </div>
+                    <div>
+                        <span class="soft_label" style="padding-top: 5px; font-weight: bolder;">Expected Delivery Details : </span>
+                    </div>
+                    <div style="padding-bottom: 5px;">
+                        <ion-textarea
+                                style="height: 120px; background-color: white; padding: 5px;  margin: 0; font-size: 14px; border-radius: 5px;"
+                                [autoGrow]="false"
+                                [rows]="5"
+                                [readonly]="true"
+                                value={{item.job_description}}
+                        >
+                        </ion-textarea>
+                    </div>
+                    <div>
+                        <div style="display: flex; padding: 5px; width: 100%;">
+                            <div style="width: 50%;">
+                                <ion-button size="small" (click)="requestReject(item)" color="danger" fill="solid"
+                                            shape="round"><b>Reject Offer</b></ion-button>
+                            </div>
+                            <div style="width: 50%; text-align: right;">
+                                <ion-button size="small" (click)="requestStart(item)" color="success" fill="solid"
+                                            shape="round">Start Now
+                                </ion-button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <!--      <div *ngIf="currOpenOffer !='' && currOpenOffer==item.offer_uid" style="border-radius: 10px; margin: 15px;">-->
+        <!--       <div>-->
+        <!--        <ion-list style="font-size: 14px; background-color: transparent;">-->
+        <!--            <ion-item>-->
+        <!--                <ion-label class="bold_text ion-text-wrap">{{item.title}}</ion-label>-->
+        <!--            </ion-item>-->
+        <!--            <ion-item>-->
+        <!--                <ion-label  class="ion-text-wrap">{{item.description}}</ion-label>-->
+        <!--            </ion-item>-->
+        <!--            <ion-item>-->
+        <!--                <ion-label  class="ion-text-nowrap price">{{item.price*0.01| number : '1.2-2'}} {{item.currency}} {{item.timeline_days}} day(s) </ion-label>-->
+        <!--            </ion-item>-->
+
+        <!--            <ion-item>-->
+        <!--                <ion-textarea-->
+        <!--                        style="height: 120px; background-color: whitesmoke; margin: 0; font-size: 14px"-->
+        <!--                        [autoGrow]="false"-->
+        <!--                        [rows]="5"-->
+        <!--                        value={{item.job_description}}-->
+        <!--                >-->
+        <!--                </ion-textarea>-->
+        <!--            </ion-item>-->
+        <!--            <ion-item>-->
+        <!--                <div style="display: flex; padding: 5px; width: 100%;">-->
+        <!--                    <div style="width: 50%;">-->
+        <!--                        <ion-button size="small" (click)="requestReject(item)" color="danger" fill="clear" shape="round">Reject</ion-button>-->
+        <!--                    </div>-->
+        <!--                    <div style="width: 50%; text-align: right;">-->
+        <!--                        <ion-button size="small" (click)="requestStart(item)" color="success" fill="solid" shape="round">Start Now</ion-button>-->
+        <!--                    </div>-->
+        <!--                </div>-->
+        <!--            </ion-item>-->
+        <!--        </ion-list>-->
+        <!--        </div>-->
+        <!--    </div>-->
+
+
     </div>
-
-      <div *ngIf="currOpenOffer !='' && currOpenOffer==item.offer_uid" style="border-radius: 10px; margin: 15px;">
-          <div>
-              <div style="font-size: 14px; background-color: transparent;">
-                  <div>
-                      <ion-label class="bold_text ion-text-wrap">{{item.title}}</ion-label>
-                  </div>
-                  <div>
-                      <ion-label  class="ion-text-wrap">{{item.description}}</ion-label>
-                  </div>
-                  <div>
-                      <ion-label  class="ion-text-nowrap price">Reward : {{item.price*0.01| number : '1.2-2'}} {{item.currency}} Duration : {{item.timeline_days}} day(s) </ion-label>
-                  </div>
-
-                  <div>
-                      <ion-textarea
-                              style="height: 120px; background-color: white; padding: 5px;  margin: 0; font-size: 14px; border-radius: 5px;"
-                              [autoGrow]="false"
-                              [rows]="5"
-                              [readonly]="true"
-                              value={{item.job_description}}
-                      >
-                      </ion-textarea>
-                  </div>
-                  <div>
-                      <div style="display: flex; padding: 5px; width: 100%;">
-                          <div style="width: 50%;">
-                              <ion-button size="small" (click)="requestReject(item)" color="danger" fill="clear" shape="round"><b>Reject</b></ion-button>
-                          </div>
-                          <div style="width: 50%; text-align: right;">
-                              <ion-button size="small" (click)="requestStart(item)" color="success" fill="solid" shape="round">Start Now</ion-button>
-                          </div>
-                      </div>
-                  </div>
-              </div>
-          </div>
-      </div>
-
-
-<!--      <div *ngIf="currOpenOffer !='' && currOpenOffer==item.offer_uid" style="border-radius: 10px; margin: 15px;">-->
-<!--       <div>-->
-<!--        <ion-list style="font-size: 14px; background-color: transparent;">-->
-<!--            <ion-item>-->
-<!--                <ion-label class="bold_text ion-text-wrap">{{item.title}}</ion-label>-->
-<!--            </ion-item>-->
-<!--            <ion-item>-->
-<!--                <ion-label  class="ion-text-wrap">{{item.description}}</ion-label>-->
-<!--            </ion-item>-->
-<!--            <ion-item>-->
-<!--                <ion-label  class="ion-text-nowrap price">{{item.price*0.01| number : '1.2-2'}} {{item.currency}} {{item.timeline_days}} day(s) </ion-label>-->
-<!--            </ion-item>-->
-
-<!--            <ion-item>-->
-<!--                <ion-textarea-->
-<!--                        style="height: 120px; background-color: whitesmoke; margin: 0; font-size: 14px"-->
-<!--                        [autoGrow]="false"-->
-<!--                        [rows]="5"-->
-<!--                        value={{item.job_description}}-->
-<!--                >-->
-<!--                </ion-textarea>-->
-<!--            </ion-item>-->
-<!--            <ion-item>-->
-<!--                <div style="display: flex; padding: 5px; width: 100%;">-->
-<!--                    <div style="width: 50%;">-->
-<!--                        <ion-button size="small" (click)="requestReject(item)" color="danger" fill="clear" shape="round">Reject</ion-button>-->
-<!--                    </div>-->
-<!--                    <div style="width: 50%; text-align: right;">-->
-<!--                        <ion-button size="small" (click)="requestStart(item)" color="success" fill="solid" shape="round">Start Now</ion-button>-->
-<!--                    </div>-->
-<!--                </div>-->
-<!--            </ion-item>-->
-<!--        </ion-list>-->
-<!--        </div>-->
-<!--    </div>-->
-
-
-  </div>
 </div>
diff --git a/src/app/components/offers-received/offers-received.component.scss b/src/app/components/offers-received/offers-received.component.scss
index a102246..8250cd1 100644
--- a/src/app/components/offers-received/offers-received.component.scss
+++ b/src/app/components/offers-received/offers-received.component.scss
@@ -2,71 +2,80 @@
   font-size: 16px;
   font-weight: bolder;
 }
-.offerBanner{
+
+.soft_label {
+  color: #0b5e86;
+}
+
+.offerBanner {
   box-shadow: 2px 1px 1px #bbadad;
- //background-color: #e8f1e8;
-  background: linear-gradient(to top, #f0f8ff 0%, #f0f9fd 100%);
+  //background-color: #e8f1e8;
+  background: linear-gradient(to top, #f6f8fa 0%, #f0f9fd 100%);
   border-radius: 10px;
   border-color: #383a3e;
   margin-top: 10px;
   margin-bottom: 5px;
-  //display: flex;
-  .offer_title{
+
+  .offer_title {
     font-size: 16px;
     font-weight: bolder;
-    //width: 100%;
-    //display: block;
-    //white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     padding-top: 5px;
-    height: 55px;
-   // background-color:whitesmoke;
+    height: 35px;
   }
-  .price{
+
+  .price {
     margin-top: 5px;
     margin-bottom: 5px;
-    color:green;
+    color: green;
     font-size: 14px;
     font-weight: bolder;
   }
-  .expire{
+
+  .expire {
     font-weight: bold;
     color: red;
     font-size: 14px;
   }
 }
 
-.offers_div{
+.offers_div {
   background-color: aliceblue;
   border-radius: 10px;
   border-color: #383a3e;
   margin: 10px 0 10px 0;
-  .offer_title{
+
+  .offer_title {
     font-size: 18px;
     font-weight: bolder;
   }
-  .action_area{
-    background-color:whitesmoke;
+
+  .action_area {
+    background-color: whitesmoke;
   }
-  .offer_banner{
+
+  .offer_banner {
     border-radius: 100%;
     background-color: white;
     width: 100%;
     height: auto;
   }
-  .price{
+
+  .price {
     margin-top: 5px;
     margin-bottom: 5px;
-    color:green;
+    color: green;
     font-size: 14px;
   }
-  .expire{
+
+  .expire {
     font-weight: bold;
     color: red;
     font-size: 10px;
   }
-  .detail_txt{
+
+  .detail_txt {
     font-size: 14px;
     margin: 5px;
     font-weight: bold;
@@ -75,15 +84,16 @@
     min-height: 120px;
     padding: 3px;
     overflow: hidden;
-    text-overflow:ellipsis;
+    text-overflow: ellipsis;
   }
 }
 
 ion-content {
 
-  .hdt{
+  .hdt {
     padding-bottom: 10px;
   }
+
   .back_image {
     width: 100%;
     height: 100px;
@@ -432,32 +442,35 @@ ion-content {
   }
 
 
-
   .bold_text {
     font-size: 20px;
     font-family: 'bold';
   }
 }
 
-ion-card{
+ion-card {
   border-color: #3dc2ff;
   background-color: aliceblue;
   margin-left: 0px;
   margin-right: 0px;
-  ion-card-content{
+
+  ion-card-content {
     font-size: 14px;
   }
-  ion-card-subtitle{
+
+  ion-card-subtitle {
     color: red;
   }
-  .top_banner{
+
+  .top_banner {
     background-color: white;
     width: 100%;
     //background-color: #2dd36f;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
-    .offer_banner{
+
+    .offer_banner {
       width: auto;
       height: 100px;
       background-size: contain;
@@ -466,12 +479,14 @@ ion-card{
     }
   }
 
-  .offer_title{
+  .offer_title {
     font-size: 18px;
   }
-  ion-grid{
+
+  ion-grid {
     background-color: white;
-    ion-col{
+
+    ion-col {
       text-align: center;
     }
   }