diff --git a/controllers/main.py b/controllers/main.py
index 48012ea1d48985108b1db3d3bcf7692eba86dab6..d3b2497e2202c09a30259ebd1e4424dc293acc3f 100644
--- a/controllers/main.py
+++ b/controllers/main.py
@@ -9,20 +9,12 @@ from odoo.http import request
 class AccountInvoiceAllocationController(http.Controller):
 
     @http.route('/account/allocation', type='json', auth="user")
-    def plan(self):
-        """ Get the HTML of the project plan for projects matching the given domain
-            :param domain: a domain for project.project
+    def plan(self, domain):
         """
-        invoice_ids = request.env["account.invoice"].search(
-            [
-                ("type", "in", ["out_invoice", "out_refund"]),
-                ("state", "in", ["open", "in_payment", "paid"]),
-                "|",
-                ("is_allocated", "=", False),
-                ("is_allocation_error", "=", True),
-            ],
-            order="date_invoice"
-        )
+        Get the HTML of the account invoice for invoice allocation the given domain
+        :param domain: a domain for account.invoice
+        """
+        invoice_ids = request.env["account.invoice"].search(domain,order="date_invoice")
         partner_ids = (
             request.env.ref("base.main_partner")
             + request.env["hr.employee"].search([]).mapped("user_id").mapped("partner_id")
diff --git a/static/src/css/invoice_allocation.css b/static/src/css/invoice_allocation.css
index b0bb4d8e005adadb53f0bd1bba77078fa877f67f..ca16dfb20e6a1ba6868698ec8ed6f13022db090e 100755
--- a/static/src/css/invoice_allocation.css
+++ b/static/src/css/invoice_allocation.css
@@ -3,12 +3,14 @@
     background-color: #fff;
     width: 100%;
     position: fixed;
-    top: 46px;
 }
 .allocation-title > div {
     padding: 5px 10px;
     display:inline-block;
 }
+.allocation-content {
+    padding-top: 70px;
+}
 .allocation-line {
     width: 100%;
     overflow-x: scroll;
@@ -16,6 +18,12 @@
     border-bottom: 1px solid #aaa;
     scrollbar-width: none;
 }
+.allocation-line-success {
+    background-color: rgba(40, 167, 69, 0.1) !important
+}
+.allocation-line-danger {
+    background-color: rgba(220, 53, 69, 0.1) !important
+}
 .allocation-line::-webkit-scrollbar {
   height: 4px;
 }
diff --git a/static/src/js/invoice_allocation.js b/static/src/js/invoice_allocation.js
index 8bfda0b253477b398a63d532ee62455e0667a891..9c1979a95b9776b2737cf651fbc05d70e70f5883 100755
--- a/static/src/js/invoice_allocation.js
+++ b/static/src/js/invoice_allocation.js
@@ -5,13 +5,16 @@ odoo.define('legicoop_account.invoice_allocation', function (require) {
     "use strict";
 
     var AbstractAction = require('web.AbstractAction');
+    var ControlPanelMixin = require('web.ControlPanelMixin');
+    var SearchView = require('web.SearchView');
     var core = require('web.core');
     var data = require('web.data');
+    var pyUtils = require('web.py_utils');
 
     var _t = core._t;
     var QWeb = core.qweb;
 
-    var AccountInvoiceAllocation = AbstractAction.extend({
+    var AccountInvoiceAllocation = AbstractAction.extend(ControlPanelMixin, {
         events: {
             "submit form[name='allocation_form']": "_onSubmit",
         },
@@ -25,12 +28,71 @@ odoo.define('legicoop_account.invoice_allocation', function (require) {
             this.set('title', action.name || _t('Factures à répartir'));
             this.invoice_ids = [];
         },
-
+        /**
+         * @override
+         */
+        willStart: function () {
+            var self = this;
+            var view_id = this.action && this.action.search_view_id && this.action.search_view_id[0];
+            var def = this
+                .loadViews('account.invoice', this.action.context || {}, [[view_id, 'search']])
+                .then(function (result) {
+                    self.fields_view = result.search;
+                });
+            return $.when(this._super(), def);
+        },
         /**
          * @override
          */
         start: function () {
-            this._fetchAllocation()
+            var self = this;
+
+            // find default search from context
+            var search_defaults = {};
+            var context = this.action.context || [];
+            _.each(context, function (value, key) {
+                var match = /^search_default_(.*)$/.exec(key);
+                if (match) {
+                    search_defaults[match[1]] = value;
+                }
+            });
+
+            // create searchview
+            var options = {
+                $buttons: $("<div>"),
+                action: this.action,
+                disable_groupby: true,
+                search_defaults: search_defaults,
+            };
+
+            var dataset = new data.DataSetSearch(this, 'account.invoice');
+            this.searchview = new SearchView(this, dataset, this.fields_view, options);
+            this.searchview.on('search', this, this._onSearch);
+
+            var def1 = this._super.apply(this, arguments);
+            var def2 = this.searchview.appendTo($("<div>")).then(function () {
+                self.$searchview_buttons = self.searchview.$buttons.contents();
+            });
+
+            return $.when(def1, def2).then(function(){
+                self.searchview.do_search();
+            });
+        },
+
+        //--------------------------------------------------------------------------
+        // Public
+        //--------------------------------------------------------------------------
+
+        /**
+         * @override
+         */
+        do_show: function () {
+            this._super.apply(this, arguments);
+            this.searchview.do_search();
+            this.action_manager.do_push_state({
+                action: this.action.id,
+                active_id: this.action.context.active_id,
+            });
         },
 
         //--------------------------------------------------------------------------
@@ -55,16 +117,32 @@ odoo.define('legicoop_account.invoice_allocation', function (require) {
          * @param {string[]}
          * @returns {Deferred}
          */
-        _fetchAllocation: function () {
+        _fetchAllocation: function (domain) {
             var self = this;
             return this._rpc({
                 route:"/account/allocation",
+                params: {domain: domain},
             }).then(function(result) {
                 self._refreshAllocation(result.html_content);
+                self._updateControlPanel();
                 self.invoice_ids = result.invoice_ids;
             });
         },
 
+        /**
+         * @private
+         */
+        _updateControlPanel: function () {
+
+            this.update_control_panel({
+                cp_content: {
+                    $searchview: this.searchview.$el,
+                    $searchview_buttons: this.$searchview_buttons,
+                },
+                searchview: this.searchview,
+            });
+        },
+
 
         //--------------------------------------------------------------------------
         // Handlers
@@ -109,17 +187,36 @@ odoo.define('legicoop_account.invoice_allocation', function (require) {
                     "expense_amount": expense.valueAsNumber,
                     "employee_allocation_ids": new_allocation,
                 }
-                console.log(new_values)
                 this._rpc({
                     model: "account.invoice",
                     method: "create_employee_lines",
                     args: [[invoice_id], new_values],
                 }).then(function (result) {
-                    console.log(result)
-                    self._fetchAllocation()
+//                    self._fetchAllocation()
+                      self.searchview.do_search();
                 });
             }
         },
+        /**
+         * This client action has its own search view and already listen on it. If
+         * we let the event pass through, it will be caught by the action manager
+         * which will do its work.  This may crash the web client, if the action
+         * manager tries to notify the previous action.
+         *
+         * @private
+         * @param {OdooEvent} event
+         */
+        _onSearch: function (event) {
+            event.stopPropagation();
+            var session = this.getSession();
+            // group by are disabled, so we don't take care of them
+            var result = pyUtils.eval_domains_and_contexts({
+                domains: event.data.domains,
+                contexts: [session.user_context].concat(event.data.contexts)
+            });
+
+            this._fetchAllocation(result.domain);
+        },
     });
 
     core.action_registry.add('legicoop_account.invoice_allocation', AccountInvoiceAllocation);
diff --git a/templates/invoice_allocation_templates.xml b/templates/invoice_allocation_templates.xml
index e28e07362b651c6a580ab672377dde63217e0c2f..5f803fa1872658444264dc0c6da5c5e2863085c7 100644
--- a/templates/invoice_allocation_templates.xml
+++ b/templates/invoice_allocation_templates.xml
@@ -3,10 +3,9 @@
 
     <template id="invoice_allocation" name="Invoice Allocation">
         <div class="o_form_view o_form_readonly">
+
             <div class="allocation-main">
                 <div class="allocation-title">
-                    <h2 class="mt32">Liste des factures à répartir</h2>
-                    <hr/>
                     <div style="width:120px;">
                         <strong>Facture</strong>
                     </div>
@@ -19,14 +18,14 @@
                     <div>
                         <strong>Répartition employés</strong>
                     </div>
+                    <hr />
                 </div>
-
-                <hr style="margin-top: 130px;" />
-                <t t-foreach="invoice_ids" t-as="i">
+                <div class="allocation-content">
+                    <t t-foreach="invoice_ids" t-as="i">
                     <div class="allocation-block">
                         <form name="allocation_form" method="post" t-att-id="i.id">
                             <div class="error-message" />
-                            <div class="allocation-line">
+                            <div t-att-class="'allocation-line allocation-line-success' if i.is_allocated else 'allocation-line allocation-line-danger' if i.is_allocation_error else 'allocation-line'">
                                 <!-- Invoice name -->
                                 <div class="allocation-col">
                                     <strong><span t-field="i.number" /></strong>
@@ -42,6 +41,12 @@
                                     <t t-if="i.state == 'paid'">
                                         <span class="badge badge-pill badge-success">Payée</span>
                                     </t>
+                                    <t t-elif="i.state == 'draft'">
+                                        <span class="badge badge-pill badge-dark">Brouillon</span>
+                                    </t>
+                                    <t t-elif="i.state == 'cancelled'">
+                                        <span class="badge badge-pill badge-danger">Annulée</span>
+                                    </t>
                                     <t t-else="">
                                         <span class="badge badge-pill badge-warning">Ouverte</span>
                                     </t>
@@ -94,6 +99,7 @@
                         </form>
                     </div>
                 </t>
+                </div>
             </div>
         </div>
     </template>
@@ -102,6 +108,7 @@
         <field name="name">Allocation facture</field>
         <field name="tag">legicoop_account.invoice_allocation</field>
         <field name="res_model">account.invoice</field>
+        <field name="context">{'search_default_assign_ok': 1, 'search_default_assign_error': 1, 'search_default_unpaid': 1, 'search_default_in_payment': 1, 'search_default_paid': 1,}</field>
     </record>
 
 </odoo>