chore: upgrade to next 15, react 19, and other libs, refactor styles (#…

…83)

* chore: upgrade to next 15, react 19, and other libs, refactor some components and styles

* chore: update sentry init cfg

* chore: upgrade next to patch

* chore: upgrade pnpm

* chore: upgrade nextui and rest libs, migrate to next config ts file

* chore: update pnpm lock

* chore: update knip cfg

* chore: upgrade date-fns and restyle balance card component

* chore: update isVirtualized props on Select component

* chore: update position of calculateTotalAmount func

* style: change balance card bg

.npmrc

@@ -1,4 +1,5 @@
 public-hoist-pattern[]=*@nextui-org/*
 engine-strict=true
 package-manager-strict-version=true
-manage-package-manager-versions=true
+manage-package-manager-versions=true
+auto-install-peers=true

app/error.tsx

@@ -21,7 +21,7 @@ export default function Error({
       <ClientButton
         title='Try Again'
         className='max-w-md bg-primary font-medium text-default-50'
-        onClick={() => [reset()]}
+        onPress={() => [reset()]}
       />
     </main>
   )

app/feedback/page.tsx

@@ -14,8 +14,8 @@ export const metadata: Metadata = {
   title: NAV_TITLE.FEEDBACK,
 }
 
-export default function Page() {
-  const cookieStore = cookies()
+export default async function Page() {
+  const cookieStore = await cookies()
   const feedbackCookie = cookieStore.get(FEEDBACK.NAME)
   const confettiCookie = cookieStore.get(CONFETTI.NAME)
   const isSentFeedback = feedbackCookie?.value === FEEDBACK.VALUE

app/layout.tsx

@@ -10,8 +10,7 @@ import { CUSTOM_DARK } from '@/config/constants/colors'
 import {
   APP_NAME,
   APP_URL,
-  AUTHOR_NAME,
-  AUTHOR_URL,
+  AUTHOR,
   DEFAULT_DIR,
   DEFAULT_LANG,
 } from '@/config/constants/main'
@@ -72,8 +71,8 @@ export const metadata: Metadata = {
   },
   authors: [
     {
-      name: AUTHOR_NAME,
-      url: AUTHOR_URL,
+      name: AUTHOR.NAME,
+      url: AUTHOR.URL,
     },
   ],
 }

app/lib/actions.ts

@@ -227,7 +227,8 @@ export async function setCookie(
   value: TCookie['VALUE'],
   maxAge: TCookie['MAX_AGE'],
 ) {
-  cookies().set(name, value, {
+  const cookieStore = await cookies()
+  cookieStore.set(name, value, {
     maxAge,
     httpOnly: true,
     secure: true,

app/lib/data.ts

@@ -8,6 +8,13 @@ import type {
   TTransaction,
 } from './types'
 
+export const calculateTotalAmount = (transactions: TTransaction[]) => {
+  return transactions.reduce(
+    (total, { amount }) => total + parseFloat(amount),
+    0,
+  )
+}
+
 export const filterTransactions = (transactions: TTransaction[]) => ({
   income: transactions.filter((t) => t.isIncome),
   expense: transactions.filter((t) => !t.isIncome),
@@ -55,13 +62,6 @@ export const calculateChartData = (
   return chartData
 }
 
-export const calculateTotalAmount = (transactions: TTransaction[]) => {
-  return transactions.reduce(
-    (total, { amount }) => total + parseFloat(amount),
-    0,
-  )
-}
-
 export const calculateTotalsByCategory = (
   transactions: TTransaction[],
   categoryWithoutEmoji: boolean = false,

app/lib/helpers.ts

@@ -177,7 +177,7 @@ export const calculateEntryRange = (
 export const copyToClipboard = async (
   successTitle: string,
   errorTitle: string,
-  ref?: React.RefObject<THTMLElement>,
+  ref?: React.RefObject<THTMLElement | null>,
   text?: string,
 ): Promise<void> => {
   const content = text || ref?.current?.textContent || ''

app/lib/types.ts

@@ -1,6 +1,8 @@
+import type { JSX } from 'react'
+
 import type { DefaultSession, Session, User } from 'next-auth'
 
-import type { ObjectId } from 'mongoose'
+import { type ObjectId } from 'mongoose'
 
 import {
   CURRENCY_CODE,

app/loading.tsx

@@ -1,23 +1,24 @@
 import { Spinner, SpinnerProps } from '@nextui-org/react'
+import { ClassValue } from 'clsx'
 
 import { cn } from './lib/helpers'
 
 type TProps = {
   size?: SpinnerProps['size']
   inline?: boolean
-  wrapperCN?: string
+  wrapperClassName?: ClassValue
 }
 
 export default function Loading({
   size = 'lg',
   inline = false,
-  wrapperCN,
+  wrapperClassName,
 }: TProps) {
   return (
     <div
       className={cn(
         !inline && 'flex h-screen flex-col items-center justify-center gap-4',
-        wrapperCN,
+        wrapperClassName,
       )}
     >
       <Spinner

app/page.tsx

@@ -45,14 +45,13 @@ import NoTransactionsPlug from './ui/no-transactions-plug'
 import PaginationList from './ui/pagination/pagination-list'
 import WithSidebar from './ui/sidebar/with-sidebar'
 
-export default async function Home({
-  searchParams,
-}: {
-  searchParams?: {
+export default async function Home(props: {
+  searchParams?: Promise<{
     [SEARCH_PARAM.QUERY]?: string
     [SEARCH_PARAM.PAGE]?: string
-  }
+  }>
 }) {
+  const searchParams = await props.searchParams
   const session = await getCachedAuthSession()
   const userId = session?.user?.email
   const query = searchParams?.[SEARCH_PARAM.QUERY] || ''
@@ -209,18 +208,18 @@ export default async function Home({
               <p className='mt-2 text-default-500 md:mt-4'>Searched Totals</p>
               <div className='flex flex-col flex-wrap justify-center'>
                 <p>
-                  {<PiArrowCircleUpFill className='mr-1 inline fill-success' />}
-                  Income:{' '}
+                  <PiArrowCircleUpFill className='mr-1 inline fill-success' />
+                  <span className='text-sm text-default-500'>Income:</span>{' '}
                   {getFormattedCurrency(
                     getTransactionsTotals(searchedTransactionsByQuery).income,
                   )}{' '}
                   {currency?.code}
                 </p>
                 <p>
-                  {
-                    <PiArrowCircleDownFill className='mr-1 inline fill-danger' />
-                  }
-                  Expense:{' '}
+                  <PiArrowCircleDownFill className='mr-1 inline fill-danger' />
+                  <span className='text-sm text-default-500'>
+                    Expense:
+                  </span>{' '}
                   {getFormattedCurrency(
                     getTransactionsTotals(searchedTransactionsByQuery).expense,
                   )}{' '}

app/providers.tsx

@@ -4,12 +4,13 @@ import { useEffect, useState } from 'react'
 import { Toaster } from 'react-hot-toast'
 
 import { Next13ProgressBar } from 'next13-progressbar'
-import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import dynamic from 'next/dynamic'
 import { useRouter } from 'next/navigation'
 
 import { NextUIProvider } from '@nextui-org/react'
 
 import { SUCCESS } from '@/config/constants/colors'
+import { DEFAULT_THEME } from '@/config/constants/main'
 import {
   DARK_TOAST_OPTS,
   LIGHT_TOAST_OPTS,
@@ -19,6 +20,13 @@ import {
 import { userLocale } from './lib/helpers'
 import { TTheme } from './lib/types'
 
+const NextThemesProvider = dynamic(
+  () => import('next-themes').then((e) => e.ThemeProvider),
+  {
+    ssr: false,
+  },
+)
+
 export default function Providers({ children }: { children: React.ReactNode }) {
   const router = useRouter()
   const [theme, setTheme] = useState<TTheme | undefined>(undefined)
@@ -29,7 +37,7 @@ export default function Providers({ children }: { children: React.ReactNode }) {
 
   return (
     <NextUIProvider navigate={router.push} locale={userLocale}>
-      <NextThemesProvider attribute='class' defaultTheme='dark'>
+      <NextThemesProvider attribute='class' defaultTheme={DEFAULT_THEME}>
         <Toaster
           position={TOAST_POSITION}
           toastOptions={

app/transaction/[id]/edit/page.tsx

@@ -12,7 +12,8 @@ export const metadata: Metadata = {
   title: PAGE_TITLE,
 }
 
-export default async function Page({ params }: { params: { id: string } }) {
+export default async function Page(props: { params: Promise<{ id: string }> }) {
+  const params = await props.params
   const { id } = params
   const [transaction, session] = await Promise.all([
     findTransactionById(id),