69 lines
2.0 KiB
Vue
69 lines
2.0 KiB
Vue
<script lang='ts' setup>
|
|
import { calendarOutline, listOutline, timeOutline, walletOutline } from "ionicons/icons";
|
|
|
|
const { t } = useI18n();
|
|
const router = useRouter();
|
|
|
|
function navigateToTotal() {
|
|
router.push("/revenue/total");
|
|
}
|
|
|
|
function navigateToMonthly() {
|
|
router.push("/revenue/monthly");
|
|
}
|
|
|
|
function navigateToPending() {
|
|
router.push("/revenue/pending");
|
|
}
|
|
|
|
function navigateToRecords() {
|
|
router.push("/revenue/records");
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<ion-label class="text-md font-semibold">
|
|
{{ t("asset.revenue.myRevenue") }}
|
|
</ion-label>
|
|
<div class="grid grid-cols-4 mt-5">
|
|
<div
|
|
class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
|
|
@click="navigateToTotal"
|
|
>
|
|
<ion-icon :icon="walletOutline" class="text-2xl text-primary" />
|
|
<div class="text-xs">
|
|
{{ t("asset.revenue.totalRevenue") }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
|
|
@click="navigateToMonthly"
|
|
>
|
|
<ion-icon :icon="calendarOutline" class="text-2xl text-primary" />
|
|
<div class="text-xs">
|
|
{{ t("asset.revenue.monthlyRevenue") }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
|
|
@click="navigateToPending"
|
|
>
|
|
<ion-icon :icon="timeOutline" class="text-2xl text-primary" />
|
|
<div class="text-xs">
|
|
{{ t("asset.revenue.pendingRevenue") }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="col-span-1 flex flex-col items-center gap-2 cursor-pointer transition-opacity active:opacity-70"
|
|
@click="navigateToRecords"
|
|
>
|
|
<ion-icon :icon="listOutline" class="text-2xl text-primary" />
|
|
<div class="text-xs">
|
|
{{ t("asset.revenue.revenueDetails") }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|