mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-31 05:31:10 -04:00
init crater
This commit is contained in:
Mohit Panjwani
201
resources/assets/js/views/reports/ExpensesReport.vue
Normal file
201
resources/assets/js/views/reports/ExpensesReport.vue
Normal file
@ -0,0 +1,201 @@
|
||||
<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
|
||||
v-model="selectedRange"
|
||||
:options="dateRange"
|
||||
:allow-empty="false"
|
||||
:show-labels="false"
|
||||
@input="onChangeDateRange"
|
||||
/>
|
||||
<span v-if="$v.range.$error && !$v.range.required" class="text-danger"> {{ $t('validation.required') }} </span>
|
||||
</div>
|
||||
</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>
|
||||
<base-date-picker
|
||||
v-model="formData.from_date"
|
||||
:invalid="$v.formData.from_date.$error"
|
||||
:calendar-button="true"
|
||||
calendar-button-icon="calendar"
|
||||
@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>
|
||||
<base-date-picker
|
||||
v-model="formData.to_date"
|
||||
:invalid="$v.formData.to_date.$error"
|
||||
:calendar-button="true"
|
||||
calendar-button-icon="calendar"
|
||||
@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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8 reports-tab-container">
|
||||
<iframe :src="getReportUrl" class="reports-frame-style"/>
|
||||
<a :href="getReportUrl" class="base-button btn btn-primary btn-lg report-view-button" target="_blank">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import moment from 'moment'
|
||||
import { validationMixin } from 'vuelidate'
|
||||
const { required } = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
mixins: [validationMixin],
|
||||
data () {
|
||||
return {
|
||||
range: new Date(),
|
||||
dateRange: [
|
||||
'Today',
|
||||
'This Week',
|
||||
'This Month',
|
||||
'This Quarter',
|
||||
'This Year',
|
||||
'Previous Week',
|
||||
'Previous Month',
|
||||
'Previous Quarter',
|
||||
'Previous Year',
|
||||
'Custom'
|
||||
],
|
||||
selectedRange: 'This Month',
|
||||
formData: {
|
||||
from_date: moment().startOf('month').toString(),
|
||||
to_date: moment().endOf('month').toString()
|
||||
},
|
||||
url: null,
|
||||
siteURL: null
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
range: {
|
||||
required
|
||||
},
|
||||
formData: {
|
||||
from_date: {
|
||||
required
|
||||
},
|
||||
to_date: {
|
||||
required
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('company', [
|
||||
'getSelectedCompany'
|
||||
]),
|
||||
getReportUrl () {
|
||||
return this.url
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
range (newRange) {
|
||||
this.formData.from_date = moment(newRange).startOf('year').toString()
|
||||
this.formData.to_date = moment(newRange).endOf('year').toString()
|
||||
}
|
||||
},
|
||||
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')}`
|
||||
},
|
||||
methods: {
|
||||
getThisDate (type, time) {
|
||||
return moment()[type](time).toString()
|
||||
},
|
||||
getPreDate (type, time) {
|
||||
return moment().subtract(1, time)[type](time).toString()
|
||||
},
|
||||
onChangeDateRange () {
|
||||
switch (this.selectedRange) {
|
||||
case 'Today':
|
||||
this.formData.from_date = moment().toString()
|
||||
this.formData.to_date = moment().toString()
|
||||
break
|
||||
|
||||
case 'This Week':
|
||||
this.formData.from_date = this.getThisDate('startOf', 'isoWeek')
|
||||
this.formData.to_date = this.getThisDate('endOf', 'isoWeek')
|
||||
break
|
||||
|
||||
case 'This Month':
|
||||
this.formData.from_date = this.getThisDate('startOf', 'month')
|
||||
this.formData.to_date = this.getThisDate('endOf', 'month')
|
||||
break
|
||||
|
||||
case 'This Quarter':
|
||||
this.formData.from_date = this.getThisDate('startOf', 'quarter')
|
||||
this.formData.to_date = this.getThisDate('endOf', 'quarter')
|
||||
break
|
||||
|
||||
case 'This Year':
|
||||
this.formData.from_date = this.getThisDate('startOf', 'year')
|
||||
this.formData.to_date = this.getThisDate('endOf', 'year')
|
||||
break
|
||||
|
||||
case 'Previous Week':
|
||||
this.formData.from_date = this.getPreDate('startOf', 'isoWeek')
|
||||
this.formData.to_date = this.getPreDate('endOf', 'isoWeek')
|
||||
break
|
||||
|
||||
case 'Previous Month':
|
||||
this.formData.from_date = this.getPreDate('startOf', 'month')
|
||||
this.formData.to_date = this.getPreDate('endOf', 'month')
|
||||
break
|
||||
|
||||
case 'Previous Quarter':
|
||||
this.formData.from_date = this.getPreDate('startOf', 'quarter')
|
||||
this.formData.to_date = this.getPreDate('endOf', 'quarter')
|
||||
break
|
||||
|
||||
case 'Previous Year':
|
||||
this.formData.from_date = this.getPreDate('startOf', 'year')
|
||||
this.formData.to_date = this.getPreDate('endOf', 'year')
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
setRangeToCustom () {
|
||||
this.selectedRange = 'Custom'
|
||||
},
|
||||
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')}`
|
||||
return true
|
||||
},
|
||||
downloadReport () {
|
||||
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')}`
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
205
resources/assets/js/views/reports/ProfitLossReport.vue
Normal file
205
resources/assets/js/views/reports/ProfitLossReport.vue
Normal file
@ -0,0 +1,205 @@
|
||||
<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
|
||||
v-model="selectedRange"
|
||||
:options="dateRange"
|
||||
:allow-empty="false"
|
||||
:show-labels="false"
|
||||
@input="onChangeDateRange"
|
||||
/>
|
||||
<span v-if="$v.range.$error && !$v.range.required" class="text-danger"> {{ $t('validation.required') }} </span>
|
||||
</div>
|
||||
</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>
|
||||
<base-date-picker
|
||||
v-model="formData.from_date"
|
||||
:invalid="$v.formData.from_date.$error"
|
||||
:calendar-button="true"
|
||||
calendar-button-icon="calendar"
|
||||
@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>
|
||||
<base-date-picker
|
||||
v-model="formData.to_date"
|
||||
:invalid="$v.formData.to_date.$error"
|
||||
:calendar-button="true"
|
||||
calendar-button-icon="calendar"
|
||||
@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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8 reports-tab-container">
|
||||
<iframe :src="getReportUrl" class="reports-frame-style"/>
|
||||
<a :href="getReportUrl" class="base-button btn btn-primary btn-lg report-view-button" target="_blank">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
import moment from 'moment'
|
||||
import { validationMixin } from 'vuelidate'
|
||||
const { required } = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
mixins: [validationMixin],
|
||||
data () {
|
||||
return {
|
||||
dateRange: [
|
||||
'Today',
|
||||
'This Week',
|
||||
'This Month',
|
||||
'This Quarter',
|
||||
'This Year',
|
||||
'Previous Week',
|
||||
'Previous Month',
|
||||
'Previous Quarter',
|
||||
'Previous Year',
|
||||
'Custom'
|
||||
],
|
||||
selectedRange: 'This Month',
|
||||
range: new Date(),
|
||||
formData: {
|
||||
from_date: moment().startOf('month').toString(),
|
||||
to_date: moment().endOf('month').toString()
|
||||
},
|
||||
url: null,
|
||||
siteURL: null
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
range: {
|
||||
required
|
||||
},
|
||||
formData: {
|
||||
from_date: {
|
||||
required
|
||||
},
|
||||
to_date: {
|
||||
required
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('company', [
|
||||
'getSelectedCompany'
|
||||
]),
|
||||
getReportUrl () {
|
||||
return this.url
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
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')
|
||||
},
|
||||
methods: {
|
||||
...mapActions('profitLossReport',[
|
||||
'loadProfitLossLink'
|
||||
]),
|
||||
getThisDate (type, time) {
|
||||
return moment()[type](time).toString()
|
||||
},
|
||||
getPreDate (type, time) {
|
||||
return moment().subtract(1, time)[type](time).toString()
|
||||
},
|
||||
onChangeDateRange () {
|
||||
switch (this.selectedRange) {
|
||||
case 'Today':
|
||||
this.formData.from_date = moment().toString()
|
||||
this.formData.to_date = moment().toString()
|
||||
break
|
||||
|
||||
case 'This Week':
|
||||
this.formData.from_date = this.getThisDate('startOf', 'isoWeek')
|
||||
this.formData.to_date = this.getThisDate('endOf', 'isoWeek')
|
||||
break
|
||||
|
||||
case 'This Month':
|
||||
this.formData.from_date = this.getThisDate('startOf', 'month')
|
||||
this.formData.to_date = this.getThisDate('endOf', 'month')
|
||||
break
|
||||
|
||||
case 'This Quarter':
|
||||
this.formData.from_date = this.getThisDate('startOf', 'quarter')
|
||||
this.formData.to_date = this.getThisDate('endOf', 'quarter')
|
||||
break
|
||||
|
||||
case 'This Year':
|
||||
this.formData.from_date = this.getThisDate('startOf', 'year')
|
||||
this.formData.to_date = this.getThisDate('endOf', 'year')
|
||||
break
|
||||
|
||||
case 'Previous Week':
|
||||
this.formData.from_date = this.getPreDate('startOf', 'isoWeek')
|
||||
this.formData.to_date = this.getPreDate('endOf', 'isoWeek')
|
||||
break
|
||||
|
||||
case 'Previous Month':
|
||||
this.formData.from_date = this.getPreDate('startOf', 'month')
|
||||
this.formData.to_date = this.getPreDate('endOf', 'month')
|
||||
break
|
||||
|
||||
case 'Previous Quarter':
|
||||
this.formData.from_date = this.getPreDate('startOf', 'quarter')
|
||||
this.formData.to_date = this.getPreDate('endOf', 'quarter')
|
||||
break
|
||||
|
||||
case 'Previous Year':
|
||||
this.formData.from_date = this.getPreDate('startOf', 'year')
|
||||
this.formData.to_date = this.getPreDate('endOf', 'year')
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
setRangeToCustom () {
|
||||
this.selectedRange = 'Custom'
|
||||
},
|
||||
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')}`
|
||||
return true
|
||||
},
|
||||
downloadReport () {
|
||||
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')}`
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
248
resources/assets/js/views/reports/SalesReports.vue
Normal file
248
resources/assets/js/views/reports/SalesReports.vue
Normal file
@ -0,0 +1,248 @@
|
||||
<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-date-picker
|
||||
v-model="range"
|
||||
:invalid="$v.range.$error"
|
||||
format="yyyy"
|
||||
minimum-view="year"
|
||||
@change="$v.range.$touch()"
|
||||
/> -->
|
||||
<base-select
|
||||
v-model="selectedRange"
|
||||
:options="dateRange"
|
||||
:allow-empty="false"
|
||||
:show-labels="false"
|
||||
@input="onChangeDateRange"
|
||||
/>
|
||||
<span v-if="$v.range.$error && !$v.range.required" class="text-danger"> {{ $t('validation.required') }} </span>
|
||||
</div>
|
||||
</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>
|
||||
<base-date-picker
|
||||
v-model="formData.from_date"
|
||||
:invalid="$v.formData.from_date.$error"
|
||||
:calendar-button="true"
|
||||
calendar-button-icon="calendar"
|
||||
@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>
|
||||
<base-date-picker
|
||||
v-model="formData.to_date"
|
||||
:invalid="$v.formData.to_date.$error"
|
||||
:calendar-button="true"
|
||||
calendar-button-icon="calendar"
|
||||
@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>
|
||||
</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
|
||||
v-model="selectedType"
|
||||
:options="reportTypes"
|
||||
:allow-empty="false"
|
||||
:show-labels="false"
|
||||
: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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8 reports-tab-container">
|
||||
<iframe :src="getReportUrl" class="reports-frame-style"/>
|
||||
<a :href="getReportUrl" class="base-button btn btn-primary btn-lg report-view-button" target="_blank">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import moment from 'moment'
|
||||
import { validationMixin } from 'vuelidate'
|
||||
const { required } = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
mixins: [validationMixin],
|
||||
data () {
|
||||
return {
|
||||
reportTypes: ['By Customer', 'By Item'],
|
||||
selectedType: 'By Customer',
|
||||
dateRange: [
|
||||
'Today',
|
||||
'This Week',
|
||||
'This Month',
|
||||
'This Quarter',
|
||||
'This Year',
|
||||
'Previous Week',
|
||||
'Previous Month',
|
||||
'Previous Quarter',
|
||||
'Previous Year',
|
||||
'Custom'
|
||||
],
|
||||
selectedRange: 'This Month',
|
||||
range: new Date(),
|
||||
formData: {
|
||||
from_date: moment().startOf('month').toString(),
|
||||
to_date: moment().endOf('month').toString()
|
||||
},
|
||||
url: null,
|
||||
customerSiteURL: null,
|
||||
itemsSiteURL: null
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
range: {
|
||||
required
|
||||
},
|
||||
formData: {
|
||||
from_date: {
|
||||
required
|
||||
},
|
||||
to_date: {
|
||||
required
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('company', [
|
||||
'getSelectedCompany'
|
||||
]),
|
||||
getReportUrl () {
|
||||
return this.url
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
range (newRange) {
|
||||
this.formData.from_date = moment(newRange).startOf('year').toString()
|
||||
this.formData.to_date = moment(newRange).endOf('year').toString()
|
||||
}
|
||||
},
|
||||
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) {
|
||||
return moment()[type](time).toString()
|
||||
},
|
||||
getPreDate (type, time) {
|
||||
return moment().subtract(1, time)[type](time).toString()
|
||||
},
|
||||
onChangeDateRange () {
|
||||
switch (this.selectedRange) {
|
||||
case 'Today':
|
||||
this.formData.from_date = moment().toString()
|
||||
this.formData.to_date = moment().toString()
|
||||
break
|
||||
|
||||
case 'This Week':
|
||||
this.formData.from_date = this.getThisDate('startOf', 'isoWeek')
|
||||
this.formData.to_date = this.getThisDate('endOf', 'isoWeek')
|
||||
break
|
||||
|
||||
case 'This Month':
|
||||
this.formData.from_date = this.getThisDate('startOf', 'month')
|
||||
this.formData.to_date = this.getThisDate('endOf', 'month')
|
||||
break
|
||||
|
||||
case 'This Quarter':
|
||||
this.formData.from_date = this.getThisDate('startOf', 'quarter')
|
||||
this.formData.to_date = this.getThisDate('endOf', 'quarter')
|
||||
break
|
||||
|
||||
case 'This Year':
|
||||
this.formData.from_date = this.getThisDate('startOf', 'year')
|
||||
this.formData.to_date = this.getThisDate('endOf', 'year')
|
||||
break
|
||||
|
||||
case 'Previous Week':
|
||||
this.formData.from_date = this.getPreDate('startOf', 'isoWeek')
|
||||
this.formData.to_date = this.getPreDate('endOf', 'isoWeek')
|
||||
break
|
||||
|
||||
case 'Previous Month':
|
||||
this.formData.from_date = this.getPreDate('startOf', 'month')
|
||||
this.formData.to_date = this.getPreDate('endOf', 'month')
|
||||
break
|
||||
|
||||
case 'Previous Quarter':
|
||||
this.formData.from_date = this.getPreDate('startOf', 'quarter')
|
||||
this.formData.to_date = this.getPreDate('endOf', 'quarter')
|
||||
break
|
||||
|
||||
case 'Previous Year':
|
||||
this.formData.from_date = this.getPreDate('startOf', 'year')
|
||||
this.formData.to_date = this.getPreDate('endOf', 'year')
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
setRangeToCustom () {
|
||||
this.selectedRange = 'Custom'
|
||||
},
|
||||
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')}`
|
||||
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')}`
|
||||
return true
|
||||
},
|
||||
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')}`
|
||||
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')}`
|
||||
return true
|
||||
},
|
||||
downloadReport () {
|
||||
this.url += '&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')}`
|
||||
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')}`
|
||||
return true
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
201
resources/assets/js/views/reports/TaxReport.vue
Normal file
201
resources/assets/js/views/reports/TaxReport.vue
Normal file
@ -0,0 +1,201 @@
|
||||
<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
|
||||
v-model="selectedRange"
|
||||
:options="dateRange"
|
||||
:allow-empty="false"
|
||||
:show-labels="false"
|
||||
@input="onChangeDateRange"
|
||||
/>
|
||||
<span v-if="$v.range.$error && !$v.range.required" class="text-danger"> {{ $t('validation.required') }} </span>
|
||||
</div>
|
||||
</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>
|
||||
<base-date-picker
|
||||
v-model="formData.from_date"
|
||||
:invalid="$v.formData.from_date.$error"
|
||||
:calendar-button="true"
|
||||
calendar-button-icon="calendar"
|
||||
@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>
|
||||
<base-date-picker
|
||||
v-model="formData.to_date"
|
||||
:invalid="$v.formData.to_date.$error"
|
||||
:calendar-button="true"
|
||||
calendar-button-icon="calendar"
|
||||
@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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8 reports-tab-container">
|
||||
<iframe :src="getReportUrl" class="reports-frame-style"/>
|
||||
<a :href="getReportUrl" class="base-button btn btn-primary btn-lg report-view-button" target="_blank">
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import moment from 'moment'
|
||||
import { validationMixin } from 'vuelidate'
|
||||
const { required } = require('vuelidate/lib/validators')
|
||||
|
||||
export default {
|
||||
mixins: [validationMixin],
|
||||
data () {
|
||||
return {
|
||||
dateRange: [
|
||||
'Today',
|
||||
'This Week',
|
||||
'This Month',
|
||||
'This Quarter',
|
||||
'This Year',
|
||||
'Previous Week',
|
||||
'Previous Month',
|
||||
'Previous Quarter',
|
||||
'Previous Year',
|
||||
'Custom'
|
||||
],
|
||||
selectedRange: 'This Month',
|
||||
range: new Date(),
|
||||
formData: {
|
||||
from_date: moment().startOf('month').toString(),
|
||||
to_date: moment().endOf('month').toString()
|
||||
},
|
||||
url: null,
|
||||
siteURL: null
|
||||
}
|
||||
},
|
||||
validations: {
|
||||
range: {
|
||||
required
|
||||
},
|
||||
formData: {
|
||||
from_date: {
|
||||
required
|
||||
},
|
||||
to_date: {
|
||||
required
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('company', [
|
||||
'getSelectedCompany'
|
||||
]),
|
||||
getReportUrl () {
|
||||
return this.url
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
range (newRange) {
|
||||
this.formData.from_date = moment(newRange).startOf('year').toString()
|
||||
this.formData.to_date = moment(newRange).endOf('year').toString()
|
||||
}
|
||||
},
|
||||
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')}`
|
||||
},
|
||||
methods: {
|
||||
getThisDate (type, time) {
|
||||
return moment()[type](time).toString()
|
||||
},
|
||||
getPreDate (type, time) {
|
||||
return moment().subtract(1, time)[type](time).toString()
|
||||
},
|
||||
onChangeDateRange () {
|
||||
switch (this.selectedRange) {
|
||||
case 'Today':
|
||||
this.formData.from_date = moment().toString()
|
||||
this.formData.to_date = moment().toString()
|
||||
break
|
||||
|
||||
case 'This Week':
|
||||
this.formData.from_date = this.getThisDate('startOf', 'isoWeek')
|
||||
this.formData.to_date = this.getThisDate('endOf', 'isoWeek')
|
||||
break
|
||||
|
||||
case 'This Month':
|
||||
this.formData.from_date = this.getThisDate('startOf', 'month')
|
||||
this.formData.to_date = this.getThisDate('endOf', 'month')
|
||||
break
|
||||
|
||||
case 'This Quarter':
|
||||
this.formData.from_date = this.getThisDate('startOf', 'quarter')
|
||||
this.formData.to_date = this.getThisDate('endOf', 'quarter')
|
||||
break
|
||||
|
||||
case 'This Year':
|
||||
this.formData.from_date = this.getThisDate('startOf', 'year')
|
||||
this.formData.to_date = this.getThisDate('endOf', 'year')
|
||||
break
|
||||
|
||||
case 'Previous Week':
|
||||
this.formData.from_date = this.getPreDate('startOf', 'isoWeek')
|
||||
this.formData.to_date = this.getPreDate('endOf', 'isoWeek')
|
||||
break
|
||||
|
||||
case 'Previous Month':
|
||||
this.formData.from_date = this.getPreDate('startOf', 'month')
|
||||
this.formData.to_date = this.getPreDate('endOf', 'month')
|
||||
break
|
||||
|
||||
case 'Previous Quarter':
|
||||
this.formData.from_date = this.getPreDate('startOf', 'quarter')
|
||||
this.formData.to_date = this.getPreDate('endOf', 'quarter')
|
||||
break
|
||||
|
||||
case 'Previous Year':
|
||||
this.formData.from_date = this.getPreDate('startOf', 'year')
|
||||
this.formData.to_date = this.getPreDate('endOf', 'year')
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
setRangeToCustom () {
|
||||
this.selectedRange = 'Custom'
|
||||
},
|
||||
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')}`
|
||||
return true
|
||||
},
|
||||
downloadReport () {
|
||||
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')}`
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
87
resources/assets/js/views/reports/layout/Index.vue
Normal file
87
resources/assets/js/views/reports/layout/Index.vue
Normal file
@ -0,0 +1,87 @@
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
<transition
|
||||
name="fade"
|
||||
mode="out-in">
|
||||
<router-view ref="report"/>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
watch: {
|
||||
'$route.path' (newValue) {
|
||||
if (newValue === '/admin/reports') {
|
||||
this.$router.push('/admin/reports/sales')
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (this.$route.path === '/admin/reports') {
|
||||
this.$router.push('/admin/reports/sales')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onDownload () {
|
||||
this.$refs.report.downloadReport()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tab {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.tab-link {
|
||||
padding: 10px 30px;
|
||||
display: block
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user