Create client frontend

resources/js/Oasis/Invoices/BillingProfile.vue

@@ -0,0 +1,267 @@
+<template>
+	<div id="single-page">
+		<MobileHeader :title="$router.currentRoute.meta.title" />
+		<PageHeader :title="$router.currentRoute.meta.title" />
+
+		<div id="page-content" class="medium-width">
+			<div class="content-page">
+				<PageTab :is-loading="! profile">
+					 <PageTabGroup>
+						<div class="form block-form">
+							<FormLabel>Company & Logo</FormLabel>
+							<InfoBox>
+								<p>Here you can set your <b class="text-theme">billing profile</b> which will be paste to your every newly generated invoice.</p>
+							</InfoBox>
+
+							<div class="block-wrapper">
+								<label>Logo (optional):</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="logo" v-slot="{ errors }">
+									<ImageInput @input="$updateImage('/oasis/invoices/profile', 'logo', profile.logo)" :image="$getImage(profile.logo)" v-model="profile.logo" :error="errors[0]" />
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>Company name:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="company" rules="required" v-slot="{ errors }">
+									<input @input="$updateText('/oasis/invoices/profile', 'company', profile.company)" v-model="profile.company" placeholder="" type="text"
+										   :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>Registration Notes (optional):</label>
+								<div class="input-wrapper">
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="registration_notes" rules="required" v-slot="{ errors }">
+                        			<textarea
+										rows="2"
+										@input="$updateText('/oasis/invoices/profile', 'registration_notes', profile.registration_notes)"
+										v-model="profile.registration_notes"
+										placeholder=""
+										:class="{'is-error': errors[0]}"
+										class="focus-border-theme"
+									/>
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+								</div>
+							</div>
+
+						</div>
+					</PageTabGroup>
+					 <PageTabGroup>
+						<div class="form block-form">
+							<FormLabel>Company Details</FormLabel>
+
+							<div class="block-wrapper">
+								<label>ICO:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="ico" rules="required" v-slot="{ errors }">
+									<input @input="$updateText('/oasis/invoices/profile', 'ico', profile.ico)" v-model="profile.ico" placeholder="" type="text"
+										   :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>DIC:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="dic" rules="required" v-slot="{ errors }">
+									<input @input="$updateText('/oasis/invoices/profile', 'dic', profile.dic)" v-model="profile.dic" placeholder="" type="text"
+										   :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>IC DPH (optional):</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="ic_dph" rules="required" v-slot="{ errors }">
+									<input @input="$updateText('/oasis/invoices/profile', 'ic_dph', profile.ic_dph)" v-model="profile.ic_dph" placeholder="" type="text"
+										   :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+						</div>
+					 </PageTabGroup>
+					 <PageTabGroup>
+						<div class="form block-form">
+							<FormLabel>Company Address</FormLabel>
+
+							<div class="block-wrapper">
+								<label>Address:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="address" rules="required" v-slot="{ errors }">
+									<input @input="$updateText('/oasis/invoices/profile', 'address', profile.address)" v-model="profile.address" placeholder="" type="text"
+										   :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>City:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="city" rules="required" v-slot="{ errors }">
+									<input @input="$updateText('/oasis/invoices/profile', 'city', profile.city)" v-model="profile.city" placeholder="" type="text"
+										   :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>Postal Code:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="postal_code" rules="required" v-slot="{ errors }">
+									<input @input="$updateText('/oasis/invoices/profile', 'postal_code', profile.postal_code)" v-model="profile.postal_code" placeholder="" type="text"
+										   :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>Country:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="country" rules="required" v-slot="{ errors }">
+									<SelectInput @input="$updateText('/oasis/invoices/profile', 'country', profile.country)" v-model="profile.country" :default="profile.country" :options="countries" placeholder="" :isError="errors[0]"/>
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+						</div>
+					 </PageTabGroup>
+					 <PageTabGroup>
+						<div class="form block-form">
+							<FormLabel>Bank Info</FormLabel>
+
+							<div class="block-wrapper">
+								<label>Bank Name:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="bank" rules="required" v-slot="{ errors }">
+									<input @input="$updateText('/oasis/invoices/profile', 'bank', profile.bank)" v-model="profile.bank" placeholder="" type="text"
+										   :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>Iban:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="iban" rules="required" v-slot="{ errors }">
+									<input @input="$updateText('/oasis/invoices/profile', 'iban', profile.iban)" v-model="profile.iban" placeholder="" type="text"
+										   :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>Swift code:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="swift" rules="required" v-slot="{ errors }">
+									<input @input="$updateText('/oasis/invoices/profile', 'swift', profile.swift)" v-model="profile.swift" placeholder="" type="text"
+										   :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+						</div>
+					 </PageTabGroup>
+					 <PageTabGroup>
+						<div class="form block-form">
+							<FormLabel>Author</FormLabel>
+
+							<div class="block-wrapper">
+								<label>Phone (optional):</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="phone" rules="required" v-slot="{ errors }">
+									<input @input="$updateText('/oasis/invoices/profile', 'phone', profile.phone)" v-model="profile.phone" placeholder="" type="text"
+										   :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>Email (optional):</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="email" rules="required" v-slot="{ errors }">
+									<input @input="$updateText('/oasis/invoices/profile', 'email', profile.email)" v-model="profile.email" placeholder="" type="email"
+										   :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>Author name:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="author" rules="required" v-slot="{ errors }">
+									<input @input="$updateText('/oasis/invoices/profile', 'author', profile.author)" v-model="profile.author" placeholder="" type="text"
+										   :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>Stamp:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="stamp" v-slot="{ errors }">
+									<ImageInput @input="$updateImage('/oasis/invoices/profile', 'stamp', profile.stamp)" :image="$getImage(profile.stamp)" v-model="profile.stamp" :error="errors[0]" />
+								</ValidationProvider>
+							</div>
+						</div>
+					 </PageTabGroup>
+				</PageTab>
+			</div>
+		</div>
+	</div>
+
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+	import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+	import SelectInput from '@/components/Others/Forms/SelectInput'
+	import ImageInput from '@/components/Others/Forms/ImageInput'
+	import FormLabel from '@/components/Others/Forms/FormLabel'
+	import MobileHeader from '@/components/Mobile/MobileHeader'
+	import ButtonBase from '@/components/FilesView/ButtonBase'
+	import PageTab from '@/components/Others/Layout/PageTab'
+	import PageHeader from '@/components/Others/PageHeader'
+	import ThemeLabel from '@/components/Others/ThemeLabel'
+	import InfoBox from '@/components/Others/Forms/InfoBox'
+	import {required} from 'vee-validate/dist/rules'
+	import {mapGetters} from 'vuex'
+
+	export default {
+		name: 'BillingProfile',
+		props: [
+			'user'
+		],
+		components: {
+			ValidationProvider,
+			ValidationObserver,
+			PageTabGroup,
+			MobileHeader,
+			SelectInput,
+			ImageInput,
+			PageHeader,
+			ButtonBase,
+			ThemeLabel,
+			FormLabel,
+			required,
+			InfoBox,
+			PageTab,
+		},
+		computed: {
+			...mapGetters([
+				'countries',
+				'config',
+			]),
+		},
+		data() {
+			return {
+				isLoading: false,
+				profile: undefined,
+			}
+		},
+		methods: {},
+		created() {
+			axios.get('/api/oasis/invoices/profile')
+				.then(response => {
+					this.profile = response.data.data.attributes
+				})
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vuefilemanager/_variables';
+	@import '@assets/vuefilemanager/_mixins';
+	@import '@assets/vuefilemanager/_forms';
+
+	.block-form {
+		max-width: 100%;
+	}
+
+</style>

resources/js/Oasis/Invoices/CreateClient.vue

@@ -0,0 +1,273 @@
+<template>
+	<div id="single-page">
+		<MobileHeader :title="$router.currentRoute.meta.title" />
+		<PageHeader :title="$router.currentRoute.meta.title" />
+
+		<div id="page-content" class="medium-width">
+			<div class="content-page">
+				<ValidationObserver @submit.prevent="createClient" ref="createClient" v-slot="{ invalid }" tag="form" class="form block-form">
+					<PageTab>
+						 <PageTabGroup>
+							<FormLabel>Company & Logo</FormLabel>
+
+							<div class="block-wrapper">
+								<label>Logo (optional):</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="avatar" v-slot="{ errors }">
+									<ImageInput v-model="client.avatar" :error="errors[0]" />
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>Company name:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="name" rules="required" v-slot="{ errors }">
+									<input v-model="client.name" placeholder="" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+						</PageTabGroup>
+						 <PageTabGroup>
+							<FormLabel>Company Details</FormLabel>
+
+							<div class="block-wrapper">
+								<label>ICO:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="ico" rules="required" v-slot="{ errors }">
+									<input v-model="client.ico" placeholder="" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>DIC (optional):</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="dic" v-slot="{ errors }">
+									<input v-model="client.dic" placeholder="" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>IC DPH (optional):</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="ic_dph" v-slot="{ errors }">
+									<input v-model="client.ic_dph" placeholder="" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+						 </PageTabGroup>
+						 <PageTabGroup>
+							<FormLabel>Company Address</FormLabel>
+
+							<div class="block-wrapper">
+								<label>Address:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="address" rules="required" v-slot="{ errors }">
+									<input v-model="client.address" placeholder="" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>City:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="city" rules="required" v-slot="{ errors }">
+									<input v-model="client.city" placeholder="" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>Postal Code:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="postal_code" rules="required" v-slot="{ errors }">
+									<input v-model="client.postal_code" placeholder="" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>Country:</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="country" rules="required" v-slot="{ errors }">
+									<SelectInput v-model="client.country" :default="client.country" :options="countries" placeholder="" :isError="errors[0]" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+						 </PageTabGroup>
+						 <PageTabGroup>
+							<FormLabel>Contact Informations</FormLabel>
+
+							<div class="block-wrapper">
+								<label>Phone (optional):</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="phone_number" v-slot="{ errors }">
+									<input v-model="client.phone_number" placeholder="" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<div class="block-wrapper">
+								<label>Email (optional):</label>
+								<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="email" v-slot="{ errors }">
+									<input v-model="client.email" placeholder="" type="email" :class="{'is-error': errors[0]}" class="focus-border-theme" />
+									<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+								</ValidationProvider>
+							</div>
+
+							<InfoBox v-if="isError" type="error">
+								<p>We found some issues in your form. Please check it out and submit again</p>
+							</InfoBox>
+
+							 <div class="block-wrapper">
+								 <ButtonBase :disabled="isLoading" :loading="isLoading" button-style="theme" type="submit">
+									Create Client
+								</ButtonBase>
+							 </div>
+						 </PageTabGroup>
+					</PageTab>
+				</ValidationObserver>
+			</div>
+		</div>
+	</div>
+
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+	import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+	import SelectInput from '@/components/Others/Forms/SelectInput'
+	import ImageInput from '@/components/Others/Forms/ImageInput'
+	import FormLabel from '@/components/Others/Forms/FormLabel'
+	import MobileHeader from '@/components/Mobile/MobileHeader'
+	import ButtonBase from '@/components/FilesView/ButtonBase'
+	import PageTab from '@/components/Others/Layout/PageTab'
+	import PageHeader from '@/components/Others/PageHeader'
+	import ThemeLabel from '@/components/Others/ThemeLabel'
+	import InfoBox from '@/components/Others/Forms/InfoBox'
+	import {required} from 'vee-validate/dist/rules'
+	import {mapGetters} from 'vuex'
+	import {events} from "@/bus"
+	import axios from "axios"
+
+	export default {
+		name: 'CreateClient',
+		components: {
+			ValidationProvider,
+			ValidationObserver,
+			PageTabGroup,
+			MobileHeader,
+			SelectInput,
+			ImageInput,
+			PageHeader,
+			ButtonBase,
+			ThemeLabel,
+			FormLabel,
+			required,
+			InfoBox,
+			PageTab,
+		},
+		computed: {
+			...mapGetters([
+				'countries',
+				'config',
+			]),
+		},
+		data() {
+			return {
+				isLoading: false,
+				isError: false,
+				_client: {
+					avatar: undefined,
+					name: undefined,
+					email: undefined,
+					phone_number: undefined,
+					address: undefined,
+					city: undefined,
+					postal_code: undefined,
+					country: undefined,
+					ico: undefined,
+					dic: undefined,
+					ic_dph: undefined,
+				},
+				client: {
+					avatar: undefined,
+					name: 'MakingCG s.r.o.',
+					email: 'info@makingcg.com',
+					phone_number: '+421950123456',
+					address: 'Karpatske namestie',
+					city: 'Bratislava',
+					postal_code: '04001',
+					country: 'SK',
+					ico: '4153514345',
+					dic: '5346542865',
+					ic_dph: 'SK200543253553',
+				},
+			}
+		},
+		methods: {
+			async createClient() {
+
+				const isValid = await this.$refs.createClient.validate();
+
+				if (!isValid) {
+					this.isError = true
+					return
+				};
+
+				// Start loading
+				this.isLoading = true
+
+				// Create form
+				let formData = new FormData()
+
+				// Append data to form
+				Object.keys(this.client).forEach(key => {
+					formData.append(key, this.client[key])
+				})
+
+				// Send request to get user token
+				axios
+					.post('/api/oasis/clients', formData, {
+						headers: {
+							'Content-Type': 'multipart/form-data',
+						}
+					})
+					.then(response => {
+
+						events.$emit('toaster', {
+							type: 'success',
+							message: 'Client was created successfully',
+						})
+
+						// Go to User page
+						//this.$router.push({name: 'UserDetail', params: {id: response.data.data.id}})
+					})
+					.catch(error => {
+						this.isError = true
+
+						if (error.response.status === 422) {
+
+							Object.keys(error.response.data.errors).forEach(key => {
+
+								let obj = {}; obj[key] = error.response.data.errors[key]
+
+								this.$refs.createClient.setErrors(obj);
+							})
+
+						} else {
+							events.$emit('alert:open', {
+								title: this.$t('popup_error.title'),
+								message: this.$t('popup_error.message'),
+							})
+						}
+					})
+					.finally(() => {
+						this.isLoading = false
+					})
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vuefilemanager/_variables';
+	@import '@assets/vuefilemanager/_mixins';
+	@import '@assets/vuefilemanager/_forms';
+
+	.block-form {
+		max-width: 100%;
+	}
+
+</style>

resources/js/Oasis/Invoices/Invoice.vue

@@ -0,0 +1,143 @@
+<template>
+    <div id="application-wrapper">
+
+		<!--File preview window-->
+        <FilePreview />
+
+		<InvoiceMobileMenu />
+		<ClientMobileMenu />
+		<InvoiceCreateMenu />
+		<InvoiceFilterMobile />
+		<InvoiceSortingMobile />
+
+		<!--Navigations-->
+        <MobileNavigation />
+        <SidebarNavigation />
+
+		<div id="viewport">
+
+			<!--Sidebar navigation-->
+			<ContentSidebar>
+				<ContentGroup title="Invoices" class="navigator menu-list-wrapper vertical">
+					<a @click="goTo('regular-invoice')" :class="{'is-active': $isThisLocation(['regular-invoice']) && $route.name === 'InvoicesList'}" class="menu-list-item link">
+						<div class="icon text-theme">
+							<file-text-icon size="17" />
+						</div>
+						<div class="label text-theme">
+							Invoices
+						</div>
+					</a>
+					<a @click="goTo('advance-invoice')" :class="{'is-active': $isThisLocation(['advance-invoice']) && $route.name === 'InvoicesList'}" class="menu-list-item link">
+						<div class="icon text-theme">
+							<clock-icon size="17" />
+						</div>
+						<div class="label text-theme">
+							Advance Invoices
+						</div>
+					</a>
+				</ContentGroup>
+				<ContentGroup title="Others" class="navigator menu-list-wrapper vertical">
+					<a @click="goTo('clients')" :class="{'is-active': $isThisLocation(['clients']) && $route.name === 'InvoicesList'}" class="menu-list-item link">
+						<div class="icon text-theme">
+							<users-icon size="17" />
+						</div>
+						<div class="label text-theme">
+							Clients
+						</div>
+					</a>
+					<router-link :to="{name: 'InvoicesProfile'}" class="menu-list-item link">
+						<div class="icon text-theme">
+							<edit2-icon size="17" />
+						</div>
+						<div class="label text-theme">
+							My Billing Profile
+						</div>
+					</router-link>
+				</ContentGroup>
+			</ContentSidebar>
+
+			<router-view :class="{'is-scaled-down': isScaledDown}" />
+		</div>
+    </div>
+</template>
+
+<script>
+    import InvoiceSortingMobile from '@/Oasis/Invoices/components/InvoiceSortingMobile'
+	import InvoiceFilterMobile from '@/Oasis/Invoices/components/InvoiceFilterMobile'
+	import InvoiceMobileMenu from '@/Oasis/Invoices/components/InvoiceMobileMenu'
+	import ClientMobileMenu from '@/Oasis/Invoices/components/ClientMobileMenu'
+	import InvoiceCreateMenu from '@/Oasis/Invoices/components/InvoiceCreateMenu'
+
+	import {UsersIcon, FileTextIcon, ClockIcon, Edit2Icon} from 'vue-feather-icons'
+	import SidebarNavigation from '@/components/Sidebar/SidebarNavigation'
+	import MobileNavigation from '@/components/Others/MobileNavigation'
+	import ContentSidebar from '@/components/Sidebar/ContentSidebar'
+	import FilePreview from '@/components/FilesView/FilePreview'
+	import ContentGroup from '@/components/Sidebar/ContentGroup'
+	import {mapGetters} from 'vuex'
+	import {events} from '@/bus'
+
+	export default {
+		name: 'Settings',
+		computed: {
+			...mapGetters([
+				'config'
+			]),
+		},
+		components: {
+			InvoiceSortingMobile,
+			InvoiceFilterMobile,
+			InvoiceCreateMenu,
+			InvoiceMobileMenu,
+			SidebarNavigation,
+			ClientMobileMenu,
+			MobileNavigation,
+			ContentSidebar,
+			FileTextIcon,
+			ContentGroup,
+			FilePreview,
+			Edit2Icon,
+			UsersIcon,
+			ClockIcon,
+		},
+		data() {
+			return {
+				isScaledDown: false,
+			}
+		},
+		methods: {
+			goTo(location) {
+				let routes = {
+					'regular-invoice': 'getRegularInvoices',
+					'advance-invoice': 'getAdvanceInvoices',
+					'clients': 'getClients',
+				}
+
+				if (this.$route.name !== 'InvoicesList') {
+					this.$router.push({name: 'InvoicesList'})
+				}
+
+				this.$store.dispatch(routes[location])
+			},
+		},
+		mounted() {
+			events.$on('mobile-menu:show', () => this.isScaledDown = true)
+
+			events.$on('fileItem:deselect', () => this.isScaledDown = false)
+			events.$on('mobile-menu:hide', () => this.isScaledDown = false)
+
+			this.$store.dispatch('getRegularInvoices')
+		}
+	}
+</script>
+
+<style lang="scss">
+    @import '@assets/vuefilemanager/_mixins';
+
+	@media only screen and (max-width: 690px) {
+
+		.is-scaled-down {
+			@include transform(scale(0.95));
+		}
+	}
+</style>

resources/js/Oasis/Invoices/InvoicesView.vue

@@ -0,0 +1,52 @@
+<template>
+    <div @contextmenu.prevent.capture="contextMenu($event, undefined)" id="files-view">
+		<InvoiceDesktopToolbar />
+		<InvoiceContextMenu />
+        <InvoiceBrowser />
+    </div>
+</template>
+
+<script>
+    import InvoiceDesktopToolbar from '@/Oasis/Invoices/components/InvoiceDesktopToolbar'
+	import InvoiceBrowser from '@/Oasis/Invoices/components/InvoiceBrowser'
+	import InvoiceContextMenu from '@/Oasis/Invoices/components/InvoiceContextMenu'
+	import {events} from '@/bus'
+
+	export default {
+		name: 'ContentInvoiceView',
+		components: {
+			InvoiceDesktopToolbar,
+			InvoiceContextMenu,
+			InvoiceBrowser,
+		},
+		methods: {
+			contextMenu(event, item) {
+				events.$emit('contextMenu:show', event, item)
+			},
+		},
+	}
+</script>
+
+<style lang="scss">
+
+    #files-view {
+		font-family: 'Nunito', sans-serif;
+		font-size: 16px;
+		width: 100%;
+		height: 100%;
+		position: relative;
+		min-width: 320px;
+		overflow-x: hidden;
+		padding-left: 15px;
+		padding-right: 15px;
+		overflow-y: hidden;
+	}
+
+	@media only screen and (max-width: 690px) {
+		#files-view {
+			padding-left: 0;
+			padding-right: 0;
+		}
+	}
+
+</style>

resources/js/Oasis/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', 'client-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/Invoices/components/ClientMobileMenu.vue

@@ -0,0 +1,65 @@
+<template>
+    <MenuMobile name="client-menu">
+		<TitlePreview
+			v-if="clipboard[0]"
+			class="headline"
+			:avatar="clipboard[0].avatar"
+			:title="clipboard[0].name"
+			:subtitle="clipboard[0].email"
+		/>
+
+        <MenuMobileGroup>
+            <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="$t('context_menu.detail')" icon="detail" />
+            </OptionGroup>
+        </MenuMobileGroup>
+    </MenuMobile>
+</template>
+
+<script>
+import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
+import TitlePreview from '@/components/FilesView/TitlePreview'
+import ThumbnailItem from '@/components/Others/ThumbnailItem'
+import OptionGroup from '@/components/FilesView/OptionGroup'
+import MenuMobile from '@/components/Mobile/MenuMobile'
+import Option from '@/components/FilesView/Option'
+import {mapGetters} from 'vuex'
+
+export default {
+    name: 'FileMenuMobile',
+    components: {
+        MenuMobileGroup,
+        ThumbnailItem,
+		TitlePreview,
+        OptionGroup,
+        MenuMobile,
+        Option,
+    },
+    computed: {
+        ...mapGetters([
+            'clipboard',
+            'user',
+        ]),
+    },
+    data() {
+        return {
+            isVisible: false,
+        }
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+	.headline {
+		padding: 20px 20px 10px;
+		margin-bottom: 0;
+	}
+</style>

resources/js/Oasis/Invoices/components/InvoiceActionsMobile.vue

@@ -0,0 +1,131 @@
+<template>
+    <div id="mobile-actions-wrapper">
+
+        <!--Base location-->
+        <div class="mobile-actions">
+            <MobileActionButton @click.native="showLocations" icon="filter">
+                {{ directoryName }}
+            </MobileActionButton>
+            <MobileActionButton @click.native="createButton" icon="file-plus">
+                Create
+            </MobileActionButton>
+            <MobileActionButton @click.native="showViewOptions" icon="th-list">
+                {{ $t('preview_sorting.preview_sorting_button') }}
+            </MobileActionButton>
+        </div>
+    </div>
+</template>
+
+<script>
+    import MobileActionButtonUpload from '@/components/FilesView/MobileActionButtonUpload'
+    import MobileActionButton from '@/components/FilesView/MobileActionButton'
+    import UploadProgress from '@/components/FilesView/UploadProgress'
+    import {mapGetters} from 'vuex'
+    import {events} from '@/bus'
+
+    export default {
+        name: 'FileActionsMobile',
+        components: {
+            MobileActionButtonUpload,
+            MobileActionButton,
+            UploadProgress,
+        },
+        computed: {
+            ...mapGetters([
+                'currentFolder'
+            ]),
+			directoryName() {
+				return this.currentFolder
+					? this.currentFolder.name
+					: 'Invoices'
+			},
+        },
+        data() {
+            return {
+                isSelectMode: false,
+            }
+        },
+        methods: {
+            showLocations() {
+                events.$emit('mobile-menu:show', 'invoice-filter')
+            },
+			createButton() {
+                events.$emit('mobile-menu:show', 'invoice-create')
+            },
+			showViewOptions() {
+				events.$emit('mobile-menu:show', 'invoice-sorting')
+			},
+            selectAll() {
+                this.$store.commit('ADD_ALL_ITEMS_TO_CLIPBOARD')
+            },
+            deselectAll() {
+                this.$store.commit('CLIPBOARD_CLEAR')
+            },
+            enableMultiSelectMode() {
+                this.isSelectMode = true
+
+                events.$emit('mobileSelecting:start')
+            },
+            disableMultiSelectMode() {
+                this.isSelectMode = false
+
+                events.$emit('mobileSelecting:stop')
+            },
+        },
+        mounted() {
+            events.$on('mobileSelecting:stop', () => this.isSelectMode = false)
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vuefilemanager/_variables';
+    @import '@assets/vuefilemanager/_mixins';
+
+    .button-enter-active,
+    .button-leave-active {
+        transition: all 250ms;
+    }
+
+    .button-enter {
+        opacity: 0;
+        transform: translateY(-50%);
+    }
+
+    .button-leave-to {
+        opacity: 0;
+        transform: translateY(50%);
+    }
+
+    .button-leave-active {
+        position: absolute;
+    }
+
+    #mobile-actions-wrapper {
+        display: none;
+        background: white;
+        position: sticky;
+        top: 35px;
+        z-index: 3;
+    }
+
+    .mobile-actions {
+        white-space: nowrap;
+        overflow-x: auto;
+        margin: 0 -15px;
+        padding: 10px 0 10px 15px;
+    }
+
+    @media only screen and (max-width: 960px) {
+
+        #mobile-actions-wrapper {
+            display: block;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        #mobile-actions-wrapper {
+            background: $dark_mode_background;
+        }
+    }
+</style>

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

@@ -0,0 +1,341 @@
+<template>
+    <div
+		class="file-content"
+		id="file-content-id"
+		tabindex="-1"
+	>
+        <div
+			:class="{'is-visible': isVisibleSidebar, 'mobile-multi-select': isMultiSelect}"
+			@click.self="filesContainerClick"
+			class="files-container"
+			ref="fileContainer"
+		>
+            <MobileToolbar />
+
+            <SearchBar v-model="query" @reset-query="query = ''" class="mobile-search" :placeholder="$t('inputs.placeholder_search_files')" />
+
+			<!--Mobile Actions-->
+            <InvoiceActionsMobile />
+
+			<!--Item previews list-->
+            <div class="file-list-wrapper">
+                <transition-group
+					name="file"
+					tag="section"
+					class="file-list"
+				>
+                    <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"
+					/>
+                </transition-group>
+            </div>
+
+			<!--Show empty page if folder is empty-->
+            <EmptyFilePage v-if="! isSearching" />
+
+			<!--Show empty page if no search results-->
+            <EmptyMessage
+				v-if="isSearching && isEmpty"
+				:message="$t('messages.nothing_was_found')"
+				icon="eye-slash"
+			/>
+        </div>
+
+		<!--File Info Panel-->
+        <div :class="{'is-visible': isVisibleSidebar }" class="file-info-container">
+            <InvoiceInfoSidebar />
+        </div>
+    </div>
+</template>
+
+<script>
+    import InvoiceActionsMobile from '@/Oasis/Invoices/components/InvoiceActionsMobile'
+	import InvoiceInfoSidebar from '@/Oasis/Invoices/components/InvoiceInfoSidebar'
+	import InvoiceItem from '@/Oasis/Invoices/components/InvoiceItem'
+	import ClientItem from '@/Oasis/Invoices/components/ClientItem'
+	import EmptyFilePage from '@/components/FilesView/EmptyFilePage'
+	import MobileToolbar from '@/components/FilesView/MobileToolbar'
+	import EmptyMessage from '@/components/FilesView/EmptyMessage'
+	import SearchBar from '@/components/FilesView/SearchBar'
+	import {mapGetters} from 'vuex'
+	import {events} from '@/bus'
+
+	export default {
+		name: 'FilesContainer',
+		components: {
+			InvoiceActionsMobile,
+			InvoiceInfoSidebar,
+			EmptyFilePage,
+			MobileToolbar,
+			EmptyMessage,
+			InvoiceItem,
+			ClientItem,
+			SearchBar,
+		},
+		computed: {
+			...mapGetters([
+				'filesInQueueTotal',
+				'isVisibleSidebar',
+				'FilePreviewType',
+				'currentFolder',
+				'isSearching',
+				'clipboard',
+				'isLoading',
+				'entries',
+			]),
+			isEmpty() {
+				return this.entries.length == 0
+			},
+			draggedItems() {
+				//Set opacity for dragged items
+
+				if (!this.clipboard.includes(this.draggingId)) {
+					return [this.draggingId]
+				}
+
+				if (this.clipboard.includes(this.draggingId)) {
+					return this.clipboard
+				}
+			}
+		},
+		watch: {
+			query(val) {
+				this.$searchInvoices(val)
+			}
+		},
+		data() {
+			return {
+				draggingId: undefined,
+				isDragging: false,
+				isMultiSelect: false,
+				query: '',
+			}
+		},
+		methods: {
+			deleteItems() {
+				if (this.clipboard.length > 0 && this.$checkPermission('master') || this.$checkPermission('editor')) {
+					this.$store.dispatch('deleteItem')
+				}
+			},
+			contextMenu(event, item) {
+				events.$emit('contextMenu:show', event, item)
+			},
+			filesContainerClick() {
+				this.$store.commit('CLIPBOARD_CLEAR')
+			}
+		},
+		created() {
+			events.$on('mobileSelecting:start', () => {
+				this.isMultiSelect = true
+			})
+
+			events.$on('mobileSelecting:stop', () => {
+				this.isMultiSelect = false
+			})
+
+			events.$on('fileItem:deselect', () => {
+				this.$store.commit('CLIPBOARD_CLEAR')
+			})
+
+			this.$store.commit('STORE_CURRENT_FOLDER', {
+				name: 'Invoices',
+				id: undefined,
+				location: 'regular-invoice',
+			})
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vuefilemanager/_variables';
+	@import '@assets/vuefilemanager/_mixins';
+
+	.file-list {
+		.dragged {
+			/deep/ .is-dragenter {
+				border: 2px solid transparent;
+			}
+		}
+	}
+
+	.dragged {
+		opacity: 0.5;
+	}
+
+	#multi-selected {
+		position: fixed;
+		pointer-events: none;
+		z-index: 100;
+
+	}
+
+	.mobile-multi-select {
+		bottom: 50px !important;
+		top: 0px;
+	}
+
+	.button-upload {
+		display: block;
+		text-align: center;
+		margin: 20px 0;
+	}
+
+	.mobile-search {
+		display: none;
+		margin-bottom: 10px;
+		margin-top: 10px;
+	}
+
+	.file-content {
+		display: flex;
+
+		&.is-dragging {
+			@include transform(scale(0.99));
+		}
+	}
+
+	.files-container {
+		overflow-x: hidden;
+		overflow-y: auto;
+		flex: 0 0 100%;
+		@include transition(150ms);
+		position: relative;
+		scroll-behavior: smooth;
+
+		&.is-visible {
+			flex: 0 1 100%;
+		}
+
+		.file-list {
+
+			&.grid {
+				display: grid;
+				grid-template-columns: repeat(auto-fill, 180px);
+				justify-content: space-evenly;
+			}
+		}
+	}
+
+	.file-info-container {
+		flex: 0 0 300px;
+		padding-left: 20px;
+		overflow: auto;
+	}
+
+	// Transition
+	.file-move {
+		transition: transform 0.6s;
+	}
+
+	.file-enter-active {
+		transition: all 300ms ease;
+	}
+
+	.file-leave-active {
+		transition: all 0ms;
+	}
+
+	.file-enter, .file-leave-to /* .list-leave-active below version 2.1.8 */
+	{
+		opacity: 0;
+		transform: translateX(-20px);
+	}
+
+	@media only screen and (min-width: 960px) {
+
+		.file-content {
+			position: absolute;
+			top: 72px;
+			left: 15px;
+			right: 15px;
+			bottom: 0;
+			@include transition;
+			overflow-y: auto;
+			overflow-x: hidden;
+
+			&.is-offset {
+				margin-top: 50px;
+			}
+		}
+	}
+
+	@media only screen and (max-width: 960px) {
+
+		.file-info-container {
+			display: none;
+		}
+
+		.mobile-search {
+			display: block;
+		}
+		.file-content {
+			position: absolute;
+			top: 0px;
+			left: 15px;
+			right: 15px;
+			bottom: 0;
+			@include transition;
+			overflow-y: auto;
+			overflow-x: hidden;
+
+			&.is-offset {
+				margin-top: 50px;
+			}
+		}
+	}
+
+	@media only screen and (max-width: 690px) {
+
+		.files-container {
+			padding-left: 15px;
+			padding-right: 15px;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			position: fixed;
+			overflow-y: auto;
+
+			.file-list {
+
+				&.grid {
+					grid-template-columns: repeat(auto-fill, 120px);
+				}
+			}
+		}
+
+		.file-content {
+			position: absolute;
+			top: 0;
+			left: 0px;
+			right: 0px;
+			bottom: 0;
+			@include transition;
+
+			&.is-offset {
+				margin-top: 50px;
+			}
+		}
+
+		.mobile-search {
+			margin-bottom: 0;
+		}
+
+		.file-info-container {
+			display: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,254 @@
+<template>
+    <div :style="{ top: positionY + 'px', left: positionX + 'px' }" @click="closeAndResetContextMenu" class="contextmenu" v-show="isVisible || showFromPreview" ref="contextmenu" :class="{'filePreviewFixed': showFromPreview}">
+
+        <!--Invoice-->
+        <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" />
+                <Option @click.native="" title="Go to Company" icon="user" />
+                <Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
+            </OptionGroup>
+
+            <OptionGroup>
+                <Option @click.native="showDetail" :title="$t('context_menu.detail')" icon="detail" />
+                <Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
+            </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>
+
+<script>
+import OptionGroup from '@/components/FilesView/OptionGroup'
+import Option from '@/components/FilesView/Option'
+import {mapGetters} from 'vuex'
+import {events} from '@/bus'
+
+export default {
+    name: 'ContextMenu',
+    components: {
+        OptionGroup,
+        Option
+    },
+    computed: {
+        ...mapGetters([
+			'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
+            if (this.clipboard.length > 1 && this.clipboard.includes(this.item))
+                return false
+
+            // If is context Menu open for the non selected item open options for the single item
+            if (this.clipboard.length < 2 || !this.clipboard.includes(this.item))
+                return true
+        },
+    },
+    data() {
+        return {
+            showFromPreview: false,
+            item: undefined,
+            isVisible: false,
+            positionX: 0,
+            positionY: 0
+        }
+    },
+    methods: {
+        downloadItem() {
+            if (this.clipboard.length > 1)
+                this.$store.dispatch('downloadFiles')
+            else {
+                this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
+            }
+        },
+		showDetail() {
+            // Dispatch load file info detail
+            this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
+
+            // Show panel if is not open
+            this.$store.dispatch('fileInfoToggle', true)
+        },
+        deleteItem() {
+
+        },
+        closeAndResetContextMenu() {
+            // Close context menu
+            this.isVisible = false
+
+            // Reset item container
+            this.item = undefined
+        },
+        showFolderActionsMenu() {
+            let container = document.getElementById('folder-actions')
+
+            this.positionX = container.offsetLeft + 16
+            this.positionY = container.offsetTop + 30
+
+            // Show context menu
+            this.isVisible = true
+        },
+        showContextMenu(event) {
+            let parent = document.getElementById('menu-list')
+            let nodesSameClass = parent.getElementsByClassName('menu-option')
+
+            let VerticalOffsetArea = nodesSameClass.length * 50
+            let HorizontalOffsetArea = 190
+
+            let container = document.getElementById('files-view')
+
+            var offset = container.getClientRects()[0]
+
+            let x = event.clientX - offset.left
+            let y = event.clientY - offset.top
+
+            // Set position Y
+            if (container.offsetHeight - y < VerticalOffsetArea) {
+                this.positionY = y - VerticalOffsetArea
+            } else {
+                this.positionY = y
+            }
+
+            // Set position X
+            if (container.offsetWidth - x < HorizontalOffsetArea) {
+                this.positionX = x - HorizontalOffsetArea
+            } else {
+                this.positionX = x
+            }
+
+            // Show context menu
+            this.isVisible = true
+        },
+        showFilePreviewMenu() {
+            let container = document.getElementById('fast-preview-menu')
+            if (container) {
+                this.positionX = container.offsetLeft + 16
+                this.positionY = container.offsetTop + 51
+            }
+        }
+    },
+    created() {
+        events.$on('showContextMenuPreview:show', (item) => {
+            if (!this.showFromPreview) {
+                this.item = item
+                this.showFromPreview = true
+                this.showFilePreviewMenu()
+            } else if (this.showFromPreview) {
+                this.showFromPreview = false
+                this.item = undefined
+            }
+        })
+
+        events.$on('showContextMenuPreview:hide', () => {
+            this.isVisible = false
+            this.showFromPreview = false
+            this.item = undefined
+        })
+
+        events.$on('contextMenu:show', (event, item) => {
+            // Store item
+            this.item = item
+
+            // Show context menu
+            setTimeout(() => this.showContextMenu(event, item), 10)
+        })
+
+        events.$on('unClick', () => this.closeAndResetContextMenu())
+
+        events.$on('folder:actions', (folder) => {
+            // Store item
+            this.item = folder
+
+            if (this.isVisible) this.isVisible = false
+            else this.showFolderActionsMenu()
+        })
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@assets/vuefilemanager/_variables";
+@import "@assets/vuefilemanager/_mixins";
+
+.no-options {
+    /deep/ .text-label {
+        color: $text-muted !important;
+    }
+
+    /deep/ &:hover {
+        background: transparent;
+    }
+
+    /deep/ path,
+    /deep/ line,
+    /deep/ circle {
+        stroke: $text-muted !important;
+    }
+}
+
+.filePreviewFixed {
+    position: fixed !important;
+    display: flex;
+}
+
+.contextmenu {
+    min-width: 250px;
+    position: absolute;
+    z-index: 99;
+    box-shadow: $shadow;
+    background: white;
+    border-radius: 8px;
+    overflow: hidden;
+
+    &.showed {
+        display: block;
+    }
+}
+
+.menu-options {
+    list-style: none;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+    .contextmenu {
+        background: $dark_mode_foreground;
+    }
+    .no-options {
+        /deep/ .text-label {
+            color: $dark_mode_text_secondary !important;
+        }
+
+        /deep/ &:hover {
+            background: transparent;
+        }
+
+        /deep/ path,
+        /deep/ line,
+        /deep/ circle {
+            stroke: $dark_mode_text_secondary !important;
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,64 @@
+<template>
+    <MenuMobile name="invoice-create">
+        <MenuMobileGroup>
+            <OptionGroup>
+                <Option @click.native="showLocation('regular-invoice')" title="Create Invoice" icon="file-plus" is-hover-disabled="true" />
+                <Option @click.native="showLocation('advance-invoice')" title="Create Advance Invoice" icon="clock" is-hover-disabled="true" />
+            </OptionGroup>
+            <OptionGroup>
+                <Option @click.native="showLocation('clients')" title="Create Client" icon="user-plus" is-hover-disabled="true" />
+            </OptionGroup>
+        </MenuMobileGroup>
+    </MenuMobile>
+</template>
+
+<script>
+import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
+import OptionGroup from '@/components/FilesView/OptionGroup'
+import MenuMobile from '@/components/Mobile/MenuMobile'
+import Option from '@/components/FilesView/Option'
+import {mapGetters} from 'vuex'
+
+export default {
+    name: 'InvoiceFilterMobile',
+    components: {
+        MenuMobileGroup,
+        OptionGroup,
+        MenuMobile,
+        Option,
+    },
+    computed: {
+        ...mapGetters([
+            'homeDirectory'
+        ]),
+    },
+    methods: {
+		showLocation(location) {
+
+		},
+        flushBrowseHistory() {
+            this.$store.commit('FLUSH_FOLDER_HISTORY')
+        },
+        goToFiles() {
+            this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
+            this.flushBrowseHistory()
+        },
+        goToLatest() {
+            this.$store.dispatch('getLatest')
+            this.flushBrowseHistory()
+        },
+        goToTrash() {
+            this.$store.dispatch('getTrash')
+            this.flushBrowseHistory()
+        },
+        goToShared() {
+            this.$store.dispatch('getShared', [{back: false, init: false}])
+            this.flushBrowseHistory()
+        },
+        goToParticipantUploads() {
+            this.$store.dispatch('getParticipantUploads')
+            this.flushBrowseHistory()
+        }
+    }
+}
+</script>

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

@@ -0,0 +1,252 @@
+<template>
+    <div id="desktop-toolbar">
+        <div class="toolbar-wrapper">
+
+			<div class="location">
+				<!--<chevron-left-icon :class="{'is-active': browseHistory.length > 1 }" class="icon-back" size="17" />-->
+
+				<span class="location-title">
+					{{ directoryName }}
+				</span>
+			</div>
+
+			<ToolbarWrapper>
+
+				<!--Search bar-->
+				<ToolbarGroup style="margin-left: 0">
+					<SearchBar v-model="query" @reset-query="query = ''" placeholder="Search your invoices..." />
+				</ToolbarGroup>
+
+				<!--Creating controls-->
+				<ToolbarGroup>
+					<PopoverWrapper>
+                    	<ToolbarButton @click.stop.native="createCreateMenu" source="plus" :action="$t('actions.create_folder')" />
+						<PopoverItem name="desktop-create-invoices">
+							<OptionGroup>
+								<Option title="Create Invoice" icon="file-plus" />
+								<Option title="Create Advance Invoice" icon="clock" />
+							</OptionGroup>
+							<OptionGroup>
+								<Option @click.native="createClient" title="Create Client" icon="user-plus" />
+							</OptionGroup>
+						</PopoverItem>
+					</PopoverWrapper>
+				</ToolbarGroup>
+
+				<!--Invoice Controls-->
+				<ToolbarGroup v-if="! $isMobile()">
+                    <ToolbarButton @click.native="shareInvoice" :class="{'is-inactive': canActiveInView }" source="send" :action="$t('actions.share')" />
+                    <ToolbarButton @click.native="shareInvoice" :class="{'is-inactive': canActiveInView }" source="rename" :action="$t('actions.share')" />
+                    <ToolbarButton @click.native="deleteInvoice" :class="{'is-inactive': canActiveInView }" source="trash" :action="$t('actions.delete')" />
+				</ToolbarGroup>
+
+				<!--View Controls-->
+				<ToolbarGroup>
+					<PopoverWrapper>
+						<ToolbarButton @click.stop.native="showSortingMenu" source="preview-sorting" :action="$t('actions.sorting_view')" />
+						<PopoverItem name="desktop-sorting">
+							<OptionGroup>
+								<Option @click.native.stop="sort('created_at')" :title="$t('preview_sorting.sort_date')" icon="calendar" />
+								<Option @click.native.stop="sort('name')" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
+							</OptionGroup>
+						</PopoverItem>
+					</PopoverWrapper>
+                    <ToolbarButton @click.native="$store.dispatch('fileInfoToggle')" :class="{'active': isVisibleSidebar }" :action="$t('actions.info_panel')" source="info" />
+				</ToolbarGroup>
+			</ToolbarWrapper>
+        </div>
+    </div>
+</template>
+
+<script>
+	import FileSortingOptions from '@/components/FilesView/FileSortingOptions'
+	import {ChevronLeftIcon, MoreHorizontalIcon} from 'vue-feather-icons'
+	import PopoverWrapper from '@/components/Desktop/PopoverWrapper'
+	import ToolbarWrapper from '@/components/Desktop/ToolbarWrapper'
+	import ToolbarButton from '@/components/FilesView/ToolbarButton'
+	import ToolbarGroup from '@/components/Desktop/ToolbarGroup'
+	import OptionGroup from '@/components/FilesView/OptionGroup'
+	import PopoverItem from '@/components/Desktop/PopoverItem'
+	import SearchBar from '@/components/FilesView/SearchBar'
+	import Option from '@/components/FilesView/Option'
+	import {mapGetters} from 'vuex'
+	import {events} from '@/bus'
+
+	export default {
+		name: 'InvoiceDesktopToolbar',
+		components: {
+			FileSortingOptions,
+			MoreHorizontalIcon,
+			ChevronLeftIcon,
+			ToolbarWrapper,
+			PopoverWrapper,
+			ToolbarButton,
+			ToolbarGroup,
+			PopoverItem,
+			SearchBar,
+			OptionGroup,
+			Option,
+		},
+		computed: {
+			...mapGetters([
+				'isVisibleSidebar',
+				'currentFolder',
+				'clipboard',
+			]),
+			directoryName() {
+				return this.currentFolder ? this.currentFolder.name : 'Invoices'
+			},
+			canActiveInView() {
+				let locations = [
+					'regular-invoice',
+					'advance-invoice',
+				]
+				return !this.$isThisLocation(locations) || this.clipboard.length === 0
+			},
+		},
+		data() {
+			return {
+				query: '',
+			}
+		},
+		watch: {
+			query(val) {
+				this.$searchInvoices(val)
+			}
+		},
+		methods: {
+			createClient() {
+				this.$router.push({name: 'CreateClient'})
+			},
+			showSortingMenu() {
+				events.$emit('popover:open', 'desktop-sorting')
+			},
+			createCreateMenu() {
+				events.$emit('popover:open', 'desktop-create-invoices')
+			},
+			deleteInvoice() {
+				if (this.clipboard.length > 0)
+					this.$store.dispatch('deleteInvoice')
+			},
+			shareInvoice() {
+				alert('Send Invoice')
+			},
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+@import "@assets/vuefilemanager/_variables";
+@import "@assets/vuefilemanager/_mixins";
+
+.is-inactive {
+	opacity: 0.25;
+	pointer-events: none;
+}
+
+.toolbar-wrapper {
+	padding-top: 10px;
+	padding-bottom: 10px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	position: relative;
+	z-index: 2;
+}
+
+.location {
+	align-items: center;
+	cursor: pointer;
+	display: flex;
+
+	.icon-back {
+		@include transition(150ms);
+		pointer-events: none;
+		margin-right: 6px;
+		flex-shrink: 0;
+		opacity: 0.15;
+
+		&.is-active {
+			opacity: 1;
+			pointer-events: initial;
+		}
+	}
+
+	.location-title {
+		@include font-size(15);
+		line-height: 1;
+		font-weight: 700;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: $text;
+	}
+
+	.location-more {
+		margin-left: 6px;
+		padding: 1px 4px;
+		line-height: 0;
+		border-radius: 3px;
+		@include transition(150ms);
+
+		svg circle {
+			@include transition(150ms);
+		}
+
+		&:hover {
+			background: $light_background;
+
+			svg circle {
+				color: inherit;
+			}
+		}
+	}
+}
+
+.toolbar-position {
+	text-align: center;
+
+	span {
+		@include font-size(17);
+		font-weight: 600;
+	}
+}
+
+@media only screen and (max-width: 1024px) {
+	.location {
+
+		.location-title {
+			max-width: 120px;
+		}
+	}
+
+	.toolbar-tools {
+		.button {
+			margin-left: 0;
+			height: 40px;
+			width: 40px;
+		}
+	}
+}
+
+@media only screen and (max-width: 960px) {
+	#desktop-toolbar {
+		display: none;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.location {
+		.location-title {
+			color: $dark_mode_text_primary;
+		}
+
+		.location-more {
+			&:hover {
+				background: $dark_mode_foreground;
+			}
+		}
+	}
+}
+</style>

resources/js/Oasis/Invoices/components/InvoiceFilterMobile.vue

@@ -0,0 +1,46 @@
+<template>
+    <MenuMobile name="invoice-filter">
+        <MenuMobileGroup>
+            <OptionGroup>
+                <Option @click.native="showLocation('regular-invoice')" :is-active="$isThisLocation('regular-invoice')" title="Invoices" icon="file-text" is-hover-disabled="true" />
+                <Option @click.native="showLocation('advance-invoice')" :is-active="$isThisLocation('advance-invoice')" title="Advance Invoices" icon="clock" is-hover-disabled="true" />
+            </OptionGroup>
+            <OptionGroup>
+                <Option @click.native="showLocation('clients')" :is-active="$isThisLocation('clients')" title="Clients" icon="users" is-hover-disabled="true" />
+            </OptionGroup>
+        </MenuMobileGroup>
+    </MenuMobile>
+</template>
+
+<script>
+import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
+import OptionGroup from '@/components/FilesView/OptionGroup'
+import MenuMobile from '@/components/Mobile/MenuMobile'
+import Option from '@/components/FilesView/Option'
+import {mapGetters} from 'vuex'
+
+export default {
+    name: 'InvoiceFilterMobile',
+    components: {
+        MenuMobileGroup,
+        OptionGroup,
+        MenuMobile,
+        Option,
+    },
+    computed: {
+        ...mapGetters([
+            'homeDirectory'
+        ]),
+    },
+    methods: {
+		showLocation(location) {
+			let routes = {
+				'regular-invoice': 'getRegularInvoices',
+				'advance-invoice': 'getAdvanceInvoices',
+				'clients': 'getClients',
+			}
+			this.$store.dispatch(routes[location])
+		}
+    }
+}
+</script>

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

@@ -0,0 +1,196 @@
+<template>
+    <div class="info-wrapper">
+
+		<!--Is empty clipboard-->
+		<EmptyMessage
+			v-if="isEmpty"
+			:message="$t('messages.nothing_to_preview')"
+			icon="eye-off"
+		/>
+
+		<div v-if="isClient">
+
+			<!--Single file preview-->
+			<div v-if="isSingleFile && !isEmpty" class="info-headline">
+				<TitlePreview
+					icon="user"
+					:title="singleFile.name"
+					subtitle="Client"
+				/>
+			</div>
+
+			<!--File info-->
+			<ListInfo v-if="isSingleFile && !isEmpty">
+
+				<ListInfoItem
+					title="Email"
+					:content="singleFile.email"
+				/>
+
+				<ListInfoItem
+					title="Total Net"
+					:content="singleFile.totalNet"
+				/>
+
+				<ListInfoItem
+					title="Total Invoices"
+					:content="singleFile.totalInvoices + ' Pcs.'"
+				/>
+
+				<!--Created At-->
+				<ListInfoItem
+					:title="$t('file_detail.created_at')"
+					:content="singleFile.created_at"
+				/>
+			</ListInfo>
+		</div>
+
+		<div v-if="isInvoice">
+
+			<!--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>
+
+<script>
+	import FilePreviewDetail from '@/components/Others/FilePreviewDetail'
+    import {Edit2Icon, LockIcon, UnlockIcon} from 'vue-feather-icons'
+	import ImageMetaData from '@/components/FilesView/ImageMetaData'
+    import EmptyMessage from '@/components/FilesView/EmptyMessage'
+	import TitlePreview from '@/components/FilesView/TitlePreview'
+	import CopyInput from '@/components/Others/Forms/CopyInput'
+	import ListInfoItem from '@/components/Others/ListInfoItem'
+	import ListInfo from '@/components/Others/ListInfo'
+	import {mapGetters} from 'vuex'
+	import {events} from "@/bus"
+
+	export default {
+		name: 'InfoSidebar',
+		components: {
+			FilePreviewDetail,
+			ImageMetaData,
+			EmptyMessage,
+			TitlePreview,
+			ListInfoItem,
+			UnlockIcon,
+			CopyInput,
+			Edit2Icon,
+			LockIcon,
+			ListInfo,
+		},
+		computed: {
+			...mapGetters([
+				'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
+			},
+			isSingleFile() {
+				return this.clipboard.length === 1
+			},
+			singleFile() {
+				return this.clipboard[0]
+			},
+			canShowMetaData() {
+				return this.clipboard[0].metadata && this.clipboard[0].metadata.ExifImageWidth
+			},
+			isLocked() {
+				return this.clipboard[0].shared.is_protected
+			},
+			sharedInfo() {
+				let title = this.permissionOptions.find(option => {
+					return option.value === this.clipboard[0].shared.permission
+				})
+
+				return title ? this.$t(title.label) : this.$t('shared.can_download')
+			},
+		},
+		methods: {
+			openShareOptions() {
+				events.$emit('popup:open', {name: 'share-edit', item: this.clipboard[0]})
+			},
+			openMoveOptions() {
+				events.$emit("popup:open", {name: "move", item: this.clipboard});
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+
+	.info-wrapper {
+		padding-bottom: 20px;
+		height: 100%;
+	}
+
+	.info-headline {
+		margin-bottom: 20px;
+		border-radius: 8px;
+	}
+
+	.share-link {
+		display: flex;
+		width: 100%;
+		align-items: center;
+		margin-top: 10px;
+
+		.lock-icon {
+			display: inline-block;
+			width: 15px;
+			margin-right: 9px;
+			cursor: pointer;
+		}
+
+		.copy-share-link {
+			width: 100%;
+		}
+	}
+</style>

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

@@ -0,0 +1,454 @@
+<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>
+
+            <!--Name-->
+            <div class="item-name">
+
+				<b :ref="item.id" class="name">
+                    {{ item.clientName }} - {{ item.total }}
+                </b>
+
+                <div class="item-info">
+                    <span class="item-size">
+						{{ item.created_at }}, n. {{ item.invoiceNumber }}
+					</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: 12px 7px 12px 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/Invoices/components/InvoiceMobileMenu.vue

@@ -0,0 +1,70 @@
+<template>
+    <MenuMobile name="invoice-menu">
+		<TitlePreview
+			v-if="clipboard[0]"
+			class="headline"
+			icon="file-text"
+			:title="clipboard[0].name"
+			:subtitle="'Invoice - ' + clipboard[0].invoiceNumber"
+		/>
+
+		<!--Trash location-->
+        <MenuMobileGroup>
+            <OptionGroup class="menu-option-group">
+                <Option @click.native="" title="Edit Invoice" icon="rename" />
+                <Option @click.native="" title="Send Invoice" icon="send" />
+                <Option @click.native="" title="Go to Company" icon="user" />
+                <Option @click.native="" :title="$t('context_menu.delete')" icon="trash" />
+            </OptionGroup>
+
+            <OptionGroup>
+                <Option @click.native="" :title="$t('context_menu.detail')" icon="detail" />
+                <Option @click.native="" :title="$t('context_menu.download')" icon="download" />
+            </OptionGroup>
+        </MenuMobileGroup>
+    </MenuMobile>
+</template>
+
+<script>
+import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
+import TitlePreview from '@/components/FilesView/TitlePreview'
+import ThumbnailItem from '@/components/Others/ThumbnailItem'
+import OptionGroup from '@/components/FilesView/OptionGroup'
+import MenuMobile from '@/components/Mobile/MenuMobile'
+import Option from '@/components/FilesView/Option'
+import {mapGetters} from 'vuex'
+
+export default {
+    name: 'FileMenuMobile',
+    components: {
+        MenuMobileGroup,
+        ThumbnailItem,
+		TitlePreview,
+        OptionGroup,
+        MenuMobile,
+        Option,
+    },
+    computed: {
+        ...mapGetters([
+            'clipboard',
+            'user',
+        ]),
+    },
+    data() {
+        return {
+            isVisible: false,
+        }
+    },
+    methods: {
+
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+	.headline {
+		padding: 20px 20px 10px;
+		margin-bottom: 0;
+	}
+</style>

resources/js/Oasis/Invoices/components/InvoiceSortingMobile.vue

@@ -0,0 +1,61 @@
+<template>
+    <MenuMobile name="invoice-sorting">
+        <MenuMobileGroup>
+            <OptionGroup>
+				<Option @click.native.stop="sort('created_at')" :title="$t('preview_sorting.sort_date')" icon="calendar" />
+				<Option @click.native.stop="sort('name')" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
+            </OptionGroup>
+        </MenuMobileGroup>
+    </MenuMobile>
+</template>
+
+<script>
+import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
+import OptionGroup from '@/components/FilesView/OptionGroup'
+import MenuMobile from '@/components/Mobile/MenuMobile'
+import Option from '@/components/FilesView/Option'
+import {mapGetters} from 'vuex'
+
+export default {
+    name: 'InvoiceFilterMobile',
+    components: {
+        MenuMobileGroup,
+        OptionGroup,
+        MenuMobile,
+        Option,
+    },
+    computed: {
+        ...mapGetters([
+            'homeDirectory'
+        ]),
+    },
+    methods: {
+		showLocation(location) {
+
+		},
+        flushBrowseHistory() {
+            this.$store.commit('FLUSH_FOLDER_HISTORY')
+        },
+        goToFiles() {
+            this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
+            this.flushBrowseHistory()
+        },
+        goToLatest() {
+            this.$store.dispatch('getLatest')
+            this.flushBrowseHistory()
+        },
+        goToTrash() {
+            this.$store.dispatch('getTrash')
+            this.flushBrowseHistory()
+        },
+        goToShared() {
+            this.$store.dispatch('getShared', [{back: false, init: false}])
+            this.flushBrowseHistory()
+        },
+        goToParticipantUploads() {
+            this.$store.dispatch('getParticipantUploads')
+            this.flushBrowseHistory()
+        }
+    }
+}
+</script>