From c230c3be0be19528c2dabcf36052ce751f9eb6c5 Mon Sep 17 00:00:00 2001
From: Monika <monik.stefanova@gmail.com>
Date: Wed, 19 Mar 2025 00:06:04 +0100
Subject: [PATCH 01/10] initial commit

---
 .../steps/presupuesto-base-step.component.tsx | 135 +++++++++++++++++-
 .../crear/components/steps/steps.styles.ts    |  45 ++++++
 2 files changed, 179 insertions(+), 1 deletion(-)

diff --git a/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx b/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
index d00f737..824b259 100644
--- a/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
+++ b/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
@@ -4,6 +4,23 @@ import { TextFieldForm } from '#common/components';
 import { useCreateExpedienteContext, PresupuestoBase } from '#modules/expedientes/core/providers';
 import { StepNavigation } from '../step-navigation.component';
 import { presupuestoBaseValidations } from '../validations';
+import {
+  TableContainer,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  InputAdornment,
+  Paper,
+  TableFooter,
+  Typography,
+  Box,
+  MenuItem,
+  Button,
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import SaveIcon from '@mui/icons-material/Save';
 import * as classes from './steps.styles';
 
 export const PresupuestoBaseStep: React.FC = () => {
@@ -13,6 +30,18 @@ export const PresupuestoBaseStep: React.FC = () => {
     onNextStep('presupuestoBase', values);
   };
 
+  const createRow = (id: number, year: number, application: string, cuantity: string) => ({
+    id,
+    year,
+    application,
+    cuantity,
+  });
+
+  const rows = [
+    createRow(1, 2021, '22 227.00', '19.000 €'),
+    createRow(2, 2022, '22 227.00', '19.000 €'),
+    createRow(3, 2023, '22 227.00', '19.000 €'),
+  ];
   return (
     <Formik
       initialValues={formData.presupuestoBase}
@@ -22,7 +51,111 @@ export const PresupuestoBaseStep: React.FC = () => {
     >
       {() => (
         <Form className={classes.form}>
-          <TextFieldForm type="number" name="amount" label="Cantidad" />
+          <Box className={classes.fields}>
+            <TextFieldForm
+              slotProps={{
+                input: {
+                  endAdornment: <InputAdornment position="end">€</InputAdornment>,
+                },
+              }}
+              type="number"
+              name="amount"
+              label="Cantidad"
+            />
+            <TextFieldForm
+              slotProps={{
+                input: {
+                  endAdornment: <InputAdornment position="end">%</InputAdornment>,
+                },
+              }}
+              type="number"
+              name="amount"
+              label="Porcentaje IVA"
+            />
+            <TextFieldForm
+              slotProps={{
+                input: {
+                  endAdornment: <InputAdornment position="end">€</InputAdornment>,
+                },
+              }}
+              type="number"
+              name="amount"
+              label="Cantidad"
+            />
+            <TextFieldForm
+              slotProps={{
+                input: {
+                  endAdornment: <InputAdornment position="end">€</InputAdornment>,
+                },
+              }}
+              type="number"
+              name="amount"
+              label="Cantidad"
+            />
+          </Box>
+          <Box>
+            <Typography variant="h6" mt="16px" mb="16px">
+              ANUALIDADES
+            </Typography>
+          </Box>
+          <TableContainer component={Paper}>
+            <Table>
+              <TableHead>
+                <TableRow className={classes.rowHeader}>
+                  <TableCell>Ejercicio</TableCell>
+                  <TableCell>Aplicación presupuestaria</TableCell>
+                  <TableCell>Importe</TableCell>
+                  <TableCell></TableCell>
+                </TableRow>
+              </TableHead>
+
+              <TableBody>
+                {rows.map(row => (
+                  <TableRow key={row.id} className={classes.rowsBody}>
+                    <TableCell>{row.year}</TableCell>
+                    <TableCell>{row.application}</TableCell>
+                    <TableCell>{row.cuantity}</TableCell>
+                    <TableCell>
+                      <DeleteIcon />
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+
+              <TableFooter sx={{ bgcolor: '#fafafa' }}>
+                <TableRow>
+                  <Typography pt={2} pl={2}>
+                    Añadir anualidad
+                  </Typography>
+                </TableRow>
+                <TableRow className={classes.rowFooter}>
+                  <TextFieldForm type="text" name="ejercicio" label="Ejercicio" size="small" />
+
+                  <TextFieldForm name="label" label="Label" select size="small">
+                    <MenuItem>Label 1</MenuItem>
+                    <MenuItem>Label 2</MenuItem>
+                    <MenuItem>Label 3</MenuItem>
+                  </TextFieldForm>
+
+                  <TextFieldForm
+                    slotProps={{
+                      input: {
+                        endAdornment: <InputAdornment position="end">€</InputAdornment>,
+                      },
+                    }}
+                    type="number"
+                    name="importe"
+                    label="Importe"
+                    size="small"
+                  />
+                  <Button endIcon={<SaveIcon />} variant="contained" className={classes.button}>
+                    GUARDAR
+                  </Button>
+                </TableRow>
+              </TableFooter>
+            </Table>
+          </TableContainer>
+
           <StepNavigation />
         </Form>
       )}
diff --git a/src/modules/expedientes/crear/components/steps/steps.styles.ts b/src/modules/expedientes/crear/components/steps/steps.styles.ts
index 80d816f..e948eb2 100644
--- a/src/modules/expedientes/crear/components/steps/steps.styles.ts
+++ b/src/modules/expedientes/crear/components/steps/steps.styles.ts
@@ -2,4 +2,49 @@ import { css } from '@emotion/css';
 
 export const form = css`
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0;
+`;
+
+export const fields = css`
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  flex-grow: 1;
+  gap: 16px;
+  margin: 0;
+`;
+
+export const rowHeader = css`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 56px;
+  background-color: #9c27b04d;
+
+  & > th {
+    font-weight: 600;
+  }
+`;
+export const rowsBody = css`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 56px;
+`;
+
+export const rowFooter = css`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 123px;
+  grid-column-gap: 16px;
+  padding: 16px;
+  padding-top: 0;
+  align-items: center;
+  align-content: center;
+`;
+
+export const button = css`
+  background-color: #9c27b0;
+
+  &:hover {
+    background-color: rgb(122, 23, 140);
+  }
 `;

From f6e64e9bfd205e4096409140acd4b392901a2c4a Mon Sep 17 00:00:00 2001
From: Monika <monik.stefanova@gmail.com>
Date: Wed, 19 Mar 2025 10:20:13 +0100
Subject: [PATCH 02/10] adding an icon button component for the <DeleteIcon/>
 component

---
 .../components/steps/presupuesto-base-step.component.tsx     | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx b/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
index 824b259..387bee3 100644
--- a/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
+++ b/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
@@ -18,6 +18,7 @@ import {
   Box,
   MenuItem,
   Button,
+  IconButton,
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import SaveIcon from '@mui/icons-material/Save';
@@ -116,7 +117,9 @@ export const PresupuestoBaseStep: React.FC = () => {
                     <TableCell>{row.application}</TableCell>
                     <TableCell>{row.cuantity}</TableCell>
                     <TableCell>
-                      <DeleteIcon />
+                      <IconButton>
+                        <DeleteIcon />
+                      </IconButton>
                     </TableCell>
                   </TableRow>
                 ))}

From b242aee874cac52e3401bc0cf84a7db3c2e04046 Mon Sep 17 00:00:00 2001
From: Monika <monik.stefanova@gmail.com>
Date: Wed, 19 Mar 2025 11:11:51 +0100
Subject: [PATCH 03/10] fixing the issue with the SavaButton

---
 .../steps/presupuesto-base-step.component.tsx      | 14 +++++++++++---
 .../crear/components/steps/steps.styles.ts         | 12 ++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx b/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
index 387bee3..d378ed5 100644
--- a/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
+++ b/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
@@ -18,6 +18,7 @@ import {
   Box,
   MenuItem,
   Button,
+  Stack,
   IconButton,
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -131,7 +132,8 @@ export const PresupuestoBaseStep: React.FC = () => {
                     Añadir anualidad
                   </Typography>
                 </TableRow>
-                <TableRow className={classes.rowFooter}>
+
+                <Stack direction="row" spacing={2} className={classes.rowFooter}>
                   <TextFieldForm type="text" name="ejercicio" label="Ejercicio" size="small" />
 
                   <TextFieldForm name="label" label="Label" select size="small">
@@ -151,10 +153,16 @@ export const PresupuestoBaseStep: React.FC = () => {
                     label="Importe"
                     size="small"
                   />
-                  <Button endIcon={<SaveIcon />} variant="contained" className={classes.button}>
+                  <Button
+                    endIcon={<SaveIcon fontSize="inherit" />}
+                    variant="contained"
+                    size="medium"
+                    className={classes.button}
+                    fullWidth
+                  >
                     GUARDAR
                   </Button>
-                </TableRow>
+                </Stack>
               </TableFooter>
             </Table>
           </TableContainer>
diff --git a/src/modules/expedientes/crear/components/steps/steps.styles.ts b/src/modules/expedientes/crear/components/steps/steps.styles.ts
index e948eb2..205c822 100644
--- a/src/modules/expedientes/crear/components/steps/steps.styles.ts
+++ b/src/modules/expedientes/crear/components/steps/steps.styles.ts
@@ -32,19 +32,11 @@ export const rowsBody = css`
 `;
 
 export const rowFooter = css`
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 123px;
-  grid-column-gap: 16px;
+  box-sizing: border-box;
   padding: 16px;
-  padding-top: 0;
-  align-items: center;
-  align-content: center;
 `;
 
 export const button = css`
   background-color: #9c27b0;
-
-  &:hover {
-    background-color: rgb(122, 23, 140);
-  }
+  width: 50%;
 `;

From fb0c672232fcefb11f0024ee41e76daf811f11a9 Mon Sep 17 00:00:00 2001
From: Monika <monik.stefanova@gmail.com>
Date: Wed, 19 Mar 2025 11:24:42 +0100
Subject: [PATCH 04/10] <DeleteIcon/>

---
 .../expedientes/crear/components/steps/steps.styles.ts        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/expedientes/crear/components/steps/steps.styles.ts b/src/modules/expedientes/crear/components/steps/steps.styles.ts
index 205c822..5cf6d37 100644
--- a/src/modules/expedientes/crear/components/steps/steps.styles.ts
+++ b/src/modules/expedientes/crear/components/steps/steps.styles.ts
@@ -19,7 +19,7 @@ export const fields = css`
 
 export const rowHeader = css`
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 56px;
+  grid-template-columns: 1fr 1fr 1fr 65px;
   background-color: #9c27b04d;
 
   & > th {
@@ -28,7 +28,7 @@ export const rowHeader = css`
 `;
 export const rowsBody = css`
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 56px;
+  grid-template-columns: 1fr 1fr 1fr 65px;
 `;
 
 export const rowFooter = css`

From bb9b6d9487a36fd67b59e08be046db78dd0ee4c7 Mon Sep 17 00:00:00 2001
From: Monika <monik.stefanova@gmail.com>
Date: Wed, 19 Mar 2025 11:52:08 +0100
Subject: [PATCH 05/10] some text align for the table cells

---
 .../expedientes/crear/components/steps/steps.styles.ts      | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/modules/expedientes/crear/components/steps/steps.styles.ts b/src/modules/expedientes/crear/components/steps/steps.styles.ts
index 5cf6d37..558d2b9 100644
--- a/src/modules/expedientes/crear/components/steps/steps.styles.ts
+++ b/src/modules/expedientes/crear/components/steps/steps.styles.ts
@@ -29,6 +29,12 @@ export const rowHeader = css`
 export const rowsBody = css`
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 65px;
+
+  & > td {
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
 `;
 
 export const rowFooter = css`

From df46484eab0cd86324ea4fb46963cc76c957daf1 Mon Sep 17 00:00:00 2001
From: Monika Stefanova <monik.stefanova@gmail.com>
Date: Fri, 21 Mar 2025 20:05:49 +0100
Subject: [PATCH 06/10] add classes

---
 .../components/steps/presupuesto-base-step.component.tsx      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx b/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
index d378ed5..a764f1f 100644
--- a/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
+++ b/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
@@ -23,7 +23,8 @@ import {
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import SaveIcon from '@mui/icons-material/Save';
-import * as classes from './steps.styles';
+import * as innerClasses from './steps.styles';
+import { useWithTheme } from '#core/theme/theme.hooks.ts';
 
 export const PresupuestoBaseStep: React.FC = () => {
   const { formData, onNextStep } = useCreateExpedienteContext();
@@ -32,6 +33,7 @@ export const PresupuestoBaseStep: React.FC = () => {
     onNextStep('presupuestoBase', values);
   };
 
+  const classes = useWithTheme(innerClasses);
   const createRow = (id: number, year: number, application: string, cuantity: string) => ({
     id,
     year,

From 35f5ebba2627c38605e4e21b3d9236bf74466077 Mon Sep 17 00:00:00 2001
From: Monika Stefanova <monik.stefanova@gmail.com>
Date: Fri, 21 Mar 2025 20:06:51 +0100
Subject: [PATCH 07/10] add classes

---
 .../crear/components/steps/presupuesto-base-step.component.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx b/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
index a764f1f..6c6e9a2 100644
--- a/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
+++ b/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
@@ -34,6 +34,7 @@ export const PresupuestoBaseStep: React.FC = () => {
   };
 
   const classes = useWithTheme(innerClasses);
+
   const createRow = (id: number, year: number, application: string, cuantity: string) => ({
     id,
     year,

From b6162924fd04f88b5c221e76ab944befbbe96d09 Mon Sep 17 00:00:00 2001
From: Monika Stefanova <monik.stefanova@gmail.com>
Date: Thu, 27 Mar 2025 23:38:34 +0100
Subject: [PATCH 08/10] presupuesto-base stylesheet

---
 .../steps/presupuesto-base-step.component.tsx |  2 +-
 .../steps/presupuesto-base.styles.ts          |  0
 .../crear/components/steps/steps.styles.ts    | 43 -------------------
 3 files changed, 1 insertion(+), 44 deletions(-)
 create mode 100644 src/modules/expedientes/crear/components/steps/presupuesto-base.styles.ts

diff --git a/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx b/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
index 6c6e9a2..da7c2f2 100644
--- a/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
+++ b/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
@@ -23,7 +23,7 @@ import {
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import SaveIcon from '@mui/icons-material/Save';
-import * as innerClasses from './steps.styles';
+import * as innerClasses from './presupuesto-base.styles';
 import { useWithTheme } from '#core/theme/theme.hooks.ts';
 
 export const PresupuestoBaseStep: React.FC = () => {
diff --git a/src/modules/expedientes/crear/components/steps/presupuesto-base.styles.ts b/src/modules/expedientes/crear/components/steps/presupuesto-base.styles.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/modules/expedientes/crear/components/steps/steps.styles.ts b/src/modules/expedientes/crear/components/steps/steps.styles.ts
index 558d2b9..80d816f 100644
--- a/src/modules/expedientes/crear/components/steps/steps.styles.ts
+++ b/src/modules/expedientes/crear/components/steps/steps.styles.ts
@@ -2,47 +2,4 @@ import { css } from '@emotion/css';
 
 export const form = css`
   width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 0;
-`;
-
-export const fields = css`
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-  flex-grow: 1;
-  gap: 16px;
-  margin: 0;
-`;
-
-export const rowHeader = css`
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 65px;
-  background-color: #9c27b04d;
-
-  & > th {
-    font-weight: 600;
-  }
-`;
-export const rowsBody = css`
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 65px;
-
-  & > td {
-    display: inline-flex;
-    justify-content: flex-start;
-    align-items: center;
-  }
-`;
-
-export const rowFooter = css`
-  box-sizing: border-box;
-  padding: 16px;
-`;
-
-export const button = css`
-  background-color: #9c27b0;
-  width: 50%;
 `;

From 99a6ea598d508da6dace066eb30c7dc761739cd7 Mon Sep 17 00:00:00 2001
From: Monika Stefanova <monik.stefanova@gmail.com>
Date: Thu, 27 Mar 2025 23:44:22 +0100
Subject: [PATCH 09/10] styles

---
 .../steps/presupuesto-base.styles.ts          | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/modules/expedientes/crear/components/steps/presupuesto-base.styles.ts b/src/modules/expedientes/crear/components/steps/presupuesto-base.styles.ts
index e69de29..558d2b9 100644
--- a/src/modules/expedientes/crear/components/steps/presupuesto-base.styles.ts
+++ b/src/modules/expedientes/crear/components/steps/presupuesto-base.styles.ts
@@ -0,0 +1,48 @@
+import { css } from '@emotion/css';
+
+export const form = css`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0;
+`;
+
+export const fields = css`
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  flex-grow: 1;
+  gap: 16px;
+  margin: 0;
+`;
+
+export const rowHeader = css`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 65px;
+  background-color: #9c27b04d;
+
+  & > th {
+    font-weight: 600;
+  }
+`;
+export const rowsBody = css`
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 65px;
+
+  & > td {
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+`;
+
+export const rowFooter = css`
+  box-sizing: border-box;
+  padding: 16px;
+`;
+
+export const button = css`
+  background-color: #9c27b0;
+  width: 50%;
+`;

From d50fbf455af2909a493ef31603e924a5bea3de48 Mon Sep 17 00:00:00 2001
From: Monika Stefanova <monik.stefanova@gmail.com>
Date: Fri, 28 Mar 2025 23:20:36 +0100
Subject: [PATCH 10/10] fixing bugs

---
 .../steps/presupuesto-base-step.component.tsx       | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx b/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
index da7c2f2..7dbef06 100644
--- a/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
+++ b/src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx
@@ -131,20 +131,17 @@ export const PresupuestoBaseStep: React.FC = () => {
 
               <TableFooter sx={{ bgcolor: '#fafafa' }}>
                 <TableRow>
-                  <Typography pt={2} pl={2}>
+                  <Typography pt={2} pl={2} component={'td'}>
                     Añadir anualidad
                   </Typography>
                 </TableRow>
-
-                <Stack direction="row" spacing={2} className={classes.rowFooter}>
-                  <TextFieldForm type="text" name="ejercicio" label="Ejercicio" size="small" />
-
-                  <TextFieldForm name="label" label="Label" select size="small">
+                <Stack direction="row" spacing={2} p={2} component={'tr'}>
+                  <TextFieldForm type="text" name="ejercicio" label="Ejercicio" size="small" component={'td'} />
+                  <TextFieldForm name="label" label="Label" select size="small" component={'td'}>
                     <MenuItem>Label 1</MenuItem>
                     <MenuItem>Label 2</MenuItem>
                     <MenuItem>Label 3</MenuItem>
                   </TextFieldForm>
-
                   <TextFieldForm
                     slotProps={{
                       input: {
@@ -155,6 +152,7 @@ export const PresupuestoBaseStep: React.FC = () => {
                     name="importe"
                     label="Importe"
                     size="small"
+                    component={'td'}
                   />
                   <Button
                     endIcon={<SaveIcon fontSize="inherit" />}
@@ -162,6 +160,7 @@ export const PresupuestoBaseStep: React.FC = () => {
                     size="medium"
                     className={classes.button}
                     fullWidth
+                    component={'td'}
                   >
                     GUARDAR
                   </Button>