Add Info page

Signed-off-by: Giovanni Baratta <[email protected]>

src/App.tsx

@@ -12,6 +12,7 @@ import {
   ListItemIcon,
   ListItemText
 } from "@mui/material"
+import InfoTwoToneIcon from "@mui/icons-material/InfoTwoTone"
 import {useAppSelector} from "./state/store.ts"
 import {getFirstDayOfNextMonthsFrom} from "./utils/date.ts"
 import {buildCarExpensesCalculator} from "./model/car.ts"
@@ -30,6 +31,7 @@ import {buildHouseExpensesCalculator} from "./model/house.ts"
 import {buildFurnitureExpensesCalculator} from "./model/furniture.ts"
 import {buildHouseAgencyExpensesCalculator, HouseAgencyCosts} from "./model/house-agency.ts"
 import {HouseComponent} from "./components/HouseComponent.tsx"
+import {Info} from "./components/InfoComponent.tsx"
 
 const ONE_YEAR_IN_MS = 1 * 1000 * 60 * 60 * 24 * 365
 
@@ -151,8 +153,19 @@ function App() {
           anchor="left"
         >
           <List>
-            <ListItem key={"Summary"} disablePadding>
+            <ListItem key={"Info"} disablePadding>
               <Link to="/">
+                <ListItemButton>
+                  <ListItemIcon>
+                    <InfoTwoToneIcon />
+                  </ListItemIcon>
+                  <ListItemText primary={"Info"} />
+                </ListItemButton>
+              </Link>
+            </ListItem>
+            <Divider />
+            <ListItem key={"Summary"} disablePadding>
+              <Link to="/summary">
                 <ListItemButton>
                   <ListItemIcon>
                     <AnalyticsIcon />
@@ -220,9 +233,10 @@ function App() {
         <Container maxWidth="xl">
 
           <Routes>
-            <Route path="/" element={<SummaryComponent simulationStartDate={simulationStartDate}
-                                                       simulationEndingDate={simulationEndingDate}
-                                                       records={records} />} />
+            <Route path="/" element={<Info />} />
+            <Route path="/summary" element={<SummaryComponent simulationStartDate={simulationStartDate}
+                                                              simulationEndingDate={simulationEndingDate}
+                                                              records={records} />} />
             <Route path="/projection" element={<CostsProjectionComponent data={records} />} />
             <Route path="/income" element={<IncomeComponent />} />
             <Route path="/car" element={<CarComponent disabled={false} />} />

src/components/InfoComponent.tsx

@@ -0,0 +1,53 @@
+import React from "react"
+import {Alert, Box, Container, List, ListItemText, Typography} from "@mui/material"
+import logo from "../../public/logo-no-background.png"
+
+interface InfoComponentProps {
+}
+
+export const Info: React.FC<InfoComponentProps> = () => {
+  return (
+    <Container maxWidth="lg">
+      <Box sx={{my: 4}}>
+        <img src={logo} alt="Logo" style={{width: "100px", height: "auto", margin: "10px"}} />
+        <Typography variant="h4" component="h1" gutterBottom>
+          What can you do in this web app?
+        </Typography>
+        <Typography paragraph>
+          This web app allows you to simulate your future financial situation based on your current income, expenses,
+          and assets.
+        </Typography>
+        <List>
+          <ListItemText
+            primary={"💸 See how much money you will have left at the end of each month after paying your expenses."} />
+
+          <ListItemText
+            primary={"📈 Project your financial situation over a period of time, taking into account your income growth, " +
+              "expenses, and investments."} />
+
+          <ListItemText
+            primary={"💭 See how different scenarios, such as changing your income or expenses, will affect your financial future."} />
+
+        </List>
+        <Alert severity="warning" sx={{maxWidth: "60%", margin: "auto", my: 3}}>The web app is still under
+          development,
+          but it
+          already has a
+          number of features that
+          may help you</Alert>
+
+      </Box>
+      <Box sx={{my: 10}}>
+        <Typography variant="h4" gutterBottom>
+          How to use the web app
+        </Typography>
+        <Typography paragraph>
+          Use the menu on the left side of the screen to navigate through the different sections of the web app. Open
+          each section and fill the data based on your needs.
+          After you filled all the data, go to the Summary section and to Projection to see the results of your expected
+          financial situation.
+        </Typography>
+      </Box>
+    </Container>
+  )
+}

src/vite-env.d.ts

@@ -0,0 +1 @@
+declare module "*.png";