=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/program-summary-controller.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/program-summary-controller.js	2014-08-29 12:40:08 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/program-summary-controller.js	2014-08-29 14:15:09 +0000
@@ -28,36 +28,13 @@
     });
     
     //load programs associated with the selected org unit.
-    $scope.loadPrograms = function(orgUnit) {                
-        
-        $scope.selectedOrgUnit = orgUnit;
-        
-        if (angular.isObject($scope.selectedOrgUnit)) {   
-
+    $scope.loadPrograms = function(orgUnit) {
+        $scope.selectedOrgUnit = orgUnit;        
+        if (angular.isObject($scope.selectedOrgUnit)){
             ProgramFactory.getAll().then(function(programs){
-                $scope.programs = [];
-                angular.forEach(programs, function(program){                            
-                    if(program.organisationUnits.hasOwnProperty($scope.selectedOrgUnit.id)){                                
-                        $scope.programs.push(program);
-                    }
-                });
-
-                if($scope.programs.length === 0){
-                    $scope.selectedProgram = null;
-                }
-                else{
-                    if($scope.selectedProgram){
-                        angular.forEach($scope.programs, function(program){                            
-                            if(program.id === $scope.selectedProgram.id){                                
-                                $scope.selectedProgram = program;
-                            }
-                        });
-                    }
-                    else{                        
-                        if($scope.programs.length === 1){
-                            $scope.selectedProgram = $scope.programs[0];
-                        }                        
-                    }
+                $scope.programs = programs;                
+                if($scope.programs.length === 1){
+                    $scope.selectedProgram = $scope.programs[0];
                 } 
             });
         }        
@@ -166,8 +143,7 @@
 
         modalInstance.result.then({
         });
-    };   
-    
+    };    
 })
 
 //Controller for event details

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/program-summary.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/program-summary.html	2014-08-29 12:39:37 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/program-summary.html	2014-08-29 14:15:09 +0000
@@ -55,7 +55,7 @@
                             </td>
                             <td>
                                 <span class='bold inline-block' ng-if='!dhis2Events[tei.id]'>{{'no_visit_made'| translate}}</span>
-                                <span class="inline-block" ng-repeat="ev in dhis2Events[tei.id]| orderBy: 'eventDate'">                                    
+                                <span class="inline-block" ng-repeat="ev in dhis2Events[tei.id] | orderBy: 'eventDate'">                                    
                                     <span class="block align-center">{{ev.orgUnitName}}</span>                   
                                     <span class="empty-stage-container" 
                                          title="{{'no_data'| translate}}"

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events-controller.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events-controller.js	2014-08-29 12:39:37 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events-controller.js	2014-08-29 14:15:09 +0000
@@ -28,53 +28,31 @@
     });
     
     //load programs associated with the selected org unit.
-    $scope.loadPrograms = function(orgUnit) {                
-        
-        $scope.selectedOrgUnit = orgUnit;
-        
-        if (angular.isObject($scope.selectedOrgUnit)) {   
-
+    $scope.loadPrograms = function(orgUnit) {
+        $scope.selectedOrgUnit = orgUnit;        
+        if (angular.isObject($scope.selectedOrgUnit)){
             ProgramFactory.getAll().then(function(programs){
-                $scope.programs = [];
-                angular.forEach(programs, function(program){                            
-                    if(program.organisationUnits.hasOwnProperty($scope.selectedOrgUnit.id)){                                
-                        $scope.programs.push(program);
-                    }
-                });
-
-                if($scope.programs.length === 0){
-                    $scope.selectedProgram = null;
-                }
-                else{
-                    if($scope.selectedProgram){
-                        angular.forEach($scope.programs, function(program){                            
-                            if(program.id === $scope.selectedProgram.id){                                
-                                $scope.selectedProgram = program;
-                            }
-                        });
-                    }
-                    else{                        
-                        if($scope.programs.length === 1){
-                            $scope.selectedProgram = $scope.programs[0];
-                        }                        
-                    }
+                $scope.programs = programs;                
+                if($scope.programs.length === 1){
+                    $scope.selectedProgram = $scope.programs[0];
                 } 
             });
         }        
     };
     
     //watch for selection of program
-    $scope.$watch('selectedProgram', function() {        
+    $scope.$watch('selectedProgram', function() {   
         if( angular.isObject($scope.selectedProgram)){            
             $scope.reportStarted = false;
             $scope.dataReady = false;
         }
     });
     
-    $scope.generateReport = function(){
-        
-        $scope.reportStarted = true;
-        $scope.dataReady = false;
+    $scope.generateReport = function(program, report, ouMode){
+
+        $scope.selectedProgram = program;
+        $scope.report = report;
+        $scope.selectedOuMode = ouMode;
         
         //check for form validity
         $scope.outerForm.submitted = true;        
@@ -82,13 +60,16 @@
             return false;
         }
         
+        $scope.reportStarted = true;
+        $scope.dataReady = false;
+        
         $scope.programStages = [];
         angular.forEach($scope.selectedProgram.programStages, function(stage){
             $scope.programStages[stage.id] = stage;
         });
             
         AttributesFactory.getByProgram($scope.selectedProgram).then(function(atts){            
-            $scope.gridColumns = TEIGridService.generateGridColumns(atts, $scope.selectedOuMode.name);      
+            $scope.gridColumns = TEIGridService.generateGridColumns(atts, $scope.selectedOuMode.name);   
         });  
         
         //fetch TEIs for the selected program and orgunit/mode
@@ -98,30 +79,43 @@
                             'program=' + $scope.selectedProgram.id,
                             null,
                             $scope.pager,
-                            false).then(function(data){
-            if(data.rows){
-                $scope.teiCount = data.rows.length;                
-            }
+                            false).then(function(data){                     
             
             //process tei grid
-            $scope.teiList = TEIGridService.format(data, false);          
-            
-            DHIS2EventFactory.getByOrgUnitAndProgram($scope.selectedOrgUnit.id, $scope.selectedOuMode.name, $scope.selectedProgram.id).then(function(eventList){
-                $scope.dhis2Events = [];
+            var teis = TEIGridService.format(data,true);     
+            $scope.teiList = [];            
+            DHIS2EventFactory.getByOrgUnitAndProgram($scope.selectedOrgUnit.id, $scope.selectedOuMode.name, $scope.selectedProgram.id, null, null).then(function(eventList){
+                $scope.dhis2Events = [];   
                 angular.forEach(eventList, function(ev){
-                    if(ev.trackedEntityInstance){
-                        ev.name = $scope.programStages[ev.programStage].name;
-                        ev.programName = $scope.selectedProgram.name;
-                        ev.statusColor = EventUtils.getEventStatusColor(ev); 
-                        ev.eventDate = DateUtils.format(ev.eventDate);
-                        
-                        if($scope.dhis2Events[ev.trackedEntityInstance]){
-                            $scope.dhis2Events[ev.trackedEntityInstance].push(ev);
-                        }
-                        else{
-                            $scope.dhis2Events[ev.trackedEntityInstance] = [ev];
-                        }
-                        ev = EventUtils.setEventOrgUnitName(ev);
+                    if(ev.dueDate){
+                        ev.dueDate = DateUtils.format(ev.dueDate);
+                        
+                        if( ev.trackedEntityInstance && 
+                            !ev.eventDate && 
+                            ev.dueDate >= report.startDate && 
+                            ev.dueDate <= report.endDate){
+                        
+                            ev.name = $scope.programStages[ev.programStage].name;
+                            ev.programName = $scope.selectedProgram.name;
+                            ev.statusColor = EventUtils.getEventStatusColor(ev); 
+                            ev.dueDate = DateUtils.format(ev.dueDate);
+
+                            if($scope.dhis2Events[ev.trackedEntityInstance]){
+                                if(teis.rows[ev.trackedEntityInstance]){
+                                    $scope.teiList.push(teis.rows[ev.trackedEntityInstance]);
+                                    delete teis.rows[ev.trackedEntityInstance];
+                                }                     
+                                $scope.dhis2Events[ev.trackedEntityInstance].push(ev);
+                            }
+                            else{
+                                if(teis.rows[ev.trackedEntityInstance]){
+                                    $scope.teiList.push(teis.rows[ev.trackedEntityInstance]);
+                                    delete teis.rows[ev.trackedEntityInstance];
+                                }  
+                                $scope.dhis2Events[ev.trackedEntityInstance] = [ev];
+                            }
+                            ev = EventUtils.setEventOrgUnitName(ev);
+                        }                        
                     }
                 });
                 $scope.reportStarted = false;
@@ -129,5 +123,87 @@
             });
         });
     };
-
+    
+    $scope.showEventDetails = function(dhis2Event, selectedTei){
+        
+        var modalInstance = $modal.open({
+            templateUrl: 'components/report/event-details.html',
+            controller: 'EventDetailsController',
+            resolve: {
+                dhis2Event: function () {
+                    return dhis2Event;
+                },
+                gridColumns: function(){
+                    return $scope.gridColumns;
+                },
+                selectedTei: function(){
+                    return selectedTei;
+                },
+                entityName: function(){
+                    return $scope.selectedProgram.trackedEntity.name;
+                },
+                reportMode: function(){
+                    return 'PROGRAM';
+                }
+            }
+        });
+
+        modalInstance.result.then({
+        });
+    };    
+})
+
+//Controller for event details
+.controller('EventDetailsController', 
+    function($scope, 
+            $modalInstance,
+            orderByFilter,
+            ProgramStageFactory,
+            dhis2Event,
+            selectedTei,
+            gridColumns,
+            entityName,
+            reportMode){
+    
+    $scope.selectedTei = selectedTei;
+    $scope.gridColumns = gridColumns;
+    $scope.entityName = entityName;
+    $scope.reportMode = reportMode;
+    $scope.currentEvent = dhis2Event;
+    $scope.currentEvent.providedElsewhere = [];
+    
+    if(!angular.isUndefined( $scope.currentEvent.notes)){
+        $scope.currentEvent.notes = orderByFilter($scope.currentEvent.notes, '-storedDate');            
+        angular.forEach($scope.currentEvent.notes, function(note){
+            note.storedDate = moment(note.storedDate).format('YYYY-MM-DD @ hh:mm A');
+        });
+    }
+    
+    ProgramStageFactory.get($scope.currentEvent.programStage).then(function(stage){
+        $scope.currentStage = stage;
+
+        $scope.allowProvidedElsewhereExists = false;
+        angular.forEach($scope.currentStage.programStageDataElements, function(prStDe){
+            $scope.currentStage.programStageDataElements[prStDe.dataElement.id] = prStDe.dataElement;
+            if(prStDe.allowProvidedElsewhere){
+                $scope.allowProvidedElsewhereExists = true;
+                $scope.currentEvent.providedElsewhere[prStDe.dataElement.id] = '';   
+            }                
+        });
+        angular.forEach($scope.currentEvent.dataValues, function(dataValue){
+            var val = dataValue.value;
+            if(val){
+                var de = $scope.currentStage.programStageDataElements[dataValue.dataElement];
+                if( de && de.type === 'int' && val){
+                    val = parseInt(val);
+                    dataValue.value = val;
+                }
+                $scope.currentEvent[dataValue.dataElement] = val;
+            }                    
+        });
+    });
+    
+    $scope.close = function () {
+        $modalInstance.close();
+    };
 });
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events.html	2014-08-27 15:40:36 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events.html	2014-08-29 14:15:09 +0000
@@ -21,75 +21,19 @@
 <div id="mainPage" class="bordered-div">
     <h2>{{'upcoming_events' | translate}}</h2>
     <form name="outerForm" novalidate>               
-        <div class="row">
-            <div class="col-sm-12 col-md-8">
-                <table class="table table-borderless table-striped">
-                    <tr>
-                        <td class='col-sm-6 col-md-4 vertical-center'>
-                            {{'program' | translate}}
-                        </td>
-                        <td class='col-sm-6 col-md-4'>
-                            <select ng-model="selectedProgram"
-                                    class="form-control"
-                                    ng-options="program as program.name for program in programs | orderBy: 'name'" 
-                                    ng-disabled="programs.length < 1">
-                                <option value="">{{programs.length > 0 ? 'please_select_a_program' : 'no_program_exists' | translate}}</option>
-                            </select>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td class='col-sm-6 col-md-4 vertical-center'>{{'org_unit'| translate}}</td>
-                        <td class='col-sm-6 col-md-4'>                 
-                            <label><input type="radio" ng-model="selectedOuMode.name" name="selected" value="SELECTED"> {{'SELECTED'| translate}}</label><br/>
-                            <label><input type="radio" ng-model="selectedOuMode.name" name="children" value="CHILDREN"> {{'CHILDREN'| translate}}</label><br/>
-                            <label><input type="radio" ng-model="selectedOuMode.name" name="descendants" value="DESCENDANTS"> {{'DESCENDANTS'| translate}}</label><br/>
-                            <label><input type="radio" ng-model="selectedOuMode.name" name="accessible" value="ACCESSIBLE"> {{'ACCESSIBLE'| translate}}</label>
-                        </td>
-                    </tr>
-                </table>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-sm-8 col-md-6">
-                <table class="table-borderless">
-                    <tr>
-                        <td>
-                            <input type="text" name="reportStartDate" placeholder="{{'start_date'| translate}} (yyyy-mm-dd)" class="form-control" ng-date ng-model="report.startDate" max="today" ng-required="true"/> 
-                            <span ng-show="outerForm.submitted && outerForm.reportStartDate.$invalid" style="color:red;font-size:12px">{{'required'| translate}} (yyyy-mm-dd)</span>
-                        </td>
-                        <td>
-                            <input type="text" name="reportEndDate" placeholder="{{'end_date'| translate}} (yyyy-mm-dd)" class="form-control" ng-date ng-model="report.endDate" max="today" ng-required="true"/>
-                            <span ng-show="outerForm.submitted && outerForm.reportEndDate.$invalid" style="color:red;font-size:12px">{{'required'| translate}} (yyyy-mm-dd)</span>
-                        </td>
-                    </tr>
-                </table>                
-            </div>
-            <div class="col-md-6 trim">
-                <button type="button" class="btn btn-primary" ng-click="generateReport()" ng-disabled="!selectedProgram">{{'go'| translate}}</button>               
-            </div>
-        </div>
-    </form>
-    <div class="row" ng-if="programs.length < 1">        
-        <div class="col-sm-8 col-md-6 vertical-spacing">
-            <div class="alert alert-warning">{{'no_program_exists_report'| translate}}</div> 
-        </div>
-    </div>
-    <div class="row" ng-if="programs.length > 0 && !selectedProgram">        
-        <div class="col-sm-8 col-md-6 vertical-spacing">
-            <div class="alert alert-warning">{{'please_select_program_report'| translate}}</div> 
-        </div>
-    </div>
+        <div ng-include="'components/report/reportForm.html'"></div>
+    </form>    
     <img src="../images/ajax-loader-bar.gif" ng-if="!dataReady && reportStarted"/>
     <div ng-if="dataReady">
-        <div ng-switch="teiCount">                    
+        <div ng-switch="teiList.length">                    
             <div ng-switch-when="undefined">
                 <div class="alert alert-warning vertical-spacing">
-                    {{'no'| translate}} {{selectedProgram.trackedEntity.name|| 'records' | translate}} {{'found'| translate}}                        
+                    {{'no_data_found'| translate}}
                 </div>
             </div>
             <div ng-switch-when="0">  
                 <div class="alert alert-warning vertical-spacing">
-                    {{'no'| translate}} {{selectedProgram.trackedEntity.name|| 'records' | translate}} {{'found'| translate}}                        
+                    {{'no_data_found'| translate}}
                 </div>
             </div>    
             <div ng-switch-default> 
@@ -100,38 +44,28 @@
                         <thead>
                             <tr>
                                 <th>{{selectedProgram.trackedEntity.name}}</th>
-                                <th>{{selectedProgram.name}} {{'visit' | translate}}</th>
+                                <th>{{selectedProgram.name}} {{'upcoming_event'| translate}}</th>
                             </tr>
                         </thead>
-                        <tr ng-repeat="tei in teiList.rows">
+                        <tr ng-repeat="tei in teiList">
                             <td>
                                 <span ng-repeat="gridColumn in gridColumns">
                                     <span class="bold">{{gridColumn.name}}:</span> {{tei[gridColumn.id]}}<br>
                                 </span>
                             </td>
-                            <td class='vertical-center'>    
-                                <div class='bold inline-block' ng-if='!dhis2Events[tei.id]'>{{'no_visit_made' | translate}}</div>
-                                <div class="inline-block" ng-repeat="ev in dhis2Events[tei.id] | orderBy: 'eventDate'">                                    
-                                    <div class="block align-center">{{ev.orgUnitName}}</div>                   
-                                    <div class="empty-stage-container" 
-                                         title="{{'no_data' | translate}}"
-                                         ng-class="{'{{ev.statusColor}}': true}"
-                                         ng-if='!ev.dataValues'>
-                                        {{ev.name}}<br/>
-                                        {{ev.eventDate}}<br>
-                                        {{'no_data' | translate}}
-                                    </div>
-                                    <div class="stage-container" 
-                                         title="{{'details' | translate}}"
-                                         ng-class="{'{{ev.statusColor}}': true}"
-                                         ng-if='ev.dataValues'
+                            <td>
+                                <span class='bold inline-block' ng-if='!dhis2Events[tei.id]'>{{'no_visit_made'| translate}}</span>
+                                <span class="inline-block" ng-repeat="ev in dhis2Events[tei.id] | orderBy: 'dueDate'">                                    
+                                    <span class="block align-center">{{ev.orgUnitName}}</span>                   
+                                    <span class="stage-container" 
+                                         title="{{'details'| translate}}"
+                                         ng-class="{'{{ev.statusColor}}': true}"
                                          ng-click="showEventDetails(ev, tei)">
                                         {{ev.name}}<br/>
-                                        {{ev.eventDate}}<br>  
-                                        {{'data_exists' | translate}}
-                                    </div>                                    
-                                    <span><i class="fa fa-arrow-right" ng-show="$index < dhis2Events[tei.id].length - 1"></i></span>
-                                </div>                                         
+                                        {{ev.dueDate}}<br>  
+                                    </span>                                    
+                                    <i class="fa fa-arrow-right" ng-show="$index < dhis2Events[tei.id].length - 1"></i>
+                                </span>                                             
                             </td>
                         </tr>
                     </table>
@@ -140,4 +74,4 @@
             </div>
         </div> 
     </div>
-</div>
+</div>
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/en.json'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/en.json	2014-08-29 12:39:37 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/en.json	2014-08-29 14:15:09 +0000
@@ -123,6 +123,7 @@
     "upcoming_events_description": "Generate a report that lists tracked entity instances and their upcoming events that require attention. The events displayed are those that are scheduled in due time.",
     "overdue_events": "Overdue Events",
     "overdue_events_description": "Generate a report of overdue events for a selected program and organisation unit. The report displays list of tracked entity instances and their events that are not conducted on scheduled due dates.",
+    "upcoming_event": "Upcoming event",
     "report": "Report",
     "_report": "report",     
     "visit_schedule": "Visit Schedule",

=== 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	2014-08-29 12:39:37 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js	2014-08-29 14:15:09 +0000
@@ -533,8 +533,15 @@
             });            
             return promise;
         },
-        getByOrgUnitAndProgram: function(orgUnit, ouMode, program, startDate, endDate){   
-            var promise = $http.get( '../api/events.json?' + 'orgUnit=' + orgUnit + '&ouMode='+ ouMode + '&program=' + program + '&startDate=' + startDate + '&endDate=' + endDate + '&paging=false').then(function(response){
+        getByOrgUnitAndProgram: function(orgUnit, ouMode, program, startDate, endDate){
+            var url;
+            if(startDate && endDate){
+                url = '../api/events.json?' + 'orgUnit=' + orgUnit + '&ouMode='+ ouMode + '&program=' + program + '&startDate=' + startDate + '&endDate=' + endDate + '&paging=false';
+            }
+            else{
+                url = '../api/events.json?' + 'orgUnit=' + orgUnit + '&ouMode='+ ouMode + '&program=' + program + '&paging=false';
+            }
+            var promise = $http.get( url ).then(function(response){
                 return response.data.events;
             });            
             return promise;