diff --git a/application/config/autoload.php b/application/config/autoload.php
index 991a345..55220ba 100755
--- a/application/config/autoload.php
+++ b/application/config/autoload.php
@@ -89,7 +89,7 @@ $autoload['drivers'] = array();
 |
 |	$autoload['helper'] = array('url', 'file');
 */
-$autoload['helper'] = array();
+$autoload['helper'] = array('common');
 
 /*
 | -------------------------------------------------------------------
diff --git a/application/controllers/beheer/CustomersController.php b/application/controllers/beheer/CustomersController.php
index 9ab32e7..4d36d28 100644
--- a/application/controllers/beheer/CustomersController.php
+++ b/application/controllers/beheer/CustomersController.php
@@ -29,41 +29,41 @@ class customersController extends MY_Controller {
 
     public function getAllCustomers( $archive = 'F' )
     {
-        $users = Customer::getAllCustomers( $archive );
+        $customers = Customer::getAllCustomers( $archive );
 
-        $this->json( $users );
+        $this->json( $customers );
     }
 
     public function saveCustomer()
     {
-        $userValidation = new CustomerValidation();
+        $customerValidation = new CustomerValidation();
 
-        if ( ! $userValidation->getValidationResult() )
+        if ( ! $customerValidation->getValidationResult() )
             return $this->json( [
-                'success' => FALSE, 'messages' => $userValidation->getErrorMessages()] );
+                'success' => FALSE, 'messages' => $customerValidation->getErrorMessages()] );
 
-        $user = $this->input->post();
+        $customer = $this->input->post();
 
-        $userID = $user['id'];
-        unset( $user['id'] );
+        $customerID = $customer['id'];
+        unset( $customer['id'] );
 
-        $userID = Customer::saveCustomer( $userID, $user );
+        $customerID = Customer::saveCustomer( $customerID, $customer );
 
-        $this->json( ['success' => TRUE, 'userID' => $userID] );
+        $this->json( ['success' => TRUE, 'customerID' => $customerID] );
     }
 
-    public function archiveCustomer( $userID, $status )
+    public function archiveCustomer( $customerID, $status )
     {
-        Customer::whereId( $userID )->update( ['archive' => $status] );
+        Customer::whereId( $customerID )->update( ['archive' => $status] );
     }
 
-    public function removeCustomer( $userID )
+    public function removeCustomer( $customerID )
     {
-        $removeCustomer = new RemoveCustomer( $userID );
+        $removeCustomer = new RemoveCustomer( $customerID );
 
         if ( $removeCustomer->getAllowDelete() === FALSE ) return $this->json( ['result' => FALSE] );
 
-        Customer::removeCustomer( $userID );
+        Customer::removeCustomer( $customerID );
 
         $this->json( ['result' => TRUE] );
     }
diff --git a/application/controllers/projects/OffersController.php b/application/controllers/projects/OffersController.php
index 0a44510..c357c5e 100644
--- a/application/controllers/projects/OffersController.php
+++ b/application/controllers/projects/OffersController.php
@@ -11,6 +11,8 @@ class OffersController extends MY_Controller {
 
     public function __construct()
     {
+        parent::__construct();
+
         if ( AUTHENTICATED == FALSE ) die( 'NO ACCESS' );
 
         $models = [];
@@ -27,41 +29,41 @@ class OffersController extends MY_Controller {
 
     public function getAllOffers( $archive = 'F' )
     {
-        $users = Offer::getAllOffers( $archive );
+        $offers = Offer::getAllOffers( $archive );
 
-        $this->json( $users );
+        $this->json( $offers );
     }
 
     public function saveOffer()
     {
-        $userValidation = new OfferValidation();
+        $offerValidation = new OfferValidation();
 
-        if ( ! $userValidation->getValidationResult() )
+        if ( ! $offerValidation->getValidationResult() )
             return $this->json( [
-                'success' => FALSE, 'messages' => $userValidation->getErrorMessages()] );
+                'success' => FALSE, 'messages' => $offerValidation->getErrorMessages()] );
 
-        $user = $this->input->post();
+        $offer = $this->input->post();
 
-        $userID = $user['id'];
-        unset( $user['id'] );
+        $offerID = $offer['id'];
+        unset( $offer['id'] );
 
-        $userID = Offer::saveOffer( $userID, $user );
+        $offerID = Offer::saveOffer( $offerID, $offer );
 
-        $this->json( ['success' => TRUE, 'userID' => $userID] );
+        $this->json( ['success' => TRUE, 'offerID' => $offerID] );
     }
 
-    public function archiveOffer( $userID, $status )
+    public function archiveOffer( $offerID, $status )
     {
-        Offer::whereId( $userID )->update( ['archive' => $status] );
+        Offer::whereId( $offerID )->update( ['archive' => $status] );
     }
 
-    public function removeOffer( $userID )
+    public function removeOffer( $offerID )
     {
-        $removeOffer = new RemoveOffer( $userID );
+        $removeOffer = new RemoveOffer( $offerID );
 
         if ( $removeOffer->getAllowDelete() === FALSE ) return $this->json( ['result' => FALSE] );
 
-        Offer::removeOffer( $userID );
+        Offer::removeOffer( $offerID );
 
         $this->json( ['result' => TRUE] );
     }
diff --git a/application/helpers/common_helper.php b/application/helpers/common_helper.php
new file mode 100644
index 0000000..834cfb1
--- /dev/null
+++ b/application/helpers/common_helper.php
@@ -0,0 +1,306 @@
+<?php
+/**
+ * Dump helper. Functions to dump variables to the screen, in a nicley formatted manner.
+ * @author  Joost van Veen
+ * @version 1.0
+ */
+if ( ! function_exists( 'dump' ) )
+{
+    function dump( $var, $label = 'Dump', $echo = TRUE )
+    {
+        // Store dump in variable 
+        ob_start();
+        var_dump( $var );
+        $output = ob_get_clean();
+
+        // Add formatting
+        $output = preg_replace( "/]=>n(s+)/m", "] => ", $output );
+        $output = '<pre style="background: #FFFEEF; color: #000; border: 1px dotted #000; padding: 10px; margin: 10px 0; text-align: left;">' . $label . ' => ' . $output . '</pre>';
+
+        // Output
+        if ( $echo == TRUE )
+        {
+            echo $output;
+        }
+        else
+        {
+            return $output;
+        }
+    }
+}
+
+if ( ! function_exists( 'dump_exit' ) )
+{
+    function dump_exit( $var, $label = 'Dump', $echo = TRUE )
+    {
+        dump( $var, $label, $echo );
+        exit;
+    }
+}
+
+
+function mysql2text( $message )
+{
+    $regeleinden = ['\r\n', '\r', '\n'];
+    $message = str_replace( $regeleinden, chr( 13 ), $message );
+    $message = stripslashes( $message );
+
+    return ( $message );
+}
+
+function mysql2html( $message )
+{
+    $regeleinden = ['\r\n', '\r', '\n'];
+    $message = str_replace( $regeleinden, "<br />", $message );
+    $message = stripslashes( $message );
+
+    return ( $message );
+}
+
+function textarea2html( $message )
+{
+    $regeleinden = [chr( 13 )];
+    $message = str_replace( $regeleinden, "<br />", $message );
+    $message = stripslashes( $message );
+
+    return ( $message );
+}
+
+function date2mysql( $date )
+{
+    if ( ! check_date( $date ) ) return NULL;
+
+    return date( 'Y-m-d', strtotime( $date ) );
+}
+
+function mysql2date( $date )
+{
+    if ( ! check_date( $date ) ) return '';
+
+    return date( 'd-m-Y', strtotime( $date ) );
+}
+
+function mysql2dateWithTime( $date )
+{
+    if ( ! check_date( $date ) ) return '';
+
+    return date( 'd-m-Y H:i:s', strtotime( $date ) );
+}
+
+function check_date( $date )
+{
+    if ( is_null( $date ) || ( strlen( $date ) < 6 ) ) return FALSE;
+
+    return TRUE;
+}
+
+function mysql2timestamp( $date )
+{
+    $a = strptime( $date, '%Y-%m-%d' );
+    $timestamp = mktime( 0, 0, 0, $a['tm_mon'] + 1, $a['tm_mday'], $a['tm_year'] + 1900 );
+
+    return $timestamp;
+}
+
+function readTextFromStorage( $text )
+{
+    return base64_decode( $text );
+}
+
+function cleanTextForStorage( $text )
+{
+    $text = str_replace( '/r/n', '', $text );
+    $text = str_replace( '\r\n', '', $text );
+    $text = str_replace( '/n', '', $text );
+    $text = str_replace( '\n', '', $text );
+    $text = strip_slashes( $text );
+
+    return base64_encode( $text );
+}
+
+function setTextareaForStorage( $text )
+{
+    $text = setTextArea( $text );
+
+    return base64_encode( $text );
+}
+
+function setTextArea( $text )
+{
+    $text = str_replace( '/r/n', chr( 13 ), $text );
+    $text = str_replace( '\r\n', chr( 13 ), $text );
+    $text = str_replace( '/n', chr( 13 ), $text );
+    $text = str_replace( '\n', chr( 13 ), $text );
+    $text = str_replace( '\r', chr( 13 ), $text );
+    $text = str_replace( '/r', chr( 13 ), $text );
+    $text = str_replace( '\n\n', chr( 13 ) . chr( 13 ), $text );
+    $text = strip_slashes( $text );
+
+    return $text;
+}
+
+function setTextAreaHtml( $text )
+{
+    $text = str_replace( '/r/n', '<br />', $text );
+    $text = str_replace( '\r\n', '<br />', $text );
+    $text = str_replace( '/n', '<br />', $text );
+    $text = str_replace( '\n', '<br />', $text );
+    $text = str_replace( '\r', '<br />', $text );
+    $text = str_replace( '/r', '<br />', $text );
+    $text = str_replace( '\n\n', '<br /><br />', $text );
+    $text = strip_slashes( $text );
+
+    return $text;
+}
+
+function checkBsn( $bsn )
+{
+    if ( strlen( $bsn ) < 8 || strlen( $bsn ) > 9 )
+    {
+        return FALSE;
+    }
+    else
+    {
+        $sum = 0;
+        $counter = strlen( $bsn );
+        $pos = 0;
+        for ( $i = $counter; $i > 0; $i -- )
+        {
+            if ( $i == 1 )
+            {
+                $sum = $sum + intval( $bsn{$pos} ) * - 1;
+            }
+            else
+            {
+                $sum = $sum + ( intval( $bsn{$pos} ) * $i );
+            }
+            $pos ++;
+        }
+        if ( $sum % 11 != 0 )
+        {
+            return FALSE;
+        }
+    }
+
+    return TRUE;
+}
+
+/**
+ * Validate an object property
+ *
+ * @param object  $in
+ * @param string  $property    Can be NULL, in that case the first parameter is evaluated
+ * @param boolean $zeroAllowed ,
+ *                             default FALSE
+ *
+ * @return boolean TRUE if the property exists ans in not null or empty
+ */
+function isNotNullOrEmpty( $in, $property = NULL, $zeroAllowed = FALSE )
+{
+    if ( $property === NULL )
+    {
+
+        if ( is_object( $in ) && count( (array) $in ) === 0 )
+            return FALSE;
+        $isNotEmpty = $zeroAllowed ? ! empty ( $in ) : $in === 0 || $in === '0' || ! empty ( $in );
+        if ( is_string( $in ) )
+        {
+            return $isNotEmpty && strtoupper( $in ) !== 'NULL' && strtoupper( $in ) !== 'FALSE' && strtoupper( $in ) !== 'UNDEFINED';
+        }
+        else
+        {
+            return $isNotEmpty;
+        }
+    }
+
+    if ( ! is_object( $in ) )
+        throw new Exception ( 'Provided test $in must be a class instance(object) or a valid classname(string)' );
+    if ( ! property_exists( $in, $property ) )
+        return FALSE;
+    $prop = $in->{$property};
+    $isNotEmpty = $zeroAllowed ? ! empty ( $prop ) : $prop === 0 || $prop === '0' || ! empty ( $prop );
+    if ( is_string( $prop ) )
+    {
+        return $isNotEmpty && strtoupper( $prop ) !== 'NULL' && strtoupper( $prop ) !== 'FALSE' && strtoupper( $prop ) !== 'UNDEFINED';
+    }
+    else
+    {
+        return $isNotEmpty;
+    }
+}
+
+/**
+ * Validate an object property
+ *
+ * @param object $in
+ * @param string $property Can be NULL, in that case the first parameter is evaluated
+ *
+ * @return boolean TRUE if the property exists and is not NULL or empty or zero
+ */
+function isNotNullOrEmptyOrZero( $in, $property = NULL )
+{
+    return isNotNullOrEmpty( $in, $property, TRUE );
+}
+
+/**
+ * Validate an object property
+ *
+ * @param object $in
+ * @param string $property Can be NULL, in that case the first parameter is evaluated
+ *
+ * @return boolean TRUE if the property exists and is NULL or empty
+ */
+function isNullOrEmpty( $in, $property = NULL )
+{
+    return ! isNotNullOrEmpty( $in, $property );
+}
+
+/**
+ * Validate an object property
+ *
+ * @param object $in
+ * @param string $property Can be NULL, in that case the first parameter is evaluated
+ *
+ * @return boolean TRUE if the property exists and is NULL or empty or zero
+ */
+function isNullOrEmptyOrZero( $in, $property = NULL )
+{
+    return ! isNotNullOrEmpty( $in, $property, TRUE );
+}
+
+/**
+ *
+ * @param sting|integer $in
+ *
+ * @return string
+ */
+function parseNotNullField( $in )
+{
+    if ( isNullOrEmpty( $in ) )
+    {
+        return '';
+    }
+
+    return (string) $in;
+}
+
+
+function unique_multidim_array( $array, $key )
+{
+    $temp_array = [];
+    $key_array = [];
+
+    foreach ( $array as $val )
+    {
+        $keyValue = is_array( $val ) ? $val[ $key ] : $val->$key;
+        {
+            if ( ! in_array( $keyValue, $key_array ) )
+            {
+                $key_array[] = $keyValue;
+                $temp_array[] = $val;
+            }
+        }
+    }
+
+    return $temp_array;
+}
diff --git a/application/libraries/projects/offers/RemoveOffer.php b/application/libraries/projects/offers/RemoveOffer.php
new file mode 100644
index 0000000..24b2d52
--- /dev/null
+++ b/application/libraries/projects/offers/RemoveOffer.php
@@ -0,0 +1,36 @@
+<?php
+/**
+ * Created by Pensare Software.
+ * User: Theo Weijmer
+ * Date: 27/12/2017
+ * Time: 17:45
+ */
+
+class RemoveOffer {
+
+    private $offerID;
+    private $allowDelete = TRUE;
+
+    public function __construct( $userID )
+    {
+        $this->setOfferID( $userID );
+
+        $this->handle();
+    }
+
+    public function getAllowDelete()
+    {
+        return $this->allowDelete;
+    }
+
+    private function setOfferID( $customerID )
+    {
+        $this->offerID = $customerID;
+    }
+
+    private function handle()
+    {
+
+    }
+
+}
\ No newline at end of file
diff --git a/application/libraries/validation/Validation.php b/application/libraries/validation/Validation.php
index 5aa2c6b..244082e 100644
--- a/application/libraries/validation/Validation.php
+++ b/application/libraries/validation/Validation.php
@@ -85,8 +85,11 @@ class validation {
             if ( $this->validation == 'decimal' ) $this->checkDecimal();
             if ( $this->validation == 'email' ) $this->checkEmail();
             if ( $this->validation == 'unique' ) $this->checkUnique();
+            if( $this->validation == 'date' ) $this->checkdate();
             if ( substr( $this->validation, 0, 9 ) == 'minlength' ) $this->checkMinlength();
             if ( substr( $this->validation, 0, 9 ) == 'maxlength' ) $this->checkMaxlength();
+            if ( substr( $this->validation, 0, 8 ) == 'minvalue' ) $this->checkMinvalue();
+            if ( substr( $this->validation, 0, 8 ) == 'maxvalue' ) $this->checkMaxvalue();
         }
     }
 
@@ -170,6 +173,21 @@ class validation {
         if ( ! $value ) $this->errorMessages[] = 'invoer moet uniek zijn';
     }
 
+    public function checkDate()
+    {
+        if( empty($this->fieldValue) ) return;
+
+        $dateParts = explode('-', $this->fieldValue);
+
+        if( count($dateParts) != 3) $dateParts = explode('/', $this->fieldValue);
+
+        if( count($dateParts) != 3)
+            return $this->errorMessages[] = 'invoer is geen datum';
+
+        if(  ! checkdate($dateParts[1], $dateParts[0], $dateParts[2] ))
+            $this->errorMessages[] = 'invoer is geen datum';
+    }
+
     private function checkMinlength()
     {
         $length = explode( '-', $this->validation );
@@ -186,5 +204,21 @@ class validation {
             $this->errorMessages[] = 'mag maximaal uit ' . $length[1] . ' karakters bestaan';
     }
 
+    private function checkMinValue()
+    {
+        $value = explode( $this->validation, '-' );
+
+        if( $this->fieldValue < $value[1])
+            $this->errorMessages[] = 'moet minimaal ' . $value[1] . ' zijn';
+    }
+
+    private function checkMaxValue()
+    {
+        $value = explode( $this->validation, '-' );
+
+        if( $this->fieldValue > $value[1])
+            $this->errorMessages[] = 'mag maximaal ' . $value[1] . ' zijn';
+    }
+
 
 }
\ No newline at end of file
diff --git a/application/libraries/validation/inputValidations/OfferValidation.php b/application/libraries/validation/inputValidations/OfferValidation.php
new file mode 100644
index 0000000..ac730a2
--- /dev/null
+++ b/application/libraries/validation/inputValidations/OfferValidation.php
@@ -0,0 +1,44 @@
+<?php
+
+/**
+ * Created by Pensare Software.
+ * User: Theo Weijmer
+ * Date: 10/07/16
+ * Time: 13:35
+ */
+
+require_once( APPPATH . 'libraries/validation/inputValidations/BaseValidation.php' );
+
+class OfferValidation extends BaseValidation {
+
+
+    protected $validationFields = [
+        'customer_id'      => [
+            'validations' => 'required|numeric',
+            'fieldname'   => 'klant'
+        ],
+        'startdate' => [
+            'validations' => 'required|date',
+            'fieldname'   => 'offertedatum'
+        ],
+        'acceptdate' => [
+            'validations' => 'date',
+            'fieldname'   => 'acceptatiedatum'
+        ],
+        'rejectdate' => [
+            'validations' => 'date',
+            'fieldname'   => 'afwijsdatum'
+        ],
+        'acceptance_chance' => [
+            'validations' => 'numeric',
+            'fieldname'   => 'afwijsdatum|minvalue-0|maxvalue-100'
+        ]
+    ];
+
+    public function __construct()
+    {
+        parent::__construct();
+
+        $this->ci =& get_instance();
+    }
+}
\ No newline at end of file
diff --git a/application/models/eloquent/Offer.php b/application/models/eloquent/Offer.php
index baadb19..4abe3dc 100644
--- a/application/models/eloquent/Offer.php
+++ b/application/models/eloquent/Offer.php
@@ -8,7 +8,7 @@
 
 use \Illuminate\Database\Eloquent\Model as Eloquent;
 
-class Page extends Eloquent {
+class Offer extends BaseModel {
 
     protected $table = "offers";
 
@@ -16,4 +16,47 @@ class Page extends Eloquent {
     {
         return $this->belongsTo( 'Project' );
     }
+
+    public function customer()
+    {
+        return $this->belongsTo( 'Customer' );
+    }
+
+    public static function getAllOffers( $archive = 'F' )
+    {
+        $offers = Offer::orderBy('startdate')
+            ->with( 'customer' )
+            ->with( 'project' );
+
+        if ( $archive == 'F' ) $offers = $offers->whereArchive( 'F' );
+
+        $offers = $offers->get();
+
+        return $offers;
+    }
+
+    public static function saveOffer( $offerID, $offer )
+    {
+        $offer = (array) $offer;
+
+        $offer['startdate'] = date2mysql( $offer['startdate'] );
+        $offer['accepteddate'] = date2mysql( $offer['accepteddate'] );
+        $offer['rejectdate'] = date2mysql( $offer['rejectdate'] );
+
+        if ( $offerID == 0 )
+        {
+            $offer = Offer::create( $offer );
+        }
+        else
+        {
+            $offer = Offer::whereId( $offerID )->update( $offer );
+        }
+
+        return $offer['id'];
+    }
+
+    public static function removeOffer( $offerID )
+    {
+        Offer::whereId($offerID)->delete();
+    }
 }
\ No newline at end of file
diff --git a/application/views/modals/offer_modal.php b/application/views/modals/offer_modal.php
index ae0f081..b6aff55 100644
--- a/application/views/modals/offer_modal.php
+++ b/application/views/modals/offer_modal.php
@@ -15,31 +15,36 @@
                                 <label class="col-xl-3 form-control-label">
                                     klant
                                 </label>
-                                <div class="col-xl-9">
+                                <div class="col-xl-8">
                                     <div class="input-group input-group-icon">
                                         <select class="form-control"
-                                                data-bind="options:customers
-                                                            optionsValue:id,
-                                                            optionsText:name,
-                                                            value:selectedCustomerID,
-                                                            optionsCaption:selecteer klant"></select>
+                                                data-bind="options:customers,
+                                                            optionsValue:'id',
+                                                            optionsText:'name',
+                                                            value:customer_id,
+                                                            optionsCaption:'selecteer klant',
+                                                            event:{change:getCustomerProjects}"></select>
                                     </div>
                                     <small class="invalid-feedback"
-                                           data-bind="style:{display: ! selectedCustomer() ? 'block' : 'none'}">
+                                           data-bind="style:{display: ! customer_id() ? 'block' : 'none'}">
                                         selecteer een klant
                                     </small>
                                 </div>
+                                <div class="col-xl-1">
+                                    <i class="icon fa-plus-square greenish pointer" data-bind="click:addCustomer"></i>
+                                </div>
                             </div>
                             <div class="form-group row">
                                 <label class="col-xl-3 form-control-label">
                                     project
                                 </label>
-                                <div class="col-xl-9">
+                                <div class="col-xl-8">
                                     <select class="form-control"
                                             data-bind="options:projects,
-                                                        optionsValue: id,
-                                                        optionsText:projectnumber,
-                                                        value:selectedProjectID"
+                                                        optionsValue: 'id',
+                                                        optionsText:'projectnumber',
+                                                        disable: ! customer_id(),
+                                                        value:project_id"></select>
                                 </div>
                             </div>
                             <div class="form-group row">
@@ -49,7 +54,7 @@
                                 <label class="col-xl-3 form-control-label">
                                     datum offerte
                                 </label>
-                                <div class="col-xl-9">
+                                <div class="col-xl-5">
                                     <div class="input-group input-group-icon">
                                         <span class="input-group-addon">
                                             <i class="icon fa-calendar"></i>
@@ -57,8 +62,13 @@
                                         <input type="text"
                                                placeholder="datum offerte"
                                                class="form-control"
-                                               data-bind="datepicker:{}, value:startdate">
+                                               readonly
+                                               data-bind="datepicker:{dateFormat: 'dd-mm-yy' }, value:startdate, css:{'is-invalid': ! offerDateValid()}">
                                     </div>
+                                    <small class="invalid-feedback"
+                                           data-bind="style:{display: ! offerDateValid() ? 'block' : 'none'}">
+                                        voer een offerte datum in
+                                    </small>
                                 </div>
                             </div>
 
@@ -66,15 +76,17 @@
                                 <label class="col-xl-3 form-control-label">
                                     kans
                                 </label>
-                                <div class="col-xl-9">
+                                <div class="col-xl-5">
                                     <div class="input-group input-group-icon">
                                         <span class="input-group-addon">
                                             <i class="icon fa-question"></i>
                                         </span>
                                         <input type="text"
                                                placeholder="kans"
-                                               class="form-control"
-                                               data-bind="textInput:acceptance_chance">
+                                               class="form-control percentage-input"
+                                               data-bind="textInput:acceptance_chance,
+                                               event:{keyup:validateNumber}">
+                                        <span class="percentage-sign">&#x25;</span>
                                     </div>
                                 </div>
                             </div>
@@ -82,7 +94,7 @@
                                 <label class="col-xl-3 form-control-label">
                                     acceptatie datum
                                 </label>
-                                <div class="col-xl-9">
+                                <div class="col-xl-5">
                                     <div class="input-group input-group-icon">
                                         <span class="input-group-addon">
                                             <i class="icon fa-calendar"></i>
@@ -90,15 +102,20 @@
                                         <input type="text"
                                                placeholder="acceptatie datum"
                                                class="form-control"
-                                               data-bind="datepicker:{}, value:accepteddate">
+                                               readonly
+                                               data-bind="datepicker:{dateFormat: 'dd-mm-yy' }, value:accepteddate, disable:rejectdate()">
                                     </div>
                                 </div>
+                                <div class="col-xl-1">
+                                    <span class="icon fa-remove redish pointer"
+                                          data-bind="visible:accepteddate(), click:resetDate.bind($data, 'accepteddate')"></span>
+                                </div>
                             </div>
                             <div class="form-group row">
                                 <label class="col-xl-3 form-control-label">
                                     afwijsdatum
                                 </label>
-                                <div class="col-xl-9">
+                                <div class="col-xl-5">
                                     <div class="input-group input-group-icon">
                                         <span class="input-group-addon">
                                             <i class="icon fa-calendar"></i>
@@ -106,9 +123,14 @@
                                         <input type="email"
                                                placeholder="afwijsdatum"
                                                class="form-control"
-                                               data-bind="datepicker:{}, value:rejectdate">
+                                               readonly
+                                               data-bind="datepicker:{dateFormat: 'dd-mm-yy' }, value:rejectdate, disable:accepteddate()">
                                     </div>
                                 </div>
+                                <div class="col-xl-1">
+                                    <span class="icon fa-remove redish pointer"
+                                          data-bind="visible:rejectdate(), click:resetDate.bind($data, 'rejectdate')"></span>
+                                </div>
                             </div>
                         </div>
                     </div>
diff --git a/application/views/pages/offers_view.php b/application/views/pages/offers_view.php
index da45ab7..e6b829e 100644
--- a/application/views/pages/offers_view.php
+++ b/application/views/pages/offers_view.php
@@ -13,16 +13,16 @@
                     <th class="table-tealish-header">&nbsp;</th>
                 </tr>
                 </thead>
-                <tbody data-bind="foreach:externals">
+                <tbody data-bind="foreach:offers">
                 <tr>
                     <td><span data-bind="text:customerName"></span></td>
-                    <td><span data-bind="text:pojectNumber"></span></td>
+                    <td><span data-bind="text:projectNumber"></span></td>
                     <td><span data-bind="text:startdate"></span></td>
-                    <td><span data-bind="text:acceptance_chance"></span></td>
-                    <td><span data-bind="text:accepted"></span></td>
-                    <td><span data-bind="text:rejected"></span></td>
+                    <td><span data-bind="text:acceptance_chance"></span> %</td>
+                    <td><span data-bind="text:accepteddate"></span></td>
+                    <td><span data-bind="text:rejectdate"></span></td>
                     <td>
-                        <i class="icon fa-edit pointer" title="wijzig" data-bind="click:$root.editExternal"></i>
+                        <i class="icon fa-edit pointer" title="wijzig" data-bind="click:$root.editOffer"></i>
                         <!-- ko if:archive == 'F' -->
                         <i class="icon fa-archive pointer" title="archiveer"
                            data-bind="click:$root.archiveOffer"></i>
diff --git a/application/views/partials/_js.php b/application/views/partials/_js.php
index 9df9688..02ac9ea 100644
--- a/application/views/partials/_js.php
+++ b/application/views/partials/_js.php
@@ -57,6 +57,7 @@
 <script src="js/lib/modules/beheer/usersModule.js"></script>
 <script src="js/lib/modules/beheer/customersModule.js"></script>
 <script src="js/lib/modules/beheer/externalsModule.js"></script>
+<script src="js/lib/modules/projects/offersModule.js"></script>
 <script src="js/lib/modules/modals/userModal.js"></script>
 <script src="js/lib/modules/modals/customerModal.js"></script>
 <script src="js/lib/modules/modals/externalModal.js"></script>
diff --git a/public/css/correction.css b/public/css/correction.css
index 4c539db..8a57f2f 100644
--- a/public/css/correction.css
+++ b/public/css/correction.css
@@ -8,4 +8,9 @@ body{
 }
 .site-menubar{
     top:0;
-}
\ No newline at end of file
+}
+.ui-datepicker {
+    position: relative;
+    z-index:9999 !important;
+}
+
diff --git a/public/css/main.css b/public/css/main.css
index b887362..fcd6b20 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -1,90 +1,150 @@
-.redish{
-    color:#F2353C;
-}
-.blueish{
-    color:#247CF0;
-}
-.greenish{
-    color:#5A9101;
-}
-.pointer{
-    cursor:pointer;
-}
-.align-right{
-    text-align:right;
+.redish {
+    color: #F2353C;
 }
 
-.site-menu-sub > li{
-    margin-left:30px;
-    padding-left:10px;
+.blueish {
+    color: #247CF0;
 }
-.site-menu-sub > li :hover{
-    background-color:#463238;
-    color:gold;
+
+.greenish {
+    color: #5A9101;
+}
+
+.pointer {
+    cursor: pointer;
+}
+
+.align-right {
+    text-align: right;
+}
+
+.site-menu-sub > li {
+    margin-left: 30px;
+    padding-left: 10px;
+}
+
+.site-menu-sub > li :hover {
+    background-color: #463238;
+    color: gold;
 }
 
 /*********TABLES************/
 
-.table-blueish-header{
-    background-color:#247CF0;
-    color:#fff !important;
+.table-blueish-header {
+    background-color: #247CF0;
+    color: #fff !important;
 }
-.table-blueish-header{
-    background-color:#247CF0;
-    color:#fff !important;
+
+.table-blueish-header {
+    background-color: #247CF0;
+    color: #fff !important;
 }
-.table-tealish-header{
-    background-color:#008577;
-    color:#fff !important;
+
+.table-tealish-header {
+    background-color: #008577;
+    color: #fff !important;
 }
-.table-tealish-light-header{
-    background-color:#C3F7F2;
-    color:#fff !important;
+
+.table-tealish-light-header {
+    background-color: #C3F7F2;
+    color: #fff !important;
 }
 
 /*********SWITCH************/
 .onoffswitch {
-    position: relative; width: 60px;
-    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+    position: relative;
+    width: 60px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
 }
+
 .onoffswitch-checkbox {
     display: none;
 }
+
 .onoffswitch-label {
-    display: block; overflow: hidden; cursor: pointer;
-    border: 2px solid #05A85C; border-radius: 16px;
+    display: block;
+    overflow: hidden;
+    cursor: pointer;
+    border: 2px solid #05A85C;
+    border-radius: 16px;
 }
+
 .onoffswitch-inner {
-    display: block; width: 200%; margin-left: -100%;
+    display: block;
+    width: 200%;
+    margin-left: -100%;
     transition: margin 0.3s ease-in 0s;
 }
+
 .onoffswitch-inner:before, .onoffswitch-inner:after {
-    display: block; float: left; width: 50%; height: 23px; padding: 0; line-height: 23px;
-    font-size: 11px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
+    display: block;
+    float: left;
+    width: 50%;
+    height: 23px;
+    padding: 0;
+    line-height: 23px;
+    font-size: 11px;
+    color: white;
+    font-family: Trebuchet, Arial, sans-serif;
+    font-weight: bold;
     box-sizing: border-box;
 }
+
 .onoffswitch-inner:before {
     content: "Ja";
     padding-left: 10px;
-    background-color: #63BE62; color: #FFFFFF;
+    background-color: #63BE62;
+    color: #FFFFFF;
 }
+
 .onoffswitch-inner:after {
     content: "nee";
     padding-right: 10px;
-    background-color: #EEEEEE; color: #999999;
+    background-color: #EEEEEE;
+    color: #999999;
     text-align: right;
 }
+
 .onoffswitch-switch {
-    display: block; width: 25px; margin: 1.5px;
+    display: block;
+    width: 25px;
+    margin: 1.5px;
     background: #FFFFFF;
-    position: absolute; top: 0; bottom: 0;
+    position: absolute;
+    top: 0;
+    bottom: 0;
     right: 33px;
-    border: 2px solid #408C40; border-radius: 16px;
+    border: 2px solid #408C40;
+    border-radius: 16px;
     transition: all 0.3s ease-in 0s;
 }
+
 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
     margin-left: 0;
 }
+
 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
     right: 0px;
-}
\ No newline at end of file
+}
+
+/**********percentage input***********/
+.percentage-input {
+    text-align: right;
+    padding-right: 25px;
+}
+
+.percentage-sign {
+    position: relative;
+    right: 15px;
+    z-index: 10;
+    top: 7px;
+}
+/**********END: percentage input***********/
+
+.pointer{
+    cursor:pointer;
+}
+
+
diff --git a/public/js/lib/dataservices/offerDataservice.js b/public/js/lib/dataservices/offerDataservice.js
index cbca944..0175a62 100644
--- a/public/js/lib/dataservices/offerDataservice.js
+++ b/public/js/lib/dataservices/offerDataservice.js
@@ -8,29 +8,21 @@
 dbo.offerDataService = {
 
     getAllOffers: function ( archive = 'F', callback ) {
-        $.getJSON( 'index.php/beheer/offersController/getAllOffers/' + archive )
+        $.getJSON( 'index.php/projects/offersController/getAllOffers/' + archive )
             .done( function ( data ) {
                 callback( data );
             } );
     },
 
     getOffer: function ( userID, callback ) {
-        $.getJSON( 'index.php/beheer/offersController/getOffer/' + userID )
+        $.getJSON( 'index.php/projects/offersController/getOffer/' + userID )
             .done( function ( data ) {
                 callback( data );
             } );
     },
 
-    checkOffername: function ( username, callback ) {
-        $.post( 'index.php/beheer/userController/checkOffername', 'json' )
-            .done( function ( data ) {
-                console.log( data );
-                callback( data );
-            } );
-    },
-
     saveOffer: function ( submitDATA, callback ) {
-        $.post( 'index.php/beheer/offersController/saveOffer', submitDATA, function () {
+        $.post( 'index.php/projects/offersController/saveOffer', submitDATA, function () {
         }, 'json' )
             .done( function ( data ) {
                 callback( data );
@@ -38,14 +30,14 @@ dbo.offerDataService = {
     },
 
     archiveOffer: function ( userID, status, callback ) {
-        $.get( 'index.php/beheer/offersController/archiveOffer/' + userID + '/' + status )
+        $.get( 'index.php/projects/offersController/archiveOffer/' + userID + '/' + status )
             .done( function () {
                 callback();
             } );
     },
 
     removeOffer: function ( userID, callback ) {
-        $.getJSON( 'index.php/beheer/offersController/removeOffer/' + userID )
+        $.getJSON( 'index.php/projects/offersController/removeOffer/' + userID )
             .done( function ( data ) {
                 callback( data );
             } );
diff --git a/public/js/lib/helpers.js b/public/js/lib/helpers.js
index 884414e..4ce4e50 100644
--- a/public/js/lib/helpers.js
+++ b/public/js/lib/helpers.js
@@ -55,5 +55,15 @@ dbo.helpers = {
         string = string.toString();
         if ( string.length == 0 ) return '';
         return string.split( '' ).reverse().join( '' );
+    },
+
+    mysql2date : function(date){
+        if( date.length != 10 ) return null;
+
+        var dateParts = date.split("-");
+
+        var newDate = dateParts[2] + '-' + dateParts[1] + '-' + dateParts[0];
+
+        return newDate;
     }
 }
\ No newline at end of file
diff --git a/public/js/lib/modules/menuModule.js b/public/js/lib/modules/menuModule.js
index 28051ac..263ee06 100644
--- a/public/js/lib/modules/menuModule.js
+++ b/public/js/lib/modules/menuModule.js
@@ -41,6 +41,7 @@ $( function () {
             vm[page]( true );
 
             var func = page.toLowerCase() + 'Init';
+            console.log( func );
             window.dbo[func]();
         }
     }
diff --git a/public/js/lib/modules/modals/customerModal.js b/public/js/lib/modules/modals/customerModal.js
index aa46952..f93c650 100644
--- a/public/js/lib/modules/modals/customerModal.js
+++ b/public/js/lib/modules/modals/customerModal.js
@@ -82,7 +82,7 @@ $( function () {
         setCustomer: function ( customer ) {
             var vm = dbo.editCustomerModal;
 
-            vm.id = customer.id;
+            vm.id = customer.id || 0;
             vm.name( customer.name || '' );
             vm.address( customer.address || '' );
             vm.postcode( customer.postcode || '' );
diff --git a/public/js/lib/modules/modals/offerModal.js b/public/js/lib/modules/modals/offerModal.js
index a52a7dd..da774cb 100644
--- a/public/js/lib/modules/modals/offerModal.js
+++ b/public/js/lib/modules/modals/offerModal.js
@@ -1,64 +1,64 @@
 /**
  * Created by Pensare Software.
- * Offerte: Theo Weijmer
+ * Offer: Theo Weijmer
  * Date: 25/12/2017
  * Time: 17:32
  */
 
 $( function () {
-    dbo.editOfferteModal = {
-
+    dbo.editOfferModal = {
         id               : null,
-        offertes         : ko.observableArray( [] ),
         projects         : ko.observableArray( [] ),
-        offerte_id       : ko.observable(),
-        project_id       : ko.observable(),
+        customers        : ko.observableArray( [] ),
         startdate        : ko.observable(),
         acceptance_chance: ko.observable(),
         accepteddate     : ko.observable(),
         rejectdate       : ko.observable(),
+        customer_id      : ko.observable(),
+        project_id       : ko.observable(),
 
         init: function () {
-            var vm = dbo.editOfferteModal;
-            dbo.customerDataService.getAllCustomers( 'F', function ( data ) {
-                vm.customers( data );
-            } );
+            var vm = dbo.editOfferModal;
+
+            dbo.editOfferModal.refreshCustomers();
         },
 
-        newEditOfferte: function ( offerte, callback ) {
-            var vm = dbo.editOfferteModal;
+        newEditOffer: function ( offer, callback ) {
+            var vm = dbo.editOfferModal;
             vm.callback = typeof(callback) == 'function' ? callback : null;
 
-            vm.showOfferteModal();
+            vm.showOfferModal();
 
-            vm.setOfferte( offerte );
+            vm.setOffer( offer );
         },
 
-        saveOfferte: function () {
-            var vm = dbo.editOfferteModal;
+        getCustomerProjects: function () {
+            var vm = dbo.editOfferModal;
+        },
+
+        saveOffer: function () {
+            var vm = dbo.editOfferModal;
 
             if ( vm.formValid == false ) return;
 
             var submitDATA = {
                 id               : vm.id,
-                offertes         : vm.offertes(),
-                projects         : vm.projects(),
-                offerte_id       : vm.offerte_id(),
                 project_id       : vm.project_id(),
+                customer_id      : vm.customer_id(),
                 startdate        : vm.startdate(),
                 acceptance_chance: vm.acceptance_chance(),
                 accepteddate     : vm.accepteddate(),
-                rejectdate       : vm.rejectdate()
+                rejectdate       : vm.rejectdate(),
             }
 
-            dbo.offerteDataService.saveOfferte( submitDATA, function ( data ) {
+            dbo.offerDataService.saveOffer( submitDATA, function ( data ) {
                 if ( data.success ) {
                     tellMe( {
-                        title     : 'offerte aangemaakt',
-                        message   : 'de offerte is succesvol opgeslagen',
+                        title     : 'offer aangemaakt',
+                        message   : 'de offer is succesvol opgeslagen',
                         modalClass: 'modal-success'
                     }, function () {
-                        vm.hideOfferteModal();
+                        vm.hideOfferModal();
 
                         if ( typeof(vm.callback) == 'function' ) vm.callback();
                     } );
@@ -74,38 +74,80 @@ $( function () {
                 } );
                 errorMessage += '</ul>';
                 tellMe( {
-                    title     : 'fout aanmaken offerte',
+                    title     : 'fout aanmaken offer',
                     message   : errorMessage,
                     modalClass: 'modal-danger'
                 } );
             } );
         },
 
-        setOfferte: function ( offerte ) {
-            var vm = dbo.editOfferteModal;
+        setOffer: function ( offer ) {
+            var vm = dbo.editOfferModal;
 
-            vm.id = offerte.id;
-            vm.name( offerte.name || '' );
-            vm.address( offerte.address || '' );
-            vm.postcode( offerte.postcode || '' );
-            vm.place( offerte.place || '' );
-            vm.contactperson( offerte.contactperson || '' );
-            vm.email( offerte.email || '' );
-            vm.website( offerte.website || '' );
-            vm.remarks( offerte.remarks || '' );
+            vm.id = offer.id || 0;
+            vm.customer_id( offer.customer_id || null );
+            vm.project_id( offer.project_id || null );
+            vm.startdate( offer.startdate || null );
+            vm.acceptance_chance( offer.acceptance_chance || 0 );
+            vm.accepteddate( offer.accepteddate || null );
+            vm.rejectdate( offer.rejectdate || null );
         },
 
-        showOfferteModal: function () {
-            $( "#offerte-modal" ).modal( 'show' );
+        showOfferModal: function () {
+            $( "#offer-modal" ).modal( 'show' );
         },
 
-        hideOfferteModal: function () {
-            $( "#offerte-modal" ).modal( 'hide' );
+        hideOfferModal: function () {
+            $( "#offer-modal" ).modal( 'hide' );
+        },
+
+        validateNumber: function () {
+            var vm = dbo.editOfferModal;
+            vm.acceptance_chance( dbo.helpers.validateNumber( vm.acceptance_chance(), false ) );
+        },
+
+        addCustomer: function () {
+            var vm = dbo.editOfferModal;
+            dbo.editCustomerModal.newEditCustomer( false, function () {
+                vm.refreshCustomers();
+            } );
+        },
+
+        refreshCustomers: function () {
+            var vm = dbo.editOfferModal;
+            dbo.customerDataService.getAllCustomers( 'F', function ( data ) {
+                vm.customers( data );
+            } );
+        },
+
+        resetDate: function ( field ) {
+            var vm = dbo.editOfferModal;
+
+            vm[field]( null );
         }
     };
 
-    dbo.editOfferteModal.init();
+    dbo.editOfferModal.init();
 
-    ko.applyBindings( dbo.editOfferteModal, document.getElementById( 'offer-modal' ) );
+    dbo.editOfferModal.offerDateValid = ko.pureComputed( function () {
+        if ( !this.startdate() ) return false;
+        if ( this.startdate().length != 10 ) return false;
+
+        return true;
+    }, dbo.editOfferModal );
+
+    dbo.editOfferModal.chance = ko.pureComputed( function () {
+        if ( this.acceptance_chance() < 0 ) return this.acceptance_chance( 0 );
+        if ( this.acceptance_chance() > 100 ) return this.acceptance_chance( 100 );
+    }, dbo.editOfferModal );
+
+    dbo.editOfferModal.formValid = ko.pureComputed( function () {
+        if ( !this.customer_id() ) return false;
+        if ( !this.offerDateValid() ) return false;
+
+        return true;
+    }, dbo.editOfferModal )
+
+    ko.applyBindings( dbo.editOfferModal, document.getElementById( 'offer-modal' ) );
 
 } );
\ No newline at end of file
diff --git a/public/js/lib/modules/projects/offersModule.js b/public/js/lib/modules/projects/offersModule.js
index de0e320..daa8221 100644
--- a/public/js/lib/modules/projects/offersModule.js
+++ b/public/js/lib/modules/projects/offersModule.js
@@ -20,7 +20,7 @@ dbo.offersInit = function () {
             init: function () {
                 var vm = dbo.offersModel;
 
-//                 vm.refreshOffers();
+                vm.refreshOffers();
             },
 
             newOffer: function () {
@@ -97,8 +97,24 @@ dbo.offersInit = function () {
                 var vm = dbo.offersModel;
 
                 dbo.offerDataService.getAllOffers( vm.archive() ? 'T' : 'F', function ( data ) {
-                    vm.offers( data );
+                    vm.offers.removeAll();
+                    $.each( data, function ( i, p ) {
+                        vm.offers.push( new vm.Offer( p ) );
+                    } )
                 } );
+            },
+
+            Offer: function ( data ) {
+                this.id = data.id;
+                this.acceptance_chance = data.acceptance_chance;
+                this.projectNumber = data.project ? data.project.projectnumber : null;
+                this.customerName = data.customer ? data.customer.name : null;
+                this.customer_id = data.customer_id;
+                this.startdate = data.startdate ? dbo.helpers.mysql2date( data.startdate ) : null;
+                this.rejectdate = data.rejectdate ? dbo.helpers.mysql2date( data.rejectdate ) : null;
+                this.accepteddate = data.accepteddate ? dbo.helpers.mysql2date( data.accepteddate ) : null;
+                this.acceptance_chance = data.acceptance_chance ? data.acceptance_chance : 0;
+                this.archive = data.archive;
             }