Feature/#61 Layout contrato abierto presupuesto base

src/modules/expedientes/crear/components/steps/presupuesto-base-step.component.tsx

@@ -4,7 +4,27 @@ import { TextFieldForm } from '#common/components';
 import { useCreateExpedienteContext, PresupuestoBase } from '#modules/expedientes/core/providers';
 import { StepNavigation } from '../step-navigation.component';
 import { presupuestoBaseValidations } from '../validations';
-import * as classes from './steps.styles';
+import {
+  TableContainer,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  InputAdornment,
+  Paper,
+  TableFooter,
+  Typography,
+  Box,
+  MenuItem,
+  Button,
+  Stack,
+  IconButton,
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import SaveIcon from '@mui/icons-material/Save';
+import * as innerClasses from './presupuesto-base.styles';
+import { useWithTheme } from '#core/theme/theme.hooks.ts';
 
 export const PresupuestoBaseStep: React.FC = () => {
   const { formData, onNextStep } = useCreateExpedienteContext();
@@ -13,6 +33,20 @@ export const PresupuestoBaseStep: React.FC = () => {
     onNextStep('presupuestoBase', values);
   };
 
+  const classes = useWithTheme(innerClasses);
+
+  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 +56,119 @@ 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>
+                      <IconButton>
+                        <DeleteIcon />
+                      </IconButton>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+
+              <TableFooter sx={{ bgcolor: '#fafafa' }}>
+                <TableRow>
+                  <Typography pt={2} pl={2} component={'td'}>
+                    Añadir anualidad
+                  </Typography>
+                </TableRow>
+                <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: {
+                        endAdornment: <InputAdornment position="end">€</InputAdornment>,
+                      },
+                    }}
+                    type="number"
+                    name="importe"
+                    label="Importe"
+                    size="small"
+                    component={'td'}
+                  />
+                  <Button
+                    endIcon={<SaveIcon fontSize="inherit" />}
+                    variant="contained"
+                    size="medium"
+                    className={classes.button}
+                    fullWidth
+                    component={'td'}
+                  >
+                    GUARDAR
+                  </Button>
+                </Stack>
+              </TableFooter>
+            </Table>
+          </TableContainer>
+
           <StepNavigation />
         </Form>
       )}

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%;
+`;