Internationalization + Finnish language (#181)

* I18n with next-intl

* package-lock

* Finnish translations

* Development fix

* Use locale for positioning currency symbol

* Translations: Expenses.ActiveUserModal

* Translations: group 404

* Better translation for ExpenseCard

* Apply translations in CategorySelect search

* Fix for Finnish translation

* Translations for ExpenseDocumentsInput

* Translations for CreateFromReceipt

* Fix for Finnish translation

* Translations for schema errors

* Fix for Finnish translation

* Fixes for Finnish translations

* Prettier

---------

Co-authored-by: Sebastien Castiel <sebastien@castiel.me>

src/app/groups/[groupId]/expenses/expense-list.tsx

@@ -7,6 +7,7 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { normalizeString } from '@/lib/utils'
 import { Participant } from '@prisma/client'
 import dayjs, { type Dayjs } from 'dayjs'
+import { useTranslations } from 'next-intl'
 import Link from 'next/link'
 import { useEffect, useMemo, useState } from 'react'
 import { useInView } from 'react-intersection-observer'
@@ -24,13 +25,13 @@ type Props = {
 }
 
 const EXPENSE_GROUPS = {
-  UPCOMING: 'Upcoming',
-  THIS_WEEK: 'This week',
-  EARLIER_THIS_MONTH: 'Earlier this month',
-  LAST_MONTH: 'Last month',
-  EARLIER_THIS_YEAR: 'Earlier this year',
-  LAST_YEAR: 'Last year',
-  OLDER: 'Older',
+  UPCOMING: 'upcoming',
+  THIS_WEEK: 'thisWeek',
+  EARLIER_THIS_MONTH: 'earlierThisMonth',
+  LAST_MONTH: 'lastMonth',
+  EARLIER_THIS_YEAR: 'earlierThisYear',
+  LAST_YEAR: 'lastYear',
+  OLDER: 'older',
 }
 
 function getExpenseGroup(date: Dayjs, today: Dayjs) {
@@ -76,6 +77,7 @@ export function ExpenseList({
   const [isFetching, setIsFetching] = useState(false)
   const [expenses, setExpenses] = useState(expensesFirstPage)
   const { ref, inView } = useInView()
+  const t = useTranslations('Expenses')
 
   useEffect(() => {
     const activeUser = localStorage.getItem('newGroup-activeUser')
@@ -155,7 +157,7 @@ export function ExpenseList({
                 'text-muted-foreground text-xs pl-4 sm:pl-6 py-1 font-semibold sticky top-16 bg-white dark:bg-[#1b1917]'
               }
             >
-              {expenseGroup}
+              {t(`Groups.${expenseGroup}`)}
             </div>
             {groupExpenses.map((expense) => (
               <ExpenseCard
@@ -187,10 +189,10 @@ export function ExpenseList({
     </>
   ) : (
     <p className="px-6 text-sm py-6">
-      Your group doesn’t contain any expense yet.{' '}
+      {t('noExpenses')}{' '}
       <Button variant="link" asChild className="-m-4">
         <Link href={`/groups/${groupId}/expenses/create`}>
-          Create the first one
+          {t('createFirst')}
         </Link>
       </Button>
     </p>