- Client list

- Context menu

app/Http/Controllers/Oasis/ClientController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\Oasis;
 
 use App\Http\Controllers\Controller;
+use App\Http\Resources\Oasis\OasisClientCollection;
 use Auth;
 use Illuminate\Http\Request;
 
@@ -13,6 +14,8 @@ class ClientController extends Controller
      */
     public function index()
     {
-        return response(Auth::user()->clients, 200);
+        return response(
+            new OasisClientCollection(Auth::user()->clients), 200
+        );
     }
 }

app/Http/Controllers/Oasis/InvoiceController.php

@@ -14,7 +14,9 @@ class InvoiceController extends Controller
      */
     public function get_all_regular_invoices()
     {
-        return response(new OasisInvoiceCollection(Auth::user()->regularInvoices), 200);
+        return response(
+            new OasisInvoiceCollection(Auth::user()->regularInvoices), 200
+        );
     }
 
     /**
@@ -22,6 +24,8 @@ class InvoiceController extends Controller
      */
     public function get_all_advance_invoices()
     {
-        return response(new OasisInvoiceCollection(Auth::user()->advanceInvoices), 200);
+        return response(
+            new OasisInvoiceCollection(Auth::user()->advanceInvoices), 200
+        );
     }
 }

app/Http/Resources/Oasis/OasisClientCollection.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace App\Http\Resources\Oasis;
+
+use Illuminate\Http\Resources\Json\ResourceCollection;
+
+class OasisClientCollection extends ResourceCollection
+{
+    public $collects = OasisClientResource::class;
+
+    /**
+     * Transform the resource collection into an array.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Support\Collection
+     */
+    public function toArray($request)
+    {
+        return $this->collection;
+    }
+}

app/Http/Resources/Oasis/OasisClientResource.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace App\Http\Resources\Oasis;
+
+use Illuminate\Http\Resources\Json\JsonResource;
+
+class OasisClientResource extends JsonResource
+{
+    /**
+     * Transform the resource into an array.
+     *
+     * @param \Illuminate\Http\Request $request
+     * @return array
+     */
+    public function toArray($request)
+    {
+        $total_net = \DB::table('invoices')
+            ->whereClientId($this->id)
+            ->sum('total_net');
+
+        $total_invoices = \DB::table('invoices')
+            ->whereClientId($this->id)
+            ->count();
+
+        return [
+            'id'            => $this->id,
+            'name'          => $this->name,
+            'email'         => $this->email,
+            'avatar'        => url('/assets/images/default-avatar.png'),
+            'totalNet'      => format_to_currency($total_net, 'CZK'),
+            'totalInvoices' => $total_invoices,
+            'type'          => 'client',
+            'created_at'    => format_date($this->created_at, '%d. %B. %Y'),
+        ];
+    }
+}

app/Http/Resources/Oasis/OasisInvoiceResource.php

@@ -22,6 +22,7 @@ class OasisInvoiceResource extends JsonResource
             'file_url'      => '',
             'clientName'    => $this->client['name'],
             'mimetype'      => 'pdf',
+            'type'          => 'invoice',
             'created_at'    => format_date($this->created_at, '%d. %B. %Y'),
         ];
     }

app/Traits/Oasis.php

@@ -20,7 +20,7 @@ trait Oasis
 
     public function clients()
     {
-        return $this->hasMany(Client::class);
+        return $this->hasMany(Client::class, 'user_id', 'id');
     }
 
     public function regularInvoices()

database/factories/Oasis/ClientFactory.php

@@ -37,7 +37,7 @@ class ClientFactory extends Factory
             'dic'    => $this->faker->numberBetween(11111111, 99999999),
             'ic_dph' => 'CZ' . $this->faker->numberBetween(1111111111, 9999999999),
             'created_at'        => $this->faker->dateTimeBetween(
-                $startDate = '-36 months', $endDate = 'now', $timezone = null
+                $startDate = '-6 months', $endDate = 'now', $timezone = null
             ),
         ];
     }

database/factories/Oasis/InvoiceFactory.php

@@ -78,10 +78,10 @@ class InvoiceFactory extends Factory
             ],
             'discount_type'   => $this->faker->randomElement(['percent', 'value', null]),
             'delivery_at'      => $this->faker->dateTimeBetween(
-                $startDate = '-36 months', $endDate = 'now', $timezone = null
+                $startDate = '-6 months', $endDate = 'now', $timezone = null
             ),
             'created_at'      => $this->faker->dateTimeBetween(
-                $startDate = '-36 months', $endDate = 'now', $timezone = null
+                $startDate = '-6 months', $endDate = 'now', $timezone = null
             ),
         ];
     }

public/mix-manifest.json

@@ -41,9 +41,9 @@
     "/chunks/files~chunks/oasis/invoices/list~chunks/oasis/platba~chunks/settings-subscription~chunks/shar~d6675e1e.js": "/chunks/files~chunks/oasis/invoices/list~chunks/oasis/platba~chunks/settings-subscription~chunks/shar~d6675e1e.js?id=effef49b99446fdaee0b",
     "/chunks/files~chunks/oasis/invoices/list~chunks/platform~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/oasis/invoices/list~chunks/platform~chunks/shared-files~chunks/shared/file-browser.js?id=c777877000f1e219a748",
     "/chunks/files~chunks/oasis/invoices/list~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/oasis/invoices/list~chunks/shared-files~chunks/shared/file-browser.js?id=c6fc1ec1f0bf1b367c92",
-    "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/shared~chunks/s~87b39a8d.js": "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/shared~chunks/s~87b39a8d.js?id=493b24181051e0ba7b73",
+    "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/shared~chunks/s~87b39a8d.js": "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/shared~chunks/s~87b39a8d.js?id=8330f58f94520d8fd0fb",
     "/chunks/files~chunks/oasis/invoices~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/f~9f6a6eef.js": "/chunks/files~chunks/oasis/invoices~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/f~9f6a6eef.js?id=9bc0d89f45dff1feb308",
-    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js?id=c411ea74700776ae1b8a",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js?id=14b259c05259260985ec",
     "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.js?id=06665bebae33953fed87",
     "/chunks/files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared/file-browser.js?id=44899a3c3880630dbcd9",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=877a9289b77ac3885042",
@@ -52,8 +52,8 @@
     "/chunks/invoices.js": "/chunks/invoices.js?id=1deb187f6d3eb1e81ad0",
     "/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=7fc7f9b6f10bdfac770e",
     "/chunks/oasis/homepage.js": "/chunks/oasis/homepage.js?id=a1885dd8814f9eb63a1c",
-    "/chunks/oasis/invoices.js": "/chunks/oasis/invoices.js?id=acaee920d77bcc1daca2",
+    "/chunks/oasis/invoices.js": "/chunks/oasis/invoices.js?id=63e7567dcc370b5c88d0",
-    "/chunks/oasis/invoices/list.js": "/chunks/oasis/invoices/list.js?id=7aab0c285898e97a29d8",
+    "/chunks/oasis/invoices/list.js": "/chunks/oasis/invoices/list.js?id=9da3d326829139f2addd",
     "/chunks/oasis/invoices~chunks/platform~chunks/shared.js": "/chunks/oasis/invoices~chunks/platform~chunks/shared.js?id=9ad184d8e96c7d04941c",
     "/chunks/oasis/platba.js": "/chunks/oasis/platba.js?id=53d9f2a31b1dd5dad85e",
     "/chunks/oasis/platba~chunks/oasis/upgrade-billing~chunks/oasis/upgrade-plan~chunks/upgrade-billing~ch~6880400b.js": "/chunks/oasis/platba~chunks/oasis/upgrade-billing~chunks/oasis/upgrade-plan~chunks/upgrade-billing~ch~6880400b.js?id=0c8d1c3cca084baa177f",
@@ -107,5 +107,60 @@
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~d5ccfc07.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~d5ccfc07.js?id=2b62263afbefba53c9c6",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~f0e94b19.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~f0e94b19.js?id=d57479525cd6baaf09f3",
     "/vendors~chunks/files~chunks/oasis/invoices~chunks/platform~chunks/shared~chunks/shared-files~chunks/~9b82b04f.js": "/vendors~chunks/files~chunks/oasis/invoices~chunks/platform~chunks/shared~chunks/shared-files~chunks/~9b82b04f.js?id=548bff41ffa0385b8f01",
-    "/vendors~chunks/oasis/invoices~chunks/platform~chunks/shared.js": "/vendors~chunks/oasis/invoices~chunks/platform~chunks/shared.js?id=03d3cf785cbafa4d31f0"
+    "/vendors~chunks/oasis/invoices~chunks/platform~chunks/shared.js": "/vendors~chunks/oasis/invoices~chunks/platform~chunks/shared.js?id=03d3cf785cbafa4d31f0",
+    "/chunks/oasis/invoices/list.6e2d11673a94a112aa56.hot-update.js": "/chunks/oasis/invoices/list.6e2d11673a94a112aa56.hot-update.js",
+    "/chunks/oasis/invoices/list.265c59e6b1af568e2eba.hot-update.js": "/chunks/oasis/invoices/list.265c59e6b1af568e2eba.hot-update.js",
+    "/chunks/oasis/invoices/list.3fc4ff2804b2e3b34c94.hot-update.js": "/chunks/oasis/invoices/list.3fc4ff2804b2e3b34c94.hot-update.js",
+    "/chunks/oasis/invoices/list.182fcbe691f39f2dd267.hot-update.js": "/chunks/oasis/invoices/list.182fcbe691f39f2dd267.hot-update.js",
+    "/chunks/oasis/invoices/list.b9944bd48fc38bce1361.hot-update.js": "/chunks/oasis/invoices/list.b9944bd48fc38bce1361.hot-update.js",
+    "/chunks/oasis/invoices/list.05ed1db4ede92e4f9c5b.hot-update.js": "/chunks/oasis/invoices/list.05ed1db4ede92e4f9c5b.hot-update.js",
+    "/chunks/oasis/invoices/list.701bcfc593568f22339a.hot-update.js": "/chunks/oasis/invoices/list.701bcfc593568f22339a.hot-update.js",
+    "/chunks/oasis/invoices/list.aba750569e0d52ec1015.hot-update.js": "/chunks/oasis/invoices/list.aba750569e0d52ec1015.hot-update.js",
+    "/chunks/oasis/invoices/list.7a0c7e6f287ced4e3d37.hot-update.js": "/chunks/oasis/invoices/list.7a0c7e6f287ced4e3d37.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.2ac6a83d80af676ee889.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.2ac6a83d80af676ee889.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.a8a84d8852a9698aa66a.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.a8a84d8852a9698aa66a.hot-update.js",
+    "/js/main.b6ee9f5fa95ccb7bb9d9.hot-update.js": "/js/main.b6ee9f5fa95ccb7bb9d9.hot-update.js",
+    "/chunks/oasis/invoices/list.dd6d66b2db3dbbb7e665.hot-update.js": "/chunks/oasis/invoices/list.dd6d66b2db3dbbb7e665.hot-update.js",
+    "/chunks/oasis/invoices/list.e0af2b4fa85b58398395.hot-update.js": "/chunks/oasis/invoices/list.e0af2b4fa85b58398395.hot-update.js",
+    "/chunks/oasis/invoices/list.8d7de0a8be055f55785c.hot-update.js": "/chunks/oasis/invoices/list.8d7de0a8be055f55785c.hot-update.js",
+    "/chunks/oasis/invoices/list.3ec404d342e87445d6db.hot-update.js": "/chunks/oasis/invoices/list.3ec404d342e87445d6db.hot-update.js",
+    "/chunks/oasis/invoices/list.b40ee2a3fb9308646af8.hot-update.js": "/chunks/oasis/invoices/list.b40ee2a3fb9308646af8.hot-update.js",
+    "/chunks/oasis/invoices/list.6e6f1e19321e8240f74e.hot-update.js": "/chunks/oasis/invoices/list.6e6f1e19321e8240f74e.hot-update.js",
+    "/chunks/oasis/invoices/list.dd614c88a48ac499bfd8.hot-update.js": "/chunks/oasis/invoices/list.dd614c88a48ac499bfd8.hot-update.js",
+    "/chunks/oasis/invoices/list.af57888e7ab930c135a5.hot-update.js": "/chunks/oasis/invoices/list.af57888e7ab930c135a5.hot-update.js",
+    "/chunks/oasis/invoices/list.38904136d69eea82e10a.hot-update.js": "/chunks/oasis/invoices/list.38904136d69eea82e10a.hot-update.js",
+    "/chunks/oasis/invoices/list.b42fc649bf1e87aa6775.hot-update.js": "/chunks/oasis/invoices/list.b42fc649bf1e87aa6775.hot-update.js",
+    "/chunks/oasis/invoices/list.737365aae44e019aa778.hot-update.js": "/chunks/oasis/invoices/list.737365aae44e019aa778.hot-update.js",
+    "/chunks/oasis/invoices/list.8bdc657b473794589416.hot-update.js": "/chunks/oasis/invoices/list.8bdc657b473794589416.hot-update.js",
+    "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/shared~chunks/s~87b39a8d.894dcde0c01f52ec98f5.hot-update.js": "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/shared~chunks/s~87b39a8d.894dcde0c01f52ec98f5.hot-update.js",
+    "/chunks/oasis/invoices/list.a4253c6b6d92d9cac52b.hot-update.js": "/chunks/oasis/invoices/list.a4253c6b6d92d9cac52b.hot-update.js",
+    "/chunks/oasis/invoices/list.d19a5538e03b30a5bd26.hot-update.js": "/chunks/oasis/invoices/list.d19a5538e03b30a5bd26.hot-update.js",
+    "/chunks/oasis/invoices/list.9c343258c35e57a5b6cb.hot-update.js": "/chunks/oasis/invoices/list.9c343258c35e57a5b6cb.hot-update.js",
+    "/chunks/oasis/invoices/list.790e7ef4eb6495135c38.hot-update.js": "/chunks/oasis/invoices/list.790e7ef4eb6495135c38.hot-update.js",
+    "/chunks/oasis/invoices/list.45c61c805c04e2a9d20f.hot-update.js": "/chunks/oasis/invoices/list.45c61c805c04e2a9d20f.hot-update.js",
+    "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/shared~chunks/s~87b39a8d.785a25c3b5028c850186.hot-update.js": "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/shared~chunks/s~87b39a8d.785a25c3b5028c850186.hot-update.js",
+    "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/shared~chunks/s~87b39a8d.069ab5b75a1fafb253cb.hot-update.js": "/chunks/files~chunks/oasis/invoices~chunks/oasis/invoices/list~chunks/platform~chunks/shared~chunks/s~87b39a8d.069ab5b75a1fafb253cb.hot-update.js",
+    "/chunks/oasis/invoices/list.6a991fad2bcbb330431c.hot-update.js": "/chunks/oasis/invoices/list.6a991fad2bcbb330431c.hot-update.js",
+    "/chunks/oasis/invoices/list.8148b98d08ab438f2c9c.hot-update.js": "/chunks/oasis/invoices/list.8148b98d08ab438f2c9c.hot-update.js",
+    "/chunks/oasis/invoices.5d51ab014620a62e856a.hot-update.js": "/chunks/oasis/invoices.5d51ab014620a62e856a.hot-update.js",
+    "/chunks/oasis/invoices.49397d834267b33e7d00.hot-update.js": "/chunks/oasis/invoices.49397d834267b33e7d00.hot-update.js",
+    "/js/main.7f61c82e2287c754ca38.hot-update.js": "/js/main.7f61c82e2287c754ca38.hot-update.js",
+    "/chunks/admin~chunks/files~chunks/oasis/invoices~chunks/platform~chunks/shared~chunks/shared-files~ch~d5261757.js": "/chunks/admin~chunks/files~chunks/oasis/invoices~chunks/platform~chunks/shared~chunks/shared-files~ch~d5261757.js?id=d21fb57bf57311960d1d",
+    "/chunks/app-language~chunks/dashboard~chunks/dashboard-oasis~chunks/files~chunks/invoices~chunks/oasi~be89c0bb.js": "/chunks/app-language~chunks/dashboard~chunks/dashboard-oasis~chunks/files~chunks/invoices~chunks/oasi~be89c0bb.js?id=b3e30c8dd757237db0e2",
+    "/chunks/files~chunks/oasis/invoices~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/f~5c41de43.js": "/chunks/files~chunks/oasis/invoices~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/f~5c41de43.js?id=82783fb4be9549d57cbe",
+    "/chunks/files~chunks/oasis/platba~chunks/settings-subscription~chunks/shared-files~chunks/shared/file~9d1352fd.js": "/chunks/files~chunks/oasis/platba~chunks/settings-subscription~chunks/shared-files~chunks/shared/file~9d1352fd.js?id=4030b241faac6b31341f",
+    "/chunks/files~chunks/platform~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared-files~chunks/shared/file-browser.js?id=6808db2deb2d07287ce9",
+    "/chunks/oasis/invoices/list.7f61c82e2287c754ca38.hot-update.js": "/chunks/oasis/invoices/list.7f61c82e2287c754ca38.hot-update.js",
+    "/js/main.314faf49a76943358893.hot-update.js": "/js/main.314faf49a76943358893.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.314faf49a76943358893.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.314faf49a76943358893.hot-update.js",
+    "/chunks/oasis/invoices/list.314faf49a76943358893.hot-update.js": "/chunks/oasis/invoices/list.314faf49a76943358893.hot-update.js",
+    "/chunks/oasis/invoices/list.d1d774f5362851a4bb70.hot-update.js": "/chunks/oasis/invoices/list.d1d774f5362851a4bb70.hot-update.js",
+    "/chunks/oasis/invoices/list.cdcd4c3c6897e8f17e77.hot-update.js": "/chunks/oasis/invoices/list.cdcd4c3c6897e8f17e77.hot-update.js",
+    "/chunks/oasis/invoices/list.0671192a476ef152a710.hot-update.js": "/chunks/oasis/invoices/list.0671192a476ef152a710.hot-update.js",
+    "/chunks/oasis/invoices/list.918ddf9efb64766353bf.hot-update.js": "/chunks/oasis/invoices/list.918ddf9efb64766353bf.hot-update.js",
+    "/chunks/oasis/invoices/list.12da628c110745ba2da4.hot-update.js": "/chunks/oasis/invoices/list.12da628c110745ba2da4.hot-update.js",
+    "/chunks/oasis/invoices/list.176280fa58d9259de7dd.hot-update.js": "/chunks/oasis/invoices/list.176280fa58d9259de7dd.hot-update.js",
+    "/chunks/oasis/invoices/list.160b226c79c7f19a172a.hot-update.js": "/chunks/oasis/invoices/list.160b226c79c7f19a172a.hot-update.js",
+    "/chunks/oasis/invoices/list.a291cdab527404d85d0b.hot-update.js": "/chunks/oasis/invoices/list.a291cdab527404d85d0b.hot-update.js",
+    "/chunks/oasis/invoices/list.0a15b78a6cc57168a270.hot-update.js": "/chunks/oasis/invoices/list.0a15b78a6cc57168a270.hot-update.js"
 }

resources/js/Oasis/Modules/Invoices/components/ClientItem.vue

@@ -0,0 +1,461 @@
+<template>
+    <div class="file-wrapper" @mouseup.stop="clickedItem" @dblclick="showInvoice">
+        <div class="file-item" :class="{'is-clicked': isClicked , 'no-clicked': !isClicked && $isMobile()}">
+
+			<!-- MultiSelecting for the mobile version -->
+            <transition name="slide-from-left">
+                <div class="check-select" v-if="isMobileSelectMode">
+                    <div class="select-box" :class="{'select-box-active': isClicked } ">
+                        <CheckIcon v-if="isClicked" class="icon" size="17" />
+                    </div>
+                </div>
+            </transition>
+
+			<!--Thumbnail for item-->
+            <div class="icon-item">
+
+				<!--Image thumbnail-->
+                <img loading="lazy" class="image" :src="item.avatar" :alt="item.name" />
+            </div>
+
+            <!--Name-->
+            <div class="item-name">
+
+				<b :ref="item.id" class="name">
+                    {{ item.name }}
+                </b>
+
+                <div class="item-info">
+                    <span class="item-size">
+						Created at: {{ item.created_at }}, Total: {{ item.totalNet }}
+					</span>
+                </div>
+            </div>
+
+            <!--Show item actions-->
+            <transition name="slide-from-right">
+                <div class="actions" v-if="$isMobile() && ! isMobileSelectMode">
+                    <span @mousedown.stop="showItemActions" class="show-actions">
+                        <MoreVerticalIcon size="16" class="icon-action text-theme" />
+                    </span>
+                </div>
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script>
+import {CheckIcon, MoreVerticalIcon} from 'vue-feather-icons'
+import {mapGetters} from 'vuex'
+import {events} from '@/bus'
+
+export default {
+    name: 'InvoiceItem',
+    props: [
+		'item'
+	],
+    components: {
+        MoreVerticalIcon,
+        CheckIcon,
+    },
+    computed: {
+        ...mapGetters([
+            'FilePreviewType',
+            'clipboard',
+            'entries'
+        ]),
+        isClicked() {
+            return this.clipboard.some(element => element.id === this.item.id)
+        },
+    },
+    data() {
+        return {
+            isMobileSelectMode: false
+        }
+    },
+    methods: {
+        showItemActions() {
+            this.$store.commit('CLIPBOARD_CLEAR')
+            this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
+
+            events.$emit('mobile-menu:show', 'invoice-menu')
+        },
+        clickedItem(e) {
+            if (!this.$isMobile()) {
+
+                if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
+
+                	// Click + Ctrl
+                    if (this.clipboard.some(item => item.data.id === this.item.data.id)) {
+                        this.$store.commit('REMOVE_ITEM_FROM_CLIPBOARD', this.item)
+                    } else {
+                        this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
+                    }
+
+                } else if (e.shiftKey) {
+
+                	// Click + Shift
+                    let lastItem = this.entries.indexOf(this.clipboard[this.clipboard.length - 1])
+                    let clickedItem = this.entries.indexOf(this.item)
+
+                    // If Click + Shift + Ctrl dont remove already selected items
+                    if (!e.ctrlKey && !e.metaKey) {
+                        this.$store.commit('CLIPBOARD_CLEAR')
+                    }
+
+                    //Shift selecting from top to bottom
+                    if (lastItem < clickedItem) {
+                        for (let i = lastItem; i <= clickedItem; i++) {
+                            this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.entries[i])
+                        }
+                        //Shift selecting from bottom to top
+                    } else {
+                        for (let i = lastItem; i >= clickedItem; i--) {
+                            this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.entries[i])
+                        }
+                    }
+
+                } else {
+
+                	// Click
+                    this.$store.commit('CLIPBOARD_CLEAR')
+                    this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
+                }
+            }
+
+            if (!this.isMobileSelectMode && this.$isMobile()) {
+				events.$emit('file-preview:show')
+            }
+
+            if (this.isMobileSelectMode && this.$isMobile()) {
+                if (this.clipboard.some(item => item.data.id === this.item.data.id)) {
+                    this.$store.commit('REMOVE_ITEM_FROM_CLIPBOARD', this.item)
+                } else {
+                    this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
+                }
+            }
+        },
+        showInvoice() {
+			events.$emit('file-preview:show')
+        },
+    },
+    created() {
+        events.$on('mobileSelecting:start', () => {
+            this.isMobileSelectMode = true
+            this.$store.commit('CLIPBOARD_CLEAR')
+        })
+
+        events.$on('mobileSelecting:stop', () => {
+            this.isMobileSelectMode = false
+            this.$store.commit('CLIPBOARD_CLEAR')
+        })
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import '@assets/vuefilemanager/_variables';
+@import '@assets/vuefilemanager/_mixins';
+
+
+.slide-from-left-move {
+    transition: transform 300s ease;
+}
+
+.slide-from-left-enter-active,
+.slide-from-right-enter-active,
+.slide-from-left-leave-active,
+.slide-from-right-leave-active {
+    transition: all 300ms;
+}
+
+.slide-from-left-enter,
+.slide-from-left-leave-to {
+    opacity: 0;
+    transform: translateX(-100%);
+}
+
+.slide-from-right-enter,
+.slide-from-right-leave-to {
+    opacity: 0;
+    transform: translateX(100%);
+}
+
+
+.check-select {
+    margin-right: 15px;
+    margin-left: 6px;
+
+    .select-box {
+        width: 20px;
+        height: 20px;
+        background-color: darken($light_background, 5%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 5px;
+    }
+
+    .select-box-active {
+        background-color: $theme;
+
+        .icon {
+            stroke: white;
+        }
+    }
+}
+
+.file-wrapper {
+    user-select: none;
+    position: relative;
+
+    &:hover {
+        border-color: transparent;
+    }
+
+    .actions {
+        text-align: right;
+        width: 50px;
+
+        .show-actions {
+            cursor: pointer;
+            padding: 12px 0 12px 6px;
+
+            .icon-action {
+                margin-top: 9px;
+                @include font-size(14);
+
+                circle {
+                    color: inherit;
+                }
+            }
+        }
+    }
+
+    .item-name {
+        display: block;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        .item-info {
+            display: block;
+            line-height: 1;
+        }
+
+        .item-shared {
+            display: inline-block;
+
+            .label {
+                @include font-size(12);
+                font-weight: 400;
+                color: $theme;
+            }
+
+            .shared-icon {
+                vertical-align: middle;
+
+                path,
+                circle,
+                line {
+                    color: inherit;
+                }
+            }
+        }
+
+        .item-size,
+        .item-length {
+            @include font-size(11);
+            font-weight: 400;
+            color: rgba($text, 0.7);
+        }
+
+        .name {
+            white-space: nowrap;
+
+            &[contenteditable] {
+                -webkit-user-select: text;
+                user-select: text;
+            }
+
+            &[contenteditable='true']:hover {
+                text-decoration: underline;
+            }
+        }
+
+        .name {
+            color: $text;
+            @include font-size(14);
+            font-weight: 700;
+            max-height: 40px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+
+            &.actived {
+                max-height: initial;
+            }
+        }
+    }
+
+    &.selected {
+        .file-item {
+            background: $light_background;
+        }
+    }
+
+    .icon-item {
+        text-align: center;
+        position: relative;
+        flex: 0 0 50px;
+        line-height: 0;
+        margin-right: 20px;
+
+        .folder {
+            width: 52px;
+            height: 52px;
+
+            /deep/ .folder-icon {
+                @include font-size(52)
+            }
+        }
+
+        .file-icon {
+            @include font-size(45);
+
+            path {
+                fill: #fafafc;
+                stroke: #dfe0e8;
+                stroke-width: 1;
+            }
+        }
+
+        .file-icon-text {
+            line-height: 1;
+            top: 40%;
+            @include font-size(11);
+            margin: 0 auto;
+            position: absolute;
+            text-align: center;
+            left: 0;
+            right: 0;
+            font-weight: 600;
+            user-select: none;
+            max-width: 50px;
+            max-height: 20px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .image {
+            object-fit: cover;
+            user-select: none;
+            max-width: 100%;
+            border-radius: 5px;
+            width: 50px;
+            height: 50px;
+            pointer-events: none;
+        }
+    }
+
+    .file-item {
+        border: 2px dashed transparent;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        padding: 7px 7px 7px 15px;
+
+        &.is-dragenter {
+            border-radius: 8px;
+        }
+
+        &.no-clicked {
+            background: white !important;
+
+            .item-name {
+                .name {
+                    color: $text !important;
+                }
+            }
+        }
+
+        &:hover,
+        &.is-clicked {
+            border-radius: 8px;
+            background: $light_background;
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .check-select {
+
+        .select-box {
+            background-color: lighten($dark_mode_foreground, 10%);
+        }
+
+        .select-box-active {
+            background-color: $theme;
+
+            .icon {
+                stroke: white;
+            }
+        }
+    }
+
+    .file-wrapper {
+        .icon-item {
+            .file-icon {
+                path {
+                    fill: $dark_mode_foreground;
+                    stroke: #2f3c54;
+                }
+            }
+        }
+
+        .file-item {
+            &.no-clicked {
+                background: $dark_mode_background !important;
+
+                .file-icon {
+
+                    path {
+                        fill: $dark_mode_foreground !important;
+                        stroke: #2F3C54;
+                    }
+                }
+
+                .item-name {
+
+                    .name {
+                        color: $dark_mode_text_primary !important;
+                    }
+                }
+            }
+
+            &:hover,
+            &.is-clicked {
+                background: $dark_mode_foreground;
+
+                .file-icon {
+                    path {
+                        fill: $dark_mode_background;
+                    }
+                }
+            }
+        }
+
+        .item-name {
+            .name {
+                color: $dark_mode_text_primary;
+            }
+
+            .item-size,
+            .item-length {
+                color: $dark_mode_text_secondary;
+            }
+        }
+    }
+}
+</style>

resources/js/Oasis/Modules/Invoices/components/InvoiceBrowser.vue

@@ -27,6 +27,15 @@
                     <InvoiceItem
 						@contextmenu.native.prevent="contextMenu($event, item)"
 						:item="item"
+						v-if="item.type === 'invoice'"
+						v-for="item in entries"
+						:key="item.id"
+						class="file-item"
+					/>
+                    <ClientItem
+						@contextmenu.native.prevent="contextMenu($event, item)"
+						:item="item"
+						v-if="item.type === 'client'"
 						v-for="item in entries"
 						:key="item.id"
 						class="file-item"
@@ -56,6 +65,7 @@
     import InvoiceActionsMobile from '@/Oasis/Modules/Invoices/components/InvoiceActionsMobile'
 	import InvoiceInfoSidebar from '@/Oasis/Modules/Invoices/components/InvoiceInfoSidebar'
 	import InvoiceItem from '@/Oasis/Modules/Invoices/components/InvoiceItem'
+	import ClientItem from '@/Oasis/Modules/Invoices/components/ClientItem'
 	import EmptyFilePage from '@/components/FilesView/EmptyFilePage'
 	import MobileToolbar from '@/components/FilesView/MobileToolbar'
 	import EmptyMessage from '@/components/FilesView/EmptyMessage'
@@ -67,11 +77,12 @@
 		name: 'FilesContainer',
 		components: {
 			InvoiceActionsMobile,
+			InvoiceInfoSidebar,
 			EmptyFilePage,
 			MobileToolbar,
-			InvoiceItem,
 			EmptyMessage,
-			InvoiceInfoSidebar,
+			InvoiceItem,
+			ClientItem,
 			SearchBar,
 		},
 		computed: {

resources/js/Oasis/Modules/Invoices/components/InvoiceContextMenu.vue

@@ -1,8 +1,8 @@
 <template>
     <div :style="{ top: positionY + 'px', left: positionX + 'px' }" @click="closeAndResetContextMenu" class="contextmenu" v-show="isVisible || showFromPreview" ref="contextmenu" :class="{'filePreviewFixed': showFromPreview}">
 
-        <!-- File Preview -->
+        <!--Invoice-->
-        <div class="menu-options" id="menu-list">
+        <div v-show="isInvoice" class="menu-options" id="menu-list">
             <OptionGroup class="menu-option-group">
                 <Option @click.native="" title="Edit Invoice" icon="rename" />
                 <Option @click.native="" title="Send Invoice" icon="send" />
@@ -16,6 +16,17 @@
             </OptionGroup>
         </div>
 
+        <!--Client-->
+        <div v-show="isClient" class="menu-options" id="menu-list">
+            <OptionGroup class="menu-option-group">
+                <Option @click.native="" title="Edit" icon="rename" />
+                <Option @click.native="deleteItem" title="Delete" icon="trash" />
+            </OptionGroup>
+            <OptionGroup>
+                <Option @click.native="showDetail" title="Go to Profile" icon="user" />
+                <Option @click.native="showDetail" :title="$t('context_menu.detail')" icon="detail" />
+            </OptionGroup>
+        </div>
     </div>
 </template>
 
@@ -36,6 +47,12 @@ export default {
 			'user',
 			'clipboard'
 		]),
+		isInvoice() {
+			return this.clipboard[0] && this.clipboard[0].type === 'invoice'
+		},
+		isClient() {
+			return this.clipboard[0] && this.clipboard[0].type === 'client'
+		},
         isMultiSelectContextMenu() {
 
             // If is context Menu open on multi selected items open just options for the multi selected items

resources/js/Oasis/Modules/Invoices/components/InvoiceCreateMenu.vue

@@ -2,11 +2,11 @@
     <MenuMobile name="invoice-create">
         <MenuMobileGroup>
             <OptionGroup>
-                <Option @click.native="showLocation('invoices')" title="New Invoice" icon="file-plus" is-hover-disabled="true" />
+                <Option @click.native="showLocation('invoices')" title="Create Invoice" icon="file-plus" is-hover-disabled="true" />
-                <Option @click.native="showLocation('advance-invoices')" title="New Advance Invoices" icon="file-plus" is-hover-disabled="true" />
+                <Option @click.native="showLocation('advance-invoices')" title="Create Advance Invoice" icon="clock" is-hover-disabled="true" />
             </OptionGroup>
             <OptionGroup>
-                <Option @click.native="showLocation('clients')" title="New Client" icon="user-plus" is-hover-disabled="true" />
+                <Option @click.native="showLocation('clients')" title="Create Client" icon="user-plus" is-hover-disabled="true" />
             </OptionGroup>
         </MenuMobileGroup>
     </MenuMobile>

resources/js/Oasis/Modules/Invoices/components/InvoiceDesktopToolbar.vue

@@ -20,10 +20,10 @@
 				<!--Creating controls-->
 				<ToolbarGroup>
 					<PopoverWrapper>
-                    	<ToolbarButton @click.stop.native="createCreateMenu" source="file-plus" :action="$t('actions.create_folder')" />
+                    	<ToolbarButton @click.stop.native="createCreateMenu" source="plus" :action="$t('actions.create_folder')" />
 						<PopoverItem name="desktop-create-invoices">
 							<OptionGroup>
-								<Option title="Create Invoice" icon="file-text" />
+								<Option title="Create Invoice" icon="file-plus" />
 								<Option title="Create Advance Invoice" icon="clock" />
 							</OptionGroup>
 							<OptionGroup>
@@ -94,9 +94,7 @@
 				'clipboard',
 			]),
 			directoryName() {
-				return this.currentFolder
+				return this.currentFolder ? this.currentFolder.name : 'Invoices'
-					? this.currentFolder.name
-					: this.homeDirectory.name
 			},
 			canActiveInView() {
 				let locations = [
@@ -235,11 +233,8 @@
 }
 
 @media (prefers-color-scheme: dark) {
-	.toolbar .directory-name {
-		color: $dark_mode_text_primary;
-	}
 
-	.toolbar-go-back {
+	.location {
 		.location-title {
 			color: $dark_mode_text_primary;
 		}

resources/js/Oasis/Modules/Invoices/components/InvoiceInfoSidebar.vue

@@ -8,51 +8,88 @@
 			icon="eye-off"
 		/>
 
-		<!--Multiple item selection-->
+		<div v-if="isClient">
-        <div v-if="! isSingleFile && !isEmpty" class="info-headline">
-			<TitlePreview
-				icon="check-square"
-				:title="$t('file_detail.selected_multiple')"
-				:subtitle="this.clipboard.length + ' ' + $tc('file_detail.items', this.clipboard.length)"
-			/>
-        </div>
 
-		<!--Single file preview-->
+			<!--Single file preview-->
-        <div v-if="isSingleFile && !isEmpty" class="info-headline">
+			<div v-if="isSingleFile && !isEmpty" class="info-headline">
-            <FilePreviewDetail />
+				<TitlePreview
+					icon="user"
+					:title="singleFile.name"
+					subtitle="Client"
+				/>
+			</div>
 
-			<TitlePreview
+			<!--File info-->
-				icon="file-text"
+			<ListInfo v-if="isSingleFile && !isEmpty">
-				:title="singleFile.clientName"
-				:subtitle="'Invoice - ' + singleFile.invoiceNumber"
-			/>
-        </div>
 
-		<!--File info-->
+				<ListInfoItem
-        <ListInfo v-if="isSingleFile && !isEmpty">
+					title="Email"
+					:content="singleFile.email"
+				/>
 
-            <ListInfoItem
+				<ListInfoItem
-				title="Invoice Number"
+					title="Total Net"
-				:content="singleFile.invoiceNumber"
+					:content="singleFile.totalNet"
-			/>
+				/>
 
-            <ListInfoItem
+				<ListInfoItem
-				title="Total"
+					title="Total Invoices"
-				:content="singleFile.total"
+					:content="singleFile.totalInvoices + ' Pcs.'"
-			/>
+				/>
 
-            <ListInfoItem
+				<!--Created At-->
-				title="Client"
+				<ListInfoItem
-				:content="singleFile.clientName"
+					:title="$t('file_detail.created_at')"
-			/>
+					:content="singleFile.created_at"
+				/>
+			</ListInfo>
+		</div>
 
-			<!--Created At-->
+		<div v-if="isInvoice">
-            <ListInfoItem
-				:title="$t('file_detail.created_at')"
-				:content="singleFile.created_at"
-			/>
 
-        </ListInfo>
+			<!--Multiple item selection-->
+			<div v-if="! isSingleFile && !isEmpty" class="info-headline">
+				<TitlePreview
+					icon="check-square"
+					:title="$t('file_detail.selected_multiple')"
+					:subtitle="this.clipboard.length + ' ' + $tc('file_detail.items', this.clipboard.length)"
+				/>
+			</div>
+
+			<!--Single file preview-->
+			<div v-if="isSingleFile && !isEmpty" class="info-headline">
+				<TitlePreview
+					icon="file-text"
+					:title="singleFile.clientName"
+					:subtitle="'Invoice - ' + singleFile.invoiceNumber"
+				/>
+			</div>
+
+			<!--File info-->
+			<ListInfo v-if="isSingleFile && !isEmpty">
+
+				<ListInfoItem
+					title="Invoice Number"
+					:content="singleFile.invoiceNumber"
+				/>
+
+				<ListInfoItem
+					title="Total"
+					:content="singleFile.total"
+				/>
+
+				<ListInfoItem
+					title="Client"
+					:content="singleFile.clientName"
+				/>
+
+				<!--Created At-->
+				<ListInfoItem
+					:title="$t('file_detail.created_at')"
+					:content="singleFile.created_at"
+				/>
+			</ListInfo>
+		</div>
     </div>
 </template>
 
@@ -87,6 +124,12 @@
 				'permissionOptions',
 				'clipboard',
 			]),
+			isInvoice() {
+				return this.clipboard[0] && this.clipboard[0].type === 'invoice'
+			},
+			isClient() {
+				return this.clipboard[0] && this.clipboard[0].type === 'client'
+			},
 			isEmpty() {
 				return this.clipboard.length === 0
 			},

resources/js/Oasis/Modules/Invoices/components/InvoiceItem.vue

@@ -20,7 +20,7 @@
 
                 <div class="item-info">
                     <span class="item-size">
-						{{ item.created_at }}, {{ item.invoiceNumber }}
+						{{ item.created_at }}, n. {{ item.invoiceNumber }}
 					</span>
                 </div>
             </div>

resources/js/components/FilesView/DesktopToolbar.vue

@@ -315,11 +315,8 @@
 }
 
 @media (prefers-color-scheme: dark) {
-	.toolbar .directory-name {
-		color: $dark_mode_text_primary;
-	}
 
-	.toolbar-go-back {
+	.location {
 		.location-title {
 			color: $dark_mode_text_primary;
 		}

resources/js/components/FilesView/TitlePreview.vue

@@ -7,6 +7,7 @@
 			<folder-icon v-if="icon === 'folder'" class="icon text-theme" size="21" />
 			<file-icon v-if="icon === 'file'" class="icon text-theme" size="21" />
 			<file-text-icon v-if="icon === 'file-text'" class="icon text-theme" size="21" />
+			<user-icon v-if="icon === 'user'" class="icon text-theme" size="21" />
         </div>
         <div class="text">
             <span class="title">{{ title }}</span>
@@ -23,6 +24,7 @@ import {
 	ImageIcon,
 	VideoIcon,
 	FileIcon,
+	UserIcon,
 } from "vue-feather-icons"
 
 export default {
@@ -39,7 +41,8 @@ export default {
 		ImageIcon,
 		VideoIcon,
 		FileIcon,
-    },
+		UserIcon,
+	},
 }
 </script>
 

resources/js/components/FilesView/ToolbarButton.vue

@@ -1,5 +1,6 @@
 <template>
   <button class="button hover-text-theme hover-svg-stroke-theme" :title="action">
+    <plus-icon v-if="source === 'plus'" size="19" class="hover-text-theme" />
     <file-plus-icon v-if="source === 'file-plus'" size="19" class="hover-text-theme" />
     <send-icon v-if="source === 'send'" size="19" class="hover-text-theme" />
     <corner-down-right-icon v-if="source === 'move'" size="19" class="hover-text-theme" />
@@ -23,6 +24,7 @@
 <script>
     import SortingIcon from '@/components/FilesView/Icons/SortingIcon'
     import {
+		PlusIcon,
     	SendIcon,
     	FilePlusIcon,
         CornerDownRightIcon,
@@ -48,6 +50,7 @@
             'action'
         ],
         components: {
+        	PlusIcon,
 			SendIcon,
 			FilePlusIcon,
             SortingIcon,

resources/js/router.js

@@ -86,7 +86,7 @@ const routesOasis = [
                 name: 'InvoicesList',
                 path: '/invoices/all',
                 component: () =>
-                    import(/* webpackChunkName: "chunks/oasis/invoices/list" */ './Oasis/Modules/Invoices/InvoicesList'),
+                    import(/* webpackChunkName: "chunks/oasis/invoices/list" */ './Oasis/Modules/Invoices/List'),
                 meta: {
                     requiresAuth: true,
                     title: 'Invoices'

resources/js/store/modules/oasisInvoices

@@ -57,7 +57,7 @@ const actions = {
 		})
 
 		axios
-			.get('/api/oasis/invoices/clients')
+			.get('/api/oasis/clients')
 			.then(response => {
 				commit('LOADING_STATE', {loading: false, data: response.data})
 			})

tests/Feature/Oasis/OasisClientTest.php

@@ -42,8 +42,7 @@ class OasisClientTest extends TestCase
 
         $this->getJson('/api/oasis/clients')
             ->assertJsonFragment([
-                'id'      => $client->id,
+                'id' => $client->id,
-                'user_id' => $user->id,
             ])->assertStatus(200);
     }
 }