=== modified file 'dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/i18n/en.json'
--- dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/i18n/en.json	2014-03-21 07:58:52 +0000
+++ dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/i18n/en.json	2013-03-22 16:15:16 +0000
@@ -39,5 +39,7 @@
     "enrollment": "Enrollment",
     "notes": "Notes",
     "dataentry": "Data Entry",
-    "current_selections": "Current selections"
+    "current_selections": "Current selections",
+    "data_element": "Data element",
+    "value": "Value"
 }

=== modified file 'dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/scripts/controllers.js'
--- dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/scripts/controllers.js	2014-03-21 07:58:52 +0000
+++ dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/scripts/controllers.js	2013-03-22 16:15:16 +0000
@@ -279,8 +279,6 @@
         EnrollmentService.get($scope.selectedEntity.trackedEntityInstance).then(function(data){
             $scope.enrollments = data.enrollmentList;
             
-            console.log('the enrollments are: ', $scope.enrollments);
-
             if($scope.enrollments && $scope.enrollments.length == 1){
                 
                 $scope.selectedProgramId = $scope.enrollments[0].program;
@@ -306,8 +304,7 @@
         });
         
         if(isEnrolled){
-            console.log('enrolled');
-            
+           
             //broadcast for data entry
             $rootScope.$broadcast('dataentry', {selectedEntity: $scope.selectedEntity, 
                                                     selectedProgramId: prId, 
@@ -324,6 +321,7 @@
                 orderByFilter,
                 storage,
                 DHIS2EventFactory,
+                OrgUnitService,
                 TranslationService) {
 
     TranslationService.translate();
@@ -335,6 +333,8 @@
     //listen for the selected items
     $scope.$on('dataentry', function(event, args) {  
         
+        $scope.currentEvent = null;
+        
         $scope.dhis2Events = '';
         $scope.programStages = {};
     
@@ -344,29 +344,43 @@
         
         if($scope.selectedOrgUnitId && $scope.selectedProgramId && $scope.selectedEntity ){
             
-            //get selected program
-            var program = storage.get($scope.selectedProgramId);
-            
-            angular.forEach(program.programStages, function(prSt){
-                $scope.programStages[prSt.id] = prSt;
-            });
-            
             DHIS2EventFactory.getByEntity($scope.selectedEntity.trackedEntityInstance, $scope.selectedOrgUnitId, $scope.selectedProgramId).then(function(data){
                 $scope.dhis2Events = data;
                 
                 if($scope.dhis2Events){
                     
                     angular.forEach($scope.dhis2Events, function(dhis2Event){
-                        dhis2Event.eventDate = moment(dhis2Event.eventDate, 'YYYY-MM-DD')._d
+                        dhis2Event.eventDate = moment(dhis2Event.eventDate, 'YYYY-MM-DD')._d;
                         dhis2Event.eventDate = Date.parse(dhis2Event.eventDate);
-                        dhis2Event.eventDate = $filter('date')(dhis2Event.eventDate, 'yyyy-MM-dd');                    
+                        dhis2Event.eventDate = $filter('date')(dhis2Event.eventDate, 'yyyy-MM-dd');
+                        
+                        dhis2Event.name = storage.get(dhis2Event.programStage).name;
+                        
+                        OrgUnitService.open().then(function(){
+                            OrgUnitService.get(dhis2Event.orgUnit).then(function(ou){
+                                if(ou){
+                                    dhis2Event.orgUnitName = ou.n;
+                                }                                                       
+                            });                            
+                        }); 
+                                                
+                        if(dhis2Event.status == 'COMPLETED'){
+                            dhis2Event.statusColor = 'stage-completed';
+                        }
+                        else{
+                            var date = moment(dhis2Event.eventDate, 'yyyy-MM-dd')
+                            if(moment().isAfter(date)){
+                                dhis2Event.statusColor = 'stage-overdue';
+                            }
+                            else{
+                                dhis2Event.statusColor = 'stage-on-time';
+                            }
+                        }                        
                     });
 
                     $scope.dhis2Events = orderByFilter($scope.dhis2Events, '-eventDate');
                     $scope.dhis2Events.reverse();                
-                }            
-                
-                console.log('existing events are:  ', $scope.dhis2Events);                
+                }              
             });          
         }
     });
@@ -375,8 +389,12 @@
         console.log('need to create new event');        
     };
     
-    $scope.showDataEntry = function(){        
-        console.log('need to show data entry');        
+    $scope.showDataEntry = function(event){  
+        
+        if(event){
+            $scope.currentEvent = event;            
+            $scope.currentStage = storage.get($scope.currentEvent.programStage);            
+        }     
     };
     
 })

=== modified file 'dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/scripts/directives.js'
--- dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/scripts/directives.js	2014-03-17 15:59:31 +0000
+++ dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/scripts/directives.js	2013-03-22 16:15:16 +0000
@@ -17,54 +17,11 @@
     };   
 })
 
-.directive('selectedOrgUnit', function($timeout) {        
+.directive('selectedOrgUnit', function() {        
 
     return {        
         restrict: 'A',        
         link: function(scope, element, attrs){  
-          
-            //when tree has loaded, get selected orgunit - if there is any - and inform angular           
-            $(function() {                 
-                
-                var adapters = [];
-                var partial_adapters = [];
-
-                if( dhis2.ou.memoryOnly ) {
-                    adapters = [ dhis2.storage.InMemoryAdapter ];
-                    partial_adapters = [ dhis2.storage.InMemoryAdapter ];
-                } else {
-                    adapters = [ dhis2.storage.IndexedDBAdapter, dhis2.storage.DomLocalStorageAdapter, dhis2.storage.InMemoryAdapter ];
-                    partial_adapters = [ dhis2.storage.IndexedDBAdapter, dhis2.storage.DomSessionStorageAdapter, dhis2.storage.InMemoryAdapter ];
-                }
-
-                dhis2.ou.store = new dhis2.storage.Store({
-                    name: OU_STORE_NAME,
-                    objectStores: [
-                        {
-                            name: OU_KEY,
-                            adapters: adapters
-                        },
-                        {
-                            name: OU_PARTIAL_KEY,
-                            adapters: partial_adapters
-                        }
-                    ]
-                });
-
-                dhis2.ou.store.open().done( function() {
-                    selection.load();
-                    $( "#orgUnitTree" ).one( "ouwtLoaded", function() {
-                        var selected = selection.getSelected()[0];
-                        selection.getOrganisationUnit(selected).done(function(data){                            
-                            if( data ){
-                                scope.selectedOrgUnit = {id: selected, name: data[selected].n};                                  
-                                scope.$apply();
-                            }                        
-                        });
-                    } );
-                    
-                });
-            });
             
             //listen to user selection, and inform angular         
             selection.setListenerFunction( organisationUnitSelected );

=== modified file 'dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/scripts/services.js'
--- dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/scripts/services.js	2014-03-21 07:58:52 +0000
+++ dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/scripts/services.js	2013-03-22 16:15:16 +0000
@@ -84,6 +84,54 @@
     };    
 })
 
+/*Orgunit service for local db */
+.service('OrgUnitService', function($window, $q){
+    
+    var indexedDB = $window.indexedDB;
+    var db = null;
+    
+    var open = function(){
+        var deferred = $q.defer();
+        
+        var request = indexedDB.open("dhis2ou");
+        
+        request.onsuccess = function(e) {
+          db = e.target.result;
+          deferred.resolve();
+        };
+
+        request.onerror = function(){
+          deferred.reject();
+        };
+
+        return deferred.promise;
+    };
+    
+    var get = function(uid){
+        
+        var deferred = $q.defer();
+        
+        if( db === null){
+            deferred.reject("DB not opened");
+        }
+        else{
+            var tx = db.transaction(["ou"]);
+            var store = tx.objectStore("ou");
+            var query = store.get(uid);
+                
+            query.onsuccess = function(e){
+                deferred.resolve(e.target.result);
+            };
+        }
+        return deferred.promise;
+    };
+    
+    return {
+        open: open,
+        get: get
+    };    
+})
+
 /* Service to deal with enrollment */
 .service('EnrollmentService', function($http) {
     

=== modified file 'dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/styles/style.css'
--- dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/styles/style.css	2014-03-21 07:58:52 +0000
+++ dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/styles/style.css	2013-03-22 16:15:16 +0000
@@ -7,33 +7,6 @@
     width: 130px;
 }
 
-input.tiny-button[type="button"] 
-{
-    width: 20px;
-    height: 20px;
-}
-
-input.small-button[type="button"] 
-{
-    width: 30px;
-    height: 30px;
-}
-
-input.normal-button[type="button"] , input.normal-button[type="submit"] 
-{
-    width: 60px;
-}
-
-input.large-button[type="button"] 
-{
-    width: 130px;
-}
-
-select.search-field
-{
-    width: 180px;
-}
-
 input[type="text"] 
 {
     width: 260px;
@@ -54,26 +27,6 @@
     width: 264px;
 }
 
-.button-list 
-{
-    text-align:right;
-    padding-bottom:10px;
-    width:100%;
-}
-
-.incomplete-record
-{ 
-    color: black;
-    font-size: 21px;
-    font-weight: bold;
-}
-
-.img-button
-{
-    width:20px;
-    cursor:pointer;
-}
-
 /*----------------------------------------------------------------------------*/
 /* Table
 /*----------------------------------------------------------------------------*/
@@ -119,33 +72,6 @@
     background-color: #FFCFCF
 }
 
-.search 
-{
-    position: relative;
-    border: 1px solid #a4d2a3;
-    background-color: #d5efd5;
-    padding-top: 10px;
-    padding-right: 20px;
-    padding-bottom: 5px;
-    padding-left: 20px;
-    margin-bottom: 15px;
-    border-radius: 3px;
-    max-width: 570px;
-}
-
-#minimized-advanced-search 
-{
-    position: relative;
-    border: 1px solid #a4d2a3;
-    background-color: #d5efd5;
-    padding-top: 10px;
-    padding-right: 20px;
-    padding-bottom: 5px;
-    padding-left: 20px;
-    margin-bottom: 15px;
-    border-radius: 3px;
-}
-
 .green-background 
 {
     position: relative;
@@ -194,233 +120,24 @@
     line-height: 18px;
 }
 
-input.criteria
-{
-    width: 130px;
-    margin-right: 5px;
-}
-
-input.move-button
-{
-    width: 20px;
-    height: 60px;
-    border-color: #bbbbbb;
-    cursor: pointer;
-    border: 1px solid #aaa;
-    margin: 0px;
-}
-
-input.optionset[type="text"]
-{
-    width:240px; 
-}
-
-input.datefield[type="text"]
-{
-    width:240px; 
-}
-
-div.provided-elsewhere
-{
-    width:20px; 
-    height:20px; 
-}
-
-.ui-button
-{
-    max-height: 100px;
-}
-
-.ui-autocomplete
-{
-    max-height: 100px;
-    overflow-y: auto;
-    overflow-x: hidden;
-}
-
-.hidden
-{
-    display: none;
-}
-
-.colorHelpTable td
-{
-    height: 32px;
-}
-
 /* --------------------------------------------------------------
 // Dashboard
 // -------------------------------------------------------------- */
 
-div.dashboard-area 
-{
-    list-style: none inside;
-    margin: 50px 50px;
-    margin: 0;
-    padding: 0;
-}
-
-p.header
-{
-    background-color:#CBDDEB;
-    background-repeat:repeat-x;
-    border:1px solid #C8DBEA;
-    color:#39547D;
-    padding:6px;
-    margin:0px;
-    font-family: LiberationSansBold,arial;
-}
-
-table.link-area
-{
-    border:1px solid #d0d0d0;
-    padding-top:1px;
-    padding-right:1px;
-    padding-left:1px;
-    padding-bottom:0px;
-    height:120px;
-    overflow:hidden;
-    align:bottom;
-}
-
-div.link-area
-{
-    display:inline-block;
-    border:1px solid #d0d0d0;
-    padding-top:1px;
-    padding-right:1px;
-    padding-left:1px;
-    padding-bottom:0px;
-    height:172px;
-
-    overflow:hidden;
-}
-
-.contentProviderTable
-{
-    height: 140px;
-    overflow-y: auto;
-    overflow-x:hidden;
-}
-
-.contentProviderTable table
-{
-    width:100%;
-}
-
-.contentProviderTable td
-{
-    padding-top:3px;
-    padding-bottom:3px;
-    border-bottom:1px solid #cad5e5;
-}
-
-div.event-dashboard
-{
-    width:900px;
-    border:1px solid #d0d0d0;
-    position:relative;
-    top: 47px;
-}
-
-div.link-area-active
-{
-    width:900px;
-    border:10px solid #d0d0d0;
-    position:relative;
-    top: 47px;
-}
-
-div.event-flow-dashboard
-{
-    width:900px;
-    height:140px;
-    overflow-x:auto;
-    overflow-y:hidden;
-}
-
-#subMenu
-{
-    position:absolute;
-}
-
-#subMenu ul
-{
-    list-style-type:none;
-    margin: 0;
-}
-
-#subMenu li
-{
-    float:left;
-}
-
-#subMenu a
-{
-    padding: 6px 12px;
-    height: 25px;
-    border: 1px solid #aaa;
-    border-radius: 3px;
-    margin-right: 4px;
-    font-family: LiberationSansBold, arial;
-    font-size: 13px;
-    color: #606060;
-    background-color: #f3f3f3;
-}
-
-#subMenu a:hover
-{
-    text-decoration: none;
-    background-color: #f8f8f8;
-}
-
-.tooltip 
-{
-    border-bottom: dashed 1px #aaa;
-    text-decoration: none;
-    cursor: help;
-    text-align: left;
-}
-
-.tooltip-target {
-    width: 250px;
-    top: 29px;
-    left: 764px;
-    display: none;
-    padding: 10px;
-    background: #ffffff;
-    position: absolute;
-    display: none;
-    float: left;
-    -webkit-border-radius: 7px;
-    -moz-border-radius: 7px;
-    border-radius: 7px;
-    border: solid 1px #ddd;
-    z-index:1001;
-}
-
-.comment-table
-{
-    width:320px;
-    overflow-y: auto;
-    overflow-x:hidden;
-}
-
-.comment-table td
-{
-    padding-top:3px;
-    padding-bottom:3px;
-    border-bottom:1px solid #cad5e5;
-}
 
 /* --------------------------------------------------------------
 // program-stage-instances
 // -------------------------------------------------------------- */
 
+.data-entry{
+    overflow: scroll;
+}
+
 .arrow-container {
     font-size: 25px;
     width: 10px;
 }
+
 .stage-container
 {
     width:100%;
@@ -441,30 +158,63 @@
     overflow-y:hidden;
 }
 
-.arrow-left {
-    width:0; 
-    height:0; 
-    border-top:45px solid transparent;
-    border-bottom:45px solid transparent; 
-    border-right:30px solid #d0d0d0;
-    cursor:pointer;
-}
-
-.arrow-right {
-    width:0; 
-    height:0; 
-    border-top:45px solid transparent;
-    border-bottom:45px solid transparent;
-    border-left:30px solid #d0d0d0;
-    cursor:pointer;
-}
-
 div.orgunit-object
 {
     margin-left: 5px;
     width: 120px;
 }
 
+.orgunit-container
+{
+    text-align: center;
+}
+
+.block {
+    display: block;
+}
+
+.inline-block {
+    display: inline-block;
+}
+
+.stage-container
+{
+    display: inline-block;
+    width: 135px;
+    height: 60px;
+    cursor: pointer;
+    opacity: 1.0;
+    margin: 5px;
+    white-space: normal;
+    padding-top: 5px;
+    text-align: center;
+}
+
+.stage-container:hover
+{
+    border: 2px solid;
+}
+
+.stage-completed {
+    background-color: #b9ffb9;
+}
+
+.stage-on-time {
+    background-color: #fffe8c;
+}
+
+.stage-overdue {
+    background-color: #ff8a8a;
+}
+
+.current-stage{
+    border: 2px solid;
+}
+
+.current-stage-color{
+    color: #b94a48;
+}
+
 input.stage-object[type="button"]
 {
     width: 135px;

=== modified file 'dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/views/dashboard.html'
--- dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/views/dashboard.html	2014-03-19 16:58:56 +0000
+++ dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/views/dashboard.html	2013-03-22 16:15:16 +0000
@@ -42,7 +42,7 @@
                 <div ng-include="'views/enrollment.html'"></div>                
             </div>
             <div class="col-sm-3 col-md-3" ng-controller="NotesController">
-                  <div ng-include="'views/notes.html'"></div>             
+                <div ng-include="'views/notes.html'"></div>             
             </div>
         </div>
     </div>

=== modified file 'dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/views/dataentry.html'
--- dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/views/dataentry.html	2014-03-21 07:58:52 +0000
+++ dhis-2/dhis-web/dhis-web-tracker-capture/src/main/webapp/dhis-web-tracker-capture/views/dataentry.html	2013-03-22 16:15:16 +0000
@@ -4,7 +4,7 @@
             <span class="list-title">{{dataEntry.title| translate}}</span>
         </accordion-heading>     
         <div ng-show="dhis2Events">
-            <table style="width: 100%;">
+            <table class="table-borderless">
                 <tbody>
                     <tr>
                         <td>
@@ -12,26 +12,97 @@
                                 <table class="stage-flow">
                                     <tbody>
                                         <tr>                                            
-                                            <td ng-repeat="dhis2Event in dhis2Events">
-                                                <span class="arrow-container">→</span><input type="button" class="stage-object" value="{{programStages[dhis2Event.programStage].name}}" style="border-color: rgb(152, 142, 128);" ng-click="showDataEntry()">
+                                            <td class="inline-block" ng-repeat="dhis2Event in dhis2Events">
+                                                <span class="block orgunit-container">{{dhis2Event.orgUnitName}}</span>
+                                                <span class="arrow-container">→</span>
+                                                <span class="stage-container"                                                     
+                                                      ng-class="{'current-stage': currentEvent.event == dhis2Event.event, '{{dhis2Event.statusColor}}': true}"                                                      
+                                                      ng-click="showDataEntry(dhis2Event)">
+                                                    {{dhis2Event.name}}<br/>
+                                                    {{dhis2Event.eventDate}}                                                    
+                                                </span>                                                
                                             </td>
-                                            
                                         </tr>
                                     </tbody>
-                                    
                                 </table>
                             </div>
-                            
                         </td>
                         <td class="right">
-                            <input type="button" class="entity-instance-object" value="{{'new_event' | translate}}" ng-click="createNewEvent()">
+                            <input type="button" class="entity-instance-object" value="{{'new_event'| translate}}" ng-click="createNewEvent()">
                         </td>
                     </tr>
                 </tbody>                
             </table>
             <hr>
-            
-            hi there...
+            <div ng-show="currentEvent">
+                <table class="dhis2-list-table-striped">                    
+                    <thead>                        
+                        <tr>
+                            <th>
+                                {{'data_element'| translate}}                    
+                            </th>
+                            <th>
+                                {{'value'| translate}}                    
+                            </th>         
+                        </tr>                        
+                    </thead>
+                    <tbody id="list">
+                        <tr ng-repeat="prStDe in currentStage.programStageDataElements">
+                            <td class="max-column-width">
+                                {{prStDe.dataElement.name}}                                              
+                            </td>
+                            <td class="max-column-width">
+                                <ng-form name="innerFormAdd">
+                                    <div ng-switch="prStDe.dataElement.type">
+                                        <div ng-switch-when="int">
+                                            <input type="number" 
+                                                   ng-model="currentEvent[prStDe.dataElement.id]" 
+                                                   ng-required={{prStDe.compulsory}} 
+                                                   name="foo" 
+                                                   style="width:98%;"/>
+                                            <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'required'| translate}}</span>
+                                        </div>
+                                        <div ng-switch-when="string">                                        
+                                            <div class="container-fluid">
+                                                <input type="text" 
+                                                       ng-model="currentEvent[prStDe.dataElement.id]" 
+                                                       ng-required={{prStDe.compulsory}} 
+                                                       typeahead="option for option in prStDe.dataElement.optionSet.options | filter:$viewValue | limitTo:20" 
+                                                       typeahead-open-on-focus                                                        
+                                                       name="foo" 
+                                                       style="width:98%;">                                            
+                                                <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'required'| translate}}</span>
+                                            </div>
+                                        </div>
+                                        <div ng-switch-when="bool">
+                                            <select ng-model="currentEvent[prStDe.dataElement.id]" 
+                                                    ng-required={{prStDe.compulsory}} 
+                                                    name="foo" 
+                                                    style="width:98%;">
+                                                <option value="">{{'please_select'| translate}}</option>                        
+                                                <option value="0">{{'no'| translate}}</option>
+                                                <option value="1">{{'yes'| translate}}</option>
+                                            </select>
+                                            <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'required'| translate}}</span>
+                                        </div>
+                                        <div ng-switch-when="date">
+                                            <input type="text" 
+                                                   placeholder="yyyy-mm-dd" 
+                                                   ng-date 
+                                                   ng-model="currentEvent[prStDe.dataElement.id]" 
+                                                   ng-required={{prStDe.compulsory}}  
+                                                   name="foo" 
+                                                   style="width:98%;">
+                                            <span ng-show="outerForm.submitted && innerFormAdd.foo.$invalid" class="red">{{'required'| translate}}</span>
+                                        </div>
+                                    </div>
+                                </ng-form>
+                            </td>
+                        </tr>
+                    </tbody>        
+                </table>
+
+            </div>
         </div>
     </accordion-group>
 </accordion>
\ No newline at end of file