Bulk Actions (#2606)

* Wired up Bulk Archive / Delete / Restore button with reactivity on checkbox actions

* Working on POSTing bulk actions

* Working on Filtering by status

* Add Action Entity

* Implement Vuex for state management

* Implement Vuex storage & list view bulk actions

* Clean up console logs

* Configure entity list views server side

app/DataMapper/DefaultSettings.php

@@ -23,14 +23,12 @@ class DefaultSettings
 			'datatable' => (object) [
 				'per_page' => self::$per_page,
 				'column_visibility' => (object)[
-					'__checkbox' => true,
 	    			'name' => true,
 	    			'contact' => true,
 	    			'email' => true,
 	    			'client_created_at' => true,
 	    			'last_login' => true,
 	    			'balance' => true,
-	    			'__component:client-actions' => true
 				]
 			]
 		];

app/Datatables/ClientDatatable.php

@@ -2,6 +2,7 @@
 
 namespace App\Datatables;
 
+use App\Filters\ClientFilters;
 use App\Models\Client;
 use App\Utils\Traits\MakesHash;
 use App\Utils\Traits\UserSessionAttributes;
@@ -15,59 +16,28 @@ class ClientDatatable extends EntityDatatable
     use MakesHash;
     use MakesActionMenu;
 
+    protected $filter;
+
+    public function __construct(ClientFilters $filter)
+    {
+        $this->filter = $filter;
+    }
     /**
-    * ?sort=&page=1&per_page=20
+     * Returns paginated results for the datatable
-    */
+     *
+     */
     public function query(Request $request, int $company_id)
     {
-        /**
+        $data = $this->filter->apply($company_id)->paginate($request->input('per_page'));
-        *
-        * $sort_col is returned col|asc
-        * needs to be exploded
-        *
-        */
-        $sort_col = explode("|", $request->input('sort'));
 
-        $data = $this->find($company_id, $request->input('filter'))
+        return response()->json($this->buildActionColumn($data), 200);
-                        ->orderBy($sort_col[0], $sort_col[1])
-                        ->paginate($request->input('per_page'));
-
-        return response()
-                    ->json($this->buildActionColumn($data), 200);
 
     }
 
-
+    
-    private function find(int $company_id, $filter, $userId = false)
+    private function find(int $company_id, $userId = false)
     {
-        $query = DB::table('clients')
+    /*
-                    ->join('companies', 'companies.id', '=', 'clients.company_id')
-                    ->join('client_contacts', 'client_contacts.client_id', '=', 'clients.id')
-                    ->where('clients.company_id', '=', $company_id)
-                    ->where('client_contacts.is_primary', '=', true)
-                    ->where('client_contacts.deleted_at', '=', null)
-                    //->whereRaw('(clients.name != "" or contacts.first_name != "" or contacts.last_name != "" or contacts.email != "")') // filter out buy now invoices
-                    ->select(
-                        DB::raw('COALESCE(clients.currency_id, companies.currency_id) currency_id'),
-                        DB::raw('COALESCE(clients.country_id, companies.country_id) country_id'),
-                        DB::raw("CONCAT(COALESCE(client_contacts.first_name, ''), ' ', COALESCE(client_contacts.last_name, '')) contact"),
-                        'clients.id',
-                        'clients.name',
-                        'clients.private_notes',
-                        'client_contacts.first_name',
-                        'client_contacts.last_name',
-                        'clients.balance',
-                        'clients.last_login',
-                        'clients.created_at',
-                        'clients.created_at as client_created_at',
-                        'client_contacts.phone',
-                        'client_contacts.email',
-                        'clients.deleted_at',
-                        'clients.is_deleted',
-                        'clients.user_id',
-                        'clients.id_number'
-                    );
-/*
          if(Auth::user()->account->customFieldsOption('client1_filter')) {
             $query->addSelect('clients.custom_value1');
         }
@@ -77,16 +47,7 @@ class ClientDatatable extends EntityDatatable
         }
 
         $this->applyFilters($query, ENTITY_CLIENT);
-*/
+
-        if ($filter) {
-            $query->where(function ($query) use ($filter) {
-                $query->where('clients.name', 'like', '%'.$filter.'%')
-                      ->orWhere('clients.id_number', 'like', '%'.$filter.'%')
-                      ->orWhere('client_contacts.first_name', 'like', '%'.$filter.'%')
-                      ->orWhere('client_contacts.last_name', 'like', '%'.$filter.'%')
-                      ->orWhere('client_contacts.email', 'like', '%'.$filter.'%');
-            });
-/*
             if(Auth::user()->account->customFieldsOption('client1_filter')) {
                 $query->orWhere('clients.custom_value1', 'like' , '%'.$filter.'%');
             }
@@ -94,9 +55,9 @@ class ClientDatatable extends EntityDatatable
             if(Auth::user()->account->customFieldsOption('client2_filter')) {
                 $query->orWhere('clients.custom_value2', 'like' , '%'.$filter.'%');
             }
-*/
-        }
 
+        }
+*/
         if ($userId) {
             $query->where('clients.user_id', '=', $userId);
         }
@@ -126,6 +87,8 @@ class ClientDatatable extends EntityDatatable
             'create_expense'
             ];
 
+        $permissions = auth()->user()->permissions();
+
         $requested_actions = [
             'view_client_client_id', 
             'edit_client_client_id', 
@@ -158,6 +121,22 @@ class ClientDatatable extends EntityDatatable
         
     }
 
+    public function listActions() : Collection
+    {
+      return collect([
+        'multi_select' => [
+            ['name' => trans('texts.active'), 'value' => 'active'],
+            ['name' => trans('texts.archived'), 'value' => 'archived'],
+            ['name' => trans('texts.deleted'), 'value' => 'deleted']
+          ],
+        'create_entity' => [
+          'create_permission' => auth()->user()->can('create', Client::class),
+          'url' => route('clients.create'),
+          'name' => trans('texts.new_client')
+        ]
+      ]);
+    }
+
     public function buildOptions() : Collection
     {
 
@@ -177,7 +156,7 @@ class ClientDatatable extends EntityDatatable
                   'name' => '__checkbox',   
                   'title' => '',
                   'titleClass' => 'center aligned',
-                  'visible' => $visible->__checkbox,
+                  'visible' => true,
                   'dataClass' => 'center aligned'
                 ],
                 [

app/Filters/ClientFilters.php

@@ -2,64 +2,149 @@
 
 namespace App\Filters;
 
-use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Query\Builder;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Log;
 
+/**
+ * ClientFilters
+ */
 class ClientFilters extends QueryFilters
 {
 
     /**
-     * Filters by due_date
+     * Filter by balance
      *     
-     * @param  string $due_date 
+     * @param  string $balance 
-     * @return Builder 
+     * @return Illuminate\Database\Query\Builder 
      */
-    public function balance($balance)
+    public function balance(string $balance): Builder
     {
         $parts = $this->split($balance);
 
         return $this->builder->where('balance', $parts->operator, $parts->value);
     }
 
-    public function between_balance($balance)
+    /**
+     * Filter between balances
+     * 
+     * @param  string balance
+     * @return Illuminate\Database\Query\Builder
+     */
+    public function between_balance(string $balance): Builder
     {
         $parts = explode(":", $balance);
 
         return $this->builder->whereBetween('balance', [$parts[0], $parts[1]]);
     }
 
-
     /**
-     * Filter by popularity.
+     * Filter based on search text
-     *
+     * 
-     //* @param  string $order
+     * @param  string query filter
-     //* @return Builder
+     * @return Illuminate\Database\Query\Builder
-    
+     */
-    public function popular($order = 'desc')
+    public function filter(string $filter = '') : Builder
     {
-        return $this->builder->orderBy('views', $order);
+        if(strlen($filter) == 0)
+            return $this->builder;
+
+        return  $this->builder->where(function ($query) use ($filter) {
+                    $query->where('clients.name', 'like', '%'.$filter.'%')
+                          ->orWhere('clients.id_number', 'like', '%'.$filter.'%')
+                          ->orWhere('client_contacts.first_name', 'like', '%'.$filter.'%')
+                          ->orWhere('client_contacts.last_name', 'like', '%'.$filter.'%')
+                          ->orWhere('client_contacts.email', 'like', '%'.$filter.'%');
+                });
     }
 
     /**
-     * Filter by difficulty.
+     * Filters the list based on the status
-     *
+     * archived, active, deleted
-     * @param  string $level
+     * 
-     * @return Builder
+     * @param  string filter
-     
+     * @return Illuminate\Database\Query\Builder
-    public function difficulty($level)
+     */
+    public function status(string $filter = '') : Builder
     {
-        return $this->builder->where('difficulty', $level);
+        if(strlen($filter) == 0)
+            return $this->builder;
+
+        $table = 'clients';
+        $filters = explode(',', $filter);
+
+        return $this->builder->where(function ($query) use ($filters, $table) {
+            $query->whereNull($table . '.id');
+
+            if (in_array(parent::STATUS_ACTIVE, $filters)) {
+                $query->orWhereNull($table . '.deleted_at');
+            }
+
+            if (in_array(parent::STATUS_ARCHIVED, $filters)) {
+                $query->orWhere(function ($query) use ($table) {
+                    $query->whereNotNull($table . '.deleted_at');
+
+                    if (! in_array($table, ['users'])) {
+                        $query->where($table . '.is_deleted', '=', 0);
+                    }
+                });
+            }
+
+            if (in_array(parent::STATUS_DELETED, $filters)) {
+                $query->orWhere($table . '.is_deleted', '=', 1);
+            }
+        });
     }
 
     /**
-     * Filter by length.
+     * Sorts the list based on $sort
-     *
+     * 
-     * @param  string $order
+     * @param  string sort formatted as column|asc
-     * @return Builder
+     * @return Illuminate\Database\Query\Builder
-    
+     */
-    public function length($order = 'asc')
+    public function sort(string $sort) : Builder
     {
-        return $this->builder->orderBy('length', $order);
+        $sort_col = explode("|", $sort);
+        return $this->builder->orderBy($sort_col[0], $sort_col[1]);
+    }
+
+    /**
+     * Returns the base query
+     * 
+     * @param  int company_id
+     * @return Illuminate\Database\Query\Builder
+     */
+    public function baseQuery(int $company_id) : Builder
+    {
+        $query = DB::table('clients')
+            ->join('companies', 'companies.id', '=', 'clients.company_id')
+            ->join('client_contacts', 'client_contacts.client_id', '=', 'clients.id')
+            ->where('clients.company_id', '=', $company_id)
+            ->where('client_contacts.is_primary', '=', true)
+            ->where('client_contacts.deleted_at', '=', null)
+            //->whereRaw('(clients.name != "" or contacts.first_name != "" or contacts.last_name != "" or contacts.email != "")') // filter out buy now invoices
+            ->select(
+                DB::raw('COALESCE(clients.currency_id, companies.currency_id) currency_id'),
+                DB::raw('COALESCE(clients.country_id, companies.country_id) country_id'),
+                DB::raw("CONCAT(COALESCE(client_contacts.first_name, ''), ' ', COALESCE(client_contacts.last_name, '')) contact"),
+                'clients.id',
+                'clients.name',
+                'clients.private_notes',
+                'client_contacts.first_name',
+                'client_contacts.last_name',
+                'clients.balance',
+                'clients.last_login',
+                'clients.created_at',
+                'clients.created_at as client_created_at',
+                'client_contacts.phone',
+                'client_contacts.email',
+                'clients.deleted_at',
+                'clients.is_deleted',
+                'clients.user_id',
+                'clients.id_number'
+            );
+
+            return $query;
     }
 
-    */
 }

app/Filters/QueryFilters.php

@@ -2,11 +2,17 @@
 
 namespace App\Filters;
 
-use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Database\Query\Builder;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Log;
 
 abstract class QueryFilters
 {
+    const STATUS_ACTIVE = 'active';
+    const STATUS_ARCHIVED = 'archived';
+    const STATUS_DELETED = 'deleted';
+
     /**
      * The request object.
      *
@@ -26,9 +32,10 @@ abstract class QueryFilters
      *
      * @param Request $request
      */
-    public function __construct(Request $request)
+    public function __construct(Request $request, Builder $builder)
     {
         $this->request = $request;
+        $this->builder = $builder;
     }
 
     /**
@@ -37,9 +44,9 @@ abstract class QueryFilters
      * @param  Builder $builder
      * @return Builder
      */
-    public function apply(Builder $builder)
+    public function apply(int $company_id)
     {
-        $this->builder = $builder;
+        $this->builder = $this->baseQuery($company_id);
 
         foreach ($this->filters() as $name => $value) {
             if (! method_exists($this, $name)) {
@@ -70,7 +77,7 @@ abstract class QueryFilters
      * Explodes the value by delimiter
      * 
      * @param  string $value
-     * @return array 
+     * @return stdClass 
      */
     public function split($value) : stdClass
     {
@@ -84,6 +91,12 @@ abstract class QueryFilters
         return $parts;
     }
 
+    /**
+     * String to operator convertor
+     * 
+     * @param  string $value
+     * @return string
+     */
     private function operatorConvertor(string $operator) : string
     {
         switch ($operator) {

app/Http/Controllers/ClientController.php

@@ -8,6 +8,7 @@ use App\Http\Requests\Client\StoreClientRequest;
 use App\Http\Requests\Client\UpdateClientRequest;
 use App\Jobs\Client\StoreClient;
 use App\Jobs\Client\UpdateClient;
+use App\Jobs\Entity\ActionEntity;
 use App\Models\Client;
 use App\Models\ClientContact;
 use App\Repositories\ClientRepository;
@@ -42,70 +43,12 @@ class ClientController extends Controller
             return $this->clientDatatable->query(request(), $this->getCurrentCompanyId());
 
         $data = [
-            'datatable' => $this->clientDatatable->buildOptions()
+            'datatable' => $this->clientDatatable->buildOptions(),
+            'listaction' => $this->clientDatatable->listActions()
         ];
 
         return view('client.vue_list', $data);
-        /*
-        if (request()->ajax()) {
 
-            /*
-            $clients = Client::query('clients.*', DB::raw("CONCAT(client_contacts.first_name,' ',client_contacts.last_name) as full_name"), 'client_contacts.email')
-                ->leftJoin('client_contacts', function($leftJoin)
-                {
-                    $leftJoin->on('clients.id', '=', 'client_contacts.client_id')
-                        ->where('client_contacts.is_primary', '=', true);
-                });
-            */
-
-/*
-            $clients = Client::query();
-
-            return DataTables::of($clients->get())
-                ->addColumn('full_name', function ($clients) {
-                    return $clients->contacts->where('is_primary', true)->map(function ($contact){
-                        return $contact->first_name . ' ' . $contact->last_name;
-                    })->all();
-                })
-                ->addColumn('email', function ($clients) {
-                    return $clients->contacts->where('is_primary', true)->map(function ($contact){
-                        return $contact->email;
-                    })->all();
-                })
-                ->addColumn('action', function ($client) {
-                    return '<a href="/clients/'. $client->present()->id .'/edit" class="btn btn-xs btn-primary"><i class="glyphicon glyphicon-edit"></i> Edit</a>';
-                })
-                ->addColumn('checkbox', function ($client){
-                    return '<input type="checkbox" name="bulk" value="'. $client->id .'"/>';
-                })
-                ->rawColumns(['checkbox', 'action'])
-                ->make(true);
-        }
-
-        $builder->addAction();
-        $builder->addCheckbox();
-        
-        $html = $builder->columns([
-            ['data' => 'checkbox', 'name' => 'checkbox', 'title' => '', 'searchable' => false, 'orderable' => false],
-            ['data' => 'name', 'name' => 'name', 'title' => trans('texts.name'), 'visible'=> true],
-            ['data' => 'full_name', 'name' => 'full_name', 'title' => trans('texts.contact'), 'visible'=> true],
-            ['data' => 'email', 'name' => 'email', 'title' => trans('texts.email'), 'visible'=> true],
-            ['data' => 'created_at', 'name' => 'created_at', 'title' => trans('texts.date_created'), 'visible'=> true],
-            ['data' => 'last_login', 'name' => 'last_login', 'title' => trans('texts.last_login'), 'visible'=> true],
-            ['data' => 'balance', 'name' => 'balance', 'title' => trans('texts.balance'), 'visible'=> true],
-            ['data' => 'action', 'name' => 'action', 'title' => '', 'searchable' => false, 'orderable' => false],
-        ]);
-
-        $builder->ajax([
-            'url' => route('clients.index'),
-            'type' => 'GET',
-            'data' => 'function(d) { d.key = "value"; }',
-        ]);
-
-        $data['html'] = $html;
-
-        return view('client.list', $data);
-  */
     }
 
     /**
@@ -125,8 +68,8 @@ class ClientController extends Controller
         $client->contacts->add($client_contact);
 
         $data = [
-        'client' => $client,
+            'client' => $client,
-        'hashed_id' => ''
+            'hashed_id' => ''
         ];
 
         return view('client.create', $data);
@@ -216,9 +159,23 @@ class ClientController extends Controller
         //
     }
 
+    /**
+     * Perform bulk actions on the list view
+     * 
+     * @return Collection
+     */
     public function bulk()
     {
-        
+        $action = request()->input('action');
+        $ids = request()->input('ids');
+
+        $clients = Client::find($ids);
+
+        $clients->each(function ($client, $key) use($action){
+            ActionEntity::dispatchNow($client, $action);
+        });
+            //todo need to return the updated dataset
+            return response()->json('success', 200);
     }
 
 }

app/Jobs/Entity/ActionEntity.php

@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Jobs\Entity;
+
+use App\Repositories\BaseRepository;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
+
+class ActionEntity
+{
+    use Dispatchable;
+
+    protected $action;
+
+    protected $entity;
+
+    /**
+     * Create a new job instance.
+     *
+     * @return void
+     */
+
+    public function __construct(Model $entity, string $action)
+    {
+        $this->action = $action;
+        $this->entity = $entity;
+    }
+
+    /**
+     * Execute the job.
+     *
+     * @return void
+     */
+    public function handle(BaseRepository $baseRepo)
+    {
+        return $baseRepo->{$this->action}($this->entity);
+    }
+}

app/Models/BaseModel.php

@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use App\Filters\QueryFilters;
 use Hashids\Hashids;
 use Illuminate\Database\Eloquent\Model;
 
@@ -23,4 +24,5 @@ class BaseModel extends Model
 
         return parent::__call($method, $params);
     }
+
 }

app/Models/CompanyUser.php

@@ -2,7 +2,9 @@
 
 namespace App\Models;
 
-class CompanyUser extends BaseModel
+use Illuminate\Database\Eloquent\Relations\Pivot;
+
+class CompanyUser extends Pivot
 {
     protected $guarded = ['id'];
 
@@ -23,11 +25,11 @@ class CompanyUser extends BaseModel
 
     public function user()
     {
-        return $this->hasOne(User::class)->withPivot('permissions', 'settings');
+        return $this->hasOne(User::class)->withPivot('permissions', 'settings', 'is_admin', 'is_owner', 'is_locked');
     }
 
     public function company()
     {
-    	return $this->hasOne(Company::class)->withPivot('permissions', 'settings');
+    	return $this->hasOne(Company::class)->withPivot('permissions', 'settings', 'is_admin', 'is_owner', 'is_locked');
     }
 }

app/Models/User.php

@@ -10,6 +10,7 @@ use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Database\Eloquent\SoftDeletes;
 use Illuminate\Foundation\Auth\User as Authenticatable;
 use Illuminate\Notifications\Notifiable;
+use Illuminate\Support\Collection;
 use Laracasts\Presenter\PresentableTrait;
 
 class User extends Authenticatable implements MustVerifyEmail
@@ -64,7 +65,7 @@ class User extends Authenticatable implements MustVerifyEmail
      */
     public function companies()
     {
-        return $this->belongsToMany(Company::class)->withPivot('permissions','settings');
+        return $this->belongsToMany(Company::class)->withPivot('permissions', 'settings', 'is_admin', 'is_owner', 'is_locked');
     }
 
     /**
@@ -108,9 +109,9 @@ class User extends Authenticatable implements MustVerifyEmail
      * 
      * @return bool
      */
-    public function isAdmin()
+    public function isAdmin() : bool
     {
-        return $this->company()->pivot->is_admin;
+        return (bool) $this->company()->pivot->is_admin;
     }
 
     /**
@@ -140,13 +141,13 @@ class User extends Authenticatable implements MustVerifyEmail
      * 
      * @return Collection
      */
-    public function permissionsFlat()
+    public function permissionsFlat() :Collection
     {
         return collect($this->permissions())->flatten();
     }
 
-    public function hasPermission($permission)
+    public function hasPermission($permission) : bool
-    {
+    { 
         return $this->permissionsFlat()->contains($permission);
     }
 

app/Policies/ClientPolicy.php

@@ -2,6 +2,7 @@
 
 namespace App\Policies;
 
+use App\Models\Client;
 use App\Models\User;
 
 /**
@@ -10,5 +11,15 @@ use App\Models\User;
  */
 class ClientPolicy extends EntityPolicy
 {
-
+	/**
+	 *  Checks if the user has create permissions
+	 *  
+	 * @param  User $user
+	 * @return bool
+	 */
+	public function create(User $user) : bool
+	{
+		return $user->hasPermission('create_client');
+	}
+	
 }

app/Policies/EntityPolicy.php

@@ -12,32 +12,19 @@ class EntityPolicy
 {
 	/**
 	 * Fires before any of the custom policy methods
+	 *
+	 * Only fires if true, if false we continue.....
 	 * 
 	 * @param  User $user
 	 * @param  $ability
-	 * @return bool
+	 * @return bool/void
 	 */
-	public function before($user, $ability) : bool
+	public function before($user, $ability)
 	{
-	    if ($user->isAdmin()) {
+	     if($user->isAdmin())
-	        return true;
+	     	return true;
-	    }
 	}
 
-	/**
-	 *  Checks if the user has create permissions
-	 * @param  User $user
-	 * @param  $entity
-	 * @return bool
-	 */
-	public function create(User $user, $entity) : bool
-	{
-		$entity = strtolower(class_basename($entity));
-
-			return $user->hasPermission('create_' . $entity);
-	}
-
-
 	/**
 	 *  Checks if the user has edit permissions
 	 * @param  User $user

app/Repositories/BaseRepository.php

@@ -7,6 +7,141 @@ namespace App\Repositories;
  */
 class BaseRepository 
 {
-	
+
+    /**
+     * @return null
+     */
+    public function getClassName()
+    {
+        return null;
+    }
+
+    /**
+     * @return mixed
+     */
+    private function getInstance()
+    {
+        $className = $this->getClassName();
+
+        return new $className();
+    }
+
+    /**
+     * @param $entity
+     * @param $type
+     *
+     * @return string
+     */
+    private function getEventClass($entity, $type)
+    {
+        return 'App\Events\\' . ucfirst(class_basename($entity)) . 'Was' . $type;
+    }
+
+    /**
+     * @param $entity
+     */
+    public function archive($entity)
+    {
+        if ($entity->trashed()) {
+            return;
+        }
+
+        $entity->delete();
+
+        $className = $this->getEventClass($entity, 'Archived');
+
+        if (class_exists($className)) {
+            event(new $className($entity));
+        }
+    }
+
+    /**
+     * @param $entity
+     */
+    public function restore($entity)
+    {
+        if (! $entity->trashed()) {
+            return;
+        }
+
+        $fromDeleted = false;
+        $entity->restore();
+
+        if ($entity->is_deleted) {
+            $fromDeleted = true;
+            $entity->is_deleted = false;
+            $entity->save();
+        }
+
+        $className = $this->getEventClass($entity, 'Restored');
+
+        if (class_exists($className)) {
+            event(new $className($entity, $fromDeleted));
+        }
+    }
+
+    /**
+     * @param $entity
+     */
+    public function delete($entity)
+    {
+        if ($entity->is_deleted) {
+            return;
+        }
+
+        $entity->is_deleted = true;
+        $entity->save();
+
+        $entity->delete();
+
+        $className = $this->getEventClass($entity, 'Deleted');
+
+        if (class_exists($className)) {
+            event(new $className($entity));
+        }
+    }
+
+    /**
+     * @param $ids
+     * @param $action
+     *
+     * @return int
+     */
+    public function bulk($ids, $action)
+    {
+        if (! $ids) {
+            return 0;
+        }
+
+        $entities = $this->findByPublicIdsWithTrashed($ids);
+
+        foreach ($entities as $entity) {
+            if (auth()->user()->can('edit', $entity)) {
+                $this->$action($entity);
+            }
+        }
+
+        return count($entities);
+    }
+
+    /**
+     * @param $ids
+     *
+     * @return mixed
+     */
+    public function findByPublicIds($ids)
+    {
+        return $this->getInstance()->scope($ids)->get();
+    }
+
+    /**
+     * @param $ids
+     *
+     * @return mixed
+     */
+    public function findByPublicIdsWithTrashed($ids)
+    {
+        return $this->getInstance()->scope($ids)->withTrashed()->get();
+    }	
 
 }

app/Repositories/ClientRepository.php

@@ -18,6 +18,11 @@ class ClientRepository extends BaseRepository
         $this->clientContactRepo = $clientContactRepo;
     }
 
+    public function getClassName()
+    {
+        return Client::class;
+    }
+    
 	public function save(Request $request, Client $client) : ?Client
 	{
         $client->fill($request->input());

package.json

@@ -27,7 +27,6 @@
         "jest": "^23.6.0",
         "jquery": "^3.2",
         "laravel-mix": "^2.0",
-        "lodash": "^4.17.5",
         "pace-progress": "1.0.2",
         "perfect-scrollbar": "1.4.0",
         "popper.js": "^1.12",
@@ -39,17 +38,19 @@
     "dependencies": {
         "@types/lodash": "^4.14.118",
         "@types/node": "^10.12.10",
+        "axios-progress-bar": "^1.2.0",
         "hashids": "^1.2.2",
         "laravel-echo": "^1.4.0",
+        "lodash.get": "^4.4.2",
         "quill": "^1.3.6",
         "socket.io-client": "^2.1.1",
         "ts-loader": "3.5.0",
         "typescript": "^3.1.6",
         "vue-chartjs": "^3.4.0",
         "vue-events": "^3.1.0",
-        "vue-i18n": "^8.3.0",
         "vue-multiselect": "^2.1.3",
         "vue-select": "^2.5.1",
-        "vue-toastr": "^2.0.16"
+        "vue-toastr": "^2.0.16",
+        "vuex": "^3.1.0"
     }
 }

public/css/ninja.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
  * CoreUI - Open Source Dashboard UI Kit
- * @version v2.1.4
+ * @version v2.0.18
  * @link https://coreui.io
  * Copyright (c) 2018 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://coreui.io/license)
@@ -10347,6 +10347,10 @@ a.text-dark:hover, a.text-dark:focus {
   box-shadow: 0 0 0 0.2rem rgba(170, 212, 80, 0.5);
 }
 
+button {
+  cursor: pointer;
+}
+
 .btn-transparent {
   color: #fff;
   background-color: transparent;
@@ -11695,28 +11699,6 @@ canvas {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
 }
 
-.sidebar .nav-link.disabled {
-  color: #b3b3b3;
-  cursor: default;
-  background: transparent;
-}
-
-.sidebar .nav-link.disabled .nav-icon {
-  color: #73818f;
-}
-
-.sidebar .nav-link.disabled:hover {
-  color: #b3b3b3;
-}
-
-.sidebar .nav-link.disabled:hover .nav-icon {
-  color: #73818f;
-}
-
-.sidebar .nav-link.disabled:hover.nav-dropdown-toggle::before {
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
-}
-
 .sidebar .nav-link.nav-link-primary {
   background: #20a8d8;
 }
@@ -11884,19 +11866,6 @@ canvas {
   border-left: 0;
 }
 
-.sidebar .nav-dropdown.open .nav-link.disabled {
-  color: #b3b3b3;
-  background: transparent;
-}
-
-.sidebar .nav-dropdown.open .nav-link.disabled:hover {
-  color: #b3b3b3;
-}
-
-.sidebar .nav-dropdown.open .nav-link.disabled:hover .nav-icon {
-  color: #73818f;
-}
-
 .sidebar .nav-dropdown.open > .nav-dropdown-toggle::before {
   -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
@@ -11941,7 +11910,6 @@ canvas {
   position: relative;
   -ms-flex: 0 0 50px;
   flex: 0 0 50px;
-  cursor: pointer;
   background-color: rgba(0, 0, 0, 0.2);
   border: 0;
 }
@@ -12054,19 +12022,6 @@ canvas {
   .sidebar-minimized .sidebar .nav-item:hover > .nav-link .nav-icon {
     color: #fff;
   }
-  .sidebar-minimized .sidebar .nav-item:hover .nav-link.disabled,
-  .sidebar-minimized .sidebar .nav-item:hover .nav-link :disabled {
-    background: #2f353a;
-  }
-  .sidebar-minimized .sidebar .nav-item:hover .nav-link.disabled .nav-icon,
-  .sidebar-minimized .sidebar .nav-item:hover .nav-link :disabled .nav-icon {
-    color: #73818f;
-  }
-  .sidebar-minimized .sidebar section :not(.nav-dropdown-items) > .nav-item:last-child::after {
-    display: block;
-    margin-bottom: 50px;
-    content: "";
-  }
   .sidebar-minimized .sidebar .nav-link {
     position: relative;
     padding-left: 0;
@@ -12114,43 +12069,6 @@ canvas {
     left: 50px;
     display: inline;
   }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav {
-    list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav .divider {
-    height: 0;
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .sidebar-minimizer::before {
-    width: 100%;
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav-link {
-    padding-right: 0;
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav-link .nav-icon {
-    float: right;
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav-link .badge {
-    right: auto;
-    left: 15px;
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav-link:hover .badge {
-    display: inline;
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav > .nav-dropdown > .nav-dropdown-items {
-    display: none;
-    max-height: 1000px;
-    background: #2f353a;
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav > .nav-dropdown:hover {
-    background: #20a8d8;
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items {
-    position: absolute;
-    left: 0;
-    display: inline;
-  }
 }
 
 *[dir="rtl"] .sidebar .nav-dropdown-toggle::before {
@@ -12181,12 +12099,41 @@ canvas {
 }
 
 *[dir="rtl"] .sidebar .sidebar-minimizer::before {
-  right: auto;
+  right: unset;
   left: 0;
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 
+*[dir="rtl"] .sidebar-minimized .sidebar .nav {
+  list-style-type: disc;
+}
+
+*[dir="rtl"] .sidebar-minimized .sidebar .nav-link {
+  padding-right: 0;
+}
+
+*[dir="rtl"] .sidebar-minimized .sidebar .nav-link .nav-icon {
+  float: right;
+  padding: 0;
+  margin: 0;
+}
+
+*[dir="rtl"] .sidebar-minimized .sidebar .nav-link .badge {
+  right: auto;
+  left: 15px;
+}
+
+*[dir="rtl"] .sidebar-minimized .sidebar .nav-dropdown:hover > .nav-dropdown-items {
+  right: 50px;
+  left: 0;
+}
+
+*[dir="rtl"] .sidebar-minimized .sidebar .sidebar-minimizer::before {
+  -webkit-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
+
 *[dir="rtl"] .sidebar-toggler {
   margin-right: 0 !important;
 }
@@ -12891,26 +12838,94 @@ html[dir="rtl"] .aside-menu {
   z-index: 1017;
 }
 
-html:not([dir="rtl"]) .sidebar-show .sidebar,
 html:not([dir="rtl"]) .sidebar-show .sidebar {
   margin-left: 0;
 }
 
-html:not([dir="rtl"]) .aside-menu-show .aside-menu,
+html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main,
+html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer {
+  margin-left: 200px;
+}
+
+html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main,
+html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
+  margin-left: 150px;
+}
+
+html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
+html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
+  margin-left: 50px;
+}
+
+html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb {
+  left: 200px;
+}
+
+html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
+  left: 150px;
+}
+
+html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
+  left: 50px;
+}
+
 html:not([dir="rtl"]) .aside-menu-show .aside-menu {
   margin-right: 0;
 }
 
-html[dir="rtl"] .sidebar-show .sidebar,
+html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main,
+html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer {
+  margin-right: 250px;
+}
+
+html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb {
+  right: 250px;
+}
+
 html[dir="rtl"] .sidebar-show .sidebar {
   margin-right: 0;
 }
 
-html[dir="rtl"] .aside-menu-show .aside-menu,
+html[dir="rtl"] .sidebar-show.sidebar-fixed .main,
+html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer {
+  margin-right: 200px;
+}
+
+html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main,
+html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
+  margin-right: 150px;
+}
+
+html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
+html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
+  margin-right: 50px;
+}
+
+html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb {
+  right: 200px;
+}
+
+html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
+  right: 150px;
+}
+
+html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
+  right: 50px;
+}
+
 html[dir="rtl"] .aside-menu-show .aside-menu {
   margin-left: 0;
 }
 
+html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main,
+html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer {
+  margin-left: 250px;
+}
+
+html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb {
+  left: 250px;
+}
+
 @-webkit-keyframes opacity {
   0% {
     opacity: 0;
@@ -12950,99 +12965,71 @@ html[dir="rtl"] .aside-menu-show .aside-menu {
 }
 
 @media (min-width: 576px) {
-  html:not([dir="rtl"]) .sidebar-sm-show .sidebar,
+  html:not([dir="rtl"]) .sidebar-sm-show .sidebar {
-  html:not([dir="rtl"]) .sidebar-show .sidebar {
     margin-left: 0;
   }
   html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed .main,
-  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed .app-footer,
+  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer {
     margin-left: 200px;
   }
   html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-compact .main,
-  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-compact .app-footer,
+  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-compact .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
     margin-left: 150px;
   }
   html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .main,
-  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer,
+  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
+    margin-left: 50px;
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
-    margin-left: 200px;
   }
-  html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb {
     left: 200px;
   }
-  html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
     left: 150px;
   }
-  html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
     left: 50px;
   }
-  html:not([dir="rtl"]) .aside-menu-show .aside-menu,
   html:not([dir="rtl"]) .aside-menu-sm-show .aside-menu {
     margin-right: 0;
   }
-  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main,
-  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer,
   html:not([dir="rtl"]) .aside-menu-sm-show.aside-menu-fixed .main,
   html:not([dir="rtl"]) .aside-menu-sm-show.aside-menu-fixed .app-footer {
     margin-right: 250px;
   }
-  html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb,
   html:not([dir="rtl"]) .aside-menu-sm-show.breadcrumb-fixed .breadcrumb {
     right: 250px;
   }
-  html[dir="rtl"] .sidebar-sm-show .sidebar,
+  html[dir="rtl"] .sidebar-sm-show .sidebar {
-  html[dir="rtl"] .sidebar-show .sidebar {
     margin-right: 0;
   }
   html[dir="rtl"] .sidebar-sm-show.sidebar-fixed .main,
-  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed .app-footer,
+  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer {
     margin-right: 200px;
   }
   html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-compact .main,
-  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-compact .app-footer,
+  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-compact .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
     margin-right: 150px;
   }
   html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .main,
-  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer,
+  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
+    margin-right: 50px;
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
-    margin-right: 200px;
   }
-  html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed .breadcrumb,
+  html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb {
     right: 200px;
   }
-  html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
+  html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
     right: 150px;
   }
-  html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
+  html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
     right: 50px;
   }
-  html[dir="rtl"] .aside-menu-show .aside-menu,
   html[dir="rtl"] .aside-menu-sm-show .aside-menu {
     margin-left: 0;
   }
-  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main,
-  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer,
   html[dir="rtl"] .aside-menu-sm-show.aside-menu-fixed .main,
   html[dir="rtl"] .aside-menu-sm-show.aside-menu-fixed .app-footer {
     margin-left: 250px;
   }
-  html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb,
   html[dir="rtl"] .aside-menu-sm-show.breadcrumb-fixed .breadcrumb {
     left: 250px;
   }
@@ -13064,100 +13051,92 @@ html[dir="rtl"] .aside-menu-show .aside-menu {
   }
 }
 
+@media (min-width: 576px) and (max-width: 575.98px) {
+  .sidebar-sm-show .main,
+  .aside-menu-sm-show .main {
+    position: relative;
+  }
+  .sidebar-sm-show .main::before,
+  .aside-menu-sm-show .main::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1018;
+    width: 100%;
+    height: 100%;
+    content: "";
+    background: rgba(0, 0, 0, 0.7);
+    -webkit-animation: opacity 0.25s;
+    animation: opacity 0.25s;
+  }
+}
+
 @media (min-width: 768px) {
-  html:not([dir="rtl"]) .sidebar-md-show .sidebar,
+  html:not([dir="rtl"]) .sidebar-md-show .sidebar {
-  html:not([dir="rtl"]) .sidebar-show .sidebar {
     margin-left: 0;
   }
   html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed .main,
-  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed .app-footer,
+  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer {
     margin-left: 200px;
   }
   html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-compact .main,
-  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-compact .app-footer,
+  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-compact .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
     margin-left: 150px;
   }
   html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .main,
-  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer,
+  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
+    margin-left: 50px;
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
-    margin-left: 200px;
   }
-  html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb {
     left: 200px;
   }
-  html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
     left: 150px;
   }
-  html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
     left: 50px;
   }
-  html:not([dir="rtl"]) .aside-menu-show .aside-menu,
   html:not([dir="rtl"]) .aside-menu-md-show .aside-menu {
     margin-right: 0;
   }
-  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main,
-  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer,
   html:not([dir="rtl"]) .aside-menu-md-show.aside-menu-fixed .main,
   html:not([dir="rtl"]) .aside-menu-md-show.aside-menu-fixed .app-footer {
     margin-right: 250px;
   }
-  html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb,
   html:not([dir="rtl"]) .aside-menu-md-show.breadcrumb-fixed .breadcrumb {
     right: 250px;
   }
-  html[dir="rtl"] .sidebar-md-show .sidebar,
+  html[dir="rtl"] .sidebar-md-show .sidebar {
-  html[dir="rtl"] .sidebar-show .sidebar {
     margin-right: 0;
   }
   html[dir="rtl"] .sidebar-md-show.sidebar-fixed .main,
-  html[dir="rtl"] .sidebar-md-show.sidebar-fixed .app-footer,
+  html[dir="rtl"] .sidebar-md-show.sidebar-fixed .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer {
     margin-right: 200px;
   }
   html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-compact .main,
-  html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-compact .app-footer,
+  html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-compact .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
     margin-right: 150px;
   }
   html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .main,
-  html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer,
+  html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
+    margin-right: 50px;
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
-    margin-right: 200px;
   }
-  html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed .breadcrumb,
+  html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb {
     right: 200px;
   }
-  html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
+  html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
     right: 150px;
   }
-  html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
+  html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
     right: 50px;
   }
-  html[dir="rtl"] .aside-menu-show .aside-menu,
   html[dir="rtl"] .aside-menu-md-show .aside-menu {
     margin-left: 0;
   }
-  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main,
-  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer,
   html[dir="rtl"] .aside-menu-md-show.aside-menu-fixed .main,
   html[dir="rtl"] .aside-menu-md-show.aside-menu-fixed .app-footer {
     margin-left: 250px;
   }
-  html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb,
   html[dir="rtl"] .aside-menu-md-show.breadcrumb-fixed .breadcrumb {
     left: 250px;
   }
@@ -13179,100 +13158,92 @@ html[dir="rtl"] .aside-menu-show .aside-menu {
   }
 }
 
+@media (min-width: 768px) and (max-width: 575.98px) {
+  .sidebar-md-show .main,
+  .aside-menu-md-show .main {
+    position: relative;
+  }
+  .sidebar-md-show .main::before,
+  .aside-menu-md-show .main::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1018;
+    width: 100%;
+    height: 100%;
+    content: "";
+    background: rgba(0, 0, 0, 0.7);
+    -webkit-animation: opacity 0.25s;
+    animation: opacity 0.25s;
+  }
+}
+
 @media (min-width: 992px) {
-  html:not([dir="rtl"]) .sidebar-lg-show .sidebar,
+  html:not([dir="rtl"]) .sidebar-lg-show .sidebar {
-  html:not([dir="rtl"]) .sidebar-show .sidebar {
     margin-left: 0;
   }
   html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .main,
-  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .app-footer,
+  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer {
     margin-left: 200px;
   }
   html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-compact .main,
-  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-compact .app-footer,
+  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-compact .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
     margin-left: 150px;
   }
   html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .main,
-  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer,
+  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
     margin-left: 50px;
   }
-  html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb {
     left: 200px;
   }
-  html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
     left: 150px;
   }
-  html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
     left: 50px;
   }
-  html:not([dir="rtl"]) .aside-menu-show .aside-menu,
   html:not([dir="rtl"]) .aside-menu-lg-show .aside-menu {
     margin-right: 0;
   }
-  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main,
-  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer,
   html:not([dir="rtl"]) .aside-menu-lg-show.aside-menu-fixed .main,
   html:not([dir="rtl"]) .aside-menu-lg-show.aside-menu-fixed .app-footer {
     margin-right: 250px;
   }
-  html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb,
   html:not([dir="rtl"]) .aside-menu-lg-show.breadcrumb-fixed .breadcrumb {
     right: 250px;
   }
-  html[dir="rtl"] .sidebar-lg-show .sidebar,
+  html[dir="rtl"] .sidebar-lg-show .sidebar {
-  html[dir="rtl"] .sidebar-show .sidebar {
     margin-right: 0;
   }
   html[dir="rtl"] .sidebar-lg-show.sidebar-fixed .main,
-  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed .app-footer,
+  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer {
     margin-right: 200px;
   }
   html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-compact .main,
-  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-compact .app-footer,
+  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-compact .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
     margin-right: 150px;
   }
   html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .main,
-  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer,
+  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
     margin-right: 50px;
   }
-  html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed .breadcrumb,
+  html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb {
     right: 200px;
   }
-  html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
+  html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
     right: 150px;
   }
-  html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
+  html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
     right: 50px;
   }
-  html[dir="rtl"] .aside-menu-show .aside-menu,
   html[dir="rtl"] .aside-menu-lg-show .aside-menu {
     margin-left: 0;
   }
-  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main,
-  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer,
   html[dir="rtl"] .aside-menu-lg-show.aside-menu-fixed .main,
   html[dir="rtl"] .aside-menu-lg-show.aside-menu-fixed .app-footer {
     margin-left: 250px;
   }
-  html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb,
   html[dir="rtl"] .aside-menu-lg-show.breadcrumb-fixed .breadcrumb {
     left: 250px;
   }
@@ -13294,100 +13265,92 @@ html[dir="rtl"] .aside-menu-show .aside-menu {
   }
 }
 
+@media (min-width: 992px) and (max-width: 575.98px) {
+  .sidebar-lg-show .main,
+  .aside-menu-lg-show .main {
+    position: relative;
+  }
+  .sidebar-lg-show .main::before,
+  .aside-menu-lg-show .main::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1018;
+    width: 100%;
+    height: 100%;
+    content: "";
+    background: rgba(0, 0, 0, 0.7);
+    -webkit-animation: opacity 0.25s;
+    animation: opacity 0.25s;
+  }
+}
+
 @media (min-width: 1200px) {
-  html:not([dir="rtl"]) .sidebar-xl-show .sidebar,
+  html:not([dir="rtl"]) .sidebar-xl-show .sidebar {
-  html:not([dir="rtl"]) .sidebar-show .sidebar {
     margin-left: 0;
   }
   html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed .main,
-  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed .app-footer,
+  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer {
     margin-left: 200px;
   }
   html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-compact .main,
-  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-compact .app-footer,
+  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-compact .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
     margin-left: 150px;
   }
   html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .main,
-  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer,
+  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
     margin-left: 50px;
   }
-  html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb {
     left: 200px;
   }
-  html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
     left: 150px;
   }
-  html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
     left: 50px;
   }
-  html:not([dir="rtl"]) .aside-menu-show .aside-menu,
   html:not([dir="rtl"]) .aside-menu-xl-show .aside-menu {
     margin-right: 0;
   }
-  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main,
-  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer,
   html:not([dir="rtl"]) .aside-menu-xl-show.aside-menu-fixed .main,
   html:not([dir="rtl"]) .aside-menu-xl-show.aside-menu-fixed .app-footer {
     margin-right: 250px;
   }
-  html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb,
   html:not([dir="rtl"]) .aside-menu-xl-show.breadcrumb-fixed .breadcrumb {
     right: 250px;
   }
-  html[dir="rtl"] .sidebar-xl-show .sidebar,
+  html[dir="rtl"] .sidebar-xl-show .sidebar {
-  html[dir="rtl"] .sidebar-show .sidebar {
     margin-right: 0;
   }
   html[dir="rtl"] .sidebar-xl-show.sidebar-fixed .main,
-  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed .app-footer,
+  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer {
     margin-right: 200px;
   }
   html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-compact .main,
-  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-compact .app-footer,
+  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-compact .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
     margin-right: 150px;
   }
   html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .main,
-  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer,
+  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
     margin-right: 50px;
   }
-  html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed .breadcrumb,
+  html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb {
     right: 200px;
   }
-  html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
+  html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
     right: 150px;
   }
-  html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
+  html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
     right: 50px;
   }
-  html[dir="rtl"] .aside-menu-show .aside-menu,
   html[dir="rtl"] .aside-menu-xl-show .aside-menu {
     margin-left: 0;
   }
-  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main,
-  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer,
   html[dir="rtl"] .aside-menu-xl-show.aside-menu-fixed .main,
   html[dir="rtl"] .aside-menu-xl-show.aside-menu-fixed .app-footer {
     margin-left: 250px;
   }
-  html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb,
   html[dir="rtl"] .aside-menu-xl-show.breadcrumb-fixed .breadcrumb {
     left: 250px;
   }
@@ -13409,6 +13372,26 @@ html[dir="rtl"] .aside-menu-show .aside-menu {
   }
 }
 
+@media (min-width: 1200px) and (max-width: 575.98px) {
+  .sidebar-xl-show .main,
+  .aside-menu-xl-show .main {
+    position: relative;
+  }
+  .sidebar-xl-show .main::before,
+  .aside-menu-xl-show .main::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1018;
+    width: 100%;
+    height: 100%;
+    content: "";
+    background: rgba(0, 0, 0, 0.7);
+    -webkit-animation: opacity 0.25s;
+    animation: opacity 0.25s;
+  }
+}
+
 .footer-fixed .app-footer {
   position: fixed;
   right: 0;

public/css/ninja.min.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /*!
  * CoreUI - Open Source Dashboard UI Kit
- * @version v2.1.4
+ * @version v2.0.18
  * @link https://coreui.io
  * Copyright (c) 2018 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://coreui.io/license)
@@ -10347,6 +10347,10 @@ a.text-dark:hover, a.text-dark:focus {
   box-shadow: 0 0 0 0.2rem rgba(170, 212, 80, 0.5);
 }
 
+button {
+  cursor: pointer;
+}
+
 .btn-transparent {
   color: #fff;
   background-color: transparent;
@@ -11695,28 +11699,6 @@ canvas {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
 }
 
-.sidebar .nav-link.disabled {
-  color: #b3b3b3;
-  cursor: default;
-  background: transparent;
-}
-
-.sidebar .nav-link.disabled .nav-icon {
-  color: #73818f;
-}
-
-.sidebar .nav-link.disabled:hover {
-  color: #b3b3b3;
-}
-
-.sidebar .nav-link.disabled:hover .nav-icon {
-  color: #73818f;
-}
-
-.sidebar .nav-link.disabled:hover.nav-dropdown-toggle::before {
-  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='%23fff' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E");
-}
-
 .sidebar .nav-link.nav-link-primary {
   background: #20a8d8;
 }
@@ -11884,19 +11866,6 @@ canvas {
   border-left: 0;
 }
 
-.sidebar .nav-dropdown.open .nav-link.disabled {
-  color: #b3b3b3;
-  background: transparent;
-}
-
-.sidebar .nav-dropdown.open .nav-link.disabled:hover {
-  color: #b3b3b3;
-}
-
-.sidebar .nav-dropdown.open .nav-link.disabled:hover .nav-icon {
-  color: #73818f;
-}
-
 .sidebar .nav-dropdown.open > .nav-dropdown-toggle::before {
   -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
@@ -11941,7 +11910,6 @@ canvas {
   position: relative;
   -ms-flex: 0 0 50px;
   flex: 0 0 50px;
-  cursor: pointer;
   background-color: rgba(0, 0, 0, 0.2);
   border: 0;
 }
@@ -12054,19 +12022,6 @@ canvas {
   .sidebar-minimized .sidebar .nav-item:hover > .nav-link .nav-icon {
     color: #fff;
   }
-  .sidebar-minimized .sidebar .nav-item:hover .nav-link.disabled,
-  .sidebar-minimized .sidebar .nav-item:hover .nav-link :disabled {
-    background: #2f353a;
-  }
-  .sidebar-minimized .sidebar .nav-item:hover .nav-link.disabled .nav-icon,
-  .sidebar-minimized .sidebar .nav-item:hover .nav-link :disabled .nav-icon {
-    color: #73818f;
-  }
-  .sidebar-minimized .sidebar section :not(.nav-dropdown-items) > .nav-item:last-child::after {
-    display: block;
-    margin-bottom: 50px;
-    content: "";
-  }
   .sidebar-minimized .sidebar .nav-link {
     position: relative;
     padding-left: 0;
@@ -12114,43 +12069,6 @@ canvas {
     left: 50px;
     display: inline;
   }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav {
-    list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav .divider {
-    height: 0;
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .sidebar-minimizer::before {
-    width: 100%;
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav-link {
-    padding-right: 0;
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav-link .nav-icon {
-    float: right;
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav-link .badge {
-    right: auto;
-    left: 15px;
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav-link:hover .badge {
-    display: inline;
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav > .nav-dropdown > .nav-dropdown-items {
-    display: none;
-    max-height: 1000px;
-    background: #2f353a;
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav > .nav-dropdown:hover {
-    background: #20a8d8;
-  }
-  *[dir="rtl"] .sidebar-minimized .sidebar .nav > .nav-dropdown:hover > .nav-dropdown-items {
-    position: absolute;
-    left: 0;
-    display: inline;
-  }
 }
 
 *[dir="rtl"] .sidebar .nav-dropdown-toggle::before {
@@ -12181,12 +12099,41 @@ canvas {
 }
 
 *[dir="rtl"] .sidebar .sidebar-minimizer::before {
-  right: auto;
+  right: unset;
   left: 0;
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 
+*[dir="rtl"] .sidebar-minimized .sidebar .nav {
+  list-style-type: disc;
+}
+
+*[dir="rtl"] .sidebar-minimized .sidebar .nav-link {
+  padding-right: 0;
+}
+
+*[dir="rtl"] .sidebar-minimized .sidebar .nav-link .nav-icon {
+  float: right;
+  padding: 0;
+  margin: 0;
+}
+
+*[dir="rtl"] .sidebar-minimized .sidebar .nav-link .badge {
+  right: auto;
+  left: 15px;
+}
+
+*[dir="rtl"] .sidebar-minimized .sidebar .nav-dropdown:hover > .nav-dropdown-items {
+  right: 50px;
+  left: 0;
+}
+
+*[dir="rtl"] .sidebar-minimized .sidebar .sidebar-minimizer::before {
+  -webkit-transform: rotate(0deg);
+  transform: rotate(0deg);
+}
+
 *[dir="rtl"] .sidebar-toggler {
   margin-right: 0 !important;
 }
@@ -12891,26 +12838,94 @@ html[dir="rtl"] .aside-menu {
   z-index: 1017;
 }
 
-html:not([dir="rtl"]) .sidebar-show .sidebar,
 html:not([dir="rtl"]) .sidebar-show .sidebar {
   margin-left: 0;
 }
 
-html:not([dir="rtl"]) .aside-menu-show .aside-menu,
+html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main,
+html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer {
+  margin-left: 200px;
+}
+
+html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main,
+html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
+  margin-left: 150px;
+}
+
+html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
+html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
+  margin-left: 50px;
+}
+
+html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb {
+  left: 200px;
+}
+
+html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
+  left: 150px;
+}
+
+html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
+  left: 50px;
+}
+
 html:not([dir="rtl"]) .aside-menu-show .aside-menu {
   margin-right: 0;
 }
 
-html[dir="rtl"] .sidebar-show .sidebar,
+html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main,
+html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer {
+  margin-right: 250px;
+}
+
+html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb {
+  right: 250px;
+}
+
 html[dir="rtl"] .sidebar-show .sidebar {
   margin-right: 0;
 }
 
-html[dir="rtl"] .aside-menu-show .aside-menu,
+html[dir="rtl"] .sidebar-show.sidebar-fixed .main,
+html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer {
+  margin-right: 200px;
+}
+
+html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main,
+html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
+  margin-right: 150px;
+}
+
+html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
+html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
+  margin-right: 50px;
+}
+
+html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb {
+  right: 200px;
+}
+
+html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
+  right: 150px;
+}
+
+html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
+  right: 50px;
+}
+
 html[dir="rtl"] .aside-menu-show .aside-menu {
   margin-left: 0;
 }
 
+html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main,
+html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer {
+  margin-left: 250px;
+}
+
+html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb {
+  left: 250px;
+}
+
 @-webkit-keyframes opacity {
   0% {
     opacity: 0;
@@ -12950,99 +12965,71 @@ html[dir="rtl"] .aside-menu-show .aside-menu {
 }
 
 @media (min-width: 576px) {
-  html:not([dir="rtl"]) .sidebar-sm-show .sidebar,
+  html:not([dir="rtl"]) .sidebar-sm-show .sidebar {
-  html:not([dir="rtl"]) .sidebar-show .sidebar {
     margin-left: 0;
   }
   html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed .main,
-  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed .app-footer,
+  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer {
     margin-left: 200px;
   }
   html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-compact .main,
-  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-compact .app-footer,
+  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-compact .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
     margin-left: 150px;
   }
   html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .main,
-  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer,
+  html:not([dir="rtl"]) .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
+    margin-left: 50px;
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
-    margin-left: 200px;
   }
-  html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb {
     left: 200px;
   }
-  html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
     left: 150px;
   }
-  html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-sm-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
     left: 50px;
   }
-  html:not([dir="rtl"]) .aside-menu-show .aside-menu,
   html:not([dir="rtl"]) .aside-menu-sm-show .aside-menu {
     margin-right: 0;
   }
-  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main,
-  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer,
   html:not([dir="rtl"]) .aside-menu-sm-show.aside-menu-fixed .main,
   html:not([dir="rtl"]) .aside-menu-sm-show.aside-menu-fixed .app-footer {
     margin-right: 250px;
   }
-  html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb,
   html:not([dir="rtl"]) .aside-menu-sm-show.breadcrumb-fixed .breadcrumb {
     right: 250px;
   }
-  html[dir="rtl"] .sidebar-sm-show .sidebar,
+  html[dir="rtl"] .sidebar-sm-show .sidebar {
-  html[dir="rtl"] .sidebar-show .sidebar {
     margin-right: 0;
   }
   html[dir="rtl"] .sidebar-sm-show.sidebar-fixed .main,
-  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed .app-footer,
+  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer {
     margin-right: 200px;
   }
   html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-compact .main,
-  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-compact .app-footer,
+  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-compact .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
     margin-right: 150px;
   }
   html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .main,
-  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer,
+  html[dir="rtl"] .sidebar-sm-show.sidebar-fixed.sidebar-minimized .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
+    margin-right: 50px;
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
-    margin-right: 200px;
   }
-  html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed .breadcrumb,
+  html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb {
     right: 200px;
   }
-  html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
+  html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
     right: 150px;
   }
-  html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
+  html[dir="rtl"] .sidebar-sm-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
     right: 50px;
   }
-  html[dir="rtl"] .aside-menu-show .aside-menu,
   html[dir="rtl"] .aside-menu-sm-show .aside-menu {
     margin-left: 0;
   }
-  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main,
-  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer,
   html[dir="rtl"] .aside-menu-sm-show.aside-menu-fixed .main,
   html[dir="rtl"] .aside-menu-sm-show.aside-menu-fixed .app-footer {
     margin-left: 250px;
   }
-  html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb,
   html[dir="rtl"] .aside-menu-sm-show.breadcrumb-fixed .breadcrumb {
     left: 250px;
   }
@@ -13064,100 +13051,92 @@ html[dir="rtl"] .aside-menu-show .aside-menu {
   }
 }
 
+@media (min-width: 576px) and (max-width: 575.98px) {
+  .sidebar-sm-show .main,
+  .aside-menu-sm-show .main {
+    position: relative;
+  }
+  .sidebar-sm-show .main::before,
+  .aside-menu-sm-show .main::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1018;
+    width: 100%;
+    height: 100%;
+    content: "";
+    background: rgba(0, 0, 0, 0.7);
+    -webkit-animation: opacity 0.25s;
+    animation: opacity 0.25s;
+  }
+}
+
 @media (min-width: 768px) {
-  html:not([dir="rtl"]) .sidebar-md-show .sidebar,
+  html:not([dir="rtl"]) .sidebar-md-show .sidebar {
-  html:not([dir="rtl"]) .sidebar-show .sidebar {
     margin-left: 0;
   }
   html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed .main,
-  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed .app-footer,
+  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer {
     margin-left: 200px;
   }
   html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-compact .main,
-  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-compact .app-footer,
+  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-compact .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
     margin-left: 150px;
   }
   html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .main,
-  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer,
+  html:not([dir="rtl"]) .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
+    margin-left: 50px;
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
-    margin-left: 200px;
   }
-  html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb {
     left: 200px;
   }
-  html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
     left: 150px;
   }
-  html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-md-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
     left: 50px;
   }
-  html:not([dir="rtl"]) .aside-menu-show .aside-menu,
   html:not([dir="rtl"]) .aside-menu-md-show .aside-menu {
     margin-right: 0;
   }
-  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main,
-  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer,
   html:not([dir="rtl"]) .aside-menu-md-show.aside-menu-fixed .main,
   html:not([dir="rtl"]) .aside-menu-md-show.aside-menu-fixed .app-footer {
     margin-right: 250px;
   }
-  html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb,
   html:not([dir="rtl"]) .aside-menu-md-show.breadcrumb-fixed .breadcrumb {
     right: 250px;
   }
-  html[dir="rtl"] .sidebar-md-show .sidebar,
+  html[dir="rtl"] .sidebar-md-show .sidebar {
-  html[dir="rtl"] .sidebar-show .sidebar {
     margin-right: 0;
   }
   html[dir="rtl"] .sidebar-md-show.sidebar-fixed .main,
-  html[dir="rtl"] .sidebar-md-show.sidebar-fixed .app-footer,
+  html[dir="rtl"] .sidebar-md-show.sidebar-fixed .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer {
     margin-right: 200px;
   }
   html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-compact .main,
-  html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-compact .app-footer,
+  html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-compact .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
     margin-right: 150px;
   }
   html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .main,
-  html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer,
+  html[dir="rtl"] .sidebar-md-show.sidebar-fixed.sidebar-minimized .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
+    margin-right: 50px;
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
-    margin-right: 200px;
   }
-  html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed .breadcrumb,
+  html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb {
     right: 200px;
   }
-  html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
+  html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
     right: 150px;
   }
-  html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
+  html[dir="rtl"] .sidebar-md-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
     right: 50px;
   }
-  html[dir="rtl"] .aside-menu-show .aside-menu,
   html[dir="rtl"] .aside-menu-md-show .aside-menu {
     margin-left: 0;
   }
-  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main,
-  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer,
   html[dir="rtl"] .aside-menu-md-show.aside-menu-fixed .main,
   html[dir="rtl"] .aside-menu-md-show.aside-menu-fixed .app-footer {
     margin-left: 250px;
   }
-  html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb,
   html[dir="rtl"] .aside-menu-md-show.breadcrumb-fixed .breadcrumb {
     left: 250px;
   }
@@ -13179,100 +13158,92 @@ html[dir="rtl"] .aside-menu-show .aside-menu {
   }
 }
 
+@media (min-width: 768px) and (max-width: 575.98px) {
+  .sidebar-md-show .main,
+  .aside-menu-md-show .main {
+    position: relative;
+  }
+  .sidebar-md-show .main::before,
+  .aside-menu-md-show .main::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1018;
+    width: 100%;
+    height: 100%;
+    content: "";
+    background: rgba(0, 0, 0, 0.7);
+    -webkit-animation: opacity 0.25s;
+    animation: opacity 0.25s;
+  }
+}
+
 @media (min-width: 992px) {
-  html:not([dir="rtl"]) .sidebar-lg-show .sidebar,
+  html:not([dir="rtl"]) .sidebar-lg-show .sidebar {
-  html:not([dir="rtl"]) .sidebar-show .sidebar {
     margin-left: 0;
   }
   html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .main,
-  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .app-footer,
+  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer {
     margin-left: 200px;
   }
   html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-compact .main,
-  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-compact .app-footer,
+  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-compact .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
     margin-left: 150px;
   }
   html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .main,
-  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer,
+  html:not([dir="rtl"]) .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
     margin-left: 50px;
   }
-  html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb {
     left: 200px;
   }
-  html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
     left: 150px;
   }
-  html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-lg-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
     left: 50px;
   }
-  html:not([dir="rtl"]) .aside-menu-show .aside-menu,
   html:not([dir="rtl"]) .aside-menu-lg-show .aside-menu {
     margin-right: 0;
   }
-  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main,
-  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer,
   html:not([dir="rtl"]) .aside-menu-lg-show.aside-menu-fixed .main,
   html:not([dir="rtl"]) .aside-menu-lg-show.aside-menu-fixed .app-footer {
     margin-right: 250px;
   }
-  html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb,
   html:not([dir="rtl"]) .aside-menu-lg-show.breadcrumb-fixed .breadcrumb {
     right: 250px;
   }
-  html[dir="rtl"] .sidebar-lg-show .sidebar,
+  html[dir="rtl"] .sidebar-lg-show .sidebar {
-  html[dir="rtl"] .sidebar-show .sidebar {
     margin-right: 0;
   }
   html[dir="rtl"] .sidebar-lg-show.sidebar-fixed .main,
-  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed .app-footer,
+  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer {
     margin-right: 200px;
   }
   html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-compact .main,
-  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-compact .app-footer,
+  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-compact .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
     margin-right: 150px;
   }
   html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .main,
-  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer,
+  html[dir="rtl"] .sidebar-lg-show.sidebar-fixed.sidebar-minimized .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
     margin-right: 50px;
   }
-  html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed .breadcrumb,
+  html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb {
     right: 200px;
   }
-  html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
+  html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
     right: 150px;
   }
-  html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
+  html[dir="rtl"] .sidebar-lg-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
     right: 50px;
   }
-  html[dir="rtl"] .aside-menu-show .aside-menu,
   html[dir="rtl"] .aside-menu-lg-show .aside-menu {
     margin-left: 0;
   }
-  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main,
-  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer,
   html[dir="rtl"] .aside-menu-lg-show.aside-menu-fixed .main,
   html[dir="rtl"] .aside-menu-lg-show.aside-menu-fixed .app-footer {
     margin-left: 250px;
   }
-  html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb,
   html[dir="rtl"] .aside-menu-lg-show.breadcrumb-fixed .breadcrumb {
     left: 250px;
   }
@@ -13294,100 +13265,92 @@ html[dir="rtl"] .aside-menu-show .aside-menu {
   }
 }
 
+@media (min-width: 992px) and (max-width: 575.98px) {
+  .sidebar-lg-show .main,
+  .aside-menu-lg-show .main {
+    position: relative;
+  }
+  .sidebar-lg-show .main::before,
+  .aside-menu-lg-show .main::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1018;
+    width: 100%;
+    height: 100%;
+    content: "";
+    background: rgba(0, 0, 0, 0.7);
+    -webkit-animation: opacity 0.25s;
+    animation: opacity 0.25s;
+  }
+}
+
 @media (min-width: 1200px) {
-  html:not([dir="rtl"]) .sidebar-xl-show .sidebar,
+  html:not([dir="rtl"]) .sidebar-xl-show .sidebar {
-  html:not([dir="rtl"]) .sidebar-show .sidebar {
     margin-left: 0;
   }
   html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed .main,
-  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed .app-footer,
+  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed .app-footer {
     margin-left: 200px;
   }
   html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-compact .main,
-  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-compact .app-footer,
+  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-compact .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
     margin-left: 150px;
   }
   html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .main,
-  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer,
+  html:not([dir="rtl"]) .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer {
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .main,
-  html:not([dir="rtl"]) .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
     margin-left: 50px;
   }
-  html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed .breadcrumb {
     left: 200px;
   }
-  html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
     left: 150px;
   }
-  html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
+  html:not([dir="rtl"]) .sidebar-xl-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
-  html:not([dir="rtl"]) .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
     left: 50px;
   }
-  html:not([dir="rtl"]) .aside-menu-show .aside-menu,
   html:not([dir="rtl"]) .aside-menu-xl-show .aside-menu {
     margin-right: 0;
   }
-  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .main,
-  html:not([dir="rtl"]) .aside-menu-show.aside-menu-fixed .app-footer,
   html:not([dir="rtl"]) .aside-menu-xl-show.aside-menu-fixed .main,
   html:not([dir="rtl"]) .aside-menu-xl-show.aside-menu-fixed .app-footer {
     margin-right: 250px;
   }
-  html:not([dir="rtl"]) .aside-menu-show.breadcrumb-fixed .breadcrumb,
   html:not([dir="rtl"]) .aside-menu-xl-show.breadcrumb-fixed .breadcrumb {
     right: 250px;
   }
-  html[dir="rtl"] .sidebar-xl-show .sidebar,
+  html[dir="rtl"] .sidebar-xl-show .sidebar {
-  html[dir="rtl"] .sidebar-show .sidebar {
     margin-right: 0;
   }
   html[dir="rtl"] .sidebar-xl-show.sidebar-fixed .main,
-  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed .app-footer,
+  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed .app-footer {
     margin-right: 200px;
   }
   html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-compact .main,
-  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-compact .app-footer,
+  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-compact .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-compact .app-footer {
     margin-right: 150px;
   }
   html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .main,
-  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer,
+  html[dir="rtl"] .sidebar-xl-show.sidebar-fixed.sidebar-minimized .app-footer {
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .main,
-  html[dir="rtl"] .sidebar-show.sidebar-fixed.sidebar-minimized .app-footer {
     margin-right: 50px;
   }
-  html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed .breadcrumb,
+  html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed .breadcrumb {
     right: 200px;
   }
-  html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed.sidebar-compact .breadcrumb,
+  html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-compact .breadcrumb {
     right: 150px;
   }
-  html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed.sidebar-minimized .breadcrumb,
+  html[dir="rtl"] .sidebar-xl-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
-  html[dir="rtl"] .sidebar-show.breadcrumb-fixed.sidebar-minimized .breadcrumb {
     right: 50px;
   }
-  html[dir="rtl"] .aside-menu-show .aside-menu,
   html[dir="rtl"] .aside-menu-xl-show .aside-menu {
     margin-left: 0;
   }
-  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .main,
-  html[dir="rtl"] .aside-menu-show.aside-menu-fixed .app-footer,
   html[dir="rtl"] .aside-menu-xl-show.aside-menu-fixed .main,
   html[dir="rtl"] .aside-menu-xl-show.aside-menu-fixed .app-footer {
     margin-left: 250px;
   }
-  html[dir="rtl"] .aside-menu-show.breadcrumb-fixed .breadcrumb,
   html[dir="rtl"] .aside-menu-xl-show.breadcrumb-fixed .breadcrumb {
     left: 250px;
   }
@@ -13409,6 +13372,26 @@ html[dir="rtl"] .aside-menu-show .aside-menu {
   }
 }
 
+@media (min-width: 1200px) and (max-width: 575.98px) {
+  .sidebar-xl-show .main,
+  .aside-menu-xl-show .main {
+    position: relative;
+  }
+  .sidebar-xl-show .main::before,
+  .aside-menu-xl-show .main::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1018;
+    width: 100%;
+    height: 100%;
+    content: "";
+    background: rgba(0, 0, 0, 0.7);
+    -webkit-animation: opacity 0.25s;
+    animation: opacity 0.25s;
+  }
+}
+
 .footer-fixed .app-footer {
   position: fixed;
   right: 0;

resources/js/src/bootstrap.js

@@ -1,5 +1,5 @@
 // lodash handles our translations 
-import * as _ from "lodash"
+import * as get from "lodash.get"
 
 // import Toastr
 import Toastr from 'vue-toastr';
@@ -13,7 +13,8 @@ import Vue from 'vue';
 Vue.component('vue-toastr',Toastr);
 
 // Global translation helper
-Vue.prototype.trans = string => _.get(i18n, string);
+Vue.prototype.trans = string => get(i18n, string);
+
 
 window.axios = require('axios');
 window.Vue = require('vue');

resources/js/src/client/client_edit.ts

@@ -8,11 +8,6 @@ declare var i18n;
 
 import Vue from 'vue';
 
-/**
- * Next, we will create a fresh Vue application instance and attach it to
- * the page. Then, you may begin adding components to this application
- * or customize the JavaScript scaffolding to fit your unique needs.
-*/
 Vue.component('client-edit', require('../components/client/ClientEdit.vue'));
 Vue.component('client-address', require('../components/client/ClientAddress.vue'));
 Vue.component('generic-address', require('../components/generic/Address.vue'));

resources/js/src/client/client_list.ts

@@ -5,7 +5,9 @@ declare var i18n;
 
 import Vue from 'vue';
 import axios from 'axios';
+import store from '../store'
 
+export default store
 
 Vue.component('client-list', require('../components/client/ClientList.vue'));
 Vue.component('client-actions', require('../components/client/ClientActions.vue'));
@@ -21,7 +23,8 @@ Vue.component('list-actions', require('../components/util/VueListActions.vue'));
 window.onload = function () {
 
     const app = new Vue({
-        el: '#client_list'
+        el: '#client_list',
+        store 
     });
 
 }

resources/js/src/components/client/ClientList.vue

@@ -3,8 +3,8 @@
 	<div>
 
       <vuetable ref="vuetable"
-	    api-url="/clients"
+	      api-url="/clients"
-	    :fields="fields"
+	      :fields="fields"
       	:per-page="perPage"
       	:sort-order="sortOrder"
       	:append-params="moreParams"
@@ -24,7 +24,7 @@
 
     	</div>
 
-  	</div>
+  </div>
 
 </template>
 
@@ -36,6 +36,7 @@ import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePagination
 import Vue from 'vue'
 import VueEvents from 'vue-events'
 import VuetableCss from '../util/VuetableCss'
+import axios from 'axios'
 
 Vue.use(VueEvents)
 
@@ -47,63 +48,70 @@ export default {
         	Vuetable,
 	      	VuetablePagination,
 	      	VuetablePaginationInfo
-	    },
+	},
-    data: function () {
+  data: function () {
-        return {
+      return {
-            css: VuetableCss,
+          css: VuetableCss,
-            perPage: this.datatable.per_page,
+          perPage: this.datatable.per_page,
-            sortOrder: this.datatable.sort_order,
+          sortOrder: this.datatable.sort_order,
-            moreParams: {},
+          moreParams: this.$store.getters['client_list/getQueryStringObject'],
-            fields: this.datatable.fields
+          fields: this.datatable.fields
-        }
-    },
-    props: ['datatable'],
-    mounted() {
-
-      this.$events.$on('filter-set', eventData => this.onFilterSet(eventData))
-      this.$events.$on('filter-reset', e => this.onFilterReset())
-      this.$events.$on('bulkAction', eventData => this.bulk(eventData))
-      //this.$events.$on('vuetable:checkbox-toggled-all', eventData => this.checkboxToggled(eventData))
-
-    },
-    beforeMount: function () {
-
-    },
-    methods: {
-
-	    onPaginationData (paginationData : any) {
-
-	      this.$refs.pagination.setPaginationData(paginationData)
-	      this.$refs.paginationInfo.setPaginationData(paginationData) 
-
-	    },
-	    onChangePage (page : any) {
-
-			this.$refs.vuetable.changePage(page)
-
-	    },
-		  onFilterSet (filterText) {
-
-  			this.moreParams = {
-  			    'filter': filterText
-  			}
-  			Vue.nextTick( () => this.$refs.vuetable.refresh())
-
-		  },
-  		onFilterReset () {
-  		  	this.moreParams = {}
-  		  	Vue.nextTick( () => this.$refs.vuetable.refresh())
-  		},
-      bulk (eventData){
-        //console.log(eventData)
-        //console.dir(this.$refs.vuetable.selectedTo)
-      },
-      toggledCheckBox(){
-        console.log(this.$refs.vuetable.selectedTo.length +' Checkboxes checked')
-        this.$events.fire('bulk-count', this.$refs.vuetable.selectedTo.length)
       }
+  },
+  props: ['datatable'],
+  mounted() {
 
-	 }
+    this.$events.$on('filter-set', eventData => this.onFilterSet())
+    this.$events.$on('bulk-action', eventData => this.bulk(eventData, this))
+    this.$events.$on('multi-select', eventData => this.multiSelect(eventData))
+
+  },
+  methods: {
+
+    onPaginationData (paginationData : any) {
+
+      this.$refs.pagination.setPaginationData(paginationData)
+      this.$refs.paginationInfo.setPaginationData(paginationData) 
+
+    },
+    onChangePage (page : any) {
+
+		this.$refs.vuetable.changePage(page)
+
+    },
+	  onFilterSet () {
+
+      this.moreParams = this.$store.getters['client_list/getQueryStringObject']
+			Vue.nextTick( () => this.$refs.vuetable.refresh())
+
+	  },
+    bulk (action){
+
+        axios.post('/clients/bulk', {
+          'action' : action,
+          'ids' : this.$refs.vuetable.selectedTo
+        })
+        .then((response) => {
+          this.$store.commit('client_list/setBulkCount', 0)
+          this.$refs.vuetable.selectedTo = []
+          this.$refs.vuetable.refresh()
+          
+        })
+        .catch(function (error) {
+
+        });
+        
+    },
+    toggledCheckBox(){
+      this.$store.commit('client_list/setBulkCount', this.$refs.vuetable.selectedTo.length)
+    },
+    multiSelect(value)
+    {
+      this.moreParams = this.$store.getters['client_list/getQueryStringObject']
+      Vue.nextTick( () => this.$refs.vuetable.refresh())
+    }
+
+ }
 }
 </script>
 

resources/js/src/components/util/VueListActions.vue

@@ -5,8 +5,8 @@
     <div class="p-2">
 
     		<div class="btn-group">
-          <button type="button" class="btn btn-primary btn-lg" @click="archive" :disabled="bulk_count == 0">{{ trans('texts.archive') }} <span v-if="bulk_count > 0">({{ bulk_count }})</span></button>
+          <button type="button" class="btn btn-primary btn-lg" @click="archive" :disabled="getBulkCount() == 0">{{ trans('texts.archive') }} <span v-if="getBulkCount() > 0">({{ getBulkCount() }})</span></button>
-          <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" :disabled="bulk_count == 0">
+          <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" :disabled="getBulkCount() == 0">
             <span class="sr-only">Toggle Dropdown</span>
           </button>
           <div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(81px, 38px, 0px);">
@@ -26,7 +26,7 @@
     </div>
 
     <div class="p-2">
-      <button class="btn btn-primary btn-lg " v-on:click="$emit('bulk','poota')">{{ trans('texts.new_client') }}</button>
+      <button class="btn btn-primary btn-lg " v-on:click="$emit('bulk','poota')" :disabled="isDisabled">{{ trans('texts.new_client') }}</button>
     </div>
 
 	</div>
@@ -36,26 +36,24 @@
 <script lang="ts">
 
   export default {
-    data() { 
+  props:['listaction'],
-      return {
-        bulk_count : 0
-      }
-    },
-    mounted() {
-        console.dir('the number of counts = ' + this.bulk_count)
-        this.$events.$on('bulk-count', eventData => this.bulkCountUpdated(eventData))
-    },    
     methods: {
       archive () {
-        this.$events.fire('bulkAction', 'archive') 
+        this.$events.fire('bulk-action', 'archive') 
       },
       del () {
-        this.$events.fire('bulkAction', 'delete')
+        this.$events.fire('bulk-action', 'delete')
       },
-      bulkCountUpdated(count) {
+      getBulkCount() {
-        this.bulk_count = count
+        return this.$store.getters['client_list/getBulkCount']
       }
-    }
+    },
+   computed: {
+      isDisabled() :any
+      {
+        return !this.listaction.create_entity.create_permission;
+      }
+   }
 
   }
 </script>

resources/js/src/components/util/VuetableFilterBar.vue

@@ -1,40 +1,51 @@
 <template>
   
         <div class="input-group">
+
           <input type="text" v-model="filterText" class="form-control" @keyup.enter="doFilter" placeholder="search">
           <button class="btn btn-primary" @click="doFilter">Go</button>
-          <button class="btn btn-light" @click="resetFilter">Reset</button>
+          <!--<button class="btn btn-light" @click="resetFilter">Reset</button>-->
+
         </div>
       
 </template>
 
-  <script lang="ts">
+<script lang="ts">
   
   import Vue from 'vue'
 
   export default {
     data () {
       return {
+
         filterText: ''
+
       }
     },
     methods: {
       doFilter () {
-        this.$events.fire('filter-set', this.filterText)
+
+        this.$store.commit('client_list/setFilterText', this.filterText)
+        this.$events.fire('filter-set','')
+
       },
       resetFilter () {
-        this.filterText = ''  // clear the text in text input
+
-        this.$events.fire('filter-reset')
+        this.$store.commit('client_list/setFilterText', '')
+        this.$events.fire('filter-set','')
+
       }
     }
   }
 </script>
 
 <style>
+
   .form-inline > * {
      margin:5px 10px;
   }
   .form-control {
     min-height: 40px;
   }
+
 </style>

resources/js/src/components/util/VuetableMultiSelect.vue

@@ -1,10 +1,10 @@
-<!-- Vue component -->
 <template>
   <div style="width:300px;">
     <multiselect v-model="value" 
     :options="options" 
     :multiple="true"
     :placeholder="trans('texts.status')"
+    :preselect-first="true"
     @input="onChange"
     ></multiselect>
   </div>
@@ -15,22 +15,26 @@
   import Multiselect from 'vue-multiselect'
 
   export default {
-    // OR register locally
     components: { Multiselect },
     data () {
       return {
-        value: 'active',
+        value : [],
         options: ['active', 'archived', 'deleted']
       }
     },
     methods: {
       onChange (value) {
-        console.dir(this.value)
+
-        this.value = value
+        this.$store.commit('client_list/setStatusArray', value)
+        this.$events.fire('multi-select', '')
+
         if (value.indexOf('Reset me!') !== -1) this.value = []
+
       },
       onSelect (option) {
+
         if (option === 'Disable me!') this.isDisabled = true
+          
       }
     }
   }

resources/js/src/components/util/VuetablePaginationBootstrap.vue

@@ -11,6 +11,7 @@
         <a @click.prevent="loadPage(n)" v-html="n"></a>
       </li>
     </template>
+
     <template v-else>
       <li v-for="n in windowSize" :class="{'active': isCurrentPage(windowStart+n-1)}">
         <a @click.prevent="loadPage(windowStart+n-1)" v-html="windowStart+n-1"></a>
@@ -26,8 +27,11 @@
 </template>
 
 <script>
+
 import VuetablePaginationMixin from 'vuetable-2/src/components/VuetablePaginationMixin'
+
 export default {
   mixins: [VuetablePaginationMixin]
 }
+
 </script>

resources/js/src/store/index.ts

@@ -0,0 +1,16 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import client_list from './modules/client_list'
+
+Vue.use(Vuex)
+
+const debug = process.env.NODE_ENV !== 'production'
+
+const store =  new Vuex.Store({
+  modules: {
+    client_list
+  },
+  strict: debug,
+})
+
+export default store

resources/js/src/store/modules/client_list.ts

@@ -0,0 +1,62 @@
+const state = {
+  statuses: ['active'],
+  filter_text: '',
+  bulk_count : 0
+}
+
+// getters
+const getters = {
+  getBulkCount: state => {
+
+    return state.bulk_count
+  
+  }, 
+	getFilterText: state => {
+
+		return state.filter_text
+
+	},
+  getQueryStringObject: state => {
+
+    var queryObj = {
+      filter: state.filter_text,
+      status: [].concat.apply([], state.statuses).join(",")
+    }
+
+    return queryObj
+  }
+}
+
+// actions
+const actions = {
+
+}
+
+// mutations
+const mutations = {
+	setFilterText(state, text) {
+
+    state.filter_text = text
+
+	},
+  setStatusArray(state, statuses) {
+
+    state.statuses = statuses
+
+  },
+  setBulkCount(state, count) {
+
+    state.bulk_count = count
+    
+  }
+}
+
+export default {
+
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+  
+}

resources/views/client/vue_list.blade.php

@@ -12,7 +12,7 @@
 
         <div class="container-fluid" id="client_list">
 
-            <list-actions></list-actions>
+            <list-actions :listaction="{{ $listaction }}"></list-actions>
 
             <div style="background: #fff;">