mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-15 17:24:10 +00:00
71388ec6a5
Now that the legacy v1 frontend (commit 064bdf53) is gone, the v2 directory is the only frontend and the v2 suffix is just noise. Renames resources/scripts-v2 to resources/scripts via git mv (so git records the move as renames, preserving blame and log --follow), then bulk-rewrites the 152 files that imported via @v2/... to use @/scripts/... instead. The existing @ alias (resources/) covers the new path with no extra config needed.
Drops the now-unused @v2 alias from vite.config.js and points the laravel-vite-plugin entry at resources/scripts/main.ts. Updates the only blade reference (resources/views/app.blade.php) to match. The package.json test script (eslint ./resources/scripts) automatically targets the right place after the rename without any edit.
Verified: npm run build exits clean and the Vite warning lines now reference resources/scripts/plugins/i18n.ts, confirming every import resolved through the new path. git log --follow on any moved file walks back through its scripts-v2 history.
282 lines
7.7 KiB
Vue
282 lines
7.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useDashboardStore } from '../store'
|
|
import { useCompanyStore } from '../../../../stores/company.store'
|
|
import { useUserStore } from '../../../../stores/user.store'
|
|
import LineChart from '@/scripts/components/charts/LineChart.vue'
|
|
import type { DashboardParams } from '../../../../api/services/dashboard.service'
|
|
|
|
interface YearOption {
|
|
label: string
|
|
value: string
|
|
}
|
|
|
|
const ABILITY_DASHBOARD = 'dashboard'
|
|
|
|
const dashboardStore = useDashboardStore()
|
|
const companyStore = useCompanyStore()
|
|
const userStore = useUserStore()
|
|
const { t } = useI18n()
|
|
|
|
const years = ref<YearOption[]>([
|
|
{ label: t('dateRange.this_year'), value: 'This year' },
|
|
{ label: t('dateRange.previous_year'), value: 'Previous year' },
|
|
])
|
|
|
|
const selectedYear = ref<string>('This year')
|
|
|
|
watch(
|
|
selectedYear,
|
|
(val: string) => {
|
|
if (val === 'Previous year') {
|
|
loadData({ previous_year: 1 })
|
|
} else {
|
|
loadData()
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
async function loadData(params?: DashboardParams): Promise<void> {
|
|
if (userStore.hasAbilities(ABILITY_DASHBOARD)) {
|
|
await dashboardStore.loadData(params)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div
|
|
v-if="dashboardStore.isDashboardDataLoaded"
|
|
class="grid grid-cols-10 mt-8 bg-surface rounded-xl shadow border border-line-light"
|
|
>
|
|
<!-- Chart -->
|
|
<div
|
|
class="
|
|
grid grid-cols-1
|
|
col-span-10
|
|
px-4
|
|
py-5
|
|
lg:col-span-7
|
|
xl:col-span-8
|
|
sm:p-6
|
|
"
|
|
>
|
|
<div class="flex justify-between mt-1 mb-4 flex-col md:flex-row">
|
|
<h6 class="flex items-center sw-section-title h-10">
|
|
<BaseIcon name="ChartBarSquareIcon" class="text-primary-400 mr-1" />
|
|
{{ $t('dashboard.monthly_chart.title') }}
|
|
</h6>
|
|
|
|
<div class="w-full my-2 md:m-0 md:w-40 h-10">
|
|
<BaseMultiselect
|
|
v-model="selectedYear"
|
|
:options="years"
|
|
:allow-empty="false"
|
|
:show-labels="false"
|
|
:placeholder="$t('dashboard.select_year')"
|
|
:can-deselect="false"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<LineChart
|
|
:invoices="dashboardStore.chartData.invoiceTotals"
|
|
:expenses="dashboardStore.chartData.expenseTotals"
|
|
:receipts="dashboardStore.chartData.receiptTotals"
|
|
:income="dashboardStore.chartData.netIncomeTotals"
|
|
:labels="dashboardStore.chartData.months"
|
|
class="sm:w-full"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Chart Labels -->
|
|
<div
|
|
class="
|
|
grid grid-cols-3
|
|
col-span-10
|
|
text-center
|
|
border-t border-l border-line-default border-solid
|
|
lg:border-t-0 lg:text-right lg:col-span-3
|
|
xl:col-span-2
|
|
lg:grid-cols-1
|
|
"
|
|
>
|
|
<div class="p-6">
|
|
<span class="text-xs leading-5 lg:text-sm">
|
|
{{ $t('dashboard.chart_info.total_sales') }}
|
|
</span>
|
|
<br />
|
|
<span class="block mt-1 text-xl font-semibold leading-8 lg:text-2xl">
|
|
<BaseFormatMoney
|
|
:amount="dashboardStore.totalSales"
|
|
:currency="companyStore.selectedCompanyCurrency"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<div class="p-6">
|
|
<span class="text-xs leading-5 lg:text-sm">
|
|
{{ $t('dashboard.chart_info.total_receipts') }}
|
|
</span>
|
|
<br />
|
|
<span
|
|
class="
|
|
block
|
|
mt-1
|
|
text-xl
|
|
font-semibold
|
|
leading-8
|
|
lg:text-2xl
|
|
text-green-400
|
|
"
|
|
>
|
|
<BaseFormatMoney
|
|
:amount="dashboardStore.totalReceipts"
|
|
:currency="companyStore.selectedCompanyCurrency"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<div class="p-6">
|
|
<span class="text-xs leading-5 lg:text-sm">
|
|
{{ $t('dashboard.chart_info.total_expense') }}
|
|
</span>
|
|
<br />
|
|
<span
|
|
class="
|
|
block
|
|
mt-1
|
|
text-xl
|
|
font-semibold
|
|
leading-8
|
|
lg:text-2xl
|
|
text-red-400
|
|
"
|
|
>
|
|
<BaseFormatMoney
|
|
:amount="dashboardStore.totalExpenses"
|
|
:currency="companyStore.selectedCompanyCurrency"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<div
|
|
class="
|
|
col-span-3
|
|
p-6
|
|
border-t border-line-default border-solid
|
|
lg:col-span-1
|
|
"
|
|
>
|
|
<span class="text-xs leading-5 lg:text-sm">
|
|
{{ $t('dashboard.chart_info.net_income') }}
|
|
</span>
|
|
<br />
|
|
<span
|
|
class="
|
|
block
|
|
mt-1
|
|
text-xl
|
|
font-semibold
|
|
leading-8
|
|
lg:text-2xl
|
|
text-primary-500
|
|
"
|
|
>
|
|
<BaseFormatMoney
|
|
:amount="dashboardStore.totalNetIncome"
|
|
:currency="companyStore.selectedCompanyCurrency"
|
|
/>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart Placeholder -->
|
|
<BaseContentPlaceholders
|
|
v-else
|
|
class="grid grid-cols-10 mt-8 bg-surface rounded shadow"
|
|
>
|
|
<div
|
|
class="
|
|
grid grid-cols-1
|
|
col-span-10
|
|
px-4
|
|
py-5
|
|
lg:col-span-7
|
|
xl:col-span-8
|
|
sm:p-8
|
|
"
|
|
>
|
|
<div class="flex items-center justify-between mb-2 xl:mb-4">
|
|
<BaseContentPlaceholdersText class="h-10 w-36" :lines="1" />
|
|
<BaseContentPlaceholdersText class="h-10 w-36 !mt-0" :lines="1" />
|
|
</div>
|
|
<BaseContentPlaceholdersBox class="h-80 xl:h-72 sm:w-full" />
|
|
</div>
|
|
|
|
<div
|
|
class="
|
|
grid grid-cols-3
|
|
col-span-10
|
|
text-center
|
|
border-t border-l border-line-default border-solid
|
|
lg:border-t-0 lg:text-right lg:col-span-3
|
|
xl:col-span-2
|
|
lg:grid-cols-1
|
|
"
|
|
>
|
|
<div
|
|
class="
|
|
flex flex-col
|
|
items-center
|
|
justify-center
|
|
p-6
|
|
lg:justify-end lg:items-end
|
|
"
|
|
>
|
|
<BaseContentPlaceholdersText class="h-3 w-14 xl:h-4" :lines="1" />
|
|
<BaseContentPlaceholdersText class="w-20 h-5 xl:h-6" :lines="1" />
|
|
</div>
|
|
<div
|
|
class="
|
|
flex flex-col
|
|
items-center
|
|
justify-center
|
|
p-6
|
|
lg:justify-end lg:items-end
|
|
"
|
|
>
|
|
<BaseContentPlaceholdersText class="h-3 w-14 xl:h-4" :lines="1" />
|
|
<BaseContentPlaceholdersText class="w-20 h-5 xl:h-6" :lines="1" />
|
|
</div>
|
|
<div
|
|
class="
|
|
flex flex-col
|
|
items-center
|
|
justify-center
|
|
p-6
|
|
lg:justify-end lg:items-end
|
|
"
|
|
>
|
|
<BaseContentPlaceholdersText class="h-3 w-14 xl:h-4" :lines="1" />
|
|
<BaseContentPlaceholdersText class="w-20 h-5 xl:h-6" :lines="1" />
|
|
</div>
|
|
<div
|
|
class="
|
|
flex flex-col
|
|
items-center
|
|
justify-center
|
|
col-span-3
|
|
p-6
|
|
border-t border-line-default border-solid
|
|
lg:justify-end lg:items-end lg:col-span-1
|
|
"
|
|
>
|
|
<BaseContentPlaceholdersText class="h-3 w-14 xl:h-4" :lines="1" />
|
|
<BaseContentPlaceholdersText class="w-20 h-5 xl:h-6" :lines="1" />
|
|
</div>
|
|
</div>
|
|
</BaseContentPlaceholders>
|
|
</div>
|
|
</template>
|