diff --git a/composer.lock b/composer.lock
index a1172379..2aa7742d 100644
--- a/composer.lock
+++ b/composer.lock
@@ -1,7 +1,7 @@
 {
     "_readme": [
         "This file locks the dependencies of your project to a known state",
-        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
+        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
     "content-hash": "b101ecfbc1f6f2270f0e8ad326035b7e",
diff --git a/src/Controller/RAPIController.php b/src/Controller/RAPIController.php
index a8b7a589..0097f202 100644
--- a/src/Controller/RAPIController.php
+++ b/src/Controller/RAPIController.php
@@ -690,7 +690,7 @@ class RAPIController extends Controller
             $wh->createWarranty($serial, $plate_number, $first_name, $last_name, $mobile_number, $batt_list, $date_purchase, $warranty_class);
         }
 
-		// send mqtt event (fulfilled)
+        // send mqtt event (fulfilled)
         $rider = $this->session->getRider();
 		$image_url = $req->getScheme() . '://' . $req->getHttpHost() . $req->getBasePath() . '/assets/images/user.gif';
 		if ($rider->getImageFile() != null)
@@ -994,77 +994,4 @@ class RAPIController extends Controller
             ->setWarrantyExpiration($warr_date);
     }
 
-    protected function createWarranty($jo)
-    {
-        $em = $this->getDoctrine()->getManager();
-        $warranty = new Warranty();
-
-        $warranty_class = $jo->getWarrantyClass();
-        $first_name = $jo->getCustomer()->getFirstName();
-        $last_name = $jo->getCustomer()->getLastName();
-        $mobile_number = $jo->getCustomer()->getPhoneMobile();
-
-        // check if date fulfilled is null
-        if ($jo->getDateFulfill() ==  null)
-            $date_create = $jo->getDateCreate();
-        else
-            $date_create = $jo->getDateFulfill();
-
-        // normalize the plate number 
-        $plate_number = $this->normalizePlateNumber($jo->getCustomerVehicle()->getPlateNumber());
-
-        // get battery and its warranty periods
-        $warranty_period = 0;
-        $invoice_items = $jo->getInvoice()->getItems();
-        foreach ($invoice_items as $item)
-        {
-            if ($item->getBattery() != null)
-            {
-                $battery = $item->getBattery();
-                $warranty->setBatteryModel($battery->getModel());
-                $warranty->setBatterySize($battery->getSize());
-
-                if ($warranty_class == WarrantyClass::WTY_PRIVATE)
-                    $warranty_period = $battery->getWarrantyPrivate();
-                else if ($warranty_class == WarrantyClass::WTY_COMMERCIAL)
-                    $warranty_period = $battery->getWarrantyCommercial();
-                else if ($warranty_class == WarrantyClass::WTY_TNV)
-                    $warranty_period = $battery->getWarrantyTnv();
-            }
-        }
-
-        // compute expiry date
-        $expiry_date = $this->computeDateExpire($date_create, $warranty_period);
-
-        $warranty->setWarrantyClass($warranty_class)
-            ->setFirstName($first_name)
-            ->setLastName($last_name)
-            ->setMobileNumber($mobile_number)
-            ->setDatePurchase($date_create)
-            ->setDateExpire($expiry_date)
-            ->setPlateNumber($plate_number);
-
-        $em->persist($warranty);
-        $em->flush();
-    }
-
-    protected function normalizePlateNumber($plate_number)
-    {
-        // make it upper case
-        $plate_number = trim(strtoupper($plate_number));
-
-        // remove special characters and spaces
-        $plate_number = preg_replace('/[^A-Za-z0-9]/', '', $plate_number);
-
-        //error_log('plate number ' . $plate_number);
-
-        return $plate_number;
-    }
-
-    protected function computeDateExpire($date_create, $warranty_period)
-    {
-        $expire_date = clone $date_create;
-        $expire_date->add(new DateInterval('P'.$warranty_period.'M'));
-        return $expire_date;
-    }
 }
diff --git a/templates/job-order/cmb.form.onestep.html.twig b/templates/job-order/cmb.form.onestep.html.twig
index 1b043791..8fa8498c 100644
--- a/templates/job-order/cmb.form.onestep.html.twig
+++ b/templates/job-order/cmb.form.onestep.html.twig
@@ -380,17 +380,19 @@
                                                     <tr>
                                                         <th>Hub</th>
                                                         <th>Branch</th>
-                                                        <!--
-                                                        <th class="text-right">Distance</th>
-                                                        <th class="text-right">Travel Time</th>
-                                                        <th class="text-right">Available Riders</th>
-                                                        <th class="text-right">Jobs For Assignment</th>
-                                                        -->
                                                         <th>Contact Numbers</th>
                                                         <th>Action</th>
                                                     </tr>
                                                 </thead>
                                                 <tbody id="nearest_hubs">
+                                                {% if mode in ['onestep-edit'] %}
+                                                    {% for hub in hubs %}
+                                                        <tr data-id="{{ hub.hub.getID }}"{{ obj.getHub and obj.getHub.getID == hub.hub.getID ? ' class="m-table__row--primary"' }}>
+                                                        <td>{{ hub.hub.getName }}</td>
+                                                        <td>{{ hub.hub.getBranch }}</td>
+                                                        <td>{{ hub.hub.getContactNumbers }}</td>
+                                                    {% endfor %}
+                                                {% endif %}
                                                 </tbody>
                                             </table>
                                         </div>
@@ -422,6 +424,24 @@
                                                     </tr>
                                                 </thead>
                                                 <tbody id="riders">
+                                                {% if mode in ['onestep-edit'] %}
+                                                    {% set avail_riders = obj.getHub.getAvailableRiders|default([]) %}
+                                                    <tr class="placeholder-row{{ obj.getHub and avail_riders|length > 0 ? ' hide' }}">
+                                                        <td colspan="5">
+                                                            No riders available.
+                                                        </td>
+                                                    </tr>
+
+                                                    {% if obj.getHub %}
+                                                        {% for rider in avail_riders %}
+                                                            <tr data-id="{{ rider.getID }}"{{ obj.getRider and obj.getRider.getID == rider.getID ? ' class="m-table__row--primary"' }}">
+                                                                <td>{{ rider.getFirstName }}</td>
+                                                                <td>{{ rider.getLastName }}</td>
+                                                                <td>{{ rider.getContactNumber }}</td>
+                                                                <td>{{ rider.getPlateNumber }}</td>
+                                                        {% endfor %}
+                                                    {% endif %}
+                                                {% endif %}
                                                 </tbody>
                                             </table>
                                         </div>
@@ -584,6 +604,8 @@
 
 $(function() {
     var form_in_process = false;
+    var selected_hub = '';
+    var selected_rider = '';
 
     // openstreet maps stuff
     // TODO: move this to a service
@@ -604,7 +626,7 @@ $(function() {
     });
     var icon_hub = L.divIcon({
         className: 'map-div-icon',
-        html: "<div style='background-color:#00FF00;' class='marker-pin'></div><i class='fa fa-home awesome'>",
+        html: "<div style='background-color:#FFFF00;' class='marker-pin'></div><i class='fa fa-home awesome'>",
         iconSize: [39, 42],
         iconAnchor: [15, 42]
     });
@@ -623,25 +645,40 @@ $(function() {
 
         var marker = L.marker([lat, lng], { icon: icon_customer });
 
-        // get nearest hubs ajax
-        var hub_table = '';
-        $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
-            var hubs = data['hubs'];
-            for (i in hubs) {
-                var hub = hubs[i];
-                var hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
-                hubLayerGroup.addLayer(hub_marker);
+        {% if mode in ['onestep'] %}
+            // get nearest hubs ajax
+            var hub_table = '';
+            $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
+                var hubs = data['hubs'];
+                for (i in hubs) {
+                    var hub = hubs[i];
+                    var hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
+                    hubLayerGroup.addLayer(hub_marker);
 
-                hub_table += '<tr data-id=' + hub['id'] + '>';
-                hub_table += '<td>' + hub['name'] + '</td>';
-                hub_table += '<td>' + hub['branch'] + '</td>';
-                hub_table += '<td>' + hub['cnum'] + '</td>';
-                hub_table += '<td></td>';
-                hub_table += '</tr>';
-            }
+                    hub_table += '<tr data-id=' + hub['id'] + '>';
+                    hub_table += '<td>' + hub['name'] + '</td>';
+                    hub_table += '<td>' + hub['branch'] + '</td>';
+                    hub_table += '<td>' + hub['cnum'] + '</td>';
+                    hub_table += '<td></td>';
+                    hub_table += '</tr>';
+                }
 
-            $('#nearest_hubs').html(hub_table);
-        });
+                $('#nearest_hubs').html(hub_table);
+            
+            });
+        {% endif %}
+
+        {% if mode in ['onestep-edit'] %}
+            // get nearest hubs ajax
+            $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
+                var hubs = data['hubs'];
+                for (i in hubs) {
+                    var hub = hubs[i];
+                    var hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
+                    hubLayerGroup.addLayer(hub_marker);
+                }
+            });
+        {% endif %}
 
         // add marker to layer group
         markerLayerGroup.addLayer(marker);
@@ -706,7 +743,6 @@ $(function() {
 	});
 
     $(function() {
-        var selected_hub = ""; 
         $('#hubs-table').on('click', 'tr', function() {
             var id = $(this).data('id');
 
@@ -723,6 +759,10 @@ $(function() {
                 selected_hub = id;
                 $('#hub-field').val(selected_hub); 
 
+                // clear rider field
+                $('#rider-field').val('');
+                selected_rider = '';
+
                 // get riders of hub
                 // get hub riders ajax
                 // TODO: add latitude and longitude of delivery location to ajax request
@@ -758,7 +798,6 @@ $(function() {
     });
 
     $(function() {
-        var selected_rider = '';
         $('#rider-table').on('click', 'tr', function() {
             var id = $(this).data('id');
 
@@ -777,9 +816,29 @@ $(function() {
         var lat = {{ obj.getCoordinates.getLatitude }};
         var lng = {{ obj.getCoordinates.getLongitude }};
 
+        selected_hub = '{{ obj.getHub ? obj.getHub.getID: "" }}';
+        $('#hub-field').val(selected_hub);
+
+        selected_rider = '{{ obj.getRider ? obj.getRider.getID: "" }}';
+        $('#rider-field').val(selected_rider);
+
         selectPoint(lat, lng);
 
-        // TODO: find a way to highlight the set hub
+        // need to put selected rider on map. selected_hub is already on map because of selectPoint
+        riderLayerGroup.clearLayers();
+
+        $.getJSON("{{ url('hub_riders') }}?id=" + selected_hub, function(data) {
+            var riders = data['riders'];
+            for (i in riders) {
+                var rider = riders[i];
+                if (selected_rider == rider['id']) {
+                    var rider_lat = rider['location'][0];
+                    var rider_lng = rider['location'][1];
+                    var rider_marker = L.marker([rider_lat, rider_lng], { icon: icon_rider_available });
+                    riderLayerGroup.addLayer(rider_marker);
+                }
+            }
+        });
     {% endif %}
 
     {% if mode in ['update-processing', 'update-reassign-hub'] %}
diff --git a/templates/job-order/form.onestep.html.twig b/templates/job-order/form.onestep.html.twig
index f7a60b1f..40fef7d4 100644
--- a/templates/job-order/form.onestep.html.twig
+++ b/templates/job-order/form.onestep.html.twig
@@ -383,6 +383,14 @@
                                                     </tr>
                                                 </thead>
                                                 <tbody id="nearest_hubs">
+                                                {% if mode in ['onestep-edit'] %}
+                                                    {% for hub in hubs %}
+                                                        <tr data-id="{{ hub.hub.getID }}"{{ obj.getHub and obj.getHub.getID == hub.hub.getID ? ' class="m-table__row--primary"' }}>
+                                                        <td>{{ hub.hub.getName }}</td>
+                                                        <td>{{ hub.hub.getBranch }}</td>
+                                                        <td>{{ hub.hub.getContactNumbers }}</td>
+                                                    {% endfor %}
+                                                {% endif %}
                                                 </tbody>
                                             </table>
                                         </div>
@@ -412,6 +420,24 @@
                                                     </tr>
                                                 </thead>
                                                 <tbody id="riders">
+                                                {% if mode in ['onestep-edit'] %}
+                                                    {% set avail_riders = obj.getHub.getAvailableRiders|default([]) %}
+                                                    <tr class="placeholder-row{{ obj.getHub and avail_riders|length > 0 ? ' hide' }}">
+                                                        <td colspan="5">
+                                                            No riders available.
+                                                        </td>
+                                                    </tr>
+
+                                                    {% if obj.getHub %}
+                                                        {% for rider in avail_riders %}
+                                                            <tr data-id="{{ rider.getID }}"{{ obj.getRider and obj.getRider.getID == rider.getID ? ' class="m-table__row--primary"' }}">
+                                                                <td>{{ rider.getFirstName }}</td>
+                                                                <td>{{ rider.getLastName }}</td>
+                                                                <td>{{ rider.getContactNumber }}</td>
+                                                                <td>{{ rider.getPlateNumber }}</td>
+                                                        {% endfor %}
+                                                    {% endif %}
+                                                {% endif %}
                                                 </tbody>
                                             </table>
                                         </div>
@@ -574,6 +600,8 @@
 
 $(function() {
     var form_in_process = false;
+    var selected_hub = '';
+    var selected_rider = '';
 
     // openstreet maps stuff
     // TODO: move this to a service
@@ -594,7 +622,7 @@ $(function() {
     });
     var icon_hub = L.divIcon({
         className: 'map-div-icon',
-        html: "<div style='background-color:#00FF00;' class='marker-pin'></div><i class='fa fa-home awesome'>",
+        html: "<div style='background-color:#FFFF00;' class='marker-pin'></div><i class='fa fa-home awesome'>",
         iconSize: [39, 42],
         iconAnchor: [15, 42]
     });
@@ -613,25 +641,40 @@ $(function() {
 
         var marker = L.marker([lat, lng], { icon: icon_customer });
 
-        // get nearest hubs ajax
-        var hub_table = '';
-        $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
-            var hubs = data['hubs'];
-            for (i in hubs) {
-                var hub = hubs[i];
-                var hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
-                hubLayerGroup.addLayer(hub_marker);
+        {% if mode in ['onestep'] %}
+            // get nearest hubs ajax
+            var hub_table = '';
+            $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
+                var hubs = data['hubs'];
+                for (i in hubs) {
+                    var hub = hubs[i];
+                    var hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
+                    hubLayerGroup.addLayer(hub_marker);
 
-                hub_table += '<tr data-id=' + hub['id'] + '>';
-                hub_table += '<td>' + hub['name'] + '</td>';
-                hub_table += '<td>' + hub['branch'] + '</td>';
-                hub_table += '<td>' + hub['cnum'] + '</td>';
-                hub_table += '<td></td>';
-                hub_table += '</tr>';
-            }
+                    hub_table += '<tr data-id=' + hub['id'] + '>';
+                    hub_table += '<td>' + hub['name'] + '</td>';
+                    hub_table += '<td>' + hub['branch'] + '</td>';
+                    hub_table += '<td>' + hub['cnum'] + '</td>';
+                    hub_table += '<td></td>';
+                    hub_table += '</tr>';
+                }
 
-            $('#nearest_hubs').html(hub_table);
-        });
+                $('#nearest_hubs').html(hub_table);
+
+            });
+        {% endif %}
+
+        {% if mode in ['onestep-edit'] %}
+            // get nearest hubs ajax
+            $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
+                var hubs = data['hubs'];
+                for (i in hubs) {
+                    var hub = hubs[i];
+                    var hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
+                    hubLayerGroup.addLayer(hub_marker);
+                }
+            });
+        {% endif %}
 
         // add marker to layer group
         markerLayerGroup.addLayer(marker);
@@ -696,7 +739,6 @@ $(function() {
 	});
 
     $(function() {
-        var selected_hub = ""; 
         $('#hubs-table').on('click', 'tr', function() {
             var id = $(this).data('id');
 
@@ -713,6 +755,10 @@ $(function() {
                 selected_hub = id;
                 $('#hub-field').val(selected_hub); 
 
+                // clear rider field
+                $('#rider-field').val('');
+                selected_rider = '';
+
                 // get riders of hub
                 // get hub riders ajax
                 // TODO: add latitude and longitude of delivery location to ajax request
@@ -748,7 +794,6 @@ $(function() {
     });
 
     $(function() {
-        var selected_rider = '';
         $('#rider-table').on('click', 'tr', function() {
             var id = $(this).data('id');
 
@@ -767,9 +812,29 @@ $(function() {
         var lat = {{ obj.getCoordinates.getLatitude }};
         var lng = {{ obj.getCoordinates.getLongitude }};
 
+        selected_hub = '{{ obj.getHub ? obj.getHub.getID: "" }}';
+        $('#hub-field').val(selected_hub);
+
+        selected_rider = '{{ obj.getRider ? obj.getRider.getID: "" }}';
+        $('#rider-field').val(selected_rider);
+
         selectPoint(lat, lng);
 
-        // TODO: find a way to highlight the set hub
+        // need to put selected rider on map. selected_hub is already on map because of selectPoint
+        riderLayerGroup.clearLayers();
+
+        $.getJSON("{{ url('hub_riders') }}?id=" + selected_hub, function(data) {
+            var riders = data['riders'];
+            for (i in riders) {
+                var rider = riders[i];
+                if (selected_rider == rider['id']) {
+                    var rider_lat = rider['location'][0];
+                    var rider_lng = rider['location'][1];
+                    var rider_marker = L.marker([rider_lat, rider_lng], { icon: icon_rider_available });
+                    riderLayerGroup.addLayer(rider_marker);
+                }
+            }
+        });
     {% endif %}
 
     {% if mode in ['update-processing', 'update-reassign-hub'] %}