From 79f7370bba4f7d5360016b153ad541bb342a4501 Mon Sep 17 00:00:00 2001
From: prahalad <prahlad@webtrigon.com>
Date: Wed, 16 Mar 2022 16:50:54 +0530
Subject: [PATCH] HII, SPData, SpSchema Table in Implementation Segment

---
 .../partner-details.component.html            | 737 ++++++++----------
 .../partner-details.component.scss            |  21 +-
 2 files changed, 342 insertions(+), 416 deletions(-)

diff --git a/src/app/dashboard/partner-details/partner-details.component.html b/src/app/dashboard/partner-details/partner-details.component.html
index 0bbdb4a..7070534 100644
--- a/src/app/dashboard/partner-details/partner-details.component.html
+++ b/src/app/dashboard/partner-details/partner-details.component.html
@@ -11,486 +11,395 @@
             </button>
             <button class="button" [ngClass]="{'active' : selectedSegment === 2}" (click)="selectedSegment = 2"
                 *ngIf="partnerDetails.surveyCtoData.hiiData.length > 0 || partnerDetails.surveyCtoData.spData.length > 0 || partnerDetails.surveyCtoData.spSchemeData.length > 0">
-                Implementation Data </button>
+                Implementation Data 
+            </button>
         </div>
 
         <ng-container *ngIf="selectedSegment === 1">
-            <section class="card">
-                <header>
-                    <h5> Primary Contact </h5>
-                </header>
-
-                <div class="container">
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.primaryContact.name">
-                        <label> Name </label>
-                    </div>
+            <section class="card-holder">
+                <section class="card">
+                    <header>
+                        <h5> Primary Contact </h5>
+                    </header>
 
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.primaryContact.designation">
-                        <label> Designation </label>
-                    </div>
+                    <div class="container">
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.primaryContact.name">
+                            <label> Name </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.primaryContact.email">
-                        <label> Email </label>
-                    </div>
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.primaryContact.designation">
+                            <label> Designation </label>
+                        </div>
+
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.primaryContact.email">
+                            <label> Email </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.primaryContact.contactNumber">
-                        <label> Contact </label>
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.primaryContact.contactNumber">
+                            <label> Contact </label>
+                        </div>
                     </div>
-                </div>
-            </section>
+                </section>
 
-            <section class="card">
-                <header>
-                    <h5> Basic Info </h5>
-                </header>
+                <section class="card">
+                    <header>
+                        <h5> Basic Info </h5>
+                    </header>
 
-                <div class="container">
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.organizationBasicInfo.name">
-                        <label> Name </label>
-                    </div>
+                    <div class="container">
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.organizationBasicInfo.name">
+                            <label> Name </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.organizationBasicInfo.website">
-                        <label> Official Website </label>
-                    </div>
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.organizationBasicInfo.website">
+                            <label> Official Website </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.organizationBasicInfo.type">
-                        <label> Type </label>
-                    </div>
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.organizationBasicInfo.type">
+                            <label> Type </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <ng-select [items]="areasOfWork" [readonly]="!isFormEditable" [multiple]="true"
-                            [closeOnSelect]="false" [searchable]="false" bindLabel="name"
-                            placeholder="Select areas of work"
-                            [(ngModel)]="partnerDetails.organizationBasicInfo.areasOfWork">
-                        </ng-select>
-                        <label> Thematic areas of work </label>
-                    </div>
+                        <div class="input-holder">
+                            <ng-select [items]="areasOfWork" [readonly]="!isFormEditable" [multiple]="true"
+                                [closeOnSelect]="false" [searchable]="false" bindLabel="name"
+                                placeholder="Select areas of work"
+                                [(ngModel)]="partnerDetails.organizationBasicInfo.areasOfWork">
+                            </ng-select>
+                            <label> Thematic areas of work </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.organizationBasicInfo.source">
-                        <label> How did you hear about us </label>
-                    </div>
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.organizationBasicInfo.source">
+                            <label> How did you hear about us </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.organizationBasicInfo.referralName">
-                        <label> Name of the organisation and person that referred </label>
-                    </div>
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.organizationBasicInfo.referralName">
+                            <label> Name of the organisation and person that referred </label>
+                        </div>
 
-                    <div class="checkbox-holder">
-                        <input type="checkbox" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.organizationBasicInfo.wouldLikeUpdates">
-                        <label> I would like to receive periodic updates about CAC </label>
-                    </div>
+                        <div class="checkbox-holder">
+                            <input type="checkbox" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.organizationBasicInfo.wouldLikeUpdates">
+                            <label> I would like to receive periodic updates about CAC </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <textarea type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.organizationBasicInfo.reasonForBecomingMember"></textarea>
-                        <label> I would like to become a member of CAC because </label>
+                        <div class="input-holder">
+                            <textarea type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.organizationBasicInfo.reasonForBecomingMember"></textarea>
+                            <label> I would like to become a member of CAC because </label>
+                        </div>
                     </div>
-                </div>
 
-            </section>
+                </section>
 
-            <section class="card">
-                <header>
-                    <h5> Alternative Contact </h5>
-                </header>
+                <section class="card">
+                    <header>
+                        <h5> Alternative Contact </h5>
+                    </header>
 
-                <div class="container">
+                    <div class="container">
 
 
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.alternateContact.designation">
-                        <label> Name </label>
-                    </div>
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.alternateContact.designation">
+                            <label> Name </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.alternateContact.email">
-                        <label> Name </label>
-                    </div>
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.alternateContact.email">
+                            <label> Name </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.alternateContact.contactNumber">
-                        <label> Contact </label>
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.alternateContact.contactNumber">
+                            <label> Contact </label>
+                        </div>
                     </div>
-                </div>
-            </section>
+                </section>
 
-            <section class="card">
-                <header>
-                    <h5> Detailed Profile </h5>
-                </header>
+                <section class="card">
+                    <header>
+                        <h5> Detailed Profile </h5>
+                    </header>
 
-                <div class="container">
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.detailedProfile.partnerLocation">
-                        <label> Partner/Organization/Network Headquarters Location </label>
-                    </div>
+                    <div class="container">
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.detailedProfile.partnerLocation">
+                            <label> Partner/Organization/Network Headquarters Location </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.detailedProfile.state">
-                        <label> State </label>
-                    </div>
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.detailedProfile.state">
+                            <label> State </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.detailedProfile.district">
-                        <label> District </label>
-                    </div>
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.detailedProfile.district">
+                            <label> District </label>
+                        </div>
 
-                    <div class="checkbox-holder">
-                        <input type="checkbox" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.detailedProfile.haveBranchesInOtherDistricts">
-                        <label> Do you have Branches / Field presence in any other District? </label>
-                    </div>
+                        <div class="checkbox-holder">
+                            <input type="checkbox" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.detailedProfile.haveBranchesInOtherDistricts">
+                            <label> Do you have Branches / Field presence in any other District? </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <ng-select [items]="countries" [readonly]="!isFormEditable" [multiple]="true"
-                            [closeOnSelect]="false" bindLabel="name" placeholder="Select countries"
-                            [(ngModel)]="partnerDetails.detailedProfile.branchLocationCountries">
-                        </ng-select>
-                        <label> Branch or Field office Location (Countries) </label>
-                    </div>
+                        <div class="input-holder">
+                            <ng-select [items]="countries" [readonly]="!isFormEditable" [multiple]="true"
+                                [closeOnSelect]="false" bindLabel="name" placeholder="Select countries"
+                                [(ngModel)]="partnerDetails.detailedProfile.branchLocationCountries">
+                            </ng-select>
+                            <label> Branch or Field office Location (Countries) </label>
+                        </div>
+
+                        <ng-container *ngIf="hasIndiaBranchLocation()">
+                            <div class="input-holder">
+                                <ng-select [items]="states" [readonly]="!isFormEditable" [multiple]="true"
+                                    [closeOnSelect]="false" [searchable]="false" bindLabel="name"
+                                    placeholder="Select states" (change)="updateDistricts($event)"
+                                    [(ngModel)]="partnerDetails.detailedProfile.states">
+                                </ng-select>
+                                <label> Branch or Field office Location (States) </label>
+                            </div>
+
+                            <div class="input-holder">
+                                <ng-select [items]="districts" [readonly]="!isFormEditable" [multiple]="true"
+                                    [closeOnSelect]="false" [searchable]="false" bindLabel="name"
+                                    placeholder="Select districts" [(ngModel)]="partnerDetails.detailedProfile.districts">
+                                </ng-select>
+                                <label> Branch or Field office Location (Districts) </label>
+                            </div>
+                        </ng-container>
 
-                    <ng-container *ngIf="hasIndiaBranchLocation()">
                         <div class="input-holder">
-                            <ng-select [items]="states" [readonly]="!isFormEditable" [multiple]="true"
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.detailedProfile.yearOfEstablishment">
+                            <label> Which year your organisation/partner/network was established? </label>
+                        </div>
+
+                        <div class="input-holder">
+                            <ng-select [items]="communities" [readonly]="!isFormEditable" [multiple]="true"
                                 [closeOnSelect]="false" [searchable]="false" bindLabel="name"
-                                placeholder="Select states" (change)="updateDistricts($event)"
-                                [(ngModel)]="partnerDetails.detailedProfile.states">
+                                placeholder="Select communities" [(ngModel)]="partnerDetails.detailedProfile.communities">
                             </ng-select>
-                            <label> Branch or Field office Location (States) </label>
+                            <label> Which communities do you work with? </label>
                         </div>
 
                         <div class="input-holder">
-                            <ng-select [items]="districts" [readonly]="!isFormEditable" [multiple]="true"
-                                [closeOnSelect]="false" [searchable]="false" bindLabel="name"
-                                placeholder="Select districts" [(ngModel)]="partnerDetails.detailedProfile.districts">
+                            <ng-select [items]="preferredModesOfCommunication" [readonly]="!isFormEditable"
+                                [multiple]="true" [closeOnSelect]="false" [searchable]="false" bindLabel="name"
+                                placeholder="Select mode of communication"
+                                [(ngModel)]="partnerDetails.detailedProfile.preferredModeOfCommunications">
                             </ng-select>
-                            <label> Branch or Field office Location (Districts) </label>
+                            <label> Select your preferred mode of communications with the Collab</label>
                         </div>
-                    </ng-container>
 
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.detailedProfile.yearOfEstablishment">
-                        <label> Which year your organisation/partner/network was established? </label>
-                    </div>
+                        <div class="input-holder">
+                            <ng-select [items]="preferredLanguages" [readonly]="!isFormEditable" [multiple]="true"
+                                [closeOnSelect]="false" [searchable]="false" bindLabel="name"
+                                placeholder="Select preferred Language"
+                                [(ngModel)]="partnerDetails.detailedProfile.preferredLanguages">
+                            </ng-select>
+                            <label> Preferred Language of Communication* (emails, webinars etc. Select all that apply)
+                            </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <ng-select [items]="communities" [readonly]="!isFormEditable" [multiple]="true"
-                            [closeOnSelect]="false" [searchable]="false" bindLabel="name"
-                            placeholder="Select communities" [(ngModel)]="partnerDetails.detailedProfile.communities">
-                        </ng-select>
-                        <label> Which communities do you work with? </label>
-                    </div>
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.detailedProfile.totalReachOfOrganization">
+                            <label> What is the total reach of your organisation in a year? </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <ng-select [items]="preferredModesOfCommunication" [readonly]="!isFormEditable"
-                            [multiple]="true" [closeOnSelect]="false" [searchable]="false" bindLabel="name"
-                            placeholder="Select mode of communication"
-                            [(ngModel)]="partnerDetails.detailedProfile.preferredModeOfCommunications">
-                        </ng-select>
-                        <label> Select your preferred mode of communications with the Collab</label>
+                        <div class="input-holder">
+                            <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.detailedProfile.bio"></textarea>
+                            <label> Bio (This information will be displayed along with your logo in the members section of
+                                this website. Max:100 Characters) </label>
+                        </div>
                     </div>
+                </section>
 
-                    <div class="input-holder">
-                        <ng-select [items]="preferredLanguages" [readonly]="!isFormEditable" [multiple]="true"
-                            [closeOnSelect]="false" [searchable]="false" bindLabel="name"
-                            placeholder="Select preferred Language"
-                            [(ngModel)]="partnerDetails.detailedProfile.preferredLanguages">
-                        </ng-select>
-                        <label> Preferred Language of Communication* (emails, webinars etc. Select all that apply)
-                        </label>
-                    </div>
+                <section class="card">
+                    <header>
+                        <h5>
+                            Strength &amp; Capability
+                        </h5>
+                    </header>
 
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.detailedProfile.totalReachOfOrganization">
-                        <label> What is the total reach of your organisation in a year? </label>
-                    </div>
+                    <div class="container">
+                        <div class="input-holder">
+                            <ng-select [items]="areasOfSupport" [readonly]="!isFormEditable" [multiple]="true"
+                                [closeOnSelect]="false" [searchable]="false" bindLabel="name" placeholder="Select areas"
+                                [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequired">
+                            </ng-select>
+                            <label> What are the primary areas of support that you seek from #COVIDActionCollab? </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.detailedProfile.bio"></textarea>
-                        <label> Bio (This information will be displayed along with your logo in the members section of
-                            this website. Max:100 Characters) </label>
-                    </div>
-                </div>
-            </section>
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequiredOther">
+                            <label> If other, please describe </label>
+                        </div>
 
-            <section class="card">
-                <header>
-                    <h5>
-                        Strength &amp; Capability
-                    </h5>
-                </header>
-
-                <div class="container">
-                    <div class="input-holder">
-                        <ng-select [items]="areasOfSupport" [readonly]="!isFormEditable" [multiple]="true"
-                            [closeOnSelect]="false" [searchable]="false" bindLabel="name" placeholder="Select areas"
-                            [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequired">
-                        </ng-select>
-                        <label> What are the primary areas of support that you seek from #COVIDActionCollab? </label>
-                    </div>
+                        <div class="input-holder">
+                            <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequiredDescription"></textarea>
+                            <label> Kindly elaborate on the option(s) selected above </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequiredOther">
-                        <label> If other, please describe </label>
-                    </div>
+                        <div class="input-holder">
+                            <ng-select [items]="areasOfSupport" [readonly]="!isFormEditable" [multiple]="true"
+                                [closeOnSelect]="false" [searchable]="false" bindLabel="name" placeholder="Select areas"
+                                [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOffered">
+                            </ng-select>
+                            <label> What are the areas in which you can support/contribute to the #COVIDActionCollab and its
+                                partners? </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequiredDescription"></textarea>
-                        <label> Kindly elaborate on the option(s) selected above </label>
-                    </div>
+                        <div class="input-holder">
+                            <input type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOfferedOther">
+                            <label> If other, please describe </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <ng-select [items]="areasOfSupport" [readonly]="!isFormEditable" [multiple]="true"
-                            [closeOnSelect]="false" [searchable]="false" bindLabel="name" placeholder="Select areas"
-                            [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOffered">
-                        </ng-select>
-                        <label> What are the areas in which you can support/contribute to the #COVIDActionCollab and its
-                            partners? </label>
-                    </div>
+                        <div class="input-holder">
+                            <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOfferedDescription"></textarea>
+                            <label> Kindly elaborate on the option(s) selected above </label>
+                        </div>
 
-                    <div class="input-holder">
-                        <input type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOfferedOther">
-                        <label> If other, please describe </label>
+                        <div class="input-holder">
+                            <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}"
+                                [(ngModel)]="partnerDetails.strengthAndCapability.otherSpecificSupportRequired"></textarea>
+                            <label> Do you require any other specific support? </label>
+                        </div>
                     </div>
+                </section>
 
-                    <div class="input-holder">
-                        <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOfferedDescription"></textarea>
-                        <label> Kindly elaborate on the option(s) selected above </label>
+                <div class="card">
+                    <div class="checkbox-holder">
+                        <input type="checkbox" disabled [(ngModel)]="partnerDetails.didAgree">
+                        <label> I agree to the <a href="https://covidactioncollab.org/Mou-charter/" target="_blank">MOU &
+                                Charter</a>. </label>
                     </div>
-
-                    <div class="input-holder">
-                        <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}"
-                            [(ngModel)]="partnerDetails.strengthAndCapability.otherSpecificSupportRequired"></textarea>
-                        <label> Do you require any other specific support? </label>
+                    <div class="checkbox-holder">
+                        <input type="checkbox" disabled [(ngModel)]="partnerDetails.didDeclare">
+                        <label> I/We hereby declare that I/we neither support nor are associated with any act which
+                            promotes: 1. Human trafficking; 2. Smoking / Chewing tobacco; 3. Violence / terrorism 4. Child
+                            labour / Child Marriage 5. Discrimination based color, race, religion, caste, disability &
+                            sexual orientation 6. Mining 7. Terrorism 8. Abortion counselling referrals, advocate to
+                            decriminalise abortion or expand abortion services. </label>
                     </div>
                 </div>
             </section>
-
-            <div class="card">
-                <div class="checkbox-holder">
-                    <input type="checkbox" disabled [(ngModel)]="partnerDetails.didAgree">
-                    <label> I agree to the <a href="https://covidactioncollab.org/Mou-charter/" target="_blank">MOU &
-                            Charter</a>. </label>
-                </div>
-                <div class="checkbox-holder">
-                    <input type="checkbox" disabled [(ngModel)]="partnerDetails.didDeclare">
-                    <label> I/We hereby declare that I/we neither support nor are associated with any act which
-                        promotes: 1. Human trafficking; 2. Smoking / Chewing tobacco; 3. Violence / terrorism 4. Child
-                        labour / Child Marriage 5. Discrimination based color, race, religion, caste, disability &
-                        sexual orientation 6. Mining 7. Terrorism 8. Abortion counselling referrals, advocate to
-                        decriminalise abortion or expand abortion services. </label>
-                </div>
-            </div>
         </ng-container>
 
+
         <ng-container *ngIf="selectedSegment === 2">
-            <section class="card" *ngIf="partnerDetails.surveyCtoData.hiiData.length > 0">
-                <header>
-                    <h5> HII Data </h5>
-                </header>
-                <section class="table" *ngFor="let package of partnerDetails.surveyCtoData.hiiData">
-                    <div class="row">
-                        <div class="col">
-                            Name
-                        </div>
-                        <div class="col">
-                            {{ package.name }}
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            Implementation Status
-                        </div>
-                        <div class="col">
-                            {{ package.implementationStatus }}
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            No. of Females
-                        </div>
-                        <div class="col">
-                            {{ package.noOfFemales }}
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            No. of Males
-                        </div>
-                        <div class="col">
-                            {{ package.noOfMales }}
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            No. of Transgenders
-                        </div>
-                        <div class="col">
-                            {{ package.noOfTransgender }}
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            Health Package ID
-                        </div>
-                        <div class="col">
-                            {{ package.packagesHealth }}
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            Health Remarks
-                        </div>
-                        <div class="col">
-                            {{ package.healthRemarks }}
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            Disaggregation Note
-                        </div>
-                        <div class="col">
-                            {{ package.disaggregationNote }}
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            Relevant Documents
-                        </div>
-                        <div class="col">
-                            <a *ngIf="package.relevantDocuments" href="{{ package.relevantDocuments }}" target="_blank"> Link </a>
-                            <span *ngIf="!package.relevantDocuments"> - </span>
-                        </div>
-                    </div>
+            <section class="card-holder">
+                <section class="card" *ngIf="partnerDetails.surveyCtoData.hiiData.length > 0">
+                    <header>
+                        <h5> HII Data </h5>
+                    </header>
+                    <section class="table">
+                        <div class="row">
+                            <div class="col">Name</div>
+                            <div class="col">Implementation Status</div>
+                            <div class="col">No. of Females</div>
+                            <div class="col">No. of Males</div>
+                            <div class="col">No. of Transgenders</div>
+                            <div class="col">Health Package ID</div>
+                            <div class="col">Health Remarks</div>
+                            <div class="col">Disaggregation Note</div>
+                            <div class="col">Relevant Documents</div>
+                        </div>
+                        <div class="row" *ngFor="let package of partnerDetails.surveyCtoData.hiiData">
+                            <div class="col">{{ package.name }}</div>
+                            <div class="col">{{ package.implementationStatus }}</div>
+                            <div class="col">{{ package.noOfFemales }}</div>
+                            <div class="col">{{ package.noOfMales }}</div>
+                            <div class="col">{{ package.noOfTransgender }}</div>
+                            <div class="col">{{ package.packagesHealth }}</div>
+                            <div class="col">{{ package.healthRemarks }}</div>
+                            <div class="col">{{ package.disaggregationNote }}</div>
+                            <div class="col">
+                                <a *ngIf="package.relevantDocuments" href="{{ package.relevantDocuments }}" target="_blank"> Link </a>
+                                <span *ngIf="!package.relevantDocuments"> - </span>
+                            </div>
+                        </div>
+                    </section>
+                    
                 </section>
-            </section>
-
-            <section class="card" *ngIf="partnerDetails.surveyCtoData.spData.length > 0">
-                <header>
-                    <h5> SP Data </h5>
-                </header>
-                <section class="table" *ngFor="let package of partnerDetails.surveyCtoData.spData">
-                    <div class="row">
-                        <div class="col">
-                            Name
-                        </div>
-                        <div class="col">
-                            {{ package.name }}
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            Implementation Status
-                        </div>
-                        <div class="col">
-                            {{ package.status }}
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            Female Number
-                        </div>
-                        <div class="col">
-                            {{ package.femaleNo }}
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            Male Number
-                        </div>
-                        <div class="col">
-                            {{ package.maleNo }}
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            Transgenders Number
-                        </div>
-                        <div class="col">
-                            {{ package.tgNo }}
-                        </div>
-                    </div>
 
-                    <div class="row">
-                        <div class="col">
-                            Total Aggregation
-                        </div>
-                        <div class="col">
-                            {{ package.totalAggregation }}
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            Other Remarks
-                        </div>
-                        <div class="col">
-                            {{ package.otherRemarks }}
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            Relevant Documents
-                        </div>
-                        <div class="col">
-                            <a *ngIf="package.relevantDocuments" href="{{ package.relevantDocuments }}" target="_blank"> Link </a>
-                            <span *ngIf="!package.relevantDocuments"> - </span>
-                        </div>
-                    </div>
+                <section class="card" *ngIf="partnerDetails.surveyCtoData.spData.length > 0">
+                    <header>
+                        <h5> SP Data </h5>
+                    </header>
+                    <section class="table">
+                        <div class="row">
+                            <div class="col" >Name</div >
+                            <div class="col" >Implementation Status</div >
+                            <div class="col" >Female Number</div >
+                            <div class="col" >Male Number</div >
+                            <div class="col" >Transgenders Number</div >
+                            <div class="col" >Total Aggregation</div >
+                            <div class="col" >Other Remarks</div >
+                            <div class="col" >Relevant Documents</div >
+                        </div>
+                        <div class="row" *ngFor="let package of partnerDetails.surveyCtoData.spData">
+                            <div class="col">{{ package.name }}</div>
+                            <div class="col"> {{ package.status }}</div>
+                            <div class="col">{{ package.femaleNo }}</div>
+                            <div class="col">{{ package.maleNo }}</div>
+                            <div class="col">{{ package.tgNo }}</div>
+                            <div class="col">{{ package.totalAggregation }}</div>
+                            <div class="col">{{ package.otherRemarks }}</div>
+                            <div class="col">
+                                <a *ngIf="package.relevantDocuments" href="{{ package.relevantDocuments }}" target="_blank"> Link </a>
+                                <span *ngIf="!package.relevantDocuments"> - </span>
+                            </div>
+                        </div>
+                    </section>                  
                 </section>
-            </section>
 
-            <section class="card" *ngIf="partnerDetails.surveyCtoData.spSchemeData.length > 0">
-                <header>
-                    <h5> SP Scheme </h5>
-                </header>
-                <section class="table" *ngFor="let package of partnerDetails.surveyCtoData.spSchemeData">
-                    <div class="row">
-                        <div class="col">
-                            Count
-                        </div>
-                        <div class="col">
-                            {{ package.count }}
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            Scheme Id
+                <section class="card" *ngIf="partnerDetails.surveyCtoData.spSchemeData.length > 0">
+                    <header>
+                        <h5> SP Scheme </h5>
+                    </header>
+
+                    <section class="table">
+                        <div class="row">
+                            <div class="col" >Scheme Id</div >
+                            <div class="col" >Count</div >
                         </div>
-                        <div class="col">
-                            {{ package.schemeId }}
+                        <div class="row" *ngFor="let package of partnerDetails.surveyCtoData.spSchemeData">
+                            <div class="col">{{ package.schemeId }}</div>
+                            <div class="col"> {{ package.count }}</div>
                         </div>
-                    </div>
+                    </section>                 
                 </section>
             </section>
         </ng-container>
@@ -503,7 +412,7 @@
                 Back
             </button>
 
-            <ng-container *ngIf="!isFormEditable">
+            <ng-container *ngIf="!isFormEditable">  
                 <button class="button edit" (click)="isFormEditable=true"> <img src="assets/edit.svg" alt=""> Edit
                 </button>
                 <button class="button" (click)="showExportOptions=true"> <img src="assets/export.svg" alt=""> Export
diff --git a/src/app/dashboard/partner-details/partner-details.component.scss b/src/app/dashboard/partner-details/partner-details.component.scss
index db53a2f..021a3f2 100644
--- a/src/app/dashboard/partner-details/partner-details.component.scss
+++ b/src/app/dashboard/partner-details/partner-details.component.scss
@@ -40,10 +40,16 @@
     }
 }
 
+.card-holder {
+    height: 80vh;
+    overflow: auto;
+    margin-top: 10px;
+}
+
 .footer-buttons {
     display: flex;
     justify-content: flex-end;
-    position: sticky;
+    position: absolute;
     background-color: white;
     box-shadow: 0px 0px 50px var(--input-border);
     bottom: 0;
@@ -99,21 +105,25 @@
     box-shadow: 0px 0px 1px var(--input-border);
     border-radius: var(--common-border-radius);
     margin-bottom: 40px;
+    height: 30vh;
+    overflow: auto;
 
     .row {
         color: var(--secondary-text);
         background-color: white;
         border-radius: var(--common-border-radius);
         transition: border-color 0.3s, box-shadow 0.3s;
-        height: 50px;
+        min-height: 50px;
         border: 2px solid transparent;
         box-shadow: none;
         display: flex;
         align-items: center;
 
+
         .col {
             font-style: 14px;
             width: 50%;
+            padding: 10px 0;
             padding-left: 20px;
 
             &:nth-child(2) {
@@ -124,6 +134,13 @@
         &:nth-child(even) {
             background-color: var(--input-background);
         }
+
+        &:nth-child(1) {
+            background-color: var(--secondary-text);
+            color: white;
+            position: sticky;
+            top: 0;
+        }
     }
 }