agregar clientes en factura
This commit is contained in:
Andres Alvarez
parent
3f21087779
commit
7406a5d855
|
|
@ -35,5 +35,5 @@ yarn-error.log*
|
|||
!.yarn/versions
|
||||
.pnp.*
|
||||
|
||||
yarn.lock
|
||||
/yarn.lock
|
||||
package-lock.json
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
"draft-js": "0.11.7",
|
||||
"draftjs-to-html": "0.9.1",
|
||||
"firebase": "10.7.1",
|
||||
"formik": "^2.4.5",
|
||||
"framer-motion": "10.18.0",
|
||||
"history": "5.3.0",
|
||||
"i18next": "23.7.16",
|
||||
|
|
@ -57,6 +58,7 @@
|
|||
"stylis-plugin-rtl": "2.1.1",
|
||||
"type-fest": "4.9.0",
|
||||
"web-vitals": "3.5.1",
|
||||
"yup": "^1.3.3",
|
||||
"zod": "3.22.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
|
|||
|
|
@ -7,22 +7,34 @@ const clientes = [
|
|||
id: 1,
|
||||
nombreComercial: 'Andres Alvarez',
|
||||
razonSocial: 'Andres Alvarez',
|
||||
identificacion: '1721529707',
|
||||
identificacion: '1721529788',
|
||||
direccion: 'Calle oe',
|
||||
telefono: '0988545102',
|
||||
correo: 'andres@test.com'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
nombreComercial: 'Paul Ruales',
|
||||
razonSocial: 'Paul Ruales',
|
||||
identificacion: '1721524123',
|
||||
direccion: 'Calle lomisima',
|
||||
telefono: '0988544772',
|
||||
correo: 'poul@test.com'
|
||||
}
|
||||
];
|
||||
function DataClient() {
|
||||
const [clients, setClients] = useState<Client[]>(clientes);
|
||||
const [selectClient, setSelectClient] = useState<Client | null>(null);
|
||||
|
||||
const handleSelectClient = (value) => {
|
||||
setClients([...clients, value]);
|
||||
const handleSelectClient = (value:Client) => {
|
||||
setSelectClient(value)
|
||||
if(!clients.includes(value)) setClients([...clients, value])
|
||||
};
|
||||
return (
|
||||
<DataClientRender
|
||||
client={clients}
|
||||
handleSelectClient={handleSelectClient}
|
||||
selectClient={selectClient}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,148 +1,111 @@
|
|||
import { useState } from 'react';
|
||||
import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
|
||||
import { Autocomplete, Box, Divider, Grid, TextField, Typography, Button } from '@mui/material';
|
||||
import AddClient from './components/addClient/AddClient';
|
||||
import { Client } from './DataClientInterfaz';
|
||||
import { useState } from "react";
|
||||
import FuseSvgIcon from "@fuse/core/FuseSvgIcon";
|
||||
import {
|
||||
Autocomplete,
|
||||
Box,
|
||||
Divider,
|
||||
Grid,
|
||||
TextField,
|
||||
Typography,
|
||||
Button,
|
||||
} from "@mui/material";
|
||||
import AddClient from "./components/addClient/AddClient";
|
||||
import { Client } from "./DataClientInterfaz";
|
||||
|
||||
interface Props {
|
||||
client: Client[];
|
||||
handleSelectClient: (value: Client) => void;
|
||||
client: Client[];
|
||||
handleSelectClient: (value: Client) => void;
|
||||
selectClient: Client;
|
||||
}
|
||||
function DataClientRender({ client, handleSelectClient }: Props) {
|
||||
const [openDialog, setOpenDialog] = useState<boolean>(false);
|
||||
return (
|
||||
<Box className="mt-10 p-20 shadow-2 rounded-8">
|
||||
<AddClient
|
||||
open={openDialog}
|
||||
setOpen={setOpenDialog}
|
||||
/>
|
||||
<Grid
|
||||
container
|
||||
spacing={2}
|
||||
>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={10}
|
||||
>
|
||||
<Typography
|
||||
component="h3"
|
||||
className="mb-7 text-16"
|
||||
>
|
||||
Datos cliente
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={2}
|
||||
className="flex justify-end"
|
||||
>
|
||||
<Button
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
className="rounded-6"
|
||||
size="small"
|
||||
onClick={() => setOpenDialog(true)}
|
||||
startIcon={
|
||||
<FuseSvgIcon
|
||||
className="text-48"
|
||||
size={24}
|
||||
color="action"
|
||||
>
|
||||
heroicons-outline:plus
|
||||
</FuseSvgIcon>
|
||||
}
|
||||
>
|
||||
Agregar{' '}
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
>
|
||||
<Divider className="border-1 mb-10" />
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={12}
|
||||
>
|
||||
<Autocomplete
|
||||
className="mt-8 mb-16"
|
||||
options={client}
|
||||
getOptionLabel={(option) => option.razonSocial}
|
||||
noOptionsText="No se encontro un resultado"
|
||||
size="small"
|
||||
/* value={value }
|
||||
function DataClientRender({ client, handleSelectClient, selectClient }: Props) {
|
||||
const [openDialog, setOpenDialog] = useState<boolean>(false);
|
||||
return (
|
||||
<Box className="mt-10 p-20 shadow-2 rounded-8">
|
||||
<AddClient open={openDialog} setOpen={setOpenDialog} handleSelectClient={handleSelectClient}/>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={10}>
|
||||
<Typography component="h3" className="mb-7 text-16">
|
||||
Datos cliente
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={2} className="flex justify-end">
|
||||
<Button
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
className="rounded-6"
|
||||
size="small"
|
||||
onClick={() => setOpenDialog(true)}
|
||||
startIcon={
|
||||
<FuseSvgIcon className="text-48" size={24} color="action">
|
||||
heroicons-outline:plus
|
||||
</FuseSvgIcon>
|
||||
}
|
||||
>
|
||||
Agregar{" "}
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Divider className="border-1 mb-10" />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={12}>
|
||||
<Autocomplete
|
||||
className="mt-8 mb-16"
|
||||
options={client}
|
||||
getOptionLabel={(option) => option.razonSocial}
|
||||
noOptionsText="No se encontro un resultado"
|
||||
size="small"
|
||||
value={selectClient}
|
||||
onChange={(event, newValue) => {
|
||||
onChange(newValue);
|
||||
}} */
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
placeholder="Busque el cliente"
|
||||
label="Cliente"
|
||||
variant="outlined"
|
||||
InputLabelProps={{
|
||||
shrink: true
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
md={12}
|
||||
>
|
||||
<Divider />
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
md={4}
|
||||
xs={12}
|
||||
>
|
||||
<b>Razón Social:</b> Jonathan Andres Alvarez Flores
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
md={4}
|
||||
xs={12}
|
||||
>
|
||||
<b>Nombre Comercial:</b> Jonathan Andres Alvarez Flores
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
md={4}
|
||||
xs={12}
|
||||
>
|
||||
<b>Ruc:</b> 17215785512001
|
||||
</Grid>
|
||||
handleSelectClient(newValue);
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
placeholder="Busque el cliente"
|
||||
label="Cliente"
|
||||
variant="outlined"
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item md={12}>
|
||||
<Divider />
|
||||
</Grid>
|
||||
{selectClient ? (
|
||||
<>
|
||||
<Grid item md={4} xs={12}>
|
||||
<b>Razón Social:</b> {selectClient.razonSocial}
|
||||
</Grid>
|
||||
<Grid item md={4} xs={12}>
|
||||
<b>Nombre Comercial:</b> {selectClient.nombreComercial}
|
||||
</Grid>
|
||||
<Grid item md={4} xs={12}>
|
||||
<b>Ruc:</b> {selectClient.identificacion}
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
item
|
||||
md={4}
|
||||
xs={12}
|
||||
>
|
||||
<b>Dirección:</b> Calle Oe11g y s32
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
md={4}
|
||||
xs={12}
|
||||
>
|
||||
<b>Teléfono:</b> 0988545211
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
md={4}
|
||||
xs={12}
|
||||
>
|
||||
<b>Correo:</b> admin@qsoftec.com
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
<Grid item md={4} xs={12}>
|
||||
<b>Dirección:</b> {selectClient.direccion}
|
||||
</Grid>
|
||||
<Grid item md={4} xs={12}>
|
||||
<b>Teléfono:</b> {selectClient.telefono}
|
||||
</Grid>
|
||||
<Grid item md={4} xs={12}>
|
||||
<b>Correo:</b> {selectClient.correo}
|
||||
</Grid>
|
||||
</>
|
||||
) : (
|
||||
<Box className="flex justify-center w-full mt-20">
|
||||
<Typography variant="subtitle2" gutterBottom>
|
||||
Seleccione o agrege el cliente
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default DataClientRender;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,58 @@
|
|||
import AddClientRender from './AddClientRender';
|
||||
import { useFormik } from "formik";
|
||||
import { Client } from "../../DataClientInterfaz";
|
||||
import AddClientRender from "./AddClientRender";
|
||||
import * as Yup from "yup";
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
handleSelectClient: (value: Client) => void;
|
||||
}
|
||||
function AddClient({ open, setOpen }: Props) {
|
||||
return (
|
||||
<AddClientRender
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
/>
|
||||
);
|
||||
function AddClient({ open, setOpen, handleSelectClient }: Props) {
|
||||
const formik = useFormik<Client>({
|
||||
initialValues: {
|
||||
id: Math.floor(Math.random() * 100),
|
||||
nombreComercial: "",
|
||||
razonSocial: "",
|
||||
identificacion: "",
|
||||
direccion: "",
|
||||
telefono: "",
|
||||
correo: "",
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
nombreComercial: Yup.string().required("El campo es Obligatorio"),
|
||||
razonSocial: Yup.string().required("El campo es Obligatorio"),
|
||||
identificacion: Yup.string().required("El campo es Obligatorio"),
|
||||
direccion: Yup.string().required("El campo es Obligatorio"),
|
||||
telefono: Yup.string().required("El campo es Obligatorio"),
|
||||
correo: Yup.string().required("El campo es Obligatorio")
|
||||
.email("Correo no valido"),
|
||||
}),
|
||||
onSubmit: (value) => {
|
||||
handleSaveClient(value)
|
||||
},
|
||||
});
|
||||
|
||||
const handleOnChange = ({ target }) => {
|
||||
const { name, value } = target;
|
||||
formik.setFieldValue(name, value);
|
||||
};
|
||||
|
||||
//TODO: Guardar cliente en la base de datos y seleccionar
|
||||
const handleSaveClient = (value) => {
|
||||
handleSelectClient(value)
|
||||
formik.resetForm();
|
||||
setOpen(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<AddClientRender
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
formik={formik}
|
||||
handleOnChange={handleOnChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default AddClient;
|
||||
|
|
|
|||
|
|
@ -1,118 +1,181 @@
|
|||
import { DialogActions, DialogContent, DialogTitle, Button, Grid, TextField, Dialog } from '@mui/material';
|
||||
import {
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
Button,
|
||||
Grid,
|
||||
TextField,
|
||||
Dialog,
|
||||
} from "@mui/material";
|
||||
import { FormikProps } from "formik";
|
||||
import { Client } from "../../DataClientInterfaz";
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
open: boolean;
|
||||
setOpen: (open: boolean) => void;
|
||||
formik: FormikProps<Client>;
|
||||
handleOnChange: (event) => void;
|
||||
}
|
||||
function AddClientRender({ open, setOpen }: Props) {
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
scroll="body"
|
||||
fullWidth
|
||||
maxWidth="md"
|
||||
>
|
||||
<DialogTitle id="alert-dialog-title">Agregar Cliente</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<Grid
|
||||
container
|
||||
spacing={2}
|
||||
>
|
||||
<Grid
|
||||
item
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Nombre Comercial"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Razón Social"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Identificación"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Dirección"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Teléfono"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
md={6}
|
||||
xs={12}
|
||||
>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Correo electrónico"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</DialogContent>
|
||||
<DialogActions className="pr-24">
|
||||
<Button
|
||||
onClick={() => setOpen(false)}
|
||||
color="primary"
|
||||
variant="contained"
|
||||
size="small"
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setOpen(false)}
|
||||
color="primary"
|
||||
autoFocus
|
||||
variant="contained"
|
||||
size="small"
|
||||
>
|
||||
Aceptar
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
function AddClientRender({ open, setOpen, formik, handleOnChange }: Props) {
|
||||
return (
|
||||
<Dialog open={open} scroll="body" fullWidth maxWidth="md">
|
||||
<DialogTitle id="alert-dialog-title">Agregar Cliente</DialogTitle>
|
||||
<DialogContent dividers>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item md={6} xs={12}>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Nombre Comercial"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="nombreComercial"
|
||||
value={formik.values.nombreComercial || ""}
|
||||
onChange={handleOnChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={
|
||||
formik.errors.nombreComercial && formik.touched.nombreComercial
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
formik.errors.nombreComercial && formik.touched.nombreComercial
|
||||
? formik.errors.nombreComercial
|
||||
: false
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item md={6} xs={12}>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Razón Social"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="razonSocial"
|
||||
value={formik.values.razonSocial || ""}
|
||||
onChange={handleOnChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={
|
||||
formik.errors.razonSocial && formik.touched.razonSocial
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
formik.errors.razonSocial && formik.touched.razonSocial
|
||||
? formik.errors.razonSocial
|
||||
: false
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item md={6} xs={12}>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Identificación"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="identificacion"
|
||||
value={formik.values.identificacion || ""}
|
||||
onChange={handleOnChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={
|
||||
formik.errors.identificacion && formik.touched.identificacion
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
formik.errors.identificacion && formik.touched.identificacion
|
||||
? formik.errors.identificacion
|
||||
: false
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item md={6} xs={12}>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Dirección"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="direccion"
|
||||
value={formik.values.direccion || ""}
|
||||
onChange={handleOnChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={
|
||||
formik.errors.direccion && formik.touched.direccion
|
||||
? true
|
||||
: false
|
||||
}
|
||||
helperText={
|
||||
formik.errors.direccion && formik.touched.direccion
|
||||
? formik.errors.direccion
|
||||
: false
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item md={6} xs={12}>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Teléfono"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="telefono"
|
||||
value={formik.values.telefono || ""}
|
||||
onChange={handleOnChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={
|
||||
formik.errors.telefono && formik.touched.telefono ? true : false
|
||||
}
|
||||
helperText={
|
||||
formik.errors.telefono && formik.touched.telefono
|
||||
? formik.errors.telefono
|
||||
: false
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item md={6} xs={12}>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Correo electrónico"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
name="correo"
|
||||
value={formik.values.correo || ""}
|
||||
onChange={handleOnChange}
|
||||
onBlur={formik.handleBlur}
|
||||
error={
|
||||
formik.errors.correo && formik.touched.correo ? true : false
|
||||
}
|
||||
helperText={
|
||||
formik.errors.correo && formik.touched.correo
|
||||
? formik.errors.correo
|
||||
: false
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</DialogContent>
|
||||
<DialogActions className="pr-24">
|
||||
<Button
|
||||
onClick={() => {
|
||||
formik.resetForm();
|
||||
setOpen(false);
|
||||
}}
|
||||
color="primary"
|
||||
variant="contained"
|
||||
size="small"
|
||||
>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button
|
||||
onClick={formik.submitForm}
|
||||
color="primary"
|
||||
autoFocus
|
||||
variant="contained"
|
||||
size="small"
|
||||
>
|
||||
Aceptar
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default AddClientRender;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
export interface Headers {
|
||||
id: number;
|
||||
name: string;
|
||||
name: string | Element;
|
||||
style?: string | number;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { Box, Grid, Typography, Divider, Button } from '@mui/material';
|
||||
import { Box, Grid, Typography, Divider, Button, TextField } from '@mui/material';
|
||||
import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
|
||||
import TableInvoice from './components/tableInvoice/TableInvoice';
|
||||
import { ItemInvoice } from './DataInvoiceInterface';
|
||||
|
|
@ -57,6 +57,53 @@ function DataInvoiceRender({ handleAddItem, items }: Props) {
|
|||
>
|
||||
<Divider className="border-1" />
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={2}
|
||||
>
|
||||
<TextField
|
||||
label='Serial'
|
||||
size='small'
|
||||
variant='outlined'
|
||||
fullWidth
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={2}
|
||||
>
|
||||
<TextField
|
||||
label='Fecha factura'
|
||||
size='small'
|
||||
variant='outlined'
|
||||
type='date'
|
||||
fullWidth
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
md={2}
|
||||
>
|
||||
<TextField
|
||||
label='Fecha creada'
|
||||
size='small'
|
||||
variant='outlined'
|
||||
type='date'
|
||||
fullWidth
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid
|
||||
container
|
||||
|
|
@ -98,6 +145,66 @@ function DataInvoiceRender({ handleAddItem, items }: Props) {
|
|||
$10
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={7}
|
||||
md={9}
|
||||
/>
|
||||
<Grid
|
||||
item
|
||||
xs={2}
|
||||
md={2}
|
||||
>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
gutterBottom
|
||||
>
|
||||
Iva 12%:
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={3}
|
||||
md={1}
|
||||
className="item"
|
||||
>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
gutterBottom
|
||||
>
|
||||
$5
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={7}
|
||||
md={9}
|
||||
/>
|
||||
<Grid
|
||||
item
|
||||
xs={2}
|
||||
md={2}
|
||||
>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
gutterBottom
|
||||
>
|
||||
Total:
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={3}
|
||||
md={1}
|
||||
className="item"
|
||||
>
|
||||
<Typography
|
||||
variant="subtitle2"
|
||||
gutterBottom
|
||||
>
|
||||
$15
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { Button } from '@mui/material';
|
||||
import { Headers } from '../../DataInvoiceInterface';
|
||||
import TableInvoiceRender from './TableInvoiceRender';
|
||||
|
||||
|
|
@ -9,7 +10,7 @@ function TableInvoice() {
|
|||
{ id: 4, name: 'Valor unitario', style: 130 },
|
||||
{ id: 5, name: 'Iva', style: 10 },
|
||||
{ id: 6, name: 'Total', style: 130 },
|
||||
{ id: 7, name: 'Acción', style: 10 }
|
||||
{ id: 7, name: 'Acción', style: 10 },
|
||||
];
|
||||
return <TableInvoiceRender headers={headers} />;
|
||||
}
|
||||
|
|
|
|||
63
yarn.lock
63
yarn.lock
|
|
@ -2825,7 +2825,7 @@
|
|||
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
|
||||
integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
|
||||
|
||||
"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0":
|
||||
"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1":
|
||||
version "3.3.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
|
||||
integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
|
||||
|
|
@ -4243,6 +4243,11 @@ deep-is@^0.1.3:
|
|||
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
|
||||
integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
|
||||
|
||||
deepmerge@^2.1.1:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
|
||||
integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
|
||||
|
||||
define-data-property@^1.0.1, define-data-property@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.1.tgz#c35f7cd0ab09883480d12ac5cb213715587800b3"
|
||||
|
|
@ -5238,6 +5243,20 @@ form-data@^4.0.0:
|
|||
combined-stream "^1.0.8"
|
||||
mime-types "^2.1.12"
|
||||
|
||||
formik@^2.4.5:
|
||||
version "2.4.5"
|
||||
resolved "https://registry.yarnpkg.com/formik/-/formik-2.4.5.tgz#f899b5b7a6f103a8fabb679823e8fafc7e0ee1b4"
|
||||
integrity sha512-Gxlht0TD3vVdzMDHwkiNZqJ7Mvg77xQNfmBRrNtvzcHZs72TJppSTDKHpImCMJZwcWPBJ8jSQQ95GJzXFf1nAQ==
|
||||
dependencies:
|
||||
"@types/hoist-non-react-statics" "^3.3.1"
|
||||
deepmerge "^2.1.1"
|
||||
hoist-non-react-statics "^3.3.0"
|
||||
lodash "^4.17.21"
|
||||
lodash-es "^4.17.21"
|
||||
react-fast-compare "^2.0.1"
|
||||
tiny-warning "^1.0.2"
|
||||
tslib "^2.0.0"
|
||||
|
||||
fraction.js@^4.3.6:
|
||||
version "4.3.7"
|
||||
resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
|
||||
|
|
@ -6382,6 +6401,11 @@ locate-path@^6.0.0:
|
|||
dependencies:
|
||||
p-locate "^5.0.0"
|
||||
|
||||
lodash-es@^4.17.21:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
|
||||
integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
|
||||
|
||||
lodash.camelcase@^4.3.0:
|
||||
version "4.3.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
|
||||
|
|
@ -7296,6 +7320,11 @@ prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
|
|||
object-assign "^4.1.1"
|
||||
react-is "^16.13.1"
|
||||
|
||||
property-expr@^2.0.5:
|
||||
version "2.0.6"
|
||||
resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.6.tgz#f77bc00d5928a6c748414ad12882e83f24aec1e8"
|
||||
integrity sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==
|
||||
|
||||
protobufjs@^7.2.4:
|
||||
version "7.2.6"
|
||||
resolved "https://registry.yarnpkg.com/protobufjs/-/protobufjs-7.2.6.tgz#4a0ccd79eb292717aacf07530a07e0ed20278215"
|
||||
|
|
@ -7383,6 +7412,11 @@ react-draft-wysiwyg@1.15.0:
|
|||
linkify-it "^2.2.0"
|
||||
prop-types "^15.7.2"
|
||||
|
||||
react-fast-compare@^2.0.1:
|
||||
version "2.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
|
||||
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
|
||||
|
||||
react-fast-compare@^3.0.1:
|
||||
version "3.2.2"
|
||||
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
|
||||
|
|
@ -8458,6 +8492,11 @@ throat@^4.1.0:
|
|||
resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
|
||||
integrity sha512-wCVxLDcFxw7ujDxaeJC6nfl2XfHJNYs8yUYJnvMgtPEFlttP9tHSfRUv2vBe6C4hkVFPWoP1P6ZccbYjmSEkKA==
|
||||
|
||||
tiny-case@^1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/tiny-case/-/tiny-case-1.0.3.tgz#d980d66bc72b5d5a9ca86fb7c9ffdb9c898ddd03"
|
||||
integrity sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==
|
||||
|
||||
tiny-warning@^1.0.2:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
|
||||
|
|
@ -8500,6 +8539,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
|
|||
regex-not "^1.0.2"
|
||||
safe-regex "^1.1.0"
|
||||
|
||||
toposort@^2.0.2:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
|
||||
integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==
|
||||
|
||||
tr46@~0.0.3:
|
||||
version "0.0.3"
|
||||
resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
|
||||
|
|
@ -8600,7 +8644,7 @@ tslib@^1.8.1:
|
|||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
|
||||
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
|
||||
|
||||
tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.6.2:
|
||||
tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.6.2:
|
||||
version "2.6.2"
|
||||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
|
||||
integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
|
||||
|
|
@ -8629,6 +8673,11 @@ type-fest@^0.20.2:
|
|||
resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
|
||||
integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
|
||||
|
||||
type-fest@^2.19.0:
|
||||
version "2.19.0"
|
||||
resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-2.19.0.tgz#88068015bb33036a598b952e55e9311a60fd3a9b"
|
||||
integrity sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==
|
||||
|
||||
typed-array-buffer@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/typed-array-buffer/-/typed-array-buffer-1.0.0.tgz#18de3e7ed7974b0a729d3feecb94338d1472cd60"
|
||||
|
|
@ -9126,6 +9175,16 @@ yocto-queue@^0.1.0:
|
|||
resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
|
||||
integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
|
||||
|
||||
yup@^1.3.3:
|
||||
version "1.3.3"
|
||||
resolved "https://registry.yarnpkg.com/yup/-/yup-1.3.3.tgz#d2f6020ad1679754c5f8178a29243d5447dead04"
|
||||
integrity sha512-v8QwZSsHH2K3/G9WSkp6mZKO+hugKT1EmnMqLNUcfu51HU9MDyhlETT/JgtzprnrnQHPWsjc6MUDMBp/l9fNnw==
|
||||
dependencies:
|
||||
property-expr "^2.0.5"
|
||||
tiny-case "^1.0.3"
|
||||
toposort "^2.0.2"
|
||||
type-fest "^2.19.0"
|
||||
|
||||
zod@3.22.4:
|
||||
version "3.22.4"
|
||||
resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
|
||||
|
|
|
|||
Loading…
Reference in New Issue