TheCloneArmy/crater
1
0
Fork 1
mirror of https://github.com/crater-invoice/crater.git synced 2025-10-31 13:41:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

build version 400

Browse Source
This commit is contained in:
Mohit Panjwani
2020-12-02 17:54:08 +05:30
parent 326508e567
commit 89ee58590c
963 changed files with 62887 additions and 48868 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
resources/assets/js/views/reports/ExpensesReport.vue
View File

@ -1,55 +1,76 @@
<template>
<div class="row">
<div class="col-md-4 reports-tab-container">
<div class="row">
<div class="col-md-8">
<label class="report-label">{{ $t('reports.expenses.date_range') }}</label>
<base-select
<div class="grid gap-8 md:grid-cols-12">
<div class="col-span-8 mt-12 md:col-span-4">
<div class="grid grid-cols-12">
<sw-input-group
:label="$t('reports.expenses.date_range')"
:error="dateRangeError"
class="col-span-12 md:col-span-8"
>
<sw-select
v-model="selectedRange"
:options="dateRange"
:allow-empty="false"
:show-labels="false"
class="mt-2"
@input="onChangeDateRange"
/>
<span v-if="$v.range.$error && !$v.range.required" class="text-danger"> {{ $t('validation.required') }} </span>
</div>
</sw-input-group>
</div>
<div class="row report-fields-container">
<div class="col-md-6 report-field-container">
<label class="report-label">{{ $t('reports.expenses.from_date') }}</label>
<div class="grid grid-cols-1 mt-6 md:gap-10 md:grid-cols-2">
<sw-input-group
:label="$t('reports.expenses.from_date')"
:error="fromDateError"
>
<base-date-picker
v-model="formData.from_date"
:invalid="$v.formData.from_date.$error"
:calendar-button="true"
calendar-button-icon="calendar"
class="mt-2"
@change="$v.formData.from_date.$touch()"
/>
<span v-if="$v.formData.from_date.$error && !$v.formData.from_date.required" class="text-danger"> {{ $t('validation.required') }} </span>
</div>
<div class="col-md-6 report-field-container">
<label class="report-label">{{ $t('reports.expenses.to_date') }}</label>
</sw-input-group>
<sw-input-group
:label="$t('reports.expenses.to_date')"
:error="toDateError"
class="mt-5 md:mt-0"
>
<base-date-picker
v-model="formData.to_date"
:invalid="$v.formData.to_date.$error"
:calendar-button="true"
calendar-button-icon="calendar"
class="mt-2"
@change="$v.formData.to_date.$touch()"
/>
<span v-if="$v.formData.to_date.$error && !$v.formData.to_date.required" class="text-danger"> {{ $t('validation.required') }} </span>
</div>
</div>
<div class="row report-submit-button-container">
<div class="col-md-6">
<base-button outline color="theme" class="report-button" @click="getReports()">
{{ $t('reports.update_report') }}
</base-button>
</div>
</sw-input-group>
</div>
<sw-button
variant="primary-outline"
class="content-center hidden mt-0 w-md md:flex md:mt-8"
@click="getReports()"
>
{{ $t('reports.update_report') }}
</sw-button>
</div>
<div class="col-sm-8 reports-tab-container">
<iframe :src="getReportUrl" class="reports-frame-style"/>
<a class="base-button btn btn-primary btn-lg report-view-button" @click="viewReportsPDF">
<font-awesome-icon icon="file-pdf" class="vue-icon icon-left svg-inline--fa fa-download fa-w-16 mr-2" /> <span>{{ $t('reports.view_pdf') }}</span>
<div class="col-span-8 mt-0 md:mt-12">
<iframe
:src="getReportUrl"
class="hidden w-full h-screen border-gray-100 border-solid rounded md:flex"
/>
<a
class="flex items-center justify-center h-10 px-5 py-1 text-sm font-medium leading-none text-center text-white whitespace-no-wrap rounded md:hidden bg-primary-500"
@click="viewReportsPDF"
>
<document-text-icon />
<span>{{ $t('reports.view_pdf') }}</span>
</a>
</div>
</div>
@ -58,12 +79,16 @@
<script>
import { mapGetters } from 'vuex'
import moment from 'moment'
import { validationMixin } from 'vuelidate'
import { DocumentTextIcon } from '@vue-hero-icons/solid'
const { required } = require('vuelidate/lib/validators')
export default {
mixins: [validationMixin],
data () {
components: {
DocumentTextIcon,
},
data() {
return {
range: new Date(),
dateRange: [
@ -76,56 +101,94 @@ export default {
'Previous Month',
'Previous Quarter',
'Previous Year',
'Custom'
'Custom',
],
selectedRange: 'This Month',
formData: {
from_date: moment().startOf('month').toString(),
to_date: moment().endOf('month').toString()
to_date: moment().endOf('month').toString(),
},
url: null,
siteURL: null
siteURL: null,
}
},
validations: {
range: {
required
required,
},
formData: {
from_date: {
required
required,
},
to_date: {
required
}
}
required,
},
},
},
computed: {
...mapGetters('company', [
'getSelectedCompany'
]),
getReportUrl () {
...mapGetters('company', ['getSelectedCompany']),
getReportUrl() {
return this.url
}
},
dateRangeError() {
if (!this.$v.range.$error) {
return ''
}
if (!this.$v.range.required) {
return this.$t('validation.required')
}
},
fromDateError() {
if (!this.$v.formData.from_date.$error) {
return ''
}
if (!this.$v.formData.from_date.required) {
return this.$t('validation.required')
}
},
toDateError() {
if (!this.$v.formData.to_date.$error) {
return ''
}
if (!this.$v.formData.to_date.required) {
return this.$t('validation.required')
}
},
},
watch: {
range (newRange) {
range(newRange) {
this.formData.from_date = moment(newRange).startOf('year').toString()
this.formData.to_date = moment(newRange).endOf('year').toString()
}
},
},
mounted () {
mounted() {
this.siteURL = `/reports/expenses/${this.getSelectedCompany.unique_hash}`
this.url = `${this.siteURL}?from_date=${moment(this.formData.from_date).format('DD/MM/YYYY')}&to_date=${moment(this.formData.to_date).format('DD/MM/YYYY')}`
this.url = `${this.siteURL}?from_date=${moment(
this.formData.from_date
).format('YYYY-MM-DD')}&to_date=${moment(this.formData.to_date).format(
'YYYY-MM-DD'
)}`
},
methods: {
getThisDate (type, time) {
getThisDate(type, time) {
return moment()[type](time).toString()
},
getPreDate (type, time) {
getPreDate(type, time) {
return moment().subtract(1, time)[type](time).toString()
},
onChangeDateRange () {
onChangeDateRange() {
switch (this.selectedRange) {
case 'Today':
this.formData.from_date = moment().toString()
@ -176,15 +239,17 @@ export default {
break
}
},
setRangeToCustom () {
setRangeToCustom() {
this.selectedRange = 'Custom'
},
async viewReportsPDF () {
async viewReportsPDF() {
let data = await this.getReports()
window.open(this.getReportUrl, '_blank')
return data
},
async getReports (isDownload = false) {
async getReports(isDownload = false) {
this.$v.range.$touch()
this.$v.formData.$touch()
@ -192,10 +257,11 @@ export default {
return true
}
this.url = `${this.siteURL}?from_date=${moment(this.formData.from_date).format('DD/MM/YYYY')}&to_date=${moment(this.formData.to_date).format('DD/MM/YYYY')}`
this.url = `${this.siteURL}?from_date=${this.formData.from_date}&to_date=${this.formData.to_date}`
return true
},
downloadReport () {
downloadReport() {
if (!this.getReports()) {
return false
}
@ -203,9 +269,9 @@ export default {
window.open(this.getReportUrl + '&download=true')
setTimeout(() => {
this.url = `${this.siteURL}?from_date=${moment(this.formData.from_date).format('DD/MM/YYYY')}&to_date=${moment(this.formData.to_date).format('DD/MM/YYYY')}`
this.url = `${this.siteURL}?from_date=${this.formData.from_date}&to_date=${this.formData.to_date}`
}, 200)
}
}
},
},
}
</script>

188
resources/assets/js/views/reports/ProfitLossReport.vue
View File

@ -1,55 +1,78 @@
<template>
<div class="row">
<div class="col-md-4 reports-tab-container">
<div class="row">
<div class="col-md-8">
<label class="report-label">{{ $t('reports.profit_loss.date_range') }}</label>
<base-select
<div class="grid gap-8 md:grid-cols-12">
<div class="col-span-8 mt-12 md:col-span-4">
<div class="grid grid-cols-12">
<sw-input-group
:label="$t('reports.profit_loss.date_range')"
:error="dateRangeError"
class="col-span-12 md:col-span-8"
>
<sw-select
v-model="selectedRange"
:options="dateRange"
:allow-empty="false"
:show-labels="false"
class="mt-2"
@input="onChangeDateRange"
/>
<span v-if="$v.range.$error && !$v.range.required" class="text-danger"> {{ $t('validation.required') }} </span>
</div>
</sw-input-group>
</div>
<div class="row report-fields-container">
<div class="col-md-6 report-field-container">
<label class="report-label">{{ $t('reports.profit_loss.from_date') }}</label>
<div class="grid grid-cols-1 mt-6 md:gap-10 md:grid-cols-2">
<sw-input-group
:label="$t('reports.profit_loss.from_date')"
:error="fromDateError"
>
<base-date-picker
v-model="formData.from_date"
:invalid="$v.formData.from_date.$error"
:calendar-button="true"
calendar-button-icon="calendar"
class="mt-2"
@change="$v.formData.from_date.$touch()"
/>
<span v-if="$v.formData.from_date.$error && !$v.formData.from_date.required" class="text-danger"> {{ $t('validation.required') }} </span>
</div>
<div class="col-md-6 report-field-container">
<label class="report-label">{{ $t('reports.profit_loss.to_date') }}</label>
</sw-input-group>
<sw-input-group
:label="$t('reports.profit_loss.to_date')"
:error="toDateError"
class="mt-5 md:mt-0"
>
<base-date-picker
v-model="formData.to_date"
:invalid="$v.formData.to_date.$error"
:calendar-button="true"
calendar-button-icon="calendar"
class="mt-2"
@change="$v.formData.to_date.$touch()"
/>
<span v-if="$v.formData.to_date.$error && !$v.formData.to_date.required" class="text-danger"> {{ $t('validation.required') }} </span>
</div>
</sw-input-group>
</div>
<div class="row report-submit-button-container">
<div class="col-md-6">
<base-button outline color="theme" class="report-button" @click="getReports()">
{{ $t('reports.update_report') }}
</base-button>
</div>
<div class="mt-0 md:mt-8">
<sw-button
variant="primary-outline"
class="content-center hidden text-sm w-md md:flex"
@click="getReports()"
>
{{ $t('reports.update_report') }}
</sw-button>
</div>
</div>
<div class="col-sm-8 reports-tab-container">
<iframe :src="getReportUrl" class="reports-frame-style"/>
<a class="base-button btn btn-primary btn-lg report-view-button" @click="viewReportsPDF">
<font-awesome-icon icon="file-pdf" class="vue-icon icon-left svg-inline--fa fa-download fa-w-16 mr-2" /> <span>{{ $t('reports.view_pdf') }}</span>
<div class="col-span-8 mt-0 md:mt-12">
<iframe
:src="getReportUrl"
class="hidden w-full h-screen border-gray-100 border-solid rounded md:flex"
/>
<a
class="flex items-center justify-center h-10 px-5 py-1 text-sm font-medium leading-none text-center text-white whitespace-no-wrap rounded md:hidden bg-primary-500"
@click="viewReportsPDF"
>
<document-text-icon />
<span>{{ $t('reports.view_pdf') }}</span>
</a>
</div>
</div>
@ -57,13 +80,16 @@
<script>
import { mapGetters, mapActions } from 'vuex'
import { DocumentTextIcon } from '@vue-hero-icons/solid'
import moment from 'moment'
import { validationMixin } from 'vuelidate'
const { required } = require('vuelidate/lib/validators')
export default {
mixins: [validationMixin],
data () {
components: {
DocumentTextIcon,
},
data() {
return {
dateRange: [
'Today',
@ -75,62 +101,94 @@ export default {
'Previous Month',
'Previous Quarter',
'Previous Year',
'Custom'
'Custom',
],
selectedRange: 'This Month',
range: new Date(),
formData: {
from_date: moment().startOf('month').toString(),
to_date: moment().endOf('month').toString()
to_date: moment().endOf('month').toString(),
},
url: null,
siteURL: null
siteURL: null,
}
},
validations: {
range: {
required
required,
},
formData: {
from_date: {
required
required,
},
to_date: {
required
}
}
required,
},
},
},
computed: {
...mapGetters('company', [
'getSelectedCompany'
]),
getReportUrl () {
...mapGetters('company', ['getSelectedCompany']),
getReportUrl() {
return this.url
}
},
dateRangeError() {
if (!this.$v.range.$error) {
return ''
}
if (!this.$v.range.required) {
return this.$t('validation.required')
}
},
fromDateError() {
if (!this.$v.formData.from_date.$error) {
return ''
}
if (!this.$v.formData.from_date.required) {
return this.$t('validation.required')
}
},
toDateError() {
if (!this.$v.formData.to_date.$error) {
}
if (!this.$v.formData.to_date.required) {
return this.$t('validation.required')
}
},
},
watch: {
range (newRange) {
range(newRange) {
this.formData.from_date = moment(newRange).startOf('year').toString()
this.formData.to_date = moment(newRange).endOf('year').toString()
}
},
},
mounted () {
this.siteURL = `/reports/profit-loss/${this.getSelectedCompany.unique_hash}`
this.url = `${this.siteURL}?from_date=${moment(this.formData.from_date).format('DD/MM/YYYY')}&to_date=${moment(this.formData.to_date).format('DD/MM/YYYY')}`
this.loadProfitLossLink(this.url + '&download=true')
mounted() {
this.siteURL = `/reports/profit-loss/${this.getSelectedCompany.unique_hash}`
this.url = `${this.siteURL}?from_date=${moment(
this.formData.from_date
).format('YYYY-MM-DD')}&to_date=${moment(this.formData.to_date).format(
'YYYY-MM-DD'
)}`
},
methods: {
...mapActions('profitLossReport', [
'loadProfitLossLink'
]),
getThisDate (type, time) {
getThisDate(type, time) {
return moment()[type](time).toString()
},
getPreDate (type, time) {
getPreDate(type, time) {
return moment().subtract(1, time)[type](time).toString()
},
onChangeDateRange () {
onChangeDateRange() {
switch (this.selectedRange) {
case 'Today':
this.formData.from_date = moment().toString()
@ -181,34 +239,38 @@ export default {
break
}
},
setRangeToCustom () {
setRangeToCustom() {
this.selectedRange = 'Custom'
},
async viewReportsPDF () {
async viewReportsPDF() {
let data = await this.getReports()
window.open(this.getReportUrl, '_blank')
return data
},
async getReports (isDownload = false) {
async getReports(isDownload = false) {
this.$v.range.$touch()
this.$v.formData.$touch()
if (this.$v.$invalid) {
return true
}
this.url = `${this.siteURL}?from_date=${moment(this.formData.from_date).format('DD/MM/YYYY')}&to_date=${moment(this.formData.to_date).format('DD/MM/YYYY')}`
this.url = `${this.siteURL}?from_date=${this.formData.from_date}&to_date=${this.formData.to_date}`
return true
},
downloadReport () {
downloadReport() {
if (!this.getReports()) {
return false
}
window.open(this.getReportUrl + '&download=true')
setTimeout(() => {
this.url = `${this.siteURL}?from_date=${moment(this.formData.from_date).format('DD/MM/YYYY')}&to_date=${moment(this.formData.to_date).format('DD/MM/YYYY')}`
this.url = `${this.siteURL}?from_date=${this.formData.from_date}&to_date=${this.formData.to_date}`
}, 200)
}
}
},
},
}
</script>

220
resources/assets/js/views/reports/SalesReports.vue
View File

@ -1,70 +1,90 @@
<template>
<div class="row">
<div class="col-md-4 reports-tab-container">
<div class="row">
<div class="col-md-8">
<label class="report-label">{{ $t('reports.sales.date_range') }}</label>
<base-select
<div class="grid gap-8 md:grid-cols-12">
<div class="col-span-8 mt-12 md:col-span-4">
<div class="grid grid-cols-12">
<sw-input-group
:label="$t('reports.sales.date_range')"
:error="dateRangeError"
class="col-span-12 md:col-span-8"
>
<sw-select
v-model="selectedRange"
:options="dateRange"
:allow-empty="false"
:show-labels="false"
class="mt-2"
@input="onChangeDateRange"
/>
<span v-if="$v.range.$error && !$v.range.required" class="text-danger"> {{ $t('validation.required') }} </span>
</div>
</sw-input-group>
</div>
<div class="row report-fields-container">
<div class="col-md-6 report-field-container">
<label class="report-label">{{ $t('reports.sales.from_date') }}</label>
<div class="grid grid-cols-1 mt-6 md:gap-10 md:grid-cols-2">
<sw-input-group
:label="$t('reports.sales.from_date')"
:error="fromDateError"
>
<base-date-picker
v-model="formData.from_date"
:invalid="$v.formData.from_date.$error"
:calendar-button="true"
calendar-button-icon="calendar"
class="mt-2"
@change="$v.formData.from_date.$touch()"
@input="setRangeToCustom"
/>
<span v-if="$v.formData.from_date.$error && !$v.formData.from_date.required" class="text-danger"> {{ $t('validation.required') }} </span>
</div>
<div class="col-md-6 report-field-container">
<label class="report-label">{{ $t('reports.sales.to_date') }}</label>
</sw-input-group>
<sw-input-group
:label="$t('reports.sales.to_date')"
:error="toDateError"
class="mt-5 md:mt-0"
>
<base-date-picker
v-model="formData.to_date"
:invalid="$v.formData.to_date.$error"
:calendar-button="true"
calendar-button-icon="calendar"
class="mt-2"
@change="$v.formData.to_date.$touch()"
@input="setRangeToCustom"
/>
<span v-if="$v.formData.to_date.$error && !$v.formData.to_date.required" class="text-danger"> {{ $t('validation.required') }} </span>
</div>
</sw-input-group>
</div>
<div class="row report-fields-container">
<div class="col-md-8 report-field-container">
<label class="report-label">{{ $t('reports.sales.report_type') }}</label>
<base-select
<div class="grid grid-cols-12 mt-6 md:mt-8">
<sw-input-group
:label="$t('reports.sales.report_type')"
class="col-span-12 md:col-span-8"
>
<sw-select
v-model="selectedType"
:options="reportTypes"
:allow-empty="false"
:show-labels="false"
class="mt-2"
:placeholder="$t('reports.sales.report_type')"
@input="getInitialReport"
/>
</div>
</div>
<div class="row report-submit-button-container">
<div class="col-md-6">
<base-button outline color="theme" class="report-button" @click="getReports()">
{{ $t('reports.update_report') }}
</base-button>
</div>
</sw-input-group>
</div>
<sw-button
variant="primary-outline"
class="content-center hidden mt-0 w-md md:flex md:mt-8"
type="submit"
@click.prevent="getReports()"
>
{{ $t('reports.update_report') }}
</sw-button>
</div>
<div class="col-sm-8 reports-tab-container">
<iframe :src="getReportUrl" class="reports-frame-style"/>
<a class="base-button btn btn-primary btn-lg report-view-button" @click="viewReportsPDF">
<font-awesome-icon icon="file-pdf" class="vue-icon icon-left svg-inline--fa fa-download fa-w-16 mr-2" /> <span>{{ $t('reports.view_pdf') }}</span>
<div class="col-span-8 mt-0 md:mt-12">
<iframe
:src="getReportUrl"
class="hidden w-full h-screen border-gray-100 border-solid rounded md:flex"
/>
<a
class="flex items-center justify-center h-10 px-5 py-1 text-sm font-medium leading-none text-center text-white whitespace-no-wrap rounded md:hidden bg-primary-500"
@click="viewReportsPDF"
>
<document-text-icon />
<span>{{ $t('reports.view_pdf') }}</span>
</a>
</div>
</div>
@ -72,13 +92,17 @@
<script>
import { mapActions, mapGetters } from 'vuex'
import { DocumentTextIcon } from '@vue-hero-icons/solid'
import moment from 'moment'
import { validationMixin } from 'vuelidate'
const { required } = require('vuelidate/lib/validators')
export default {
mixins: [validationMixin],
data () {
components: {
DocumentTextIcon,
},
data() {
return {
reportTypes: ['By Customer', 'By Item'],
selectedType: 'By Customer',
@ -92,63 +116,96 @@ export default {
'Previous Month',
'Previous Quarter',
'Previous Year',
'Custom'
'Custom',
],
selectedRange: 'This Month',
range: new Date(),
formData: {
from_date: moment().startOf('month').toString(),
to_date: moment().endOf('month').toString()
to_date: moment().endOf('month').toString(),
},
url: null,
customerSiteURL: null,
itemsSiteURL: null
itemsSiteURL: null,
}
},
validations: {
range: {
required
required,
},
formData: {
from_date: {
required
required,
},
to_date: {
required
}
}
required,
},
},
},
computed: {
...mapGetters('company', [
'getSelectedCompany'
]),
getReportUrl () {
...mapGetters('company', ['getSelectedCompany']),
getReportUrl() {
return this.url
}
},
dateRangeError() {
if (!this.$v.range.$error) {
return ''
}
if (!this.$v.range.required) {
return this.$t('validation.required')
}
},
fromDateError() {
if (!this.$v.formData.from_date.$error) {
return ''
}
if (!this.$v.formData.from_date.required) {
return this.$t('validation.required')
}
},
toDateError() {
if (!this.$v.formData.to_date.$error) {
return ''
}
if (!this.$v.formData.to_date.required) {
return this.$t('validation.required')
}
},
},
watch: {
range (newRange) {
range(newRange) {
this.formData.from_date = moment(newRange).startOf('year').toString()
this.formData.to_date = moment(newRange).endOf('year').toString()
}
},
},
mounted () {
mounted() {
this.customerSiteURL = `/reports/sales/customers/${this.getSelectedCompany.unique_hash}`
this.itemsSiteURL = `/reports/sales/items/${this.getSelectedCompany.unique_hash}`
this.getInitialReport()
},
methods: {
...mapActions('salesReport', [
'loadLinkByCustomer',
'loadLinkByItems'
]),
getThisDate (type, time) {
...mapActions('salesReport', ['loadLinkByCustomer', 'loadLinkByItems']),
getThisDate(type, time) {
return moment()[type](time).toString()
},
getPreDate (type, time) {
getPreDate(type, time) {
return moment().subtract(1, time)[type](time).toString()
},
onChangeDateRange () {
onChangeDateRange() {
switch (this.selectedRange) {
case 'Today':
this.formData.from_date = moment().toString()
@ -199,38 +256,49 @@ export default {
break
}
},
setRangeToCustom () {
setRangeToCustom() {
this.selectedRange = 'Custom'
},
async getInitialReport () {
async getInitialReport() {
if (this.selectedType === 'By Customer') {
this.url = `${this.customerSiteURL}?from_date=${moment(this.formData.from_date).format('DD/MM/YYYY')}&to_date=${moment(this.formData.to_date).format('DD/MM/YYYY')}`
this.url = `${this.customerSiteURL}?from_date=${moment(
this.formData.from_date
).format('YYYY-MM-DD')}&to_date=${moment(this.formData.to_date).format(
'YYYY-MM-DD'
)}`
return true
}
this.url = `${this.itemsSiteURL}?from_date=${moment(this.formData.from_date).format('DD/MM/YYYY')}&to_date=${moment(this.formData.to_date).format('DD/MM/YYYY')}`
this.url = `${this.itemsSiteURL}?from_date=${moment(
this.formData.from_date
).format('YYYY-MM-DD')}&to_date=${moment(this.formData.to_date).format(
'YYYY-MM-DD'
)}`
return true
},
async viewReportsPDF () {
async viewReportsPDF() {
let data = await this.getReports()
window.open(this.getReportUrl, '_blank')
return data
},
async getReports (isDownload = false) {
async getReports(isDownload = false) {
this.$v.range.$touch()
this.$v.formData.$touch()
if (this.$v.$invalid) {
return true
}
if (this.selectedType === 'By Customer') {
this.url = `${this.customerSiteURL}?from_date=${moment(this.formData.from_date).format('DD/MM/YYYY')}&to_date=${moment(this.formData.to_date).format('DD/MM/YYYY')}`
this.url = `${this.customerSiteURL}?from_date=${this.formData.from_date}&to_date=${this.formData.to_date}`
return true
}
this.url = `${this.itemsSiteURL}?from_date=${moment(this.formData.from_date).format('DD/MM/YYYY')}&to_date=${moment(this.formData.to_date).format('DD/MM/YYYY')}`
this.url = `${this.itemsSiteURL}?from_date=${this.formData.from_date}&to_date=${this.formData.to_date}`
return true
},
downloadReport () {
downloadReport() {
if (!this.getReports()) {
return false
}
@ -238,13 +306,13 @@ export default {
window.open(this.getReportUrl + '&download=true')
setTimeout(() => {
if (this.selectedType === 'By Customer') {
this.url = `${this.customerSiteURL}?from_date=${moment(this.formData.from_date).format('DD/MM/YYYY')}&to_date=${moment(this.formData.to_date).format('DD/MM/YYYY')}`
this.url = `${this.customerSiteURL}?from_date=${this.formData.from_date}&to_date=${this.formData.to_date}`
return true
}
this.url = `${this.itemsSiteURL}?from_date=${moment(this.formData.from_date).format('DD/MM/YYYY')}&to_date=${moment(this.formData.to_date).format('DD/MM/YYYY')}`
this.url = `${this.itemsSiteURL}?from_date=${this.formData.from_date}&to_date=${this.formData.to_date}`
return true
}, 200)
}
}
},
},
}
</script>

165
resources/assets/js/views/reports/TaxReport.vue
View File

@ -1,55 +1,70 @@
<template>
<div class="row">
<div class="col-md-4 reports-tab-container">
<div class="row">
<div class="col-md-8">
<label class="report-label">{{ $t('reports.taxes.date_range') }}</label>
<base-select
<div class="grid gap-8 md:grid-cols-12">
<div class="col-span-8 mt-12 md:col-span-4">
<div class="grid grid-cols-12">
<sw-input-group
:label="$t('reports.taxes.date_range')"
:error="dateRangeError"
class="col-span-12 md:col-span-8"
>
<sw-select
v-model="selectedRange"
:options="dateRange"
:allow-empty="false"
:show-labels="false"
class="mt-2"
@input="onChangeDateRange"
/>
<span v-if="$v.range.$error && !$v.range.required" class="text-danger"> {{ $t('validation.required') }} </span>
</div>
</sw-input-group>
</div>
<div class="row report-fields-container">
<div class="col-md-6 report-field-container">
<label class="report-label">{{ $t('reports.taxes.from_date') }}</label>
<div class="grid grid-cols-1 mt-6 md:gap-10 md:grid-cols-2">
<sw-input-group
:label="$t('reports.taxes.from_date')"
:error="fromDateError"
>
<base-date-picker
v-model="formData.from_date"
:invalid="$v.formData.from_date.$error"
:calendar-button="true"
calendar-button-icon="calendar"
class="mt-2"
@change="$v.formData.from_date.$touch()"
/>
<span v-if="$v.formData.from_date.$error && !$v.formData.from_date.required" class="text-danger"> {{ $t('validation.required') }} </span>
</div>
<div class="col-md-6 report-field-container">
<label class="report-label">{{ $t('reports.taxes.to_date') }}</label>
</sw-input-group>
<sw-input-group
:label="$t('reports.taxes.to_date')"
:error="toDateError"
class="mt-5 md:mt-0"
>
<base-date-picker
v-model="formData.to_date"
:invalid="$v.formData.to_date.$error"
:calendar-button="true"
calendar-button-icon="calendar"
class="mt-2"
@change="$v.formData.to_date.$touch()"
/>
<span v-if="$v.formData.to_date.$error && !$v.formData.to_date.required" class="text-danger"> {{ $t('validation.required') }} </span>
</div>
</div>
<div class="row report-submit-button-container">
<div class="col-md-6">
<base-button outline color="theme" class="report-button" @click="getReports()">
{{ $t('reports.update_report') }}
</base-button>
</div>
</sw-input-group>
</div>
<sw-button
variant="primary-outline"
class="content-center hidden mt-0 w-md md:flex md:mt-8"
@click="getReports()"
>
{{ $t('reports.update_report') }}
</sw-button>
</div>
<div class="col-sm-8 reports-tab-container">
<iframe :src="getReportUrl" class="reports-frame-style"/>
<a class="base-button btn btn-primary btn-lg report-view-button" @click="viewReportsPDF">
<font-awesome-icon icon="file-pdf" class="vue-icon icon-left svg-inline--fa fa-download fa-w-16 mr-2" />
<div class="col-span-8 mt-0 md:mt-12">
<iframe
:src="getReportUrl"
class="hidden w-full h-screen border-gray-100 border-solid rounded md:flex"
/>
<a
class="flex items-center justify-center h-10 px-5 py-1 text-sm font-medium leading-none text-center text-white whitespace-no-wrap rounded md:hidden bg-primary-500"
@click="viewReportsPDF"
>
<document-text-icon />
<span>{{ $t('reports.view_pdf') }}</span>
</a>
</div>
@ -58,13 +73,16 @@
<script>
import { mapGetters } from 'vuex'
import { DocumentTextIcon } from '@vue-hero-icons/solid'
import moment from 'moment'
import { validationMixin } from 'vuelidate'
const { required } = require('vuelidate/lib/validators')
export default {
mixins: [validationMixin],
data () {
components: {
DocumentTextIcon,
},
data() {
return {
dateRange: [
'Today',
@ -76,57 +94,86 @@ export default {
'Previous Month',
'Previous Quarter',
'Previous Year',
'Custom'
'Custom',
],
selectedRange: 'This Month',
range: new Date(),
formData: {
from_date: moment().startOf('month').toString(),
to_date: moment().endOf('month').toString()
to_date: moment().endOf('month').toString(),
},
url: null,
siteURL: null
siteURL: null,
}
},
validations: {
range: {
required
required,
},
formData: {
from_date: {
required
required,
},
to_date: {
required
}
}
required,
},
},
},
computed: {
...mapGetters('company', [
'getSelectedCompany'
]),
getReportUrl () {
...mapGetters('company', ['getSelectedCompany']),
getReportUrl() {
return this.url
}
},
dateRangeError() {
if (!this.$v.range.$error) {
return ''
}
if (!this.$v.range.required) {
return this.$t('validation.required')
}
},
fromDateError() {
if (!this.$v.formData.from_date.$error) {
return ''
}
if (!this.$v.formData.from_date.required) {
return this.$t('validation.required')
}
},
toDateError() {
if (!this.$v.formData.to_date.$error) {
return ''
}
if (!this.$v.formData.to_date.required) {
return this.$t('validation.required')
}
},
},
watch: {
range (newRange) {
range(newRange) {
this.formData.from_date = moment(newRange).startOf('year').toString()
this.formData.to_date = moment(newRange).endOf('year').toString()
}
},
},
mounted () {
mounted() {
this.siteURL = `/reports/tax-summary/${this.getSelectedCompany.unique_hash}`
this.url = `${this.siteURL}?from_date=${moment(this.formData.from_date).format('DD/MM/YYYY')}&to_date=${moment(this.formData.to_date).format('DD/MM/YYYY')}`
this.url = `${this.siteURL}?from_date=${moment(
this.formData.from_date
).format('YYYY-MM-DD')}&to_date=${moment(this.formData.to_date).format(
'YYYY-MM-DD'
)}`
},
methods: {
getThisDate (type, time) {
getThisDate(type, time) {
return moment()[type](time).toString()
},
getPreDate (type, time) {
getPreDate(type, time) {
return moment().subtract(1, time)[type](time).toString()
},
onChangeDateRange () {
onChangeDateRange() {
switch (this.selectedRange) {
case 'Today':
this.formData.from_date = moment().toString()
@ -177,15 +224,15 @@ export default {
break
}
},
setRangeToCustom () {
setRangeToCustom() {
this.selectedRange = 'Custom'
},
async viewReportsPDF () {
async viewReportsPDF() {
let data = await this.getReports()
window.open(this.getReportUrl, '_blank')
return data
},
async getReports (isDownload = false) {
async getReports(isDownload = false) {
this.$v.range.$touch()
this.$v.formData.$touch()
@ -193,10 +240,10 @@ export default {
return false
}
this.url = `${this.siteURL}?from_date=${moment(this.formData.from_date).format('DD/MM/YYYY')}&to_date=${moment(this.formData.to_date).format('DD/MM/YYYY')}`
this.url = `${this.siteURL}?from_date=${this.formData.from_date}&to_date=${this.formData.to_date}`
return true
},
downloadReport () {
downloadReport() {
if (!this.getReports()) {
return false
}
@ -204,9 +251,9 @@ export default {
window.open(this.url + '&download=true')
setTimeout(() => {
this.url = `${this.siteURL}?from_date=${moment(this.formData.from_date).format('DD/MM/YYYY')}&to_date=${moment(this.formData.to_date).format('DD/MM/YYYY')}`
this.url = `${this.siteURL}?from_date=${this.formData.from_date}&to_date=${this.formData.to_date}`
}, 200)
}
}
},
},
}
</script>

129
resources/assets/js/views/reports/layout/Index.vue
View File

@ -1,78 +1,93 @@
<template>
<div class="profit-loss-reports reports main-content">
<div class="page-header">
<h3 class="page-title"> {{ $tc('reports.report', 2) }}</h3>
<ol class="breadcrumb">
<li class="breadcrumb-item">
<router-link
slot="item-title"
to="dashboard">
{{ $t('general.home') }}
</router-link>
</li>
<li class="breadcrumb-item">
<router-link
slot="item-title"
to="/admin/reports/sales">
{{ $tc('reports.report', 2) }}
</router-link>
</li>
</ol>
<div class="page-actions row">
<div class="col-xs-2">
<base-button icon="download" size="large" color="theme" @click="onDownload()">
{{ $t('reports.download_pdf') }}
</base-button>
</div>
</div>
</div>
<base-page class="profit-loss-reports reports">
<sw-page-header :title="$tc('reports.report', 2)">
<sw-breadcrumb slot="breadcrumbs">
<sw-breadcrumb-item
:title="$t('general.home')"
:to="`/admin/dashboard`"
/>
<sw-breadcrumb-item
:title="$tc('reports.report', 2)"
:to="`/admin/reports`"
active
/>
</sw-breadcrumb>
<template slot="actions">
<sw-button size="lg" variant="primary" @click="onDownload()">
<download-icon class="h-5 mr-1 -ml-2" />
{{ $t('reports.download_pdf') }}
</sw-button>
</template>
</sw-page-header>
<div class="row">
<div class="col-sm-12">
<!-- Tabs -->
<ul class="tabs">
<li class="tab">
<router-link class="tab-link" to="/admin/reports/sales">{{ $t('reports.sales.sales') }}</router-link>
</li>
<li class="tab">
<router-link class="tab-link" to="/admin/reports/profit-loss">{{ $t('reports.profit_loss.profit_loss') }}</router-link>
</li>
<li class="tab">
<router-link class="tab-link" to="/admin/reports/expenses">{{ $t('reports.expenses.expenses') }}</router-link>
</li>
<li class="tab">
<router-link class="tab-link" to="/admin/reports/taxes">{{ $t('reports.taxes.taxes') }}</router-link>
</li>
</ul>
</div>
<!-- Tabs -->
<sw-tabs>
<sw-tab-item
:title="$t('reports.sales.sales')"
route="/admin/reports/sales"
>
</sw-tab-item>
<sw-tab-item
:title="$t('reports.profit_loss.profit_loss')"
route="/admin/reports/profit-loss"
>
</sw-tab-item>
<sw-tab-item
:title="$t('reports.expenses.expenses')"
route="/admin/reports/expenses"
>
</sw-tab-item>
<sw-tab-item
:title="$t('reports.taxes.taxes')"
route="/admin/reports/taxes"
>
</sw-tab-item>
</sw-tabs>
</div>
<transition
name="fade"
mode="out-in">
<router-view ref="report"/>
<transition name="fade" mode="out-in">
<div
v-if="activeTab === 'SALES' || 'PROFIT_LOSS' || 'EXPENSES' || 'TAXES'"
>
<router-view ref="report" />
</div>
</transition>
</div>
</base-page>
</template>
<script>
import { DownloadIcon } from '@vue-hero-icons/solid'
export default {
components: {
DownloadIcon,
},
data() {
return {
activeTab: 'SALES',
}
},
watch: {
'$route.path' (newValue) {
'$route.path'(newValue) {
if (newValue === '/admin/reports') {
this.$router.push('/admin/reports/sales')
}
}
},
},
created () {
created() {
if (this.$route.path === '/admin/reports') {
this.$router.push('/admin/reports/sales')
}
},
methods: {
onDownload () {
onDownload() {
this.$refs.report.downloadReport()
}
}
},
setActiveTab(val) {
this.activeTab = val
},
},
}
</script>
@ -83,6 +98,6 @@ export default {
.tab-link {
padding: 10px 30px;
display: block
display: block;
}
</style>