From 86aafd0b1080b559389bb84dc113c6fa0099ebdd Mon Sep 17 00:00:00 2001
From: dcorroyer <dylan.corroyer@wyzgroup.com>
Date: Tue, 26 Nov 2024 14:19:15 +0100
Subject: [PATCH] budget UI fixes

---
 app/assets/components/sidebar.module.css      |   4 -
 app/assets/components/sidebar.tsx             |  15 +-
 .../accounts/components/account-form.tsx      |   2 +-
 .../components/account-items.module.css       |  11 --
 .../accounts/components/account-items.tsx     |   2 +-
 app/assets/features/accounts/pages/list.tsx   |   4 +-
 .../features/auth/pages/login.module.css      |   6 -
 app/assets/features/auth/pages/login.tsx      |   4 +-
 .../features/auth/pages/register.module.css   |   6 -
 app/assets/features/auth/pages/register.tsx   |   4 +-
 .../budgets/components/budget-form.module.css |   8 +
 .../budgets/components/budget-form.tsx        |  12 +-
 .../budgets/components/budget-items.tsx       |   2 +-
 .../budget-summary-cards.module.css           | 119 ++++++++++++++
 .../components/budget-summary-cards.tsx       |  41 +++++
 .../components/budget-table.module.css        |   1 +
 .../budgets/components/budget-table.tsx       | 154 +++++++++++++-----
 .../features/budgets/pages/detail.module.css  | 120 --------------
 app/assets/features/budgets/pages/detail.tsx  |  76 +++------
 .../features/budgets/pages/list.module.css    |   8 +
 app/assets/features/budgets/pages/list.tsx    |  12 +-
 app/assets/layouts/authenticated-layout.tsx   |   2 +-
 app/templates/base.html.twig                  |   6 +-
 23 files changed, 346 insertions(+), 273 deletions(-)
 delete mode 100644 app/assets/features/accounts/components/account-items.module.css
 delete mode 100644 app/assets/features/auth/pages/login.module.css
 delete mode 100644 app/assets/features/auth/pages/register.module.css
 create mode 100644 app/assets/features/budgets/components/budget-summary-cards.module.css
 create mode 100644 app/assets/features/budgets/components/budget-summary-cards.tsx

diff --git a/app/assets/components/sidebar.module.css b/app/assets/components/sidebar.module.css
index 2763921..cc9097c 100644
--- a/app/assets/components/sidebar.module.css
+++ b/app/assets/components/sidebar.module.css
@@ -16,10 +16,6 @@
   background-color: var(--mantine-color-white); /* Couleur de fond pour le mode clair */
 }
 
-.navbarMain {
-  flex: 1;
-}
-
 .header {
   padding-bottom: var(--mantine-spacing-md);
   margin-bottom: calc(var(--mantine-spacing-md) * 4);
diff --git a/app/assets/components/sidebar.tsx b/app/assets/components/sidebar.tsx
index 2bf7a62..36a65b0 100644
--- a/app/assets/components/sidebar.tsx
+++ b/app/assets/components/sidebar.tsx
@@ -4,7 +4,7 @@ import { Link, useLocation } from 'react-router-dom'
 
 import cx from 'clsx'
 
-import { Group, useComputedColorScheme, useMantineColorScheme } from '@mantine/core'
+import { em, Group, useComputedColorScheme, useMantineColorScheme } from '@mantine/core'
 import { useMediaQuery } from '@mantine/hooks'
 import {
   IconChartLine,
@@ -30,10 +30,14 @@ const data = [
   { icon: IconCreditCard, label: 'Accounts', path: '/accounts' },
 ]
 
-export function Sidebar() {
+interface SidebarProps {
+  onNavigate?: () => void
+}
+
+export function Sidebar({ onNavigate }: SidebarProps) {
   const { logout } = useAuth()
 
-  const isMobile = useMediaQuery('(max-width: 768px)')
+  const isMobile = useMediaQuery(`(max-width: ${em(750)})`)
 
   const { setColorScheme } = useMantineColorScheme()
   const computedColorScheme = useComputedColorScheme('light', { getInitialValueInEffect: true })
@@ -52,6 +56,9 @@ export function Sidebar() {
         key={item.label}
         onClick={() => {
           setActive(item.path)
+          if (isMobile && onNavigate) {
+            onNavigate()
+          }
         }}
       >
         <item.icon className={classes.linkIcon} stroke={1.5} />
@@ -62,7 +69,7 @@ export function Sidebar() {
 
   return (
     <nav className={classes.navbar}>
-      <div className={classes.navbarMain}>
+      <div style={{ flex: '1' }}>
         {!isMobile && (
           <Group className={classes.header} justify='space-between'>
             <Logo />
diff --git a/app/assets/features/accounts/components/account-form.tsx b/app/assets/features/accounts/components/account-form.tsx
index 6fd2e93..ec49aa2 100644
--- a/app/assets/features/accounts/components/account-form.tsx
+++ b/app/assets/features/accounts/components/account-form.tsx
@@ -38,7 +38,7 @@ export const AccountForm: React.FC<AccountFormComponentProps> = ({ initialValues
   return (
     <Container size={560} my={40}>
       <form onSubmit={form.onSubmit(onSubmit)}>
-        <Card radius='lg' py='xl'>
+        <Card radius='lg' py='xl' shadow='sm'>
           <Card.Section inheritPadding px='xl' pb='xs'>
             <TextInput
               label='Name'
diff --git a/app/assets/features/accounts/components/account-items.module.css b/app/assets/features/accounts/components/account-items.module.css
deleted file mode 100644
index 642155b..0000000
--- a/app/assets/features/accounts/components/account-items.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.amount {
-  text-align: center;
-}
-
-.deleteButton {
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--mantine-color-gray-3);
-  }
-}
diff --git a/app/assets/features/accounts/components/account-items.tsx b/app/assets/features/accounts/components/account-items.tsx
index e36f385..eafbbe2 100644
--- a/app/assets/features/accounts/components/account-items.tsx
+++ b/app/assets/features/accounts/components/account-items.tsx
@@ -33,7 +33,7 @@ export const AccountItems = ({
 
   const accounts = accountList.data.map((account) => (
     <div key={account.id}>
-      <Card radius='lg' pb='xl'>
+      <Card radius='lg' pb='xl' shadow='sm'>
         <Card.Section inheritPadding py='xs'>
           <Group justify='space-between'>
             <Text fw={500}>{account.name}</Text>
diff --git a/app/assets/features/accounts/pages/list.tsx b/app/assets/features/accounts/pages/list.tsx
index b6b8601..a55c61e 100644
--- a/app/assets/features/accounts/pages/list.tsx
+++ b/app/assets/features/accounts/pages/list.tsx
@@ -43,10 +43,10 @@ const AccountList: React.FC = () => {
       <Modal opened={opened} onClose={close} radius='lg' title='Delete Account' centered>
         <Text size='sm'>Are you sure you want to delete this account?</Text>
         <Group justify='flex-end' mt='lg'>
-          <Button variant='light' onClick={close}>
+          <Button variant='subtle' radius='md' onClick={close}>
             Cancel
           </Button>
-          <Button color='red' onClick={handleDelete}>
+          <Button color='red' radius='md' onClick={handleDelete}>
             Delete
           </Button>
         </Group>
diff --git a/app/assets/features/auth/pages/login.module.css b/app/assets/features/auth/pages/login.module.css
deleted file mode 100644
index a732a97..0000000
--- a/app/assets/features/auth/pages/login.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.title {
-  font-family:
-    Greycliff CF,
-    var(--mantine-font-family);
-  font-weight: 900;
-}
diff --git a/app/assets/features/auth/pages/login.tsx b/app/assets/features/auth/pages/login.tsx
index c0d0326..f452157 100644
--- a/app/assets/features/auth/pages/login.tsx
+++ b/app/assets/features/auth/pages/login.tsx
@@ -18,8 +18,6 @@ import {
 import { useAuth } from '@/features/auth/hooks/useAuth'
 import { loginFormSchema, loginFormType } from '@/features/auth/schemas/login'
 
-import classes from './login.module.css'
-
 const Login: React.FC = () => {
   const { login, isLoading } = useAuth()
 
@@ -37,7 +35,7 @@ const Login: React.FC = () => {
 
   return (
     <Container size={420} my={40}>
-      <Title ta='center' className={classes.title}>
+      <Title ta='center' fw={900}>
         Login Page
       </Title>
       <Text c='dimmed' size='sm' ta='center' mt={5}>
diff --git a/app/assets/features/auth/pages/register.module.css b/app/assets/features/auth/pages/register.module.css
deleted file mode 100644
index a732a97..0000000
--- a/app/assets/features/auth/pages/register.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.title {
-  font-family:
-    Greycliff CF,
-    var(--mantine-font-family);
-  font-weight: 900;
-}
diff --git a/app/assets/features/auth/pages/register.tsx b/app/assets/features/auth/pages/register.tsx
index 9821db9..0285578 100644
--- a/app/assets/features/auth/pages/register.tsx
+++ b/app/assets/features/auth/pages/register.tsx
@@ -18,8 +18,6 @@ import {
 import { useAuth } from '@/features/auth/hooks/useAuth'
 import { registerFormSchema, registerFormType } from '@/features/auth/schemas/register'
 
-import classes from './register.module.css'
-
 const Register: React.FC = () => {
   const { register, isLoading } = useAuth()
 
@@ -40,7 +38,7 @@ const Register: React.FC = () => {
 
   return (
     <Container size={460} my={40}>
-      <Title ta='center' className={classes.title}>
+      <Title ta='center' fw={900}>
         Register Page
       </Title>
       <Text c='dimmed' size='sm' ta='center' mt={5}>
diff --git a/app/assets/features/budgets/components/budget-form.module.css b/app/assets/features/budgets/components/budget-form.module.css
index 230888d..30e4f4f 100644
--- a/app/assets/features/budgets/components/budget-form.module.css
+++ b/app/assets/features/budgets/components/budget-form.module.css
@@ -49,3 +49,11 @@
 .removeBudgetLineIcon:hover {
   color: #f87171;
 }
+
+.shadowButton {
+  box-shadow: var(--mantine-shadow-sm);
+}
+
+.formButton:hover {
+  background-color: var(--mantine-color-gray-1);
+}
diff --git a/app/assets/features/budgets/components/budget-form.tsx b/app/assets/features/budgets/components/budget-form.tsx
index ba06322..8586dc5 100644
--- a/app/assets/features/budgets/components/budget-form.tsx
+++ b/app/assets/features/budgets/components/budget-form.tsx
@@ -22,6 +22,8 @@ import { useBudget } from '../hooks/useBudget'
 import { budgetFormSchema, createBudgetFormType } from '../schemas/budgets'
 import { BudgetFormDetails } from '../types/budgets'
 
+import cx from 'clsx'
+
 import classes from './budget-form.module.css'
 
 interface Card {
@@ -134,7 +136,7 @@ const ManageIncomes = ({ form }: { form: UseFormReturnType<createBudgetFormType>
   const fields = form.values.incomes
 
   return (
-    <Card radius='lg' py='xl' mt='sm'>
+    <Card radius='lg' py='xl' mt='sm' shadow='sm'>
       <Card.Section inheritPadding px='xl' pb='xs'>
         {fields.map((income, incomeIndex) => (
           <SimpleGrid
@@ -232,7 +234,7 @@ const ManageExpenses = ({
     <>
       <div>
         {cards.map((card: Card, cardIndex: number) => (
-          <Card radius='lg' py='xl' mt='sm' key={cardIndex}>
+          <Card radius='lg' py='xl' mt='sm' key={cardIndex} shadow='sm'>
             <Card.Section inheritPadding>
               <Group justify='space-between'>
                 <div className={classes.relative}>
@@ -298,8 +300,8 @@ const ManageExpenses = ({
                 type='button'
                 variant='white'
                 color='black'
-                className={classes.formButton}
                 radius='md'
+                className={classes.formButton}
                 onClick={() => addExpenseItem(cardIndex)}
               >
                 Add an expense <IconPlus style={{ width: rem(20), height: rem(20) }} stroke={1.5} />
@@ -311,7 +313,7 @@ const ManageExpenses = ({
           type='button'
           variant='white'
           color='black'
-          className={classes.formButton}
+          className={cx(classes.formButton, classes.shadowButton)}
           radius='md'
           onClick={addCard}
           mt='sm'
@@ -323,7 +325,7 @@ const ManageExpenses = ({
           type='submit'
           variant='white'
           color='black'
-          className={classes.formButton}
+          className={cx(classes.formButton, classes.shadowButton)}
           radius='md'
           mt='sm'
           style={{ float: 'right' }}
diff --git a/app/assets/features/budgets/components/budget-items.tsx b/app/assets/features/budgets/components/budget-items.tsx
index 6642b85..fda4489 100644
--- a/app/assets/features/budgets/components/budget-items.tsx
+++ b/app/assets/features/budgets/components/budget-items.tsx
@@ -52,7 +52,7 @@ export const BudgetItems = ({
 
   const budgets = budgetList?.data.map((budget) => (
     <div key={budget.id}>
-      <Card radius='lg' pb='xl'>
+      <Card radius='lg' pb='xl' shadow='sm'>
         <Card.Section inheritPadding py='xs'>
           <Group justify='space-between'>
             <Text fw={500}>{budget.name}</Text>
diff --git a/app/assets/features/budgets/components/budget-summary-cards.module.css b/app/assets/features/budgets/components/budget-summary-cards.module.css
new file mode 100644
index 0000000..e47d434
--- /dev/null
+++ b/app/assets/features/budgets/components/budget-summary-cards.module.css
@@ -0,0 +1,119 @@
+.divIconBlue {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  border-radius: var(--mantine-radius-md);
+  font-weight: 500;
+
+  @mixin hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    color: var(--mantine-color-blue-light-color);
+
+    .iconBlue {
+      color: var(--mantine-color-blue-light-color);
+    }
+  }
+
+  &[data-active] {
+    &,
+    &:hover {
+      background-color: var(--mantine-color-blue-light);
+      color: var(--mantine-color-blue-light-color);
+
+      .iconBlue {
+        color: var(--mantine-color-blue-light-color);
+      }
+    }
+  }
+}
+
+.iconBlue {
+  color: var(--mantine-color-blue-light-color);
+  background-color: var(--mantine-color-blue-light);
+  padding: rem(5px);
+  border-radius: 5px;
+  width: rem(30px);
+  height: rem(30px);
+}
+
+.divIconGreen {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  border-radius: var(--mantine-radius-md);
+  font-weight: 500;
+
+  @mixin hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    color: var(--mantine-color-green-light-color);
+
+    .iconGreen {
+      color: var(--mantine-color-green-light-color);
+    }
+  }
+
+  &[data-active] {
+    &,
+    &:hover {
+      background-color: var(--mantine-color-green-light);
+      color: var(--mantine-color-green-light-color);
+
+      .iconGreen {
+        color: var(--mantine-color-green-light-color);
+      }
+    }
+  }
+}
+
+.iconGreen {
+  color: var(--mantine-color-green-light-color);
+  background-color: var(--mantine-color-green-light);
+  padding: rem(5px);
+  border-radius: 5px;
+  width: rem(30px);
+  height: rem(30px);
+}
+
+.divIconRed {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  font-size: var(--mantine-font-size-sm);
+  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
+  border-radius: var(--mantine-radius-md);
+  font-weight: 500;
+
+  @mixin hover {
+    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+    color: var(--mantine-color-red-light-color);
+
+    .iconRed {
+      color: var(--mantine-color-red-light-color);
+    }
+  }
+
+  &[data-active] {
+    &,
+    &:hover {
+      background-color: var(--mantine-color-red-light);
+      color: var(--mantine-color-red-light-color);
+
+      .iconRed {
+        color: var(--mantine-color-red-light-color);
+      }
+    }
+  }
+}
+
+.iconRed {
+  color: var(--mantine-color-red-light-color);
+  background-color: var(--mantine-color-red-light);
+  padding: rem(5px);
+  border-radius: 5px;
+  width: rem(30px);
+  height: rem(30px);
+}
diff --git a/app/assets/features/budgets/components/budget-summary-cards.tsx b/app/assets/features/budgets/components/budget-summary-cards.tsx
new file mode 100644
index 0000000..17bbe88
--- /dev/null
+++ b/app/assets/features/budgets/components/budget-summary-cards.tsx
@@ -0,0 +1,41 @@
+import { Card, Group, Text } from '@mantine/core'
+import { Icon } from '@tabler/icons-react'
+import React from 'react'
+import classes from './budget-summary-cards.module.css'
+
+interface BudgetSummaryCardProps {
+  icon: Icon
+  color: 'blue' | 'green' | 'red'
+  title: string
+  amount: number
+}
+
+export const BudgetSummaryCards = ({
+  icon: IconComponent,
+  color,
+  title,
+  amount,
+}: BudgetSummaryCardProps) => {
+  return (
+    <Card radius='lg' pb='xl' shadow='sm'>
+      <Card.Section inheritPadding py='xs'>
+        <Group justify='left' gap='xl' mt='xs'>
+          <div className={classes[`divIcon${color.charAt(0).toUpperCase()}${color.slice(1)}`]}>
+            <IconComponent
+              className={classes[`icon${color.charAt(0).toUpperCase()}${color.slice(1)}`]}
+              stroke={1.5}
+            />
+          </div>
+        </Group>
+      </Card.Section>
+      <Card.Section inheritPadding py='xs'>
+        <Group justify='space-between'>
+          <Text fw={500}>{title}</Text>
+        </Group>
+        <Text fw={500} c={color}>
+          {amount} €
+        </Text>
+      </Card.Section>
+    </Card>
+  )
+}
diff --git a/app/assets/features/budgets/components/budget-table.module.css b/app/assets/features/budgets/components/budget-table.module.css
index d8cf1b6..a5404ec 100644
--- a/app/assets/features/budgets/components/budget-table.module.css
+++ b/app/assets/features/budgets/components/budget-table.module.css
@@ -5,6 +5,7 @@
 
 .categoryBlock {
   background-color: var(--mantine-color-gray-1);
+  border-radius: rem(10px);
 }
 
 .categoryName {
diff --git a/app/assets/features/budgets/components/budget-table.tsx b/app/assets/features/budgets/components/budget-table.tsx
index 578efdc..6ba5b90 100644
--- a/app/assets/features/budgets/components/budget-table.tsx
+++ b/app/assets/features/budgets/components/budget-table.tsx
@@ -1,6 +1,7 @@
-import { Card, Container, Group, Modal, SimpleGrid, Text, Tooltip } from '@mantine/core'
+import { Card, Container, em, Group, Modal, SimpleGrid, Text, Tooltip } from '@mantine/core'
 import {
   IconChartLine,
+  IconCreditCard,
   IconCreditCardPay,
   IconCreditCardRefund,
   IconEye,
@@ -9,6 +10,8 @@ import React, { useState } from 'react'
 import { Chart } from 'react-google-charts'
 import { generateSankeyData } from '../helpers/budgetDataTransformer'
 import { BudgetFormDetails } from '../types/budgets'
+
+import { useMediaQuery } from '@mantine/hooks'
 import classes from './budget-table.module.css'
 
 interface BudgetTableComponentProps {
@@ -19,6 +22,8 @@ export const BudgetTable: React.FC<BudgetTableComponentProps> = ({ budgetValues
   const incomes = budgetValues?.incomes ?? []
   const expenses = budgetValues?.expenses ?? []
 
+  const isMobile = useMediaQuery(`(max-width: ${em(750)})`)
+
   const [opened, setOpened] = useState(false)
 
   const graphData = generateSankeyData(expenses)
@@ -30,11 +35,11 @@ export const BudgetTable: React.FC<BudgetTableComponentProps> = ({ budgetValues
   return (
     <>
       <Container my={20}>
-        <Card radius='lg'>
+        <Card radius='lg' shadow='sm'>
           <Text ta='center'>Budget Summary</Text>
         </Card>
 
-        <Card radius='lg' py='xl' mt='sm'>
+        <Card radius='lg' py='xl' mt='lg' shadow='sm'>
           <Card.Section inheritPadding px='xl' pb='xs'>
             <Group justify='left' gap='xl' mt='xs'>
               <div className={classes.divIconGreen}>
@@ -61,7 +66,7 @@ export const BudgetTable: React.FC<BudgetTableComponentProps> = ({ budgetValues
           </Card.Section>
         </Card>
 
-        <Card radius='lg' py='xl' mt='sm'>
+        <Card radius='lg' py='xl' mt='sm' shadow='sm'>
           <Card.Section inheritPadding px='xl' pb='xs'>
             <Group justify='left' gap='xl' mt='xs'>
               <div className={classes.divIconRed}>
@@ -100,55 +105,118 @@ export const BudgetTable: React.FC<BudgetTableComponentProps> = ({ budgetValues
           </Card.Section>
         </Card>
 
-        {/* TODO: After summary and before graph, add a section with pourcentage of incomes and expenses and savings capacity */}
-
-        <Card radius='lg' py='xl' my='sm'>
+        <Card radius='lg' py='xl' mt='sm' shadow='sm'>
           <Card.Section inheritPadding px='xl' pb='xs'>
-            <Group justify='space-between' gap='xl' mt='xs'>
+            <Group justify='left' gap='xl' mt='xs'>
               <div className={classes.divIconBlue}>
-                <IconChartLine className={classes.iconBlue} stroke={1.5} />
+                <IconCreditCard className={classes.iconBlue} stroke={1.5} />
                 <Text className={classes.resourceName} ml='xs'>
-                  Graph
+                  Summary
                 </Text>
               </div>
-              <Tooltip label='Open in full screen ?' position='top' withArrow>
-                <div
-                  onClick={openModal}
-                  className={classes.divIconBlue}
-                  style={{ cursor: 'pointer' }}
-                >
-                  <IconEye className={classes.iconBlue} stroke={1.5} />
-                </div>
-              </Tooltip>
             </Group>
           </Card.Section>
-          <Card.Section inheritPadding mt='md' px='xl' pb='xs'>
-            <Chart
-              chartType='Sankey'
-              width='100%'
-              height='100%'
-              data={graphData}
-              options={graphOptions}
-            />
+          <Card.Section inheritPadding mt='sm' px='xl' pb='xs'>
+            {isMobile ? (
+              <Text className={classes.summaryText}>
+                Vous avez un revenu total de <strong>{budgetValues?.incomesAmount} €</strong>.{' '}
+                <br />
+                Vous dépensez <strong>{budgetValues?.expensesAmount} €</strong>
+                {budgetValues?.incomesAmount && (
+                  <span>
+                    {'. '}(
+                    {Math.round((budgetValues.expensesAmount / budgetValues.incomesAmount) * 100)}%)
+                  </span>
+                )}
+                <br />
+                Il vous reste <strong>{budgetValues?.savingCapacity} €</strong>
+                {budgetValues?.incomesAmount && (
+                  <span>
+                    {'. '}(
+                    {Math.round((budgetValues.savingCapacity / budgetValues.incomesAmount) * 100)}%)
+                  </span>
+                )}
+              </Text>
+            ) : (
+              <Group justify='center'>
+                <Text>
+                  Vous avez un revenu total de <strong>{budgetValues?.incomesAmount} €</strong>.{' '}
+                  Vous dépensez <strong>{budgetValues?.expensesAmount} €</strong>
+                  {budgetValues?.incomesAmount && (
+                    <span>
+                      {' '}
+                      (
+                      {Math.round((budgetValues.expensesAmount / budgetValues.incomesAmount) * 100)}
+                      %)
+                    </span>
+                  )}
+                  . Il vous reste <strong>{budgetValues?.savingCapacity} €</strong>
+                  {budgetValues?.incomesAmount && (
+                    <span>
+                      {' '}
+                      (
+                      {Math.round((budgetValues.savingCapacity / budgetValues.incomesAmount) * 100)}
+                      %)
+                    </span>
+                  )}
+                  .
+                </Text>
+              </Group>
+            )}
           </Card.Section>
         </Card>
 
-        <Modal
-          opened={opened}
-          onClose={closeModal}
-          radius={12.5}
-          size='100%'
-          title='Expenses chart'
-          centered
-        >
-          <Chart
-            chartType='Sankey'
-            width='100%'
-            height='500px'
-            data={graphData}
-            options={graphOptions}
-          />
-        </Modal>
+        {!isMobile && (
+          <>
+            <Card radius='lg' py='xl' my='sm' shadow='sm'>
+              <Card.Section inheritPadding px='xl' pb='xs'>
+                <Group justify='space-between' gap='xl' mt='xs'>
+                  <div className={classes.divIconBlue}>
+                    <IconChartLine className={classes.iconBlue} stroke={1.5} />
+                    <Text className={classes.resourceName} ml='xs'>
+                      Graph
+                    </Text>
+                  </div>
+                  <Tooltip label='Open in full screen ?' position='top' withArrow>
+                    <div
+                      onClick={openModal}
+                      className={classes.divIconBlue}
+                      style={{ cursor: 'pointer' }}
+                    >
+                      <IconEye className={classes.iconBlue} stroke={1.5} />
+                    </div>
+                  </Tooltip>
+                </Group>
+              </Card.Section>
+              <Card.Section inheritPadding mt='md' px='xl' pb='xs'>
+                <Chart
+                  chartType='Sankey'
+                  width='100%'
+                  height='100%'
+                  data={graphData}
+                  options={graphOptions}
+                />
+              </Card.Section>
+            </Card>
+
+            <Modal
+              opened={opened}
+              onClose={closeModal}
+              radius={12.5}
+              size='100%'
+              title='Expenses chart'
+              centered
+            >
+              <Chart
+                chartType='Sankey'
+                width='100%'
+                height='500px'
+                data={graphData}
+                options={graphOptions}
+              />
+            </Modal>
+          </>
+        )}
       </Container>
     </>
   )
diff --git a/app/assets/features/budgets/pages/detail.module.css b/app/assets/features/budgets/pages/detail.module.css
index b2c70c7..9f90536 100644
--- a/app/assets/features/budgets/pages/detail.module.css
+++ b/app/assets/features/budgets/pages/detail.module.css
@@ -9,123 +9,3 @@
 .editModeButton:hover {
   background-color: var(--mantine-color-gray-3);
 }
-
-.divIconBlue {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  font-size: var(--mantine-font-size-sm);
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-  border-radius: var(--mantine-radius-md);
-  font-weight: 500;
-
-  @mixin hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-    color: var(--mantine-color-blue-light-color);
-
-    .iconBlue {
-      color: var(--mantine-color-blue-light-color);
-    }
-  }
-
-  &[data-active] {
-    &,
-    &:hover {
-      background-color: var(--mantine-color-blue-light);
-      color: var(--mantine-color-blue-light-color);
-
-      .iconBlue {
-        color: var(--mantine-color-blue-light-color);
-      }
-    }
-  }
-}
-
-.iconBlue {
-  color: var(--mantine-color-blue-light-color);
-  background-color: var(--mantine-color-blue-light);
-  padding: rem(5px);
-  border-radius: 5px;
-  width: rem(30px);
-  height: rem(30px);
-}
-
-.divIconGreen {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  font-size: var(--mantine-font-size-sm);
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-  border-radius: var(--mantine-radius-md);
-  font-weight: 500;
-
-  @mixin hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-    color: var(--mantine-color-green-light-color);
-
-    .iconGreen {
-      color: var(--mantine-color-green-light-color);
-    }
-  }
-
-  &[data-active] {
-    &,
-    &:hover {
-      background-color: var(--mantine-color-green-light);
-      color: var(--mantine-color-green-light-color);
-
-      .iconGreen {
-        color: var(--mantine-color-green-light-color);
-      }
-    }
-  }
-}
-
-.iconGreen {
-  color: var(--mantine-color-green-light-color);
-  background-color: var(--mantine-color-green-light);
-  padding: rem(5px);
-  border-radius: 5px;
-  width: rem(30px);
-  height: rem(30px);
-}
-
-.divIconRed {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  font-size: var(--mantine-font-size-sm);
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1));
-  border-radius: var(--mantine-radius-md);
-  font-weight: 500;
-
-  @mixin hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
-    color: var(--mantine-color-red-light-color);
-
-    .iconRed {
-      color: var(--mantine-color-red-light-color);
-    }
-  }
-
-  &[data-active] {
-    &,
-    &:hover {
-      background-color: var(--mantine-color-red-light);
-      color: var(--mantine-color-red-light-color);
-
-      .iconRed {
-        color: var(--mantine-color-red-light-color);
-      }
-    }
-  }
-}
-
-.iconRed {
-  color: var(--mantine-color-red-light-color);
-  background-color: var(--mantine-color-red-light);
-  padding: rem(5px);
-  border-radius: 5px;
-  width: rem(30px);
-  height: rem(30px);
-}
diff --git a/app/assets/features/budgets/pages/detail.tsx b/app/assets/features/budgets/pages/detail.tsx
index b3c6411..f89dcf8 100644
--- a/app/assets/features/budgets/pages/detail.tsx
+++ b/app/assets/features/budgets/pages/detail.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import { ActionIcon, Card, Container, Group, rem, SimpleGrid, Text } from '@mantine/core'
+import { ActionIcon, Container, rem, SimpleGrid, Text } from '@mantine/core'
 import {
   IconChevronLeft,
   IconCreditCard,
@@ -19,6 +19,7 @@ import { groupExpensesByCategory } from '../helpers/budgetDataTransformer'
 import { useBudget } from '../hooks/useBudget'
 
 import NotFound from '@/components/not-found'
+import { BudgetSummaryCards } from '../components/budget-summary-cards'
 import classes from './detail.module.css'
 
 const BudgetDetail: React.FC = () => {
@@ -60,60 +61,25 @@ const BudgetDetail: React.FC = () => {
         </ActionIcon>
       </Text>
       <Container>
-        <SimpleGrid cols={3}>
-          <Card radius='lg' pb='xl'>
-            <Card.Section inheritPadding py='xs'>
-              <Group justify='left' gap='xl' mt='xs'>
-                <div className={classes.divIconBlue}>
-                  <IconCreditCard className={classes.iconBlue} stroke={1.5} />
-                </div>
-              </Group>
-            </Card.Section>
-            <Card.Section inheritPadding py='xs'>
-              <Group justify='space-between'>
-                <Text fw={500}>Saving Capacity</Text>
-              </Group>
-              <Text fw={500} c='blue'>
-                {budget?.data.savingCapacity} €
-              </Text>
-            </Card.Section>
-          </Card>
-
-          <Card radius='lg' pb='xl'>
-            <Card.Section inheritPadding py='xs'>
-              <Group justify='left' gap='xl' mt='xs'>
-                <div className={classes.divIconGreen}>
-                  <IconCreditCardRefund className={classes.iconGreen} stroke={1.5} />
-                </div>
-              </Group>
-            </Card.Section>
-            <Card.Section inheritPadding py='xs'>
-              <Group justify='space-between'>
-                <Text fw={500}>Total Incomes</Text>
-              </Group>
-              <Text fw={500} c='green'>
-                {budget?.data.incomesAmount} €
-              </Text>
-            </Card.Section>
-          </Card>
-
-          <Card radius='lg' pb='xl'>
-            <Card.Section inheritPadding py='xs'>
-              <Group justify='left' gap='xl' mt='xs'>
-                <div className={classes.divIconRed}>
-                  <IconCreditCardPay className={classes.iconRed} stroke={1.5} />
-                </div>
-              </Group>
-            </Card.Section>
-            <Card.Section inheritPadding py='xs'>
-              <Group justify='space-between'>
-                <Text fw={500}>Total Expenses</Text>
-              </Group>
-              <Text fw={500} c='red'>
-                {budget?.data.expensesAmount} €
-              </Text>
-            </Card.Section>
-          </Card>
+        <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }}>
+          <BudgetSummaryCards
+            icon={IconCreditCard}
+            color='blue'
+            title='Saving Capacity'
+            amount={budget?.data.savingCapacity}
+          />
+          <BudgetSummaryCards
+            icon={IconCreditCardRefund}
+            color='green'
+            title='Total Incomes'
+            amount={budget?.data.incomesAmount}
+          />
+          <BudgetSummaryCards
+            icon={IconCreditCardPay}
+            color='red'
+            title='Total Expenses'
+            amount={budget?.data.expensesAmount}
+          />
         </SimpleGrid>
       </Container>
 
diff --git a/app/assets/features/budgets/pages/list.module.css b/app/assets/features/budgets/pages/list.module.css
index 3220cb3..ead576f 100644
--- a/app/assets/features/budgets/pages/list.module.css
+++ b/app/assets/features/budgets/pages/list.module.css
@@ -24,3 +24,11 @@
   color: var(--mantine-color-blue-light-color);
   padding: rem(2.5);
 }
+
+[data-mantine-color-scheme='dark'] .chevron {
+  color: var(--mantine-color-light-6);
+}
+
+[data-mantine-color-scheme='light'] .chevron {
+  color: var(--mantine-color-dark-6);
+}
diff --git a/app/assets/features/budgets/pages/list.tsx b/app/assets/features/budgets/pages/list.tsx
index a2e1ea3..30a2ef0 100644
--- a/app/assets/features/budgets/pages/list.tsx
+++ b/app/assets/features/budgets/pages/list.tsx
@@ -61,10 +61,10 @@ const BudgetList: React.FC = () => {
         >
           <Text size='sm'>Are you sure you want to delete this account?</Text>
           <Group justify='flex-end' mt='lg'>
-            <Button variant='subtle' onClick={closeDelete}>
+            <Button variant='subtle' radius='md' onClick={closeDelete}>
               Cancel
             </Button>
-            <Button color='red' onClick={handleDelete}>
+            <Button color='red' radius='md' onClick={handleDelete}>
               Delete
             </Button>
           </Group>
@@ -79,10 +79,10 @@ const BudgetList: React.FC = () => {
         >
           <Text size='sm'>Are you sure you want to duplicate this account?</Text>
           <Group justify='flex-end' mt='lg'>
-            <Button variant='subtle' onClick={closeDuplicate}>
+            <Button variant='subtle' radius='md' onClick={closeDuplicate}>
               Cancel
             </Button>
-            <Button color='blue' onClick={handleDuplicate}>
+            <Button color='blue' radius='md' onClick={handleDuplicate}>
               Duplicate
             </Button>
           </Group>
@@ -90,8 +90,8 @@ const BudgetList: React.FC = () => {
         <Group justify='center' gap='xl' mb='xl'>
           <ActionIcon
             variant='transparent'
-            c='black'
             onClick={() => setSelectedYear(selectedYear - 1)}
+            className={classes.chevron}
           >
             <IconChevronLeft stroke={1.5} />
           </ActionIcon>
@@ -100,8 +100,8 @@ const BudgetList: React.FC = () => {
           </Text>
           <ActionIcon
             variant='transparent'
-            c='black'
             onClick={() => setSelectedYear(selectedYear + 1)}
+            className={classes.chevron}
           >
             <IconChevronRight stroke={1.5} />
           </ActionIcon>
diff --git a/app/assets/layouts/authenticated-layout.tsx b/app/assets/layouts/authenticated-layout.tsx
index b93095f..6a8435d 100644
--- a/app/assets/layouts/authenticated-layout.tsx
+++ b/app/assets/layouts/authenticated-layout.tsx
@@ -29,7 +29,7 @@ export default function AuthenticatedLayout({ children }: PropsWithChildren) {
         </Group>
       </AppShell.Header>
       <AppShell.Navbar withBorder={false}>
-        <Sidebar />
+        <Sidebar onNavigate={toggle} />
       </AppShell.Navbar>
       <AppShell.Main>{children}</AppShell.Main>
     </AppShell>
diff --git a/app/templates/base.html.twig b/app/templates/base.html.twig
index 2f8c2cc..48e8dcf 100644
--- a/app/templates/base.html.twig
+++ b/app/templates/base.html.twig
@@ -2,7 +2,11 @@
 <html>
     <head>
         <meta charset="UTF-8">
-        <title>{% block title %}Welcome!{% endblock title %}</title>
+        <title>{% block title %}Mybudget{% endblock title %}</title>
+        <meta
+            name="viewport"
+            content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no shrink-to-fit=no"
+        />
         <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
         {% block stylesheets %}
             {{ vite_entry_link_tags('app') }}