- Revenue
+ {{ t('home.chart.revenue.title') }}
{{ formatNumber(total) }}
diff --git a/app/components/home/HomeChart.server.vue b/app/components/home/HomeChart.server.vue
index 99cc7ff..ba21aab 100644
--- a/app/components/home/HomeChart.server.vue
+++ b/app/components/home/HomeChart.server.vue
@@ -1,9 +1,13 @@
+
+
- Revenue
+ {{ t('home.chart.revenue.title') }}
---
diff --git a/app/components/home/HomeDateRangePicker.vue b/app/components/home/HomeDateRangePicker.vue
index 4eabd4d..64e0f00 100644
--- a/app/components/home/HomeDateRangePicker.vue
+++ b/app/components/home/HomeDateRangePicker.vue
@@ -2,20 +2,22 @@
import { DateFormatter, getLocalTimeZone, CalendarDate, today } from '@internationalized/date'
import type { Range } from '~/types'
+const { t } = useI18n()
+
const df = new DateFormatter('en-US', {
dateStyle: 'medium'
})
const selected = defineModel({ required: true })
-const ranges = [
- { label: 'Last 7 days', days: 7 },
- { label: 'Last 14 days', days: 14 },
- { label: 'Last 30 days', days: 30 },
- { label: 'Last 3 months', months: 3 },
- { label: 'Last 6 months', months: 6 },
- { label: 'Last year', years: 1 }
-]
+const ranges = computed(() => [
+ { label: t('date.picker.ranges.last_7_days'), days: 7 },
+ { label: t('date.picker.ranges.last_14_days'), days: 14 },
+ { label: t('date.picker.ranges.last_30_days'), days: 30 },
+ { label: t('date.picker.ranges.last_3_months'), months: 3 },
+ { label: t('date.picker.ranges.last_6_months'), months: 6 },
+ { label: t('date.picker.ranges.last_year'), years: 1 }
+])
const toCalendarDate = (date: Date) => {
return new CalendarDate(
@@ -95,7 +97,7 @@ const selectRange = (range: { days?: number, months?: number, years?: number })
- Pick a date
+ {{ t('date.picker.placeholder') }}
diff --git a/app/components/home/HomePeriodSelect.vue b/app/components/home/HomePeriodSelect.vue
index 614e056..5aaace9 100644
--- a/app/components/home/HomePeriodSelect.vue
+++ b/app/components/home/HomePeriodSelect.vue
@@ -2,6 +2,7 @@
import { eachDayOfInterval } from 'date-fns'
import type { Period, Range } from '~/types'
+const { t } = useI18n()
const model = defineModel({ required: true })
const props = defineProps<{
@@ -41,7 +42,10 @@ watch(periods, () => {
{
const columns: TableColumn[] = [
{
accessorKey: 'id',
- header: 'ID',
+ header: () => t('home.sales.table.columns.id'),
cell: ({ row }) => `#${row.getValue('id')}`
},
{
accessorKey: 'date',
- header: 'Date',
+ header: () => t('home.sales.table.columns.date'),
cell: ({ row }) => {
return new Date(row.getValue('date')).toLocaleString('en-US', {
day: 'numeric',
@@ -62,8 +63,9 @@ const columns: TableColumn[] = [
},
{
accessorKey: 'status',
- header: 'Status',
+ header: () => t('home.sales.table.columns.status'),
cell: ({ row }) => {
+ const status = row.getValue('status') as string
const color = {
paid: 'success' as const,
failed: 'error' as const,
@@ -71,17 +73,17 @@ const columns: TableColumn[] = [
}[row.getValue('status') as string]
return h(UBadge, { class: 'capitalize', variant: 'subtle', color }, () =>
- row.getValue('status')
+ t(`home.sales.table.status.${status}`)
)
}
},
{
accessorKey: 'email',
- header: 'Email'
+ header: () => t('home.sales.table.columns.email')
},
{
accessorKey: 'amount',
- header: () => h('div', { class: 'text-right' }, 'Amount'),
+ header: () => h('div', { class: 'text-right' }, t('home.sales.table.columns.amount')),
cell: ({ row }) => {
const amount = Number.parseFloat(row.getValue('amount'))
diff --git a/app/components/home/HomeStats.vue b/app/components/home/HomeStats.vue
index f45ea1a..e6ff56a 100644
--- a/app/components/home/HomeStats.vue
+++ b/app/components/home/HomeStats.vue
@@ -1,6 +1,7 @@
+
+
+ {{ t('members.empty.no_members') }}
+
+
-
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index afc726a..2700500 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,18 +1,19 @@
-
+
diff --git a/app/pages/settings/index.vue b/app/pages/settings/index.vue
index 036c5c2..ba983f9 100644
--- a/app/pages/settings/index.vue
+++ b/app/pages/settings/index.vue
@@ -2,12 +2,13 @@
import * as z from 'zod'
import type { FormSubmitEvent } from '@nuxt/ui'
+const { t } = useI18n()
const fileRef = ref()
const profileSchema = z.object({
- name: z.string().min(2, 'Too short'),
- email: z.string().email('Invalid email'),
- username: z.string().min(2, 'Too short'),
+ name: z.string().min(2, t('settings.profile.fields.name.error.too_short')),
+ email: z.string().email(t('settings.profile.fields.email.error.invalid')),
+ username: z.string().min(2, t('settings.profile.fields.username.error.too_short')),
avatar: z.string().optional(),
bio: z.string().optional()
})
@@ -24,8 +25,8 @@ const profile = reactive>({
const toast = useToast()
async function onSubmit(event: FormSubmitEvent) {
toast.add({
- title: 'Success',
- description: 'Your settings have been updated.',
+ title: t('settings.success.title'),
+ description: t('settings.success.description'),
icon: 'i-lucide-check',
color: 'success'
})
@@ -55,15 +56,15 @@ function onFileClick() {
@submit="onSubmit"
>
@@ -86,8 +87,8 @@ function onFileClick() {
@@ -100,8 +101,8 @@ function onFileClick() {
@@ -114,8 +115,8 @@ function onFileClick() {
@@ -125,7 +126,7 @@ function onFileClick() {
size="lg"
/>
@@ -141,8 +142,8 @@ function onFileClick() {
diff --git a/app/pages/settings/members.vue b/app/pages/settings/members.vue
index 015bee7..3742caa 100644
--- a/app/pages/settings/members.vue
+++ b/app/pages/settings/members.vue
@@ -1,6 +1,7 @@
@@ -33,7 +43,7 @@ const filteredMembers = computed(() => {
diff --git a/app/pages/settings/notifications.vue b/app/pages/settings/notifications.vue
index b64278e..7a308a9 100644
--- a/app/pages/settings/notifications.vue
+++ b/app/pages/settings/notifications.vue
@@ -1,4 +1,6 @@