mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-28 20:21:10 -04:00
v6 update
This commit is contained in:
Mohit Panjwani
230
resources/scripts/admin/views/reports/ExpensesReport.vue
Normal file
230
resources/scripts/admin/views/reports/ExpensesReport.vue
Normal file
@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div class="grid gap-8 md:grid-cols-12 pt-10">
|
||||
<div class="col-span-8 md:col-span-4">
|
||||
<BaseInputGroup
|
||||
:label="$t('reports.sales.date_range')"
|
||||
class="col-span-12 md:col-span-8"
|
||||
>
|
||||
<BaseMultiselect
|
||||
v-model="selectedRange"
|
||||
:options="dateRange"
|
||||
@update:modelValue="onChangeDateRange"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<div class="flex flex-col mt-6 lg:space-x-3 lg:flex-row">
|
||||
<BaseInputGroup :label="$t('reports.expenses.from_date')">
|
||||
<BaseDatePicker v-model="formData.from_date" />
|
||||
</BaseInputGroup>
|
||||
|
||||
<div
|
||||
class="
|
||||
hidden
|
||||
w-5
|
||||
h-0
|
||||
mx-4
|
||||
border border-gray-400 border-solid
|
||||
xl:block
|
||||
"
|
||||
style="margin-top: 2.5rem"
|
||||
/>
|
||||
|
||||
<BaseInputGroup :label="$t('reports.expenses.to_date')">
|
||||
<BaseDatePicker v-model="formData.to_date" />
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<BaseButton
|
||||
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') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<div class="col-span-8">
|
||||
<iframe
|
||||
:src="getReportUrl"
|
||||
class="
|
||||
hidden
|
||||
w-full
|
||||
h-screen h-screen-ios
|
||||
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
|
||||
rounded
|
||||
whitespace-nowrap
|
||||
md:hidden
|
||||
bg-primary-500
|
||||
cursor-pointer
|
||||
"
|
||||
@click="viewReportsPDF"
|
||||
>
|
||||
<BaseIcon name="DocumentTextIcon" class="h-5 mr-2" />
|
||||
<span>{{ $t('reports.view_pdf') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch, reactive } from 'vue'
|
||||
import moment from 'moment'
|
||||
import { useCompanyStore } from '@/scripts/admin/stores/company'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useGlobalStore } from '@/scripts/admin/stores/global'
|
||||
const globalStore = useGlobalStore()
|
||||
const companyStore = useCompanyStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
globalStore.downloadReport = downloadReport
|
||||
|
||||
const dateRange = reactive([
|
||||
t('dateRange.today'),
|
||||
t('dateRange.this_week'),
|
||||
t('dateRange.this_month'),
|
||||
t('dateRange.this_quarter'),
|
||||
t('dateRange.this_year'),
|
||||
t('dateRange.previous_week'),
|
||||
t('dateRange.previous_month'),
|
||||
t('dateRange.previous_quarter'),
|
||||
t('dateRange.previous_year'),
|
||||
t('dateRange.custom'),
|
||||
])
|
||||
|
||||
const selectedRange = ref(t('dateRange.this_month'))
|
||||
let range = ref(new Date())
|
||||
let url = ref(null)
|
||||
let siteURL = ref(null)
|
||||
|
||||
const formData = reactive({
|
||||
from_date: moment().startOf('month').toString(),
|
||||
to_date: moment().endOf('month').toString(),
|
||||
})
|
||||
|
||||
const getReportUrl = computed(() => {
|
||||
return url.value
|
||||
})
|
||||
|
||||
const getSelectedCompany = computed(() => {
|
||||
return companyStore.selectedCompany
|
||||
})
|
||||
|
||||
const dateRangeUrl = computed(() => {
|
||||
return `${siteURL.value}?from_date=${moment(formData.from_date).format(
|
||||
'YYYY-MM-DD'
|
||||
)}&to_date=${moment(formData.to_date).format('YYYY-MM-DD')}`
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
siteURL.value = `/reports/expenses/${getSelectedCompany.value.unique_hash}`
|
||||
url.value = dateRangeUrl.value
|
||||
})
|
||||
|
||||
watch(
|
||||
() => range,
|
||||
(newRange) => {
|
||||
formData.from_date = moment(newRange).startOf('year').toString()
|
||||
formData.to_date = moment(newRange).endOf('year').toString()
|
||||
}
|
||||
)
|
||||
|
||||
function getThisDate(type, time) {
|
||||
return moment()[type](time).format('YYYY-MM-DD')
|
||||
}
|
||||
|
||||
function getPreDate(type, time) {
|
||||
return moment().subtract(1, time)[type](time).format('YYYY-MM-DD')
|
||||
}
|
||||
|
||||
function onChangeDateRange() {
|
||||
switch (selectedRange.value) {
|
||||
case 'Today':
|
||||
formData.from_date = moment().format('YYYY-MM-DD')
|
||||
formData.to_date = moment().format('YYYY-MM-DD')
|
||||
break
|
||||
|
||||
case 'This Week':
|
||||
formData.from_date = getThisDate('startOf', 'isoWeek')
|
||||
formData.to_date = getThisDate('endOf', 'isoWeek')
|
||||
break
|
||||
|
||||
case 'This Month':
|
||||
formData.from_date = getThisDate('startOf', 'month')
|
||||
formData.to_date = getThisDate('endOf', 'month')
|
||||
break
|
||||
|
||||
case 'This Quarter':
|
||||
formData.from_date = getThisDate('startOf', 'quarter')
|
||||
formData.to_date = getThisDate('endOf', 'quarter')
|
||||
break
|
||||
|
||||
case 'This Year':
|
||||
formData.from_date = getThisDate('startOf', 'year')
|
||||
formData.to_date = getThisDate('endOf', 'year')
|
||||
break
|
||||
|
||||
case 'Previous Week':
|
||||
formData.from_date = getPreDate('startOf', 'isoWeek')
|
||||
formData.to_date = getPreDate('endOf', 'isoWeek')
|
||||
break
|
||||
|
||||
case 'Previous Month':
|
||||
formData.from_date = getPreDate('startOf', 'month')
|
||||
formData.to_date = getPreDate('endOf', 'month')
|
||||
break
|
||||
|
||||
case 'Previous Quarter':
|
||||
formData.from_date = getPreDate('startOf', 'quarter')
|
||||
formData.to_date = getPreDate('endOf', 'quarter')
|
||||
break
|
||||
|
||||
case 'Previous Year':
|
||||
formData.from_date = getPreDate('startOf', 'year')
|
||||
formData.to_date = getPreDate('endOf', 'year')
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
async function viewReportsPDF() {
|
||||
let data = await getReports()
|
||||
window.open(getReportUrl.value, '_blank')
|
||||
return data
|
||||
}
|
||||
|
||||
function getReports() {
|
||||
url.value = dateRangeUrl.value
|
||||
return true
|
||||
}
|
||||
|
||||
function downloadReport() {
|
||||
if (!getReports()) {
|
||||
return false
|
||||
}
|
||||
|
||||
window.open(getReportUrl.value + '&download=true')
|
||||
setTimeout(() => {
|
||||
url.value = dateRangeUrl.value
|
||||
}, 200)
|
||||
}
|
||||
</script>
|
||||
224
resources/scripts/admin/views/reports/ProfitLossReport.vue
Normal file
224
resources/scripts/admin/views/reports/ProfitLossReport.vue
Normal file
@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div class="grid gap-8 md:grid-cols-12 pt-10">
|
||||
<div class="col-span-8 md:col-span-4">
|
||||
<BaseInputGroup
|
||||
:label="$t('reports.profit_loss.date_range')"
|
||||
class="col-span-12 md:col-span-8"
|
||||
>
|
||||
<BaseMultiselect
|
||||
v-model="selectedRange"
|
||||
:options="dateRange"
|
||||
@update:modelValue="onChangeDateRange"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<div class="flex flex-col mt-6 lg:space-x-3 lg:flex-row">
|
||||
<BaseInputGroup :label="$t('reports.profit_loss.from_date')">
|
||||
<BaseDatePicker v-model="formData.from_date" />
|
||||
</BaseInputGroup>
|
||||
|
||||
<div
|
||||
class="
|
||||
hidden
|
||||
w-5
|
||||
h-0
|
||||
mx-4
|
||||
border border-gray-400 border-solid
|
||||
xl:block
|
||||
"
|
||||
style="margin-top: 2.5rem"
|
||||
/>
|
||||
|
||||
<BaseInputGroup :label="$t('reports.profit_loss.to_date')">
|
||||
<BaseDatePicker v-model="formData.to_date" />
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<BaseButton
|
||||
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') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<div class="col-span-8">
|
||||
<iframe
|
||||
:src="getReportUrl"
|
||||
class="
|
||||
hidden
|
||||
w-full
|
||||
h-screen h-screen-ios
|
||||
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
|
||||
rounded
|
||||
whitespace-nowrap
|
||||
md:hidden
|
||||
bg-primary-500
|
||||
"
|
||||
@click="viewReportsPDF"
|
||||
>
|
||||
<BaseIcon name="DocumentTextIcon" class="h-5 mr-2" />
|
||||
<span>{{ $t('reports.view_pdf') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch, reactive } from 'vue'
|
||||
import moment from 'moment'
|
||||
import { useCompanyStore } from '@/scripts/admin/stores/company'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useGlobalStore } from '@/scripts/admin/stores/global'
|
||||
const globalStore = useGlobalStore()
|
||||
const companyStore = useCompanyStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
globalStore.downloadReport = downloadReport
|
||||
|
||||
const dateRange = reactive([
|
||||
t('dateRange.today'),
|
||||
t('dateRange.this_week'),
|
||||
t('dateRange.this_month'),
|
||||
t('dateRange.this_quarter'),
|
||||
t('dateRange.this_year'),
|
||||
t('dateRange.previous_week'),
|
||||
t('dateRange.previous_month'),
|
||||
t('dateRange.previous_quarter'),
|
||||
t('dateRange.previous_year'),
|
||||
t('dateRange.custom'),
|
||||
])
|
||||
const selectedRange = ref(t('dateRange.this_month'))
|
||||
let url = ref(null)
|
||||
let siteURL = ref(null)
|
||||
let range = ref(new Date())
|
||||
|
||||
const formData = reactive({
|
||||
from_date: moment().startOf('month').toString(),
|
||||
to_date: moment().endOf('month').toString(),
|
||||
})
|
||||
|
||||
const getReportUrl = computed(() => {
|
||||
return url.value
|
||||
})
|
||||
|
||||
const getSelectedCompany = computed(() => {
|
||||
return companyStore.selectedCompany
|
||||
})
|
||||
|
||||
const dateRangeUrl = computed(() => {
|
||||
return `${siteURL.value}?from_date=${moment(formData.from_date).format(
|
||||
'YYYY-MM-DD'
|
||||
)}&to_date=${moment(formData.to_date).format('YYYY-MM-DD')}`
|
||||
})
|
||||
|
||||
watch(range, (newRange) => {
|
||||
formData.from_date = moment(newRange).startOf('year').toString()
|
||||
formData.to_date = moment(newRange).endOf('year').toString()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
siteURL.value = `/reports/profit-loss/${getSelectedCompany.value.unique_hash}`
|
||||
url.value = dateRangeUrl.value
|
||||
})
|
||||
|
||||
function getThisDate(type, time) {
|
||||
return moment()[type](time).format('YYYY-MM-DD')
|
||||
}
|
||||
|
||||
function getPreDate(type, time) {
|
||||
return moment().subtract(1, time)[type](time).format('YYYY-MM-DD')
|
||||
}
|
||||
|
||||
function onChangeDateRange() {
|
||||
switch (selectedRange.value) {
|
||||
case 'Today':
|
||||
formData.from_date = moment().format('YYYY-MM-DD')
|
||||
formData.to_date = moment().format('YYYY-MM-DD')
|
||||
break
|
||||
|
||||
case 'This Week':
|
||||
formData.from_date = getThisDate('startOf', 'isoWeek')
|
||||
formData.to_date = getThisDate('endOf', 'isoWeek')
|
||||
break
|
||||
|
||||
case 'This Month':
|
||||
formData.from_date = getThisDate('startOf', 'month')
|
||||
formData.to_date = getThisDate('endOf', 'month')
|
||||
break
|
||||
|
||||
case 'This Quarter':
|
||||
formData.from_date = getThisDate('startOf', 'quarter')
|
||||
formData.to_date = getThisDate('endOf', 'quarter')
|
||||
break
|
||||
|
||||
case 'This Year':
|
||||
formData.from_date = getThisDate('startOf', 'year')
|
||||
formData.to_date = getThisDate('endOf', 'year')
|
||||
break
|
||||
|
||||
case 'Previous Week':
|
||||
formData.from_date = getPreDate('startOf', 'isoWeek')
|
||||
formData.to_date = getPreDate('endOf', 'isoWeek')
|
||||
break
|
||||
|
||||
case 'Previous Month':
|
||||
formData.from_date = getPreDate('startOf', 'month')
|
||||
formData.to_date = getPreDate('endOf', 'month')
|
||||
break
|
||||
|
||||
case 'Previous Quarter':
|
||||
formData.from_date = getPreDate('startOf', 'quarter')
|
||||
formData.to_date = getPreDate('endOf', 'quarter')
|
||||
break
|
||||
|
||||
case 'Previous Year':
|
||||
formData.from_date = getPreDate('startOf', 'year')
|
||||
formData.to_date = getPreDate('endOf', 'year')
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
async function viewReportsPDF() {
|
||||
let data = await getReports()
|
||||
window.open(getReportUrl.value, '_blank')
|
||||
return data
|
||||
}
|
||||
|
||||
function getReports() {
|
||||
url.value = dateRangeUrl.value
|
||||
return true
|
||||
}
|
||||
|
||||
function downloadReport() {
|
||||
if (!getReports()) {
|
||||
return false
|
||||
}
|
||||
|
||||
window.open(getReportUrl.value + '&download=true')
|
||||
setTimeout(() => {
|
||||
url.value = dateRangeUrl.value
|
||||
}, 200)
|
||||
}
|
||||
</script>
|
||||
263
resources/scripts/admin/views/reports/SalesReports.vue
Normal file
263
resources/scripts/admin/views/reports/SalesReports.vue
Normal file
@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<div class="grid gap-8 md:grid-cols-12 pt-10">
|
||||
<div class="col-span-8 md:col-span-4">
|
||||
<BaseInputGroup
|
||||
:label="$t('reports.sales.date_range')"
|
||||
class="col-span-12 md:col-span-8"
|
||||
>
|
||||
<BaseMultiselect
|
||||
v-model="selectedRange"
|
||||
:options="dateRange"
|
||||
@update:modelValue="onChangeDateRange"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<div class="flex flex-col my-6 lg:space-x-3 lg:flex-row">
|
||||
<BaseInputGroup :label="$t('reports.sales.from_date')">
|
||||
<BaseDatePicker v-model="formData.from_date" />
|
||||
</BaseInputGroup>
|
||||
|
||||
<div
|
||||
class="
|
||||
hidden
|
||||
w-5
|
||||
h-0
|
||||
mx-4
|
||||
border border-gray-400 border-solid
|
||||
xl:block
|
||||
"
|
||||
style="margin-top: 2.5rem"
|
||||
/>
|
||||
|
||||
<BaseInputGroup :label="$t('reports.sales.to_date')">
|
||||
<BaseDatePicker v-model="formData.to_date" />
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('reports.sales.report_type')"
|
||||
class="col-span-12 md:col-span-8"
|
||||
>
|
||||
<BaseMultiselect
|
||||
v-model="selectedType"
|
||||
:options="reportTypes"
|
||||
:placeholder="$t('reports.sales.report_type')"
|
||||
class="mt-1"
|
||||
@update:modelValue="getInitialReport"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseButton
|
||||
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') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<div class="col-span-8">
|
||||
<iframe
|
||||
:src="getReportUrl"
|
||||
class="
|
||||
hidden
|
||||
w-full
|
||||
h-screen h-screen-ios
|
||||
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
|
||||
rounded
|
||||
whitespace-nowrap
|
||||
md:hidden
|
||||
bg-primary-500
|
||||
"
|
||||
@click="viewReportsPDF"
|
||||
>
|
||||
<BaseIcon name="DocumentTextIcon" class="h-5 mr-2" />
|
||||
<span>{{ $t('reports.view_pdf') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch, reactive } from 'vue'
|
||||
import moment from 'moment'
|
||||
import { useCompanyStore } from '@/scripts/admin/stores/company'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useGlobalStore } from '@/scripts/admin/stores/global'
|
||||
|
||||
const { t } = useI18n()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
globalStore.downloadReport = downloadReport
|
||||
|
||||
const dateRange = reactive([
|
||||
t('dateRange.today'),
|
||||
t('dateRange.this_week'),
|
||||
t('dateRange.this_month'),
|
||||
t('dateRange.this_quarter'),
|
||||
t('dateRange.this_year'),
|
||||
t('dateRange.previous_week'),
|
||||
t('dateRange.previous_month'),
|
||||
t('dateRange.previous_quarter'),
|
||||
t('dateRange.previous_year'),
|
||||
t('dateRange.custom'),
|
||||
])
|
||||
|
||||
const reportTypes = ref(['By Customer', 'By Item'])
|
||||
const selectedType = ref('By Customer')
|
||||
const selectedRange = ref(t('dateRange.this_month'))
|
||||
let range = ref(new Date())
|
||||
let url = ref(null)
|
||||
let customerSiteURL = ref(null)
|
||||
let itemsSiteURL = ref(null)
|
||||
|
||||
let formData = reactive({
|
||||
from_date: moment().startOf('month').format('YYYY-MM-DD').toString(),
|
||||
to_date: moment().endOf('month').format('YYYY-MM-DD').toString(),
|
||||
})
|
||||
|
||||
const companyStore = useCompanyStore()
|
||||
|
||||
const getReportUrl = computed(() => {
|
||||
return url.value
|
||||
})
|
||||
|
||||
const getSelectedCompany = computed(() => {
|
||||
return companyStore.selectedCompany
|
||||
})
|
||||
|
||||
const customerDateRangeUrl = computed(() => {
|
||||
return `${customerSiteURL.value}?from_date=${moment(
|
||||
formData.from_date
|
||||
).format('YYYY-MM-DD')}&to_date=${moment(formData.to_date).format(
|
||||
'YYYY-MM-DD'
|
||||
)}`
|
||||
})
|
||||
|
||||
const itemDaterangeUrl = computed(() => {
|
||||
return `${itemsSiteURL.value}?from_date=${moment(formData.from_date).format(
|
||||
'YYYY-MM-DD'
|
||||
)}&to_date=${moment(formData.to_date).format('YYYY-MM-DD')}`
|
||||
})
|
||||
|
||||
watch(range, (newRange) => {
|
||||
formData.from_date = moment(newRange).startOf('year').toString()
|
||||
formData.to_date = moment(newRange).endOf('year').toString()
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
customerSiteURL.value = `/reports/sales/customers/${getSelectedCompany.value.unique_hash}`
|
||||
itemsSiteURL.value = `/reports/sales/items/${getSelectedCompany.value.unique_hash}`
|
||||
getInitialReport()
|
||||
})
|
||||
|
||||
function getThisDate(type, time) {
|
||||
return moment()[type](time).format('YYYY-MM-DD')
|
||||
}
|
||||
|
||||
function getPreDate(type, time) {
|
||||
return moment().subtract(1, time)[type](time).format('YYYY-MM-DD')
|
||||
}
|
||||
|
||||
function onChangeDateRange() {
|
||||
switch (selectedRange.value) {
|
||||
case 'Today':
|
||||
formData.from_date = moment().format('YYYY-MM-DD')
|
||||
formData.to_date = moment().format('YYYY-MM-DD')
|
||||
break
|
||||
case 'This Week':
|
||||
formData.from_date = getThisDate('startOf', 'isoWeek')
|
||||
formData.to_date = getThisDate('endOf', 'isoWeek')
|
||||
break
|
||||
case 'This Month':
|
||||
formData.from_date = getThisDate('startOf', 'month')
|
||||
formData.to_date = getThisDate('endOf', 'month')
|
||||
break
|
||||
case 'This Quarter':
|
||||
formData.from_date = getThisDate('startOf', 'quarter')
|
||||
formData.to_date = getThisDate('endOf', 'quarter')
|
||||
break
|
||||
case 'This Year':
|
||||
formData.from_date = getThisDate('startOf', 'year')
|
||||
formData.to_date = getThisDate('endOf', 'year')
|
||||
break
|
||||
case 'Previous Week':
|
||||
formData.from_date = getPreDate('startOf', 'isoWeek')
|
||||
formData.to_date = getPreDate('endOf', 'isoWeek')
|
||||
break
|
||||
case 'Previous Month':
|
||||
formData.from_date = getPreDate('startOf', 'month')
|
||||
formData.to_date = getPreDate('endOf', 'month')
|
||||
break
|
||||
case 'Previous Quarter':
|
||||
formData.from_date = getPreDate('startOf', 'quarter')
|
||||
formData.to_date = getPreDate('endOf', 'quarter')
|
||||
break
|
||||
case 'Previous Year':
|
||||
formData.from_date = getPreDate('startOf', 'year')
|
||||
formData.to_date = getPreDate('endOf', 'year')
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
async function getInitialReport() {
|
||||
if (selectedType.value === 'By Customer') {
|
||||
url.value = customerDateRangeUrl.value
|
||||
return true
|
||||
}
|
||||
url.value = itemDaterangeUrl.value
|
||||
return true
|
||||
}
|
||||
|
||||
async function viewReportsPDF() {
|
||||
let data = await getReports()
|
||||
window.open(getReportUrl.value, '_blank')
|
||||
return data
|
||||
}
|
||||
|
||||
function getReports() {
|
||||
if (selectedType.value === 'By Customer') {
|
||||
url.value = customerDateRangeUrl.value
|
||||
return true
|
||||
}
|
||||
url.value = itemDaterangeUrl.value
|
||||
return true
|
||||
}
|
||||
|
||||
function downloadReport() {
|
||||
if (!getReports()) {
|
||||
return false
|
||||
}
|
||||
|
||||
window.open(getReportUrl.value + '&download=true')
|
||||
|
||||
setTimeout(() => {
|
||||
if (selectedType.value === 'By Customer') {
|
||||
url.value = customerDateRangeUrl.value
|
||||
return true
|
||||
}
|
||||
url.value = itemDaterangeUrl.value
|
||||
return true
|
||||
}, 200)
|
||||
}
|
||||
</script>
|
||||
228
resources/scripts/admin/views/reports/TaxReport.vue
Normal file
228
resources/scripts/admin/views/reports/TaxReport.vue
Normal file
@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="grid gap-8 md:grid-cols-12 pt-10">
|
||||
<div class="col-span-8 md:col-span-4">
|
||||
<BaseInputGroup
|
||||
:label="$t('reports.taxes.date_range')"
|
||||
class="col-span-12 md:col-span-8"
|
||||
>
|
||||
<BaseMultiselect
|
||||
v-model="selectedRange"
|
||||
:options="dateRange"
|
||||
@update:modelValue="onChangeDateRange"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<div class="flex flex-col mt-6 lg:space-x-3 lg:flex-row">
|
||||
<BaseInputGroup :label="$t('reports.taxes.from_date')">
|
||||
<BaseDatePicker v-model="formData.from_date" />
|
||||
</BaseInputGroup>
|
||||
|
||||
<div
|
||||
class="
|
||||
hidden
|
||||
w-5
|
||||
h-0
|
||||
mx-4
|
||||
border border-gray-400 border-solid
|
||||
xl:block
|
||||
"
|
||||
style="margin-top: 2.5rem"
|
||||
/>
|
||||
|
||||
<BaseInputGroup :label="$t('reports.taxes.to_date')">
|
||||
<BaseDatePicker v-model="formData.to_date" />
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
|
||||
<BaseButton
|
||||
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') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
<div class="col-span-8">
|
||||
<iframe
|
||||
:src="getReportUrl"
|
||||
class="
|
||||
hidden
|
||||
w-full
|
||||
h-screen h-screen-ios
|
||||
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
|
||||
rounded
|
||||
whitespace-nowrap
|
||||
md:hidden
|
||||
bg-primary-500
|
||||
"
|
||||
@click="viewReportsPDF"
|
||||
>
|
||||
<BaseIcon name="DocumentTextIcon" class="h-5 mr-2" />
|
||||
<span>{{ $t('reports.view_pdf') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, watch, reactive } from 'vue'
|
||||
import moment from 'moment'
|
||||
import { useCompanyStore } from '@/scripts/admin/stores/company'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useGlobalStore } from '@/scripts/admin/stores/global'
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
globalStore.downloadReport = downloadReport
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const dateRange = reactive([
|
||||
t('dateRange.today'),
|
||||
t('dateRange.this_week'),
|
||||
t('dateRange.this_month'),
|
||||
t('dateRange.this_quarter'),
|
||||
t('dateRange.this_year'),
|
||||
t('dateRange.previous_week'),
|
||||
t('dateRange.previous_month'),
|
||||
t('dateRange.previous_quarter'),
|
||||
t('dateRange.previous_year'),
|
||||
t('dateRange.custom'),
|
||||
])
|
||||
|
||||
const selectedRange = ref(t('dateRange.this_month'))
|
||||
|
||||
const formData = reactive({
|
||||
from_date: moment().startOf('month').format('YYYY-MM-DD').toString(),
|
||||
to_date: moment().endOf('month').format('YYYY-MM-DD').toString(),
|
||||
})
|
||||
|
||||
let url = ref(null)
|
||||
|
||||
const getReportUrl = computed(() => {
|
||||
return url.value
|
||||
})
|
||||
const companyStore = useCompanyStore()
|
||||
|
||||
const getSelectedCompany = computed(() => {
|
||||
return companyStore.selectedCompany
|
||||
})
|
||||
|
||||
let siteURL = ref(null)
|
||||
|
||||
onMounted(() => {
|
||||
siteURL.value = `/reports/tax-summary/${getSelectedCompany.value.unique_hash}`
|
||||
url.value = dateRangeUrl.value
|
||||
})
|
||||
|
||||
const dateRangeUrl = computed(() => {
|
||||
return `${siteURL.value}?from_date=${moment(formData.from_date).format(
|
||||
'YYYY-MM-DD'
|
||||
)}&to_date=${moment(formData.to_date).format('YYYY-MM-DD')}`
|
||||
})
|
||||
|
||||
let range = ref(new Date())
|
||||
|
||||
watch(range.value, (newRange) => {
|
||||
formData.from_date = moment(newRange).startOf('year').toString()
|
||||
formData.to_date = moment(newRange).endOf('year').toString()
|
||||
})
|
||||
|
||||
function getThisDate(type, time) {
|
||||
return moment()[type](time).format('YYYY-MM-DD')
|
||||
}
|
||||
|
||||
function getPreDate(type, time) {
|
||||
return moment().subtract(1, time)[type](time).format('YYYY-MM-DD')
|
||||
}
|
||||
|
||||
function onChangeDateRange() {
|
||||
switch (selectedRange.value) {
|
||||
case 'Today':
|
||||
formData.from_date = moment().format('YYYY-MM-DD')
|
||||
formData.to_date = moment().format('YYYY-MM-DD')
|
||||
break
|
||||
|
||||
case 'This Week':
|
||||
formData.from_date = getThisDate('startOf', 'isoWeek')
|
||||
formData.to_date = getThisDate('endOf', 'isoWeek')
|
||||
break
|
||||
|
||||
case 'This Month':
|
||||
formData.from_date = getThisDate('startOf', 'month')
|
||||
formData.to_date = getThisDate('endOf', 'month')
|
||||
break
|
||||
|
||||
case 'This Quarter':
|
||||
formData.from_date = getThisDate('startOf', 'quarter')
|
||||
formData.to_date = getThisDate('endOf', 'quarter')
|
||||
break
|
||||
|
||||
case 'This Year':
|
||||
formData.from_date = getThisDate('startOf', 'year')
|
||||
formData.to_date = getThisDate('endOf', 'year')
|
||||
break
|
||||
|
||||
case 'Previous Week':
|
||||
formData.from_date = getPreDate('startOf', 'isoWeek')
|
||||
formData.to_date = getPreDate('endOf', 'isoWeek')
|
||||
break
|
||||
|
||||
case 'Previous Month':
|
||||
formData.from_date = getPreDate('startOf', 'month')
|
||||
formData.to_date = getPreDate('endOf', 'month')
|
||||
break
|
||||
|
||||
case 'Previous Quarter':
|
||||
formData.from_date = getPreDate('startOf', 'quarter')
|
||||
formData.to_date = getPreDate('endOf', 'quarter')
|
||||
break
|
||||
|
||||
case 'Previous Year':
|
||||
formData.from_date = getPreDate('startOf', 'year')
|
||||
formData.to_date = getPreDate('endOf', 'year')
|
||||
break
|
||||
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
async function viewReportsPDF() {
|
||||
let data = await getReports()
|
||||
window.open(getReportUrl.value, '_blank')
|
||||
return data
|
||||
}
|
||||
|
||||
function getReports() {
|
||||
url.value = dateRangeUrl.value
|
||||
return true
|
||||
}
|
||||
|
||||
function downloadReport() {
|
||||
if (!getReports()) {
|
||||
return false
|
||||
}
|
||||
|
||||
window.open(getReportUrl.value + '&download=true')
|
||||
setTimeout(() => {
|
||||
url.value = dateRangeUrl.value
|
||||
}, 200)
|
||||
}
|
||||
</script>
|
||||
65
resources/scripts/admin/views/reports/layout/Index.vue
Normal file
65
resources/scripts/admin/views/reports/layout/Index.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<BasePage>
|
||||
<BasePageHeader :title="$tc('reports.report', 2)">
|
||||
<BaseBreadcrumb>
|
||||
<BaseBreadcrumbItem :title="$t('general.home')" to="/admin/dashboard" />
|
||||
<BaseBreadcrumbItem
|
||||
:title="$tc('reports.report', 2)"
|
||||
to="/admin/reports"
|
||||
active
|
||||
/>
|
||||
</BaseBreadcrumb>
|
||||
<template #actions>
|
||||
<BaseButton variant="primary" class="ml-4" @click="onDownload">
|
||||
<template #left="slotProps">
|
||||
<BaseIcon name="DownloadIcon" :class="slotProps.class" />
|
||||
</template>
|
||||
{{ $t('reports.download_pdf') }}
|
||||
</BaseButton>
|
||||
</template>
|
||||
</BasePageHeader>
|
||||
|
||||
<!-- Tabs -->
|
||||
<BaseTabGroup class="p-2">
|
||||
<BaseTab
|
||||
:title="$t('reports.sales.sales')"
|
||||
tab-panel-container="px-0 py-0"
|
||||
>
|
||||
<SalesReport ref="report" />
|
||||
</BaseTab>
|
||||
<BaseTab
|
||||
:title="$t('reports.profit_loss.profit_loss')"
|
||||
tab-panel-container="px-0 py-0"
|
||||
>
|
||||
<ProfitLossReport ref="report" />
|
||||
</BaseTab>
|
||||
<BaseTab
|
||||
:title="$t('reports.expenses.expenses')"
|
||||
tab-panel-container="px-0 py-0"
|
||||
>
|
||||
<ExpenseReport ref="report" />
|
||||
</BaseTab>
|
||||
<BaseTab
|
||||
:title="$t('reports.taxes.taxes')"
|
||||
tab-panel-container="px-0 py-0"
|
||||
>
|
||||
<TaxReport ref="report" />
|
||||
</BaseTab>
|
||||
</BaseTabGroup>
|
||||
</BasePage>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import SalesReport from '../SalesReports.vue'
|
||||
import ExpenseReport from '../ExpensesReport.vue'
|
||||
import ProfitLossReport from '../ProfitLossReport.vue'
|
||||
import TaxReport from '../TaxReport.vue'
|
||||
import { useGlobalStore } from '@/scripts/admin/stores/global'
|
||||
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
function onDownload() {
|
||||
globalStore.downloadReport()
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user