From 91d04c64771832a0b8815ffbe1f0f9920320d94d Mon Sep 17 00:00:00 2001
From: Pamela Dragosh <pdragosh@research.att.com>
Date: Tue, 14 Feb 2017 19:41:00 -0500
Subject: Initial OpenECOMP policy/engine commit

Change-Id: I7dbff37733b661643dd4d1caefa3d7dccc361b6e
Signed-off-by: Pamela Dragosh <pdragosh@research.att.com>
---
 .../view-models/profile-page/admin_menu_edit.html  | 175 +++++++++++++
 .../view-models/profile-page/broadcast.html        |  61 +++++
 .../view-models/profile-page/broadcast_list.html   |  71 ++++++
 .../view-models/profile-page/collaborate_list.html |  57 +++++
 .../view-models/profile-page/jcs_admin.html        |  87 +++++++
 .../view-models/profile-page/popup_modal.html      | 282 +++++++++++++++++++++
 .../profile-page/popup_modal_fn_menu_add.html      | 155 +++++++++++
 .../profile-page/popup_modal_fn_menu_edit.html     | 148 +++++++++++
 .../view-models/profile-page/popup_modal_role.html |  82 ++++++
 .../profile-page/popup_modal_rolefunction.html     |  46 ++++
 .../view-models/profile-page/post_search.html      | 139 ++++++++++
 .../view-models/profile-page/profile_detail.html   | 188 ++++++++++++++
 .../view-models/profile-page/profile_search.html   |  72 ++++++
 .../scripts/view-models/profile-page/role.html     | 118 +++++++++
 .../profile-page/role_function_list.html           |  88 +++++++
 .../view-models/profile-page/role_list.html        |  61 +++++
 .../view-models/profile-page/self_profile.html     | 183 +++++++++++++
 .../view-models/profile-page/usage_list.html       |  64 +++++
 18 files changed, 2077 insertions(+)
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/admin_menu_edit.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast_list.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/collaborate_list.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/jcs_admin.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_add.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_edit.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_role.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_rolefunction.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/post_search.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/profile_detail.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/profile_search.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/role.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/role_function_list.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/role_list.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/self_profile.html
 create mode 100644 ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/usage_list.html

(limited to 'ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page')

diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/admin_menu_edit.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/admin_menu_edit.html
new file mode 100644
index 000000000..ee23635fa
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/admin_menu_edit.html
@@ -0,0 +1,175 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+
+<div ng-controller="AdminMenuEditController" >
+	<div class="pageTitle">
+		<br>
+	    <h1 class="heading1" style="margin-left:0px">Admin Menu Items</h1>
+	    <br/>
+	<div style="margin-right: 20px;text-align: justify;text-align-last:auto;">
+		<strong>Add menu item here:</strong>
+	</div>
+		<br/>
+	    <a ng-click="addNewFnMenuItemModalPopup();" class="ion-android-apps" style="font-size:40px;" ></a>
+	</div>
+	<br>
+	<div style="margin-right: 20px;text-align: justify;text-align-last:auto;">
+		<strong>Existing menu items:</strong>
+	</div>
+	<br>
+
+
+
+<div style="width: 30%;">
+<table>
+  <tr>
+  <div style="width: 60%;">
+    <td>Number of records to show:</td>
+  </div>
+    <td>
+	    <div style="width: 40%;">
+	    	<input type="text" id="numberOfRecordstoShow" name="numberOfRecordstoShow" ng-model="numberOfRecordstoShow">
+	    </div>
+    </td>
+  </tr>
+</table>	
+  
+</div> 
+
+<!--  freeze header
+<div class="scrolling-table" style="width: 100%;">
+    <table  att-table table-data="fnMenuItems" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+			<thead  att-table-row>
+				<tr align="left">
+				<th att-table-header sortable="true" key="id" default-sort="a">Menu ID</th>
+				<th att-table-header sortable="true" key="label">Label</th>
+	            <th att-table-header sortable="true" key="ParentId">ParentId</th>
+	            <th att-table-header sortable="true" key="sortOrder">Sort Order</th>
+	            <th att-table-header sortable="true" key="action">Action</th>
+	            <th att-table-header sortable="true" key="functionCd">Function</th>
+	            <th att-table-header sortable="true" key="active">Active</th>
+	            <th att-table-header sortable="true" key="servlet">Servlet</th>
+	            <th att-table-header sortable="true" key="queryString">Query String</th>
+	            <th att-table-header sortable="true" key="externalUrl">External URL</th> 
+	            <th att-table-header sortable="true" key="target">Target</th>
+	            <th att-table-header sortable="true" key="menuSetCode">Menu Set Code</th>
+	            <th att-table-header sortable="true" key="separator">Separator</th>
+	            <th att-table-header sortable="true" key="imageSrc">Image Source</th>     
+
+	            <th att-table-header sortable="false"  key="edit">Edit</th>
+	            <th att-table-header sortable="false" key="delete">Delete</th>       
+		        </tr>
+			</thead>
+        <tbody att-table-row type="body" >
+            <tr>
+                <td id="att-scroll-table-content" att-scrollbar style="width: 86.5%;padding-right:1%;">
+                    <table att-table table-data="fnMenuItems" border="1" view-per-page="scrollViewsPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+                        <tbody att-table-row type="body" row-repeat="fnMenuItem in fnMenuItems | limitTo : numberOfRecordstoShow">
+                            <tr align="left">
+	                <td att-table-body width="1%" >{{ fnMenuItem.id }}</td>
+	                <td att-table-body width="3%" align="left" style="word-break:break-all;">{{ fnMenuItem.label }}</td>
+				    <td att-table-body width="1%" align="left">{{ fnMenuItem.parentId }}</td>
+				    <td att-table-body width="1%" align="left">{{ fnMenuItem.sortOrder }}</td>
+				    <td att-table-body width="3%" style="word-break:break-all;">{{ fnMenuItem.action }}</td>
+				    <td att-table-body width="1%" style="word-break:break-all;">{{ fnMenuItem.functionCd }}</td>
+				    <td att-table-body width="1%" style="word-break:break-all;" align="left">{{ fnMenuItem.active ? "Y" : "N"}}</td>
+				    <td att-table-body width="3%" style="word-break:break-all;" align="left">{{ fnMenuItem.servlet }}</td>
+				    <td att-table-body width="3%" style="word-break:break-all;" align="left">{{ fnMenuItem.queryString }}</td>
+				    <td att-table-body width="3%" style="word-break:break-all;" align="left">{{ fnMenuItem.externalUrl }}</td>
+				    <td att-table-body width="3%" style="word-break:break-all;" align="left">{{ fnMenuItem.target }}</td>
+				    <td att-table-body width="3%" style="word-break:break-all;" align="left">{{ fnMenuItem.menuSetCode }}</td>
+				    <td att-table-body width="3%" style="word-break:break-all;" align="left">{{ fnMenuItem.separator ? "Y" : "N"}}</td>
+				    <td att-table-body width="3%" style="word-break:break-all;" align="left">{{ fnMenuItem.imageSrc }}</td>
+					
+				    <td att-table-body width="1%" align="right">
+				    	<div ng-click="editMenuItemModalPopup(fnMenuItem);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-edit"></a></div>
+				    </td>				
+					<td att-table-body width="1%" align="right">
+			    		<div ng-click="removeMenuItem(fnMenuItem);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
+			     	</td>
+
+                            </tr>
+                        </tbody>
+                    </table>
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+ 
+
+<br><br><br><br><br><br><br><br><br><br><br><br>
+  
+-->
+	<div  id="menusTable" title="Menu Items">	
+		<table att-table table-data="fnMenuItems" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+			<thead  att-table-row type="header">
+				<tr>
+				<th att-table-header sortable="true" key="id" default-sort="a">Menu ID</th>
+				<th att-table-header sortable="true" key="label">Label</th>
+	            <th att-table-header sortable="true" key="ParentId">ParentId</th>
+	            <th att-table-header sortable="true" key="sortOrder">Sort Order</th>
+	            <th att-table-header sortable="true" key="action">Action</th>
+	            <th att-table-header sortable="true" key="functionCd">Function</th>
+	            <th att-table-header sortable="true" key="active">Active</th>
+	            <th att-table-header sortable="true" key="servlet">Servlet</th>
+	            <th att-table-header sortable="true" key="queryString">Query String</th>
+	            <th att-table-header sortable="true" key="externalUrl">External URL</th> 
+	            <th att-table-header sortable="true" key="target">Target</th>
+	            <th att-table-header sortable="true" key="menuSetCode">Menu Set Code</th>
+	            <th att-table-header sortable="true" key="separator">Separator</th>
+	            <th att-table-header sortable="true" key="imageSrc">Image Source</th>     
+
+	            <th att-table-header sortable="false" key="edit">Edit</th>
+	            <th att-table-header sortable="false" key="delete">Delete</th>       
+		        </tr>
+			</thead>
+			<tbody att-table-row type="body" row-repeat="fnMenuItem in fnMenuItems | limitTo : numberOfRecordstoShow">
+				<tr>
+	                <td att-table-body width="1%" style="word-break:break-all;" ng-bind="fnMenuItem.id"></td>
+	                <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.label"></td>
+				    <td att-table-body width="1%" style="word-break:break-all;" ng-bind="fnMenuItem.parentId"></td>
+				    <td att-table-body width="1%" style="word-break:break-all;" ng-bind="fnMenuItem.sortOrder"></td>
+				    <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.action"></td>
+				    <td att-table-body width="1%" style="word-break:break-all;" ng-bind="fnMenuItem.functionCd"></td>
+				    <td att-table-body width="1%" style="word-break:break-all;" ng-bind="fnMenuItem.active ? 'Y' : 'N'"></td>
+				    <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.servlet"></td>
+				    <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.queryString"></td>
+				    <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.externalUrl"></td>
+				    <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.target"></td>
+				    <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.menuSetCode"></td>
+				    <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.separator ? 'Y' : 'N'"></td>
+				    <td att-table-body width="3%" style="word-break:break-all;" ng-bind="fnMenuItem.imageSrc"></td>
+					
+				    <td att-table-body width="1%">
+				    	<div ng-click="editMenuItemModalPopup(fnMenuItem);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-edit"></a></div>
+				    </td>				
+					<td att-table-body width="1%">
+			    		<div ng-click="removeMenuItem(fnMenuItem);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-trash-b"></a></div>
+			     	</td>	
+			    </tr>
+			</tbody>
+			
+		</table>
+	</div>	
+
+
+</div>
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast.html
new file mode 100644
index 000000000..a14da0565
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast.html
@@ -0,0 +1,61 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<div style="width:80%;margin-bottom:20px">
+		<br/>
+	      <h1 class="heading1">Broadcast Message Edit</h1>
+	    <br/>
+		
+		<div ng-controller="broadcastController" >    
+				 Please edit the broadcast message details below:&nbsp;<br><br>
+			<div class="fn-ebz-container" >
+			        <label class="fn-ebz-text-label"><sup><b>*</b></sup>Message Text:</label><BR>
+			        <textarea name="comment" ng-model="broadcastMessage.messageText" rows="5" cols="200" style="height:100px"></textarea>
+			</div>
+			<br>
+			<div class="fn-ebz-container" >
+			          <label class="fn-ebz-text-label"><sup><b>*</b></sup>Start Date:</label><BR>
+			          <input type="hidden" name="startDateHidden" ng-model="broadcastMessage.startDate">
+			          <input type="text" class="fn-ebz-text" id="startDatepicker" />
+			</div>
+			
+			<div class="fn-ebz-container" style="margin-left:3em" >
+			          <label class="fn-ebz-text-label"><sup><b>*</b></sup>End Date:</label><BR>
+			          <input type="hidden" name="endDateHidden" ng-model="broadcastMessage.endDate">
+			          <input type="text" class="fn-ebz-text" id="endDatepicker" />
+			</div>
+		
+			<div class="fn-ebz-container" style="margin-left:3em"  >
+				<label class="fn-ebz-text-label"><sup><b>*</b></sup>Sort Order:</label><BR>
+				<input type="text" class="fn-ebz-text" ng-model="broadcastMessage.sortOrder"
+					maxlength="30" /> 
+			</div>
+		 
+		        <div class="fn-ebz-container" style="margin-left:1em" >	
+						<label  class="fn-ebz-text-label">Server:</label><BR>
+						<div class="form-field" att-select="broadcastSites" ng-model="broadcastMessage.siteCd"></div>
+				</div>
+		          
+				<br>
+			<div align="left" >
+				<button type="submit" ng-click="save();" att-button	btn-type="primary" size="small">Save</button>
+				<button class="button button--information button--small" herf="javascript:void(0)" ng-click="close();">Cancel</button>
+			</div>
+		</div>
+</div>
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast_list.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast_list.html
new file mode 100644
index 000000000..e9c4c291c
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/broadcast_list.html
@@ -0,0 +1,71 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<div style="width:80%;">
+    
+<div ng-controller="broadcastListController" > 	
+	
+	<h1 class="heading1">Broadcast Messages</h1>
+	<br>
+		<div ng-repeat="location in messageLocations" >
+			{{location.label}} Messages
+			<div title="{{location.label}} Messages">
+				
+			  	<table att-table table-data="location.messages" current-page="1">
+				  	<thead att-table-row type="header">
+				  		<tr>
+				  			<th att-table-header sortable="false" width="10%">No.</th>
+				  			<th att-table-header sortable="false" width="30%">Message Text</th>
+				  			<th att-table-header sortable="false" width="10%">Start Date</th>
+				  			<th att-table-header sortable="false" width="10%">End Date</th>
+				  			<th att-table-header sortable="false" width="10%">Sort Order</th>
+				  			<th att-table-header sortable="false" width="10%">Server</th>
+				  			<th att-table-header sortable="false" width="10%">Active?</th>
+				  			<th att-table-header sortable="false" width="10%">Delete?</th>
+				  		</tr>
+				  	</thead>
+				  	<tbody att-table-row type="body" row-repeat="message in location.messages" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+					  <tr>
+					   {{message.id}}
+					    <td width="10%"><a href="javascript:editMessage({{location.value}},'{{location.label}}',{{message.id}});">{{$index+1}}</a></td>
+					    <td width="30%">{{message.messageText}}</td>
+					    <td width="10%">
+					    	{{message.displayStartDate}}
+					    </td>
+					    <td width="10%">{{message.displayEndDate}}</td>
+					    <td width="10%">{{message.sortOrder}}</td>
+					    <td width="10%">{{message.siteCd}}</td>
+					    <td width="10%">
+					    	<div ng-click="toggleActive(message);">
+					    		<input type="checkbox" ng-model="message.active" att-toggle-main ng-true-value="on" ng-false-value="off">
+					    	</div>
+					    </td>
+					     <td att-table-body width="10%">
+						    <div ng-click="remove(message);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-trash-b"></a></div>
+					     </td>
+					  </tr>
+					 
+					</tbody>
+				</table>
+			</div>
+			<input att-button btn-type="primary" size="small" class="button" type="button" value="Add" ng-click="editMessage(location);"/>
+	  	  <br/><br/><br/>
+		</div>
+	</div>
+</div>
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/collaborate_list.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/collaborate_list.html
new file mode 100644
index 000000000..5f07a47b8
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/collaborate_list.html
@@ -0,0 +1,57 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<div ng-controller="collaborateListController">
+	<div>
+		<h1 class="heading1" style="margin-top:20px;">User List</h1>
+		<div style="margin-top:30px">
+			<table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+
+			    <thead  att-table-row type="header">
+					<tr>
+						<th att-table-header key="id">User ID</th>
+			            <th att-table-header key="lastName">Last Name</th>        
+			            <th att-table-header key="firstName">First Name</th>    
+			            <th att-table-header key="email">Email</th>
+			            <th att-table-header key="orgUserId">User ID</th>        
+			            <th att-table-header key="online">Online/Offline</th>         
+			        </tr>
+			    </thead>
+			    <tbody att-table-row type="body" row-repeat="rowData in tableData">
+			        <tr>
+		            	<td att-table-body ng-bind="rowData['id']">{{rowData.id}}</td>
+		            	<td att-table-body ng-bind="rowData['lastName']">{{rowData.lastName}}</td>
+		            	<td att-table-body ng-bind="rowData['firstName']">{{rowData.firstName}}</td>
+		            	<td att-table-body ng-bind="rowData['email']">{{rowData.email}}</td>
+		            	<td att-table-body ng-bind="rowData['orgUserId']">{{rowData.orgUserId}}</td>
+		        		<td att-table-body >
+		        		   <tag-badges ng-hide="rowData.online" style-type="color" class="lred" ng-click="rowData.isActive=true;openCollaboration(rowData.chatId)">Offline</tag-badges>
+						   <tag-badges ng-show="rowData.online" style-type="color" class="lgreen" ng-click="rowData.isActive=false;openCollaboration(rowData.chatId)">Online</tag-badges>				
+		        	   </td>
+			        </tr>     
+			    </tbody>	  
+			</table>
+		</div>
+	</div>	
+	<input ng-model="currentPage"></input>
+	
+	<a href="JavaScript:void(0);" style= "color:#00547A" onClick="window.open('https://chrome.google.com/webstore/detail/icgmlogfeajbfdffajhoebcfbibfhaen')" id="install-button">
+		Add the Chrome Extension for DescktopCapture and refresh page</a>
+</div>
+<div id="peerBroadcastSection"></div>
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/jcs_admin.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/jcs_admin.html
new file mode 100644
index 000000000..7da457803
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/jcs_admin.html
@@ -0,0 +1,87 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<div ng-controller="cacheAdminController">
+	
+	<h1 class="heading1" >Cache Regions</h1>
+	<br/>
+  	<div style="margin-right:20px;text-align: justify;text-align-last:auto;">
+  	These are the regions which are currently defined in the cache. 'Items'	and 'Bytes' refer to the elements currently in memory (not spooled).
+  	You can clear all items for a region by clicking on the Clear icon next	to the desired region below. You can also <a href="#" ng-click="clearAll();">clear all regions</a> 
+  	which empties the entire cache.
+  	</div>
+	
+		<div style="width: 86%; border-top: 1px solid #c4c4c4; margin-top: 0px; margin-bottom:30px; margin-right: 20px; background-color: #fff; padding: 10px 0; color: #646464s">
+		<div style="margin: 0 20px 10px 0px; font-size: 80%; float: left; width: 97%;">
+			<div class="col-md-4"><b>Cache Name</b></div>
+			<div class="col-md-2"><b># of Items</b></div>
+			<div class="col-md-2"><b>Bytes</b></div>
+			<div class="col-md-2"><b>Status</b></div>
+			<div class="col-md-3"><b>Memory Hits</b></div>
+			<div class="col-md-3"><b>Aux Hits</b></div>
+			<div class="col-md-3"><b>Not Found Misses</b></div>
+			<div class="col-md-3"><b>Expired Misses</b></div>
+			<div class="col-md-1"><b>Clear?</b></div>
+			<div class="col-md-1"><b>Items</b></div>
+		</div>
+		<div ng-repeat="region in regions">
+			<div style="margin: 0 20px 10px 0px; font-size: 80%; float: left; width: 97%;">
+				<div class="col-md-4"><a href="#" tooltip="Click to Show Region Details" ng-click="showRegionDetails(region.cacheName);">{{region.cacheName}}</a></div>
+				<div class="col-md-2">{{region.size}}</div>
+				<div class="col-md-2">{{region.byteCount}}</div>
+				<div class="col-md-2">{{region.status}}</div>
+				<div class="col-md-3">{{region.hitCountRam}}</div>
+				<div class="col-md-3">{{region.hitCountAux}}</div>
+				<div class="col-md-3">{{region.missCountNotFound}}</div>
+				<div class="col-md-3">{{region.missCountExpired}}</div>
+				<div class="col-md-1">
+					<div ng-click="clearRegion(region.cacheName);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-trash-b"></a></div>
+				</div>
+				<div class="col-md-1">
+					<span class="ion-plus-circled col-md-1" ng-class="{minus: bling$index}" ng-hide="plusSign" ng-click="bling$index = !bling$index; plusSign=true" style="display: block;"></span>
+					<span class="ion-minus-circled col-md-1" ng-class="{minus: bling$index}" ng-show="plusSign" ng-click="bling$index = !bling$index; plusSign=false" style="display: block;"></span>
+				</div>
+			</div>
+			<div style="margin: 0px 20px 0px 30px; font-size: 80%; float: left; width: 95%; border-top: 1px solid #e4e4e4; padding-top: 10px"
+				ng-show="bling$index">
+				<span class="att--tree__arrow" style="height: 20px; width: 20px; display: inline-block; float: left"></span>
+				<div class="col-md-12"><b>Key</b></div>
+				<div class="col-md-2"><b>Eternal?</b></div>
+				<div class="col-md-4"><b>Created</b></div>
+				<div class="col-md-2"><b>Max Life</b></div>
+				<div class="col-md-2"><b>Expires</b></div>
+				<div class="col-md-1"><b>Clear?</b></div>
+			</div>
+			<div ng-repeat="item in region.items">
+				<div style="margin: 0px 20px 0px 30px; font-size: 80%; float: left; width: 95%;" ng-show="bling$index">
+					<span class="att--tree__arrow" style="height: 20px; width: 20px; display: inline-block; float: left"></span>
+					<div class="col-md-12"><a href="#" tooltip="Click to Show Item Details" ng-click="showItemDetails(region.cacheName,item.key);">{{item.key}}</a></div>
+					<div class="col-md-2">{{item.eternal}}</div>
+					<div class="col-md-4">{{item.createTime}}</div>
+					<div class="col-md-2">{{item.maxLifeSeconds}}</div>
+					<div class="col-md-2">{{item.expiresInSeconds}}</div>
+					<div class="col-md-1">
+						<div ng-click="clearItem(region.cacheName,item.key);" style="font-size:20px;"><a href="javascript:void(0)" class=""></a></div>
+					</div>
+				</div>
+			</div>
+			<div style="clear: both"></div>
+		</div>
+	</div>
+</div>
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal.html
new file mode 100644
index 000000000..3cde902c2
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal.html
@@ -0,0 +1,282 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<script type="text/ng-template" id="modal_informative.html">
+       <div class="modal__informative font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Success!</h2>
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content" style="white-space: pre-wrap;">{{message.text}}</div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Dismiss</button>
+            </div>
+        </div>
+    </script>
+   
+   
+    <script type="text/ng-template" id="delete_informative.html">
+   <div class="modal__warning font-showcase">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are you sure you want to delete the profile?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+   <script type="text/ng-template" id="email_report_informative.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Mailing your report...</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              The report will be sent to your email soon!
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Ok</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="delete_authCode.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are you sure you want to delete the Authorization Code(s)?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+     <script type="text/ng-template" id="delete_Schedule.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This Schedule(s) ?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="alternate_number.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This Number ?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+     <script type="text/ng-template" id="manage_device.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This Line Port ?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="delete_virtualOnNet.html">
+  		 <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete this Virtual On-Net User?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="delete_user_meet_me_conference.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete this Conference?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+    <script type="text/ng-template" id="confirmation_informative.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">{{message.title}}</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content" style="white-space: pre-wrap;">{{message.text}}<br/></div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div> 
+        </div>
+    </script>
+   
+    <script type="text/ng-template" id="confirmation_for_delete.html">
+   		<div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name"> <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This {{message.title}}?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">Deletions are not reversible. {{message.text}}<br/></div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div> 
+        </div>
+    </script>
+   
+   <script type="text/ng-template" id="modal_warning.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Unable to process your request!</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+			<div class="modal__content" style="white-space: pre-wrap;">Unable to process your request.   <br/>{{message.text}}<br/>
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Dismiss</button>
+            </div>
+        </div>
+    </script>
+    
+    <script type="text/ng-template" id="modal_warning_message.html">
+   <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Warning</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+			<div class="modal__content" style="white-space: pre-wrap;">{{message.text}}<br/>
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Dismiss</button>
+            </div>
+        </div>
+    </script>
+
+
+    
+    <script type="text/ng-template" id="modal_prompt.html">
+       <div class="modal__warning font-showcase">
+          <div class="modal__header">
+              <h2 class="font-showcase-font-name">Unable to process your request. </h2>
+              <i class="icon-circle-action-close close-modal modal__header--close"  ng-click="$dismiss()"></i>
+              
+          </div>
+          <div class="divider-container"><hr> </div>      
+          <div class="modal__content">
+              Unable to process your request.   <br/> {{message.text}}
+          </div>
+   </div>
+    </script>
+     <script type="text/ng-template" id="delete_device.html">
+        <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete This Device?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
+     <script type="text/ng-template" id="delete_multiple_device.html">
+        <div class="modal__warning font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name">Are You Sure You Want to Delete The Device(s)?</h2>
+				
+                <div class="modal__header--icon"></div>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">
+              Deletions are not reversible.<br/> {{message.text}}
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$close()">Yes</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="$dismiss()">Cancel</button>
+            </div>
+        </div>
+    </script>
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_add.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_add.html
new file mode 100644
index 000000000..760f10b55
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_add.html
@@ -0,0 +1,155 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<script type="text/ng-template" id="fn_menu_add_popup.html">
+          <div class="modal__informative font-showcase" style="width:1100px;">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">{{label}}</h2>
+            </div>
+            <div class="divider-container"><hr> </div>
+		      
+            <div class="modal__content" > 
+				<table>
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Label:</label><br>
+								<input id="popupAddMenuItemLabel" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.label" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" style = "display:none" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Parent:</label><br>
+								<input id="popupAddMenuItemParentId" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.parentId" ng-disabled="disableParentId" maxlength="30" /> 
+							</div>
+							<div class="fn-ebz-container" ng-init="getParentData();">
+  								<form name="parentListForm">
+    							<label class="fn-ebz-text-label" for="parentSelect"><sup><b>*</b></sup>Parent:</label><br>
+								<select name="select_projects" id="select_projects" ng-model="addFnMenuItem.parentId">
+									<optgroup label="" ng-repeat="header in childListSelectData">
+										<option label="{{header.label}}" value="{{header.menuId}}" style="color:black;font-weight:bold;">{{header.label}}</option>	
+        									<option  ng-repeat="child in header.children" value="{{child.menuId}}" "{{(addFnMenuItem.parentId===child.menuId) ? 'selected' : '' }}">{{child.label}}</option>
+									</optgroup>
+								</select>
+								<!--
+    							<select class="form-field" name="parentSelect" id="parentSelect" ng-model="addFnMenuItem.parentId">
+								<option>{{getParentLabel(addFnMenuItem.parentId, parentListSelectData)}}</option>
+      							<option ng-repeat="option in parentListSelectData" value="{{option[0]}}" "{{(addFnMenuItem.parentId===option[0]) ? 'selected' : '' }}">{{option[1]}}</option>
+    							</select>
+								-->
+  								</form>
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Sort Order:</label><br>
+								<input id="popupAddMenuItemSortOrder" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.sortOrder" ng-disabled="disableSortOrder"	maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Action:</label><br>
+								<input id="popupAddMenuItemAction" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.action" ng-disabled="disableAction" maxlength="200" /> 
+					        </div>
+						</td>		
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" ng-init="getFunctionCDselectData();">
+  								<form name="functionCDform">
+    							<label class="fn-ebz-text-label" for="repeatSelect"><sup><b>*</b></sup>Function:</label><br>
+    							<select class="form-field" name="repeatSelect" id="repeatSelect" ng-model="addFnMenuItem.functionCd">
+								<option>{{addFnMenuItem.functionCd}}</option>
+      							<option ng-repeat="option in functionCDselectData" value="{{option}}" >{{option}}</option>
+    							</select>
+  								</form>
+							</div>
+						</td>
+						<td>
+						<div class="fn-ebz-container">
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Active:</label><br>
+								<select class="form-field" name="selectActive" ng-model="addFnMenuItem.active">
+  								<option ng-repeat="active in activeStatusOptions" value="{{active.value}}" ng-selected="{{active.value}}=={{addFnMenuItem.active}}" >{{active.title}}</option>
+								</select>
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Servlet:</label><br>
+								<input id="popupAddMenuItemServlet" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.servlet" ng-disabled="disableServlet" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Query String:</label><br>
+								<input id="popupAddMenuItemQueryString" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.queryString" ng-disabled="disableQueryString" maxlength="30" /> 
+							</div>
+						</td>
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>External URL:</label><br>
+								<input id="popupAddMenuItemExternalUrl" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.externalUrl" ng-disabled="disableExternalUrl" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Target:</label><br>
+								<input id="popupAddMenuItemTarget" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.target" ng-disabled="disableTarget" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Menu Set Code:</label><br>
+								<input id="popupAddMenuItemMenuSetCode" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.menuSetCode" ng-disabled="disableMenuSetCode" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Separator:</label><br>
+								<select class="form-field" name="select" ng-model="addFnMenuItem.separator">
+  								<option ng-repeat="separator in separatorStatusOptions" value="{{separator.value}}" ng-selected="{{separator.value}}=={{addFnMenuItem.separator}}" >{{separator.title}}</option>
+								</select>
+							</div>
+						</td>
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Image Source:</label><br>
+								<input id="popupAddMenuItemImageSrc" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.imageSrc" ng-disabled="disableImageSrc" maxlength="30" /> 
+							</div>
+						</td>
+					</tr>
+				</table>
+            </div>
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="updateFnMenu(addFnMenuItem);">Save</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+			<!--
+            <div class="modal__footer">
+            </div>
+			-->
+        </div>
+</script>
+
+
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_edit.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_edit.html
new file mode 100644
index 000000000..4c23ba6fc
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_fn_menu_edit.html
@@ -0,0 +1,148 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<script type="text/ng-template" id="edit_menu_item_popup.html">
+
+          <div class="modal__informative font-showcase" style="width:1100px;">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">{{label}}</h2>
+            </div>
+            <div class="divider-container"><hr> </div>
+			      
+            <div class="modal__content" > 
+				<table>
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Label:</label><br>
+								<input id="popupAddMenuItemLabel" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.label" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" style = "display:none" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Parent:</label><br>
+								<input id="popupAddMenuItemParentId" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.parentId" ng-disabled="disableParentId" maxlength="30" /> 
+							</div>
+							<div class="fn-ebz-container" ng-init="getParentData();">
+  								<form name="parentListForm">
+    							<label class="fn-ebz-text-label" for="parentSelect"><sup><b>*</b></sup>Parent:</label><br>
+    							<select class="form-field" name="parentSelect" id="parentSelect" ng-model="addFnMenuItem.parentId">
+								<option>{{getParentLabel(addFnMenuItem.parentId, parentListSelectData)}}</option>
+      							<option ng-repeat="option in parentListSelectData" value="{{option[0]}}" "{{(addFnMenuItem.parentId===option[0]) ? 'selected' : '' }}">{{option[1]}}</option>
+    							</select>
+  								</form>
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Sort Order:</label><br>
+								<input id="popupAddMenuItemSortOrder" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.sortOrder" ng-disabled="disableSortOrder"	maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Action:</label><br>
+								<input id="popupAddMenuItemAction" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.action" ng-disabled="disableAction" maxlength="30" /> 
+					        </div>
+						</td>		
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" ng-init="getFunctionCDselectData();">
+  								<form name="functionCDform">
+    							<label class="fn-ebz-text-label" for="repeatSelect"><sup><b>*</b></sup>Function:</label><br>
+    							<select class="form-field" name="repeatSelect" id="repeatSelect" ng-model="addFnMenuItem.functionCd">
+								<option>{{addFnMenuItem.functionCd}}</option>
+      							<option ng-repeat="option in functionCDselectData" value="{{option}}" >{{option}}</option>
+    							</select>
+  								</form>
+							</div>
+						</td>
+						<td>
+						<div class="fn-ebz-container">
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Active:</label><br>
+								<select class="form-field" name="selectActive" ng-model="addFnMenuItem.active">
+  								<option ng-repeat="active in activeStatusOptions" value="{{active.value}}" ng-selected="{{active.value}}=={{addFnMenuItem.active}}" >{{active.title}}</option>
+								</select>
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Servlet:</label><br>
+								<input id="popupAddMenuItemServlet" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.servlet" ng-disabled="disableServlet" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Query String:</label><br>
+								<input id="popupAddMenuItemQueryString" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.queryString" ng-disabled="disableQueryString" maxlength="30" /> 
+							</div>
+						</td>
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>External URL:</label><br>
+								<input id="popupAddMenuItemExternalUrl" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.externalUrl" ng-disabled="disableExternalUrl" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Target:</label><br>
+								<input id="popupAddMenuItemTarget" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.target" ng-disabled="disableTarget" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Menu Set Code:</label><br>
+								<input id="popupAddMenuItemMenuSetCode" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.menuSetCode" ng-disabled="disableMenuSetCode" maxlength="30" /> 
+							</div>
+						</td>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b>*</b></sup>Separator:</label><br>
+								<select class="form-field" name="select" ng-model="addFnMenuItem.separator">
+  								<option ng-repeat="separator in separatorStatusOptions" value="{{separator.value}}" ng-selected="{{separator.value}}=={{addFnMenuItem.separator}}" >{{separator.title}}</option>
+								</select>
+							</div>
+						</td>
+					</tr>
+					
+					<tr>
+						<td>
+							<div class="fn-ebz-container" >
+								<label class="fn-ebz-text-label"><sup><b></b></sup>Image Source:</label><br>
+								<input id="popupAddMenuItemImageSrc" type="text" class="fn-ebz-text" ng-model="addFnMenuItem.imageSrc" ng-disabled="disableImageSrc" maxlength="30" /> 
+							</div>
+						</td>
+					</tr>
+				</table>
+            </div>
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="updateFnMenu(addFnMenuItem);">Save</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+			<!--
+            <div class="modal__footer">
+            </div>
+			-->
+        </div>
+</script>
+
+
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_role.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_role.html
new file mode 100644
index 000000000..4663bd466
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_role.html
@@ -0,0 +1,82 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+
+<script type="text/ng-template" id="role_functions_popup.html">
+          <div class="modal__informative font-showcase" style="width:700px;height:500px;overflow:scroll">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">Select Role Functions</h2>
+            </div>
+            <button align="right" class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">           	 	
+				<table table-data="availableRoleFunctions" att-table>
+					<thead att-table-row type="header">
+						<tr>
+							<th att-table-header sortable="false" width="10%"> </th>
+							<th att-table-header sortable="false" width="90%">Role Function</th>
+						</tr>
+					</thead>
+					<tbody att-table-row type="body" row-repeat="availableRoleFunction in availableRoleFunctions" style="max-height: 980px;" >
+					  <tr>
+					  
+						<td width="10%">
+							<div ng-click="toggleRoleFunction(availableRoleFunction.selected,availableRoleFunction);">
+							<input type="checkbox" ng-model="availableRoleFunction.selected" att-toggle-main>
+							</div>
+						</td>
+						<td width="90%">{{ availableRoleFunction.name }}</td>
+						
+					  </tr>
+					</tbody>
+				</table>	
+            </div>
+        </div>
+</script>
+
+
+<script type="text/ng-template" id="child_roles_popup.html">
+          <div class="modal__informative font-showcase" style="width:700px;height:500px;overflow:scroll">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">Select Child Roles</h2>
+            </div>
+            <button align="right" class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">           	 	
+					<table table-data="availableRoles" att-table>
+						<thead att-table-row type="header">
+							<tr>
+								<th att-table-header sortable="false" width="10%"> </th>
+								<th att-table-header sortable="false" width="90%">Role</th>
+							</tr>
+						</thead>
+						<tbody att-table-row type="body" row-repeat="availableRole in availableRoles" style="max-height: 980px;" >
+							<tr>
+							<td att-table-body width="10%">
+								<div ng-click="toggleChildRole(availableRole.selected,availableRole);">
+								<input type="checkbox" ng-model="availableRole.selected" att-toggle-main>
+								</div>
+							</td>
+							<td att-table-body width="90%">{{ availableRole.name }}</td>
+							</tr>
+						</tbody>
+					</table>	
+            </div>
+        </div>
+</script>
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_rolefunction.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_rolefunction.html
new file mode 100644
index 000000000..b9e8ef0e8
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/popup_modal_rolefunction.html
@@ -0,0 +1,46 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<script type="text/ng-template" id="edit_role_function_popup.html">
+          <div class="modal__informative font-showcase" style="width:400px;">
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="width: 500px;">{{label}}</h2>
+            </div>
+            <div class="divider-container"><hr> </div>      
+            <div class="modal__content">           	 	
+					<div class="fn-ebz-container" >
+					<label class="fn-ebz-text-label"><sup><b>*</b></sup>Name:</label><br>
+					<input type="text" class="fn-ebz-text" ng-model="editRoleFunction.name"
+						maxlength="30" /> 
+					</div>
+					<br/>
+					<div class="fn-ebz-container" >
+					<label class="fn-ebz-text-label"><sup><b>*</b></sup>Code:</label><br>
+					<input type="text" class="fn-ebz-text" ng-model="editRoleFunction.code" ng-disabled="disableCd"
+						maxlength="30" /> 
+					</div>
+            </div>
+            <div class="modal__footer">
+                <button class="button button--primary button--small" herf="javascript:void(0)" ng-click="saveRoleFunction(editRoleFunction);">Save</button>
+				<button class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            </div>
+        </div>
+</script>
+
+
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/post_search.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/post_search.html
new file mode 100644
index 000000000..2c4846ddc
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/post_search.html
@@ -0,0 +1,139 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<div style="margin-bottom:20px;">
+<h1 class="heading1">User Search</h1>
+      <br>
+  		Please enter search criteria below:<br/>
+
+            <div class="fn-ebz-container">
+	          Last Name:<br/>
+	          <input class="fn-ebz-text" type="text"   ng-model="postSearchBean.lastName" value="" size="25">
+            </div>
+          
+            <div class="fn-ebz-container">
+	          First Name:<br/>
+	          <input class="fn-ebz-text" type="text" ng-model="postSearchBean.firstName" value="" size="25">
+            </div>
+         
+            <div class="fn-ebz-container">
+	          User ID:<br/>
+	          <input class="fn-ebz-text" type="text" ng-model="postSearchBean.orgUserId" value="" size="25">
+            </div>
+           
+            <div class="fn-ebz-container">
+	          Manager User ID:<br/>
+	          <input class="fn-ebz-text" type="text" ng-model="postSearchBean.orgManagerUserId" value="" size="25">
+            </div>
+           <br>
+            <div class="fn-ebz-container">
+	          Organization:<br/>
+	          <input class="fn-ebz-text" type="text" ng-model="postSearchBean.orgCode" value="" size="25">
+            </div>
+           
+            <div class="fn-ebz-container">
+	          Email:<br/>
+	          <input class="fn-ebz-text" type="text" ng-model="postSearchBean.email" value="" size="25">
+            </div>
+     <br>
+     <div>
+		 	<input att-button btn-type="primary" size="small" class="button" type="submit" value="Search" ng-click="search(postSearchBean);" />
+		
+		    <input att-button btn-type="primary" size="small" class="button" type="submit" value="Reset"  ng-click="reset();"/>
+	 </div>
+	 <br>
+	 
+		{{noResultsString}}
+     
+     <div ng-if="profileList.length != 0">
+  	    <table att-table table-data="profileList" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+		  <thead att-table-row type="header" >
+		    <tr>
+  			<th att-table-header  width="5%" align="left">No</th>
+  			<th att-table-header  width="30%" key="lastName" align="left">Name</th>
+  			<th att-table-header  width="5%"  key="orgUserId" align="left">OrgUserId</th>
+  			<th att-table-header  width="10%" key="orgCode" align="left">Organization</th>
+  			<th att-table-header  width="20%" align="left">Phone</th>
+  			<th att-table-header  width="20%" key="email" align="left">Email</th>
+  			<th att-table-header  width="10%" align="left">Import?</th>
+  			</tr>
+		  </thead>
+         	
+            <tbody att-table-row type="body" row-repeat="profile in profileList" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->	
+              <tr >
+              	<td att-table-body width="5%" align="left">
+                {{$index + 1}}
+                </td>
+            	<td att-table-body width="30%" align="left">                	
+	              <div ng-if="ngexistingUsers[profile.orgUserId] == null">
+        	          {{profile.lastName}},&nbsp;{{profile.firstName}}
+            	  </div>
+	              <div ng-if="ngexistingUsers[profile.orgUserId] != null">
+    	              <a href="profile.htm?profile_id={{ngexistingUsers[profile.orgUserId]}}" alt="View/Edit Profile">
+                  	  {{profile.lastName}},&nbsp;{{profile.firstName}}
+	                  </a>
+            	   </div>
+               
+                </td>
+            	<td att-table-body width="5%" align="left">
+                {{profile.orgUserId}}
+                </td>
+            	<td att-table-body width="10%" align="left">
+                {{profile.orgCode}}
+                </td>
+            	<td att-table-body width="20%" align="left">
+                {{profile.phone}}
+                </td>
+            	<td att-table-body width="20%" align="left">
+                {{profile.email}}
+                </td>
+                
+            	<td att-table-body width="10%" align="left">
+		            <div ng-if="ngexistingUsers[profile.orgUserId] == null">
+		            	<div ng-click="toggleSelection(profile);">
+		                <input name="selected" type="checkbox" ng-model="profile.selected" att-checkbox/>
+		                </div>
+		             </div>
+		             <div ng-if="ngexistingUsers[profile.orgUserId] != null">
+		                Exists
+		             </div>
+                </td>
+              </tr>
+              </tbody>
+	    </table>
+	    <div class="fn-ebz-container">
+	          Rows Per Page:
+	          <input class="fn-ebz-text" type="text" ng-model="viewPerPage" size="5" style="width: 47px;">
+        </div>
+		<div class="fn-ebz-container">
+	          Current Page:
+	          <input class="fn-ebz-text" type="text" ng-model="currentPage" size="5" style="width: 47px;">
+        </div>
+        <div class="fn-ebz-container">
+	          Total Page(s):
+	          <input class="fn-ebz-text" type="text" ng-model="totalPage" size="5" readonly="true" style="width: 47px;">
+        </div>
+		
+        <div ng-if="profileList.length != 0">
+          <input att-button btn-type="primary" size="small" class="button" type="submit" value="Import" ng-click="process();"/>
+        </div>
+
+      </div>
+      
+</div>
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/profile_detail.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/profile_detail.html
new file mode 100644
index 000000000..31f68577d
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/profile_detail.html
@@ -0,0 +1,188 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<div ng-controller="profileController" >
+     <br/>
+     <h1 class="heading1">Profile Edit</h1>
+     <br/>
+     Please edit the profile details below:&nbsp;<br><br>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>First Name:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.firstName"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Last Name:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.lastName"
+			maxlength="30" /> 
+	</div>
+     
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">User ID:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.orgUserId"
+			maxlength="30" style="margin-right:0px;" readonly="true"/> 		
+	</div>
+    &nbsp;
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">Manager User ID:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.orgManagerUserId"
+			maxlength="30" style="margin-right:0px;" readonly="true"/>
+	</div>
+<BR>
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Login Id:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.loginId"
+			maxlength="30" readonly="true"/> 
+	</div>
+
+	<div class="fn-ebz-container" style="margin-right:20px">
+		<label class="fn-ebz-text-label">Password:</label><BR>
+		<input type="password" ng-model="profile.loginPwd"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Phone:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.phone"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">Fax:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.fax"
+			maxlength="30" /> 
+	</div>
+<BR>
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">Cellular:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.cellular"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Email:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.email"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Address 1:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.address1"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Address 2:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.address2"
+			maxlength="30" /> 
+	</div>
+<BR>
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">City:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.city"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container">	
+		<label  class="fn-ebz-text-label">State:</label><BR>
+		<div class="form-field" att-select="stateList.options" ng-model="stateList.selected"></div>
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Zip Code:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.zipCode"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container">	
+		<label  class="fn-ebz-text-label">Country:</label><BR>
+		<div class="form-field" att-select="countries" ng-model="selectedCountry"></div>
+	</div>
+	<BR>
+	<div class="fn-ebz-container">	
+		<label  class="fn-ebz-text-label">Time Zone:</label><BR>
+		<div class="form-field" att-select="timeZones" ng-model="selectedTimeZone"></div>
+	</div>
+	
+	<div align="left" >
+		<button type="submit" ng-click="saveProfile();" att-button
+			btn-type="primary" size="small">Save</button>
+	</div>
+	
+<br>
+	<div class="pageTitle">
+		<label>Roles</label>
+		<a ng-click="addNewRolePopup();" class="icon-add" size="small"></a>
+   
+	</div>
+
+	<table 	att-table table-data="profile.roles" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+<!-- 	<table border="1" class="hovertable_1"> -->
+	     <thead att-table-row type="header">
+  		<tr>
+  			<th att-table-header sortable="false" align="left"  width="90%">Name</th>
+  			<th att-table-header sortable="false"  width="10%">Remove?</th>
+  		</tr>
+  		 </thead>
+  		 <tbody att-table-row type="body" row-repeat="role in profile.roles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+<!-- 		  <tr ng-repeat="role in profile.roles track by role.id"> -->
+		  <tr>
+		    <td att-table-body width="90%" >{{ role.name }}</td>
+		    <td att-table-body width="10%">
+		    	<a ng-click="removeRole(role);" ><img src="static/fusion/images/deleteicon.gif"></a>
+		     </td>
+		  </tr>
+		 </tbody>
+	</table>
+	
+	
+	
+	<div id="dialog" style="overflow:scroll" class="modal__informative font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="color:#157BB2">Select Roles</h2>
+            </div>
+            <button align="right" class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            <div class="divider-container"><hr></div>  
+            <div class="modal__content">           	 	
+				<table table-data="availableRoles" att-table  >
+			        <thead att-table-row type="header">
+				  		<tr>
+				  			<th att-table-header sortable="false" width="10%"> </th>
+				  			<th att-table-header sortable="false" width="90%">Role</th>
+				  		</tr>
+			  		</thead>
+				  
+				    <tbody att-table-row type="body" row-repeat="availableRole in availableRoles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+				  	  <tr>
+					  	<td att-table-body width="10%">
+					  		<div ng-click="toggleRole(availableRole.selected,availableRole);">
+					    	<input type="checkbox" ng-model="availableRole.selected" att-toggle-main>
+					    	</div>
+					    </td>
+					    <td att-table-body width="90%">{{ availableRole.name }}</td>
+				  	  </tr>
+				    </tbody>
+		        </table>
+            </div>
+    </div>
+	
+	
+</div>
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/profile_search.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/profile_search.html
new file mode 100644
index 000000000..9f49a80ff
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/profile_search.html
@@ -0,0 +1,72 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<div ng-controller="profileSearchCtrl">
+	
+		<h1 class="heading1" style="margin-top:10px;">Profile Search</h1>
+		
+		<table att-table table-data="tableData" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+
+			    <thead  att-table-row type="header">
+					<tr>
+						<th att-table-header sortable="true" key="id">User ID</th>
+			            <th att-table-header sortable="true" key="lastName">Last Name</th>        
+			            <th att-table-header sortable="true" key="firstName">First Name</th>    
+			            <th att-table-header sortable="true" key="email">Email</th>
+			            <th att-table-header sortable="true" key="orgUserId">User ID</th>        
+			            <th att-table-header sortable="true" key="orgManagerUserId">Manager User ID</th> 
+			            <th att-table-header >Edit</th>
+			            <th att-table-header sortable="true" key="active">Active?</th>         
+			        </tr>
+			    </thead>
+			    <tbody att-table-row type="body" row-repeat="rowData in tableData">
+			        <tr>
+		            	<td att-table-body ng-bind="rowData['id']"></td>
+		            	<td att-table-body ng-bind="rowData['lastName']"></td>
+		            	<td att-table-body ng-bind="rowData['firstName']"></td>
+		            	<td att-table-body ng-bind="rowData['email']"></td>
+		            	<td att-table-body ng-bind="rowData['orgUserId']"></td>
+		            	<td att-table-body ng-bind="rowData['orgManagerUserId']"></td>
+		            	<td att-table-body ><a href="#/profile/{{rowData.id}}" class="ion-edit" style="color: #888;font-size:20px;"></a></td>
+		        		<td att-table-body >
+		        		   <div ng-click="toggleProfileActive(rowData)">
+		        		     <input type="checkbox"  ng-model="rowData.active" att-toggle-main>
+		        		   </div>
+		        	   </td>
+			        </tr>     
+			    </tbody>	  
+	</table>
+	
+  	    <div class="fn-ebz-container">
+	          Records Per Page:
+	          <input class="fn-ebz-text" type="text" ng-model="viewPerPage1" size="5" style="width: 47px;">
+        </div>
+<!-- 		<div class="fn-ebz-container">
+	          Current Page:
+	          <input class="fn-ebz-text" type="text" ng-model="currentPage" size="5" style="width: 47px;">
+        </div> --> 
+<!--         <div class="fn-ebz-container">
+	          Total Page(s):
+	          <input class="fn-ebz-text" type="text" ng-model="totalPage1" size="5" readonly="true" style="width: 47px;">
+        </div> -->
+        
+<!--Short page count-->
+<div att-pagination total-pages="totalPages1" current-page="currentPage1" click-handler="customHandler"></div>
+
+</div>
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/role.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/role.html
new file mode 100644
index 000000000..d372f9159
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/role.html
@@ -0,0 +1,118 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<div>
+	<div class="bc-style" style="margin-left:-60px;">
+	    <ul class="breadcrumb">
+	        <li><a href="welcome">Home</a></li>
+	        <li><a href="admin#/role_list">Roles</a></li>
+	        <li class="active">Role</li>
+	    </ul>
+	</div>
+	<h1 class="heading1">Role Edit</h1>
+	<div ng-controller="roleController" >
+		<br>
+	     Please edit the role details below:&nbsp;<br>
+	
+		<div class="fn-ebz-container" >
+			<label class="fn-ebz-text-label"><sup><b>*</b></sup>Name:</label><BR>
+			<input type="text" class="fn-ebz-text" ng-model="role.name"
+				maxlength="30" /> 
+		</div>
+	
+		<div class="fn-ebz-container" >
+			<label class="fn-ebz-text-label">Priority:</label><BR>
+			<input type="text" class="fn-ebz-text" ng-model="role.priority"
+				maxlength="30" /> 
+		</div>
+		
+		<div align="left" >
+			<button type="submit" ng-click="saveRole();" att-button
+				btn-type="primary" size="small">Save</button>
+		</div>
+		
+		<br>
+		<div class="pageTitle">
+			<label>Role Functions</label>
+			<a ng-click="addNewRoleFunctionModalPopup();" class="icon-add" size="small"></a>
+		</div>
+	
+		<table table-data="role.roleFunctions" att-table >
+		     <thead att-table-row type="header">
+	  		<tr>
+	  			<th att-table-header sortable="false" align="left"  width="90%">Name</th>
+	  			<th att-table-header sortable="false"  width="10%">Remove?</th>
+	  		</tr>
+	  		 </thead>
+	  		 <tbody att-table-row type="body" row-repeat="roleFunction in role.roleFunctions" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+			  <tr>
+			    <td att-table-body width="90%" >{{ roleFunction.name }}</td>
+			    <td att-table-body width="10%">
+			    	<div ng-click="removeRoleFunction(roleFunction);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
+			     </td>
+			  </tr>
+			 </tbody>
+		</table>
+		<a href="admin#/role_function_list">Manage Role Functions</a><br><br>
+		
+		<div class="pageTitle">
+			<label>Child Roles</label>
+			<a ng-click="addNewChildRoleModalPopup();" class="icon-add" size="small"></a>
+		</div>
+		
+		<table table-data="role.childRoles" att-table >
+		     <thead att-table-row type="header">
+	  		<tr>
+	  			<th att-table-header sortable="false" align="left"  width="90%">Name</th>
+	  			<th att-table-header sortable="false"  width="10%">Remove?</th>
+	  		</tr>
+	  		 </thead>
+	  		 <tbody att-table-row type="body" row-repeat="role in role.childRoles" style="max-height: 980px;" >
+			  <tr>
+			    <td att-table-body width="90%" >{{ role.name }}</td>
+			    <td att-table-body width="10%">
+			    	<div ng-click="removeChildRole(role);" style="font-size:20px;"><a href="javascript:void(0)" class="icon-trash"></a></div>
+			     </td>
+			  </tr>
+			 </tbody>
+		</table>
+		
+		<div id="dialogChildRole" title="Select Child Roles">
+		  <table table-data="availableRoles" att-table>
+		  	<thead att-table-row type="header">
+		  		<tr>
+		  			<th att-table-header sortable="false" width="10%"> </th>
+		  			<th att-table-header sortable="false" width="90%">Role</th>
+		  		</tr>
+		  		</thead>
+		  		<tbody att-table-row type="body" row-repeat="availableRole in availableRoles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+			  	<tr>
+			  	<td att-table-body width="10%">
+			  		<div ng-click="toggleChildRole(availableRole.selected,availableRole);">
+			    	<input type="checkbox" ng-model="availableRole.selected" att-toggle-main>
+			    	</div>
+			    </td>
+			    <td att-table-body width="90%">{{ availableRole.name }}</td>
+			    
+			  </tr>
+			  </tbody>
+			</table>
+		</div>
+	</div>
+</div>
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/role_function_list.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/role_function_list.html
new file mode 100644
index 000000000..b08510368
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/role_function_list.html
@@ -0,0 +1,88 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<div ng-controller="roleFunctionListController" style="width:95%;"> 	
+	<div class="pageTitle">
+			
+	        <h1 class="heading1" style="margin-left:0px;">Role Functions</h1>
+	        <br/>
+	        <!-- <a ng-click="addNewRoleFunctionModalPopup();" class="icon-add" size="small" ></a> -->
+	        <div align="left" style="marin-bottom: 50px;">
+				<button type="submit" ng-click="addNewRoleFunctionModalPopup();" att-button
+					btn-type="primary" size="small">Create</button>
+			</div>
+	 <br><br>
+	        
+	</div>
+	 
+	<br>
+	<div style="margin-right: 20px;text-align: justify;text-align-last:auto;">
+	Click on the edit icon to update a role function, the plus icon to add additional role functions, or the delete icon to remove them.
+	</div>
+	<br>
+	<div id="rolesTable" title="Role Functions">
+	  <table att-table table-data="availableRoleFunctions" current-page="1">
+	  	<thead att-table-row type="header">
+	  		<tr>
+	  			<th att-table-header width="70%" key="name" sortable="true">Name</th>
+	  			<th att-table-header width="10%" key="code" sortable="true">Code</th>
+	  			<th att-table-header width="10%" sortable="false">Edit?</th>
+	  			<th att-table-header width="10%" sortable="false">Delete?</th>
+	  		</tr>
+	  	</thead>
+	  	<tbody att-table-row type="body" row-repeat="availableRoleFunction in availableRoleFunctions" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+		  <tr>
+		    <td att-table-body width="70%" ng-bind="availableRoleFunction['name']"></td>
+		    <td att-table-body width="10%" ng-bind="availableRoleFunction['code']"></td>
+		    <td att-table-body width="10%">
+		    <!-- <a ng-click="editRoleFunctionPopup(availableRoleFunction);" >
+		    <img src="static/fusion/images/editicon.gif">
+		    </a> -->
+		    <div ng-click="editRoleFunctionModalPopup(availableRoleFunction);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-edit"></a></div>
+		    </td>
+		     <td att-table-body width="10%">
+		    	<!-- <a ng-click="removeRole(availableRoleFunction);" ><img src="static/fusion/images/deleteicon.gif"></a> -->
+		    	<div ng-click="removeRole(availableRoleFunction);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-trash-b"></a></div>
+		     </td>
+		  </tr>
+		</tbody>
+		</table>
+	</div>
+	
+	
+	<div id="dialog" title="Add Role Function">
+	   	
+	   	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Name:</label><br>
+		<input type="text" class="fn-ebz-text" ng-model="editRoleFunction.name"
+			maxlength="30" /> 
+		</div>
+	   	<br/>
+	   	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Code:</label><br>
+		<input type="text" class="fn-ebz-text" ng-model="editRoleFunction.code" ng-disabled="editRoleFunction.code!=null"
+			maxlength="30" /> 
+		</div>
+		<br/>
+		<button type="submit" ng-click="saveRoleFunction(editRoleFunction);" att-button
+			btn-type="primary" size="small">Save</button>
+		
+	</div>
+	
+</div>
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/role_list.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/role_list.html
new file mode 100644
index 000000000..1100cbb07
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/role_list.html
@@ -0,0 +1,61 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<div class="pageTitle">
+	
+	<h1 class="heading1">Roles</h1>
+</div>
+<br>
+Click on a Role to view its details.
+     
+<div ng-controller="roleListController" style="margin-bottom:20px;width:100%"> 
+	<div id="dialog" title="Roles">
+	  <table att-table table-data="availableRoles" current-page="1">
+	  	<thead att-table-row type="header">
+	  		<tr>
+	  			<th att-table-header width="70%" key="name" sortable="true">Name</th>
+	  			<th att-table-header width="10%" key="priority" sortable="true">Priority</th>
+	  			<th att-table-header width="10%" key="active" sortable="true">Active?</th>
+	  			<th att-table-header width="10%" sortable="false">Delete?</th>
+	  		</tr>
+	  	</thead>
+	  	<tbody att-table-row type="body" row-repeat="availableRole in availableRoles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+<!-- 		  <tr ng-repeat="availableRole in availableRoles track by availableRole.id">		  	 -->
+		  <tr>
+		    <td width="70%"><a href="admin#/role/{{availableRole.id}}">{{ availableRole.name }}</a></td>
+		    <td width="10%">{{ availableRole.priority }}</td>
+		    <td width="10%">
+		    	<div ng-click="toggleRole(availableRole.active,availableRole);">
+		    	<input type="checkbox" ng-model="availableRole.active" att-toggle-main ng-true-value="on" ng-false-value="off">
+		    	</div>
+		    </td>
+		     <td att-table-body width="10%">
+		    	<div ng-click="removeRole(availableRole);" style="font-size:20px;"><a href="javascript:void(0)" class="ion-trash-b"></a></div>
+		     </td>
+		  </tr>
+		</tbody>
+		</table>
+	</div>
+	
+	<div align="left" style="marin-bottom: 50px;">
+		<button type="submit" onClick="window.location='admin#/role/0';" att-button
+			btn-type="primary" size="small">Create</button>
+	</div>
+	
+</div>
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/self_profile.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/self_profile.html
new file mode 100644
index 000000000..0f1877c58
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/self_profile.html
@@ -0,0 +1,183 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+
+     
+     <h1 class="heading1">Self Profile</h1>
+     <br>
+     Please edit the profile details below:&nbsp;<br><br>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>First Name:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.firstName"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Last Name:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.lastName"
+			maxlength="30"/> 
+	</div>
+     
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">User ID:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.orgUserId"
+			maxlength="30" style="margin-right:0px;" readonly="true"/> 
+	</div>
+
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">Manager User ID:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.orgManagerUserId"
+			maxlength="30" style="margin-right:0px;" readonly="true"/> 
+	</div>
+<BR>
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Login Id:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.loginId"
+			maxlength="30" readonly="true""/> 
+	</div>
+
+	<div class="fn-ebz-container" style="margin-right:20px">
+		<label class="fn-ebz-text-label">Password:</label><BR>
+		<input type="password" ng-model="profile.loginPwd"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Phone:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.phone"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">Fax:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.fax"
+			maxlength="30" /> 
+	</div>
+<BR>
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">Cellular:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.cellular"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label"><sup><b>*</b></sup>Email:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.email"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Address 1:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.address1"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Address 2:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.address2"
+			maxlength="30" /> 
+	</div>
+<BR>
+	<div class="fn-ebz-container" >
+	<label class="fn-ebz-text-label">City:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.city"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container">	
+		<label  class="fn-ebz-text-label">State:</label><BR>
+		<div class="form-field" att-select="stateList.options" ng-model="stateList.selected"></div>
+	</div>
+
+	<div class="fn-ebz-container" >
+		<label class="fn-ebz-text-label">Zip Code:</label><BR>
+		<input type="text" class="fn-ebz-text" ng-model="profile.zipCode"
+			maxlength="30" /> 
+	</div>
+
+	<div class="fn-ebz-container">	
+		<label  class="fn-ebz-text-label">Country:</label><BR>
+		<div class="form-field" att-select="countries" ng-model="selectedCountry"></div>
+	</div>
+	<BR>
+	<div class="fn-ebz-container">	
+		<label  class="fn-ebz-text-label">Time Zone:</label><BR>
+		<div class="form-field" att-select="timeZones" ng-model="selectedTimeZone"></div>
+	</div>
+	
+	<div align="left" >
+		<button type="submit" ng-click="saveProfile();" att-button
+			btn-type="primary" size="small">Save</button>
+	</div>
+	
+<br>
+	<div class="pageTitle">
+		<label>Roles</label>
+		<a ng-click="addNewRolePopup();" ng-show="isUserSystemAdmin" class="icon-add" size="small"></a>
+   
+	</div>
+
+	<table 	att-table table-data="profile.roles" view-per-page="viewPerPage" current-page="currentPage" search-category="searchCategory" search-string="searchString" total-page="totalPage">
+<!-- 	<table border="1" class="hovertable_1"> -->
+	     <thead att-table-row type="header">
+  		<tr>
+  			<th att-table-header sortable="false" align="left"  width="90%">Name</th>
+  			<th att-table-header sortable="false"  width="10%">Remove?</th>
+  		</tr>
+  		 </thead>
+  		 <tbody att-table-row type="body" row-repeat="role in profile.roles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+<!-- 		  <tr ng-repeat="role in profile.roles track by role.id"> -->
+		  <tr>
+		    <td att-table-body width="90%" >{{ role.name }}</td>
+		    <td att-table-body width="10%">
+		    	<a ng-click="removeRole(role);" ><img src="static/fusion/images/deleteicon.gif"></a>
+		     </td>
+		  </tr>
+		 </tbody>
+	</table>
+	
+	<div id="dialog" style="height:500px;overflow:scroll" class="modal__informative font-showcase" >
+            <div class="modal__header">
+                <h2 class="font-showcase-font-name" style="color:#157BB2">Select Roles</h2>
+            </div>
+            <button align="right" class="button button--primary button--small" herf="javascript:void(0)" ng-click="close()">Close</button>
+            <div class="modal__content">           	 	
+				<table table-data="availableRoles" att-table  >
+			        <thead att-table-row type="header">
+				  		<tr>
+				  			<th att-table-header sortable="false" width="10%"> </th>
+				  			<th att-table-header sortable="false" width="90%">Role</th>
+				  		</tr>
+			  		</thead>
+				  
+				    <tbody att-table-row type="body" row-repeat="availableRole in availableRoles" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody-->
+				  	  <tr>
+					  	<td att-table-body width="10%">
+					  		<div ng-click="toggleRole(availableRole.selected,availableRole);">
+					    	<input type="checkbox" ng-model="availableRole.selected" att-toggle-main>
+					    	</div>
+					    </td>
+					    <td att-table-body width="90%">{{ availableRole.name }}</td>
+				  	  </tr>
+				    </tbody>
+		        </table>
+            </div>
+    </div>
+	
diff --git a/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/usage_list.html b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/usage_list.html
new file mode 100644
index 000000000..9bb2c8695
--- /dev/null
+++ b/ecomp-sdk-app/src/main/webapp/app/fusion/scripts/view-models/profile-page/usage_list.html
@@ -0,0 +1,64 @@
+<!--
+  ================================================================================
+  eCOMP Portal SDK
+  ================================================================================
+  Copyright (C) 2017 AT&T Intellectual Property
+  ================================================================================
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+  
+       http://www.apache.org/licenses/LICENSE-2.0
+  
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+  ================================================================================
+  -->
+<div ng-controller="usageListController" > 	
+	<br/>
+	   <h1 class="heading1">Users</h1>
+	<br/>
+    
+    <div style="margin-right: 20px;text-align: justify;text-align-last:auto;">
+	    The following shows all users currently logged into the application. Click the icon to expel a user from the application.
+	</div>
+	<div title="Current User Sessions" style="width: 86%;">
+	  <table att-table table-data="users" current-page="1">
+	  	
+	  	<thead att-table-row type="header">
+	  		<tr>
+	  			<th att-table-header sortable="false" width="10%" align="left">Current User Sessions</th>
+	  			<th att-table-header sortable="false" width="10%" align="center"></th>
+	  			<th att-table-header sortable="false" width="10%" align="center"></th>
+	  			<th att-table-header sortable="false" width="10%" align="center"></th>
+	  			<th att-table-header sortable="false" width="10%" align="center"></th>
+	  			<th att-table-header sortable="false" width="10%" align="center"></th>
+	  		</tr>
+	  		<tr>
+	  			<th att-table-header sortable="false" width="10%" align="center">User Id</th>
+	  			<th att-table-header sortable="false" width="10%" align="center">User Name</th>
+	  			<th att-table-header sortable="false" width="10%" align="center">Email</th>
+	  			<th att-table-header sortable="false" width="10%" align="center">Last Access Time (minutes)</th>
+	  			<th att-table-header sortable="false" width="10%" align="center">Time Remaining (minutes)</th>
+	  			<th att-table-header sortable="false" width="10%" align="center">Expire User Session?</th>
+	  		</tr>
+	  	</thead>
+	  	<tbody att-table-row type="body" row-repeat="user in users" style="max-height: 980px;" ><!-- background colors will alternate not properly with multiple tbody--> 
+		  <tr>
+		    <td att-table-body width="10%">{{user.id}}</td>
+		    <td att-table-body width="10%">{{user.lastName}}</td>
+		    <td att-table-body width="10%">{{user.email}}</td>
+		    <td att-table-body width="10%">{{user.lastAccess}}</td>
+		    <td att-table-body width="10%">{{user.remaining}}</td>
+		    <td att-table-body width="10%"><div ng-hide="user.delete=='yes'">Current Session</div>
+		  
+		    	<div ng-click="removeSession(user.sessionId);" ng-hide="user.delete=='no'" style="font-size:20px;text-align:center"><a href="javascript:void(0)" class="icon-trash"></a></div>
+		    </td>
+		  </tr>
+		</tbody>
+		</table>
+	</div>
+</div>
-- 
cgit 1.2.3-korg