=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dashboard/dashboard-controller.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dashboard/dashboard-controller.js	2015-02-18 13:12:41 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dashboard/dashboard-controller.js	2015-02-19 15:42:18 +0000
@@ -3,7 +3,6 @@
         function($rootScope,
                 $scope,
                 $location,
-                $route,
                 $modal,
                 $timeout,
                 $filter,

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry-controller.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry-controller.js	2015-02-18 13:00:15 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry-controller.js	2015-02-19 15:42:18 +0000
@@ -47,10 +47,12 @@
         $scope.currentDummyEvent = null;
         $scope.currentEvent = null;
         $scope.currentStage = null;
+        $scope.totalEvents = 0;
             
         $scope.allowEventCreation = false;
         $scope.repeatableStages = [];        
         $scope.dhis2Events = [];
+        $scope.eventsByStage = [];
         $scope.programStages = [];
         
         var selections = CurrentSelection.get();          
@@ -70,8 +72,8 @@
                         $scope.currentStage = stage;
                     }
                     $scope.selectedProgramWithStage[stage.id] = stage;
+                    $scope.eventsByStage[stage.id] = [];
                 });
-                
                 $scope.getEvents();                
             });
         }
@@ -110,14 +112,17 @@
                                 $scope.currentEvent = dhis2Event;                                
                                 $scope.showDataEntry($scope.currentEvent, true);
                             }
+                            
+                            $scope.dhis2Events.push(dhis2Event);
+                            $scope.eventsByStage[dhis2Event.programStage].push(dhis2Event);
                         }
-                        $scope.dhis2Events.push(dhis2Event);
                     }
                 });
             }
             
             $scope.dhis2Events = orderByFilter($scope.dhis2Events, '-sortingDate');            
-            $scope.dummyEvents = $scope.checkForEventCreation($scope.dhis2Events, $scope.selectedProgram);
+            $scope.dummyEvents = $scope.checkForEventCreation($scope.dhis2Events, $scope.selectedProgram);            
+            sortEventsByStage();                        
         });          
     };
     
@@ -259,6 +264,7 @@
                     $scope.dhis2Events.splice(0,0,newEvent);
                 }
                 
+                $scope.eventsByStage[newEvent.programStage].push(newEvent);
                 $scope.showDataEntry(newEvent, false);
             }
         });
@@ -707,7 +713,18 @@
                         index = i;
                     }
                 }
-                $scope.dhis2Events.splice(index,1);                
+                $scope.dhis2Events.splice(index,1);
+                
+                continueLoop = true, index = -1;
+                for(var i=0; i< $scope.eventsByStage[$scope.currentEvent.programStage].length && continueLoop; i++){
+                    if($scope.eventsByStage[$scope.currentEvent.programStage][i].event === $scope.currentEvent.event ){
+                        $scope.eventsByStage[$scope.currentEvent.programStage][i] = $scope.currentEvent;
+                        continueLoop = false;
+                        index = i;
+                    }
+                }
+                $scope.eventsByStage[$scope.currentEvent.programStage].splice(index,1);
+                
                 $scope.currentEvent = null;
                 if($scope.dhis2Events.length < 1){  
                     $scope.dhis2Events = '';
@@ -737,4 +754,22 @@
         }        
         return style;
     };
+    
+    $scope.getColumnWidth = function(weight){
+        var col = 1;
+        if($scope.totalEvents > 0){
+            col = weight <=1 ? 1 : weight;
+            col = Math.round(col*12/$scope.totalEvents);
+        }        
+        return "col-sm-" + col; 
+    };
+    
+    var sortEventsByStage = function(){
+        for(var key in $scope.eventsByStage){
+            if($scope.eventsByStage.hasOwnProperty(key)){
+                $scope.eventsByStage[key] = orderByFilter($scope.eventsByStage[key], '-sortingDate').reverse(); 
+                $scope.totalEvents += $scope.eventsByStage[key].length <=1 ? 1:$scope.eventsByStage[key].length;
+            }
+        }
+    };
 });
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry.html	2015-02-18 13:00:15 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry.html	2015-02-19 15:42:18 +0000
@@ -2,9 +2,9 @@
     <div class="panel-heading handle bold">
         {{dataentryWidget.title| translate}}
         <span class="nav-pills" ng-if="allowEventCreation">
-            | <a href ng-click="showEventCreation()"><span ng-class="{true: 'widget-link-active', false: 'widget-link'} [showEventCreationDiv]">{{'create_new_event'| translate}}</span></a>
+            | <a href ng-click="showEventCreation()"><span ng-class="{true: 'widget - link - active', false: 'widget - link'} [showEventCreationDiv]">{{'create_new_event'| translate}}</span></a>
         </span>
-        
+
         <span class="pull-right widget-link">
             <a href ng-click="toggleLegend()" title="{{'event_color_legend'| translate}}"><i class="fa fa-info-circle vertical-center"></i></a>
             <a class="small-horizonal-spacing" href ng-click="expandCollapse(dataentryWidget)">
@@ -17,22 +17,48 @@
 
     <div ng-show="dataentryWidget.expand" class="panel-body dashboard-widget-container">
         <div ng-if="showEventColors">
-            <span class='bold'>{{'legend' | translate}}</span>
+            <span class='bold'>{{'legend'| translate}}</span>
             <table class="table table-bordered" style="width: 100%;">               
                 <tr>
                     <td ng-class="eventColor.color" ng-repeat="eventColor in eventColors">
-                        <span class="bold">{{eventColor.description | translate}}</span>
+                        <span class="bold">{{eventColor.description| translate}}</span>
                     </td>
                 </tr>                    
             </table>
         </div>
 
-        <div ng-if="dhis2Events && !showEventCreationDiv">            
-            <table class="table-borderless table-with-fixed-layout">
-                <tbody>
-                    <tr>
-                        <td class="inline-block" ng-repeat="dhis2Event in dhis2Events | orderBy:'sortingDate':reverse">
-                            <div class="stage-container" ng-class='getEventStyle(dhis2Event, false)' ng-click="showDataEntry(dhis2Event, false)">
+        <div ng-if="dhis2Events && !showEventCreationDiv">
+
+            <table class="table table-bordered table-with-fixed-layout">
+                <thead>
+                    <tr>
+                        <th class="active align-center" ng-class="getColumnWidth(eventsByStage[stage.id].length)" ng-repeat="stage in programStages| orderBy:'sortOrder':reverse">
+                            {{stage.name}}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td ng-repeat="stage in programStages| orderBy:'sortOrder':reverse">
+                            <div class="inline-block" ng-repeat="dhis2Event in eventsByStage[stage.id]">
+                                <div class="stage-container alert" 
+                                     ng-class="getEventStyle(dhis2Event, false)" 
+                                     ng-click="showDataEntry(dhis2Event, false)">
+                                    {{dhis2Event.orgUnitName}}<br/>
+                                    {{dhis2Event.sortingDate}}         
+                                </div>
+                                <i class="fa fa-arrow-right" ng-if="$index < eventsByStage[stage.id].length - 1"></i>
+                            </div>
+                        </td>                        
+                    </tr>
+                </tbody>                
+            </table>
+
+            <!--<table class="table-borderless table-with-fixed-layout">
+                <tbody>
+                    <tr>
+                        <td class="inline-block" ng-repeat="dhis2Event in dhis2Events| orderBy:'sortingDate':reverse">
+                            <div class="stage-container alert" ng-class='getEventStyle(dhis2Event, false)' ng-click="showDataEntry(dhis2Event, false)">
                                 {{dhis2Event.name}}<br/>
                                 {{dhis2Event.orgUnitName}}<br/>
                                 {{dhis2Event.sortingDate}}         
@@ -41,7 +67,8 @@
                         </td>                        
                     </tr>
                 </tbody>                
-            </table>
+            </table>-->
+            
         </div>     
         <div ng-if="!dhis2Events && selectedEnrollment" class="alert alert-danger">{{'no_event_is_yet_created'| translate}}</div>
         <div ng-if="dhis2Events && showEventCreationDiv" class="alert alert-warning">{{'event_creation'| translate}}</div>
@@ -51,7 +78,7 @@
                 <tbody>
                     <tr>
                         <td class="inline-block" ng-repeat="dummyEvent in dummyEvents| orderBy:'sortingDate':reverse">                                 
-                            <span class="stage-container" ng-class='getEventStyle(dummyEvent, true)' ng-click="showDummyEventCreation(dummyEvent)">
+                            <span class="stage-container alert" ng-class='getEventStyle(dummyEvent, true)' ng-click="showDummyEventCreation(dummyEvent)">
                                 {{dummyEvent.name}}<br/>
                                 {{dummyEvent.dueDate}}         
                             </span>
@@ -162,7 +189,7 @@
                     <a href ng-click="completeIncompleteEvent()" 
                        class="btn btn-warning" 
                        ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE' || currentEvent.editingNotAllowed"
-                       ng-if="currentEvent.eventDate && ( currentEvent.status === 'SCHEDULE' || currentEvent.status === 'ACTIVE' || currentEvent.status === 'VISITED')">{{'complete'| translate}}</a>
+                       ng-if="currentEvent.eventDate && (currentEvent.status === 'SCHEDULE' || currentEvent.status === 'ACTIVE' || currentEvent.status === 'VISITED')">{{'complete'| translate}}</a>
                     <a href ng-click="completeIncompleteEvent()" 
                        class="btn btn-warning"
                        ng-disabled="currentEvent.enrollmentStatus !== 'ACTIVE' || currentEvent.editingNotAllowed"
@@ -201,16 +228,16 @@
             <table class="table table-striped dhis2-table-hover">
                 <tr ng-repeat="note in currentEvent.notes">
                     <td class="overflow-ellipsis">
-                        <d2-pop-over content="note" template="popover.html" details="{{'details'| translate}}">
-                            <div>{{note.value}}</div>
-                        </d2-pop-over>
-                        <script type="text/ng-template" id="popover.html">
-                            <p>{{content.value}}</p>
-                            <hr>
-                            <p><strong>{{'created_by' | translate}}: </strong>{{content.storedBy}}</p>
-                            <p><strong>{{'date' | translate}}: </strong>{{content.storedDate}}</p>                           
-                        </script>
-                    </td> 
+                <d2-pop-over content="note" template="popover.html" details="{{'details'| translate}}">
+                    <div>{{note.value}}</div>
+                </d2-pop-over>
+                <script type="text/ng-template" id="popover.html">
+                    <p>{{content.value}}</p>
+                    <hr>
+                    <p><strong>{{'created_by' | translate}}: </strong>{{content.storedBy}}</p>
+                    <p><strong>{{'date' | translate}}: </strong>{{content.storedDate}}</p>                           
+                </script>
+                </td> 
                 </tr>
             </table>
         </div>

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/enrollment/enrollment-controller.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/enrollment/enrollment-controller.js	2015-02-18 13:00:15 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/enrollment/enrollment-controller.js	2015-02-19 15:42:18 +0000
@@ -2,6 +2,7 @@
         function($rootScope,
                 $scope,  
                 $location,
+                $timeout,
                 DateUtils,
                 EventUtils,
                 storage,
@@ -120,7 +121,9 @@
         }
        
         $scope.showEnrollmentDiv = !$scope.showEnrollmentDiv;
-        $rootScope.$broadcast('enrollmentEditing', {enrollmentEditing: $scope.showEnrollmentDiv});
+        $timeout(function() { 
+            $rootScope.$broadcast('enrollmentEditing', {enrollmentEditing: $scope.showEnrollmentDiv});
+        }, 100);        
         
         if($scope.showEnrollmentDiv){            
             $scope.showEnrollmentHistoryDiv = false;
@@ -222,7 +225,9 @@
             enrollment = $scope.selectedEnrollment;
         }
         CurrentSelection.set({tei: tei, te: $scope.selectedEntity, prs: $scope.programs, pr: pr, prNames: $scope.programNames, prStNames: $scope.programStageNames, enrollments: $scope.enrollments, selectedEnrollment: enrollment, optionSets: $scope.optionSets});
-        $rootScope.$broadcast(listeners, {});
+        $timeout(function() { 
+            $rootScope.$broadcast(listeners, {});
+        }, 100);
     };    
     
     var getProcessedForm = function(){        
@@ -346,4 +351,4 @@
     $scope.switchRegistrationForm = function(){
         $scope.selectedProgram.displayCustomForm = !$scope.selectedProgram.displayCustomForm;
     };
-});
\ No newline at end of file
+});

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/controllers.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/controllers.js	2015-02-16 14:00:26 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/controllers.js	2015-02-19 15:42:18 +0000
@@ -137,6 +137,8 @@
     };
     
     $scope.getProgramAttributes = function(program){ 
+        console.log('the program is:  ', program);
+        $scope.selectedProgram = program;
         
         if($scope.selectedProgram){
             $location.path('/').search({program: $scope.selectedProgramId});
@@ -146,7 +148,7 @@
         }
 
         $scope.trackedEntityList = null; 
-        $scope.selectedProgram = program;
+        
         
         $scope.processAttributes();
         

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js	2015-02-18 13:00:15 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js	2015-02-19 15:42:18 +0000
@@ -1286,9 +1286,9 @@
                 dummyEvent.coordinate = {};
             }
             
-            dummyEvent.statusColor = 'alert alert-warning';//'stage-on-time';
+            dummyEvent.statusColor = 'alert-warning';//'stage-on-time';
             if(moment(today).isAfter(dummyEvent.dueDate)){
-                dummyEvent.statusColor = 'alert alert-danger';//'stage-overdue';
+                dummyEvent.statusColor = 'alert-danger';//'stage-overdue';
             }
             return dummyEvent;        
         },
@@ -1301,20 +1301,20 @@
             }
     
             if(dhis2Event.status === 'COMPLETED'){
-                return 'alert alert-success';//'stage-completed';
+                return 'alert-success';//'stage-completed';
             }
             else if(dhis2Event.status === 'SKIPPED'){
-                return 'alert alert-default'; //'stage-skipped';
+                return 'alert-default'; //'stage-skipped';
             }
             else{                
                 if(dhis2Event.eventDate){
-                    return 'alert alert-info'; //'stage-executed';
+                    return 'alert-info'; //'stage-executed';
                 }
                 else{
                     if(moment(eventDate, calendarSetting.momentFormat).isAfter(dhis2Event.dueDate)){
-                        return 'alert alert-danger';//'stage-overdue';
+                        return 'alert-danger';//'stage-overdue';
                     }                
-                    return 'alert alert-warning';//'stage-on-time';
+                    return 'alert-warning';//'stage-on-time';
                 }               
             }            
         },

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css	2015-02-18 13:00:15 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css	2015-02-19 15:42:18 +0000
@@ -117,9 +117,10 @@
 .event-container {
     cursor: pointer;
     opacity: 1.0;
-    white-space: normal;
-    padding-top: 5px;
+    //white-space: normal;
+    padding: 5px;
     border: 2px dotted;
+    border-radius: 4px
 }
 
 .event-container:hover {
@@ -148,15 +149,6 @@
     font-weight: bold;
 }
 
-.current-stage-color {
-    color: #b94a48;
-}
-
-.stages-color {
-    display: block;
-}
-
-
 /*----------------------------------------------------------------------------*/
 /* App - specific
 /*----------------------------------------------------------------------------*/
@@ -509,13 +501,6 @@
     margin-top: 5px;
 }
 
-.trimmed-alert {
-	padding: 10px;
-	margin-bottom: 20px;
-	border: 1px solid transparent;
-	border-radius: 4px
-}
-
 .remove-default-padding {
     margin: -15px !important;    
 }