creacion de factura
This commit is contained in:
Andres Alvarez
parent
202521f225
commit
3f21087779
|
|
@ -171,7 +171,8 @@ export const defaultThemeOptions = {
|
||||||
MuiDialog: {
|
MuiDialog: {
|
||||||
styleOverrides: {
|
styleOverrides: {
|
||||||
paper: {
|
paper: {
|
||||||
borderRadius: 16
|
borderRadius: 10,
|
||||||
|
padding: 5
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,7 @@
|
||||||
import React from 'react'
|
import GenerateInvoiceRender from './GenerateInvoiceRender';
|
||||||
import GenerateInvoiceRender from './GenerateInvoiceRender'
|
|
||||||
|
|
||||||
const GenerateInvoice = () => {
|
function GenerateInvoice() {
|
||||||
return (
|
return <GenerateInvoiceRender />;
|
||||||
<GenerateInvoiceRender/>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default GenerateInvoice
|
export default GenerateInvoice;
|
||||||
|
|
|
||||||
|
|
@ -1,103 +1,33 @@
|
||||||
import FusePageCarded from "@fuse/core/FusePageCarded";
|
import { Card, CardActions, CardContent, CardHeader, Divider, Button } from '@mui/material';
|
||||||
import FusePageSimple from "@fuse/core/FusePageSimple";
|
import DataInvoice from './components/dataInvoice/DataInvoice';
|
||||||
import {
|
import DataClient from './components/dataClient/DataClient';
|
||||||
Autocomplete,
|
import DataTransmitter from './components/dataTransmitter/DataTransmitter';
|
||||||
Card,
|
|
||||||
CardActions,
|
|
||||||
CardContent,
|
|
||||||
CardHeader,
|
|
||||||
Divider,
|
|
||||||
TextField,
|
|
||||||
styled,
|
|
||||||
Button,
|
|
||||||
Grid,
|
|
||||||
Box,
|
|
||||||
} from "@mui/material";
|
|
||||||
import { Controller, useFormContext } from "react-hook-form";
|
|
||||||
import DataInvoice from "./components/dataInvoice/DataInvoice";
|
|
||||||
import DataClient from "./components/dataClient/DataClient";
|
|
||||||
|
|
||||||
const Root = styled(FusePageSimple)(({ theme }) => ({
|
function GenerateInvoiceRender() {
|
||||||
"& .FusePageSimple-header": {
|
return (
|
||||||
backgroundColor: theme.palette.background.paper,
|
<Card className=" m-20 p-12">
|
||||||
boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`,
|
<CardHeader
|
||||||
},
|
title="Crear Factura de venta"
|
||||||
}));
|
className="text-16 font-bold "
|
||||||
|
/>
|
||||||
const GenerateInvoiceRender = () => {
|
<Divider />
|
||||||
return (
|
<CardContent>
|
||||||
<Card className=" m-20 p-24">
|
<DataTransmitter />
|
||||||
<CardHeader
|
<DataClient />
|
||||||
title="Crear Factura de venta"
|
<DataInvoice />
|
||||||
className="text-16 font-bold "
|
</CardContent>
|
||||||
/>
|
<CardActions>
|
||||||
<Divider />
|
<Button
|
||||||
<DataInvoice />
|
className="w-320 "
|
||||||
<DataClient />
|
variant="contained"
|
||||||
<CardContent>
|
size="small"
|
||||||
<Grid container spacing={2}>
|
color="primary"
|
||||||
<Grid item xs={12} md={6}>
|
>
|
||||||
<TextField
|
Guardar{' '}
|
||||||
className="mt-8 mb-16"
|
</Button>
|
||||||
required
|
</CardActions>
|
||||||
label="Name"
|
</Card>
|
||||||
autoFocus
|
);
|
||||||
id="name"
|
}
|
||||||
variant="outlined"
|
|
||||||
fullWidth
|
|
||||||
/* error={!!errors.name}
|
|
||||||
helperText={errors?.name?.message as string} */
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} md={6}>
|
|
||||||
<TextField
|
|
||||||
className="mt-8 mb-16"
|
|
||||||
id="description"
|
|
||||||
label="Description"
|
|
||||||
type="text"
|
|
||||||
multiline
|
|
||||||
rows={5}
|
|
||||||
variant="outlined"
|
|
||||||
fullWidth
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid item xs={12} md={6}>
|
|
||||||
<Autocomplete
|
|
||||||
className="mt-8 mb-16"
|
|
||||||
multiple
|
|
||||||
freeSolo
|
|
||||||
options={[]}
|
|
||||||
/* value={value }
|
|
||||||
onChange={(event, newValue) => {
|
|
||||||
onChange(newValue);
|
|
||||||
}} */
|
|
||||||
renderInput={(params) => (
|
|
||||||
<TextField
|
|
||||||
{...params}
|
|
||||||
placeholder="Select multiple categories"
|
|
||||||
label="Categories"
|
|
||||||
variant="outlined"
|
|
||||||
InputLabelProps={{
|
|
||||||
shrink: true,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</CardContent>
|
|
||||||
<CardActions>
|
|
||||||
<Button
|
|
||||||
className="w-320 "
|
|
||||||
variant="contained"
|
|
||||||
size="small"
|
|
||||||
color="primary"
|
|
||||||
>
|
|
||||||
Guardar{" "}
|
|
||||||
</Button>
|
|
||||||
</CardActions>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default GenerateInvoiceRender;
|
export default GenerateInvoiceRender;
|
||||||
|
|
|
||||||
|
|
@ -1,69 +1,30 @@
|
||||||
import {
|
import { useState } from 'react';
|
||||||
Autocomplete,
|
import DataClientRender from './DataClientRender';
|
||||||
Box,
|
import { Client } from './DataClientInterfaz';
|
||||||
Divider,
|
|
||||||
Grid,
|
|
||||||
TextField,
|
|
||||||
Typography,
|
|
||||||
} from "@mui/material";
|
|
||||||
|
|
||||||
const DataClient = () => {
|
const clientes = [
|
||||||
return (
|
{
|
||||||
<Box className="mt-10 p-20 shadow-2 rounded-8">
|
id: 1,
|
||||||
<Typography component="h3" className="mb-7">
|
nombreComercial: 'Andres Alvarez',
|
||||||
Datos cliente
|
razonSocial: 'Andres Alvarez',
|
||||||
</Typography>
|
identificacion: '1721529707',
|
||||||
<Divider className="border-1 mb-10" />
|
direccion: 'Calle oe',
|
||||||
<Grid container spacing={2}>
|
telefono: '0988545102',
|
||||||
<Grid item xs={12} md={12}>
|
correo: 'andres@test.com'
|
||||||
<Autocomplete
|
}
|
||||||
className="mt-8 mb-16"
|
];
|
||||||
multiple
|
function DataClient() {
|
||||||
freeSolo
|
const [clients, setClients] = useState<Client[]>(clientes);
|
||||||
options={[]}
|
|
||||||
/* value={value }
|
|
||||||
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/>
|
const handleSelectClient = (value) => {
|
||||||
</Grid>
|
setClients([...clients, value]);
|
||||||
<Grid item md={4} xs={12}>
|
};
|
||||||
<b>Razón Social:</b> Jonathan Andres Alvarez Flores
|
return (
|
||||||
</Grid>
|
<DataClientRender
|
||||||
<Grid item md={4} xs={12}>
|
client={clients}
|
||||||
<b>Nombre Comercial:</b> Jonathan Andres Alvarez Flores
|
handleSelectClient={handleSelectClient}
|
||||||
</Grid>
|
/>
|
||||||
<Grid item md={4} xs={12}>
|
);
|
||||||
<b>Ruc:</b> 17215785512001
|
}
|
||||||
</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>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default DataClient;
|
export default DataClient;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
export interface Client {
|
||||||
|
id: number;
|
||||||
|
nombreComercial: string;
|
||||||
|
razonSocial: string;
|
||||||
|
identificacion: string;
|
||||||
|
direccion: string;
|
||||||
|
telefono: string;
|
||||||
|
correo: string;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,148 @@
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
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 }
|
||||||
|
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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DataClientRender;
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
import AddClientRender from './AddClientRender';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
open: boolean;
|
||||||
|
setOpen: (open: boolean) => void;
|
||||||
|
}
|
||||||
|
function AddClient({ open, setOpen }: Props) {
|
||||||
|
return (
|
||||||
|
<AddClientRender
|
||||||
|
open={open}
|
||||||
|
setOpen={setOpen}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AddClient;
|
||||||
|
|
@ -0,0 +1,118 @@
|
||||||
|
import { DialogActions, DialogContent, DialogTitle, Button, Grid, TextField, Dialog } from '@mui/material';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
open: boolean;
|
||||||
|
setOpen: (open: boolean) => 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AddClientRender;
|
||||||
|
|
@ -1,35 +1,28 @@
|
||||||
import { Box, Grid, Typography, Divider } from "@mui/material";
|
import { useState } from 'react';
|
||||||
|
import DataInvoiceRender from './DataInvoiceRender';
|
||||||
|
import { ItemInvoice } from './DataInvoiceInterface';
|
||||||
|
|
||||||
const DataInvoice = () => {
|
function DataInvoice() {
|
||||||
return (
|
const [items, setItems] = useState<Array<ItemInvoice>>();
|
||||||
<Box className="mt-10 p-20 shadow-2 rounded-8">
|
|
||||||
<Typography component="h3" className="mb-7">
|
|
||||||
Datos emisor
|
|
||||||
</Typography>
|
|
||||||
<Divider className="border-1 mb-10" />
|
|
||||||
<Grid container spacing={2}>
|
|
||||||
<Grid item md={6} xs={12}>
|
|
||||||
<b>Razón Social:</b> Jonathan Andres Alvarez Flores
|
|
||||||
</Grid>
|
|
||||||
<Grid item md={6} xs={12}>
|
|
||||||
<b>Nombre Comercial:</b> Jonathan Andres Alvarez Flores
|
|
||||||
</Grid>
|
|
||||||
<Grid item md={6} xs={12}>
|
|
||||||
<b>Ruc:</b> 17215785512001
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
<Grid item md={6} xs={12}>
|
const handleAddItem = () => {
|
||||||
<b>Dirección:</b> Calle Oe11g y s32
|
const newItems: ItemInvoice = {
|
||||||
</Grid>
|
cod: '',
|
||||||
<Grid item md={6} xs={12}>
|
description: '',
|
||||||
<b>Contribuyente Especial:</b> NO
|
amount: 0,
|
||||||
</Grid>
|
iva: true,
|
||||||
<Grid item md={6} xs={12}>
|
unitValue: 1,
|
||||||
<b>Obligado Contabilidad:</b> NO
|
total: 0
|
||||||
</Grid>
|
};
|
||||||
</Grid>
|
setItems([...items, newItems]);
|
||||||
</Box>
|
};
|
||||||
);
|
|
||||||
};
|
return (
|
||||||
|
<DataInvoiceRender
|
||||||
|
handleAddItem={handleAddItem}
|
||||||
|
items={items}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default DataInvoice;
|
export default DataInvoice;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
export interface Headers {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
style?: string | number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ItemInvoice {
|
||||||
|
cod: string;
|
||||||
|
description: string;
|
||||||
|
amount: number;
|
||||||
|
unitValue: number;
|
||||||
|
iva: boolean;
|
||||||
|
total: number;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
import { Box, Grid, Typography, Divider, Button } from '@mui/material';
|
||||||
|
import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
|
||||||
|
import TableInvoice from './components/tableInvoice/TableInvoice';
|
||||||
|
import { ItemInvoice } from './DataInvoiceInterface';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
handleAddItem: () => void;
|
||||||
|
items: ItemInvoice[];
|
||||||
|
}
|
||||||
|
function DataInvoiceRender({ handleAddItem, items }: Props) {
|
||||||
|
return (
|
||||||
|
<Box className="mt-10 p-20 shadow-2 rounded-8">
|
||||||
|
<Grid
|
||||||
|
container
|
||||||
|
spacing={2}
|
||||||
|
>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={12}
|
||||||
|
md={10}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
component="h3"
|
||||||
|
className="mb-7 text-16"
|
||||||
|
>
|
||||||
|
Datos factura
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={12}
|
||||||
|
md={2}
|
||||||
|
className="flex justify-end"
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
color="primary"
|
||||||
|
variant="outlined"
|
||||||
|
className="rounded-6"
|
||||||
|
size="small"
|
||||||
|
onClick={handleAddItem}
|
||||||
|
startIcon={
|
||||||
|
<FuseSvgIcon
|
||||||
|
className="text-48"
|
||||||
|
size={24}
|
||||||
|
color="action"
|
||||||
|
>
|
||||||
|
heroicons-outline:plus
|
||||||
|
</FuseSvgIcon>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Agregar{' '}
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={12}
|
||||||
|
>
|
||||||
|
<Divider className="border-1" />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
<Grid
|
||||||
|
container
|
||||||
|
spacing={2}
|
||||||
|
>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={12}
|
||||||
|
>
|
||||||
|
<TableInvoice />
|
||||||
|
</Grid>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={7}
|
||||||
|
md={9}
|
||||||
|
/>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={2}
|
||||||
|
md={2}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="subtitle2"
|
||||||
|
gutterBottom
|
||||||
|
>
|
||||||
|
Sub Total:
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={3}
|
||||||
|
md={1}
|
||||||
|
className="item"
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="subtitle2"
|
||||||
|
gutterBottom
|
||||||
|
>
|
||||||
|
$10
|
||||||
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DataInvoiceRender;
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { Headers } from '../../DataInvoiceInterface';
|
||||||
|
import TableInvoiceRender from './TableInvoiceRender';
|
||||||
|
|
||||||
|
function TableInvoice() {
|
||||||
|
const headers: Array<Headers> = [
|
||||||
|
{ id: 1, name: 'Código', style: 100 },
|
||||||
|
{ id: 2, name: 'Descripción', style: 400 },
|
||||||
|
{ id: 3, name: 'Cantidad', style: 130 },
|
||||||
|
{ 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 }
|
||||||
|
];
|
||||||
|
return <TableInvoiceRender headers={headers} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TableInvoice;
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
Typography,
|
||||||
|
TableRow,
|
||||||
|
TableBody,
|
||||||
|
TextField,
|
||||||
|
Autocomplete,
|
||||||
|
Checkbox
|
||||||
|
} from '@mui/material';
|
||||||
|
import IconButton from '@mui/material/IconButton';
|
||||||
|
import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
|
||||||
|
import { Headers } from '../../DataInvoiceInterface';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
headers: Headers[];
|
||||||
|
}
|
||||||
|
function TableInvoiceRender({ headers }: Props) {
|
||||||
|
return (
|
||||||
|
<div className="table-responsive mt-24">
|
||||||
|
<Table
|
||||||
|
sx={{ minWidth: 650 }}
|
||||||
|
className="simple"
|
||||||
|
>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
{headers.map((column) => (
|
||||||
|
<TableCell
|
||||||
|
key={column.id}
|
||||||
|
style={column.style ? { width: column.style } : {}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
color="text.secondary"
|
||||||
|
className="font-semibold text-14 whitespace-nowrap"
|
||||||
|
>
|
||||||
|
{column.name}
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell
|
||||||
|
component="th"
|
||||||
|
scope="row"
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
component="th"
|
||||||
|
scope="row"
|
||||||
|
>
|
||||||
|
<Autocomplete
|
||||||
|
className=""
|
||||||
|
freeSolo
|
||||||
|
size="small"
|
||||||
|
options={[]}
|
||||||
|
/* value={value }
|
||||||
|
onChange={(event, newValue) => {
|
||||||
|
onChange(newValue);
|
||||||
|
}} */
|
||||||
|
renderInput={(params) => (
|
||||||
|
<TextField
|
||||||
|
{...params}
|
||||||
|
placeholder="Busque el producto"
|
||||||
|
variant="outlined"
|
||||||
|
fullWidth
|
||||||
|
InputLabelProps={{
|
||||||
|
shrink: true
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
component="th"
|
||||||
|
scope="row"
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
fullWidth
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
component="th"
|
||||||
|
scope="row"
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
fullWidth
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
component="th"
|
||||||
|
scope="row"
|
||||||
|
className="px-0"
|
||||||
|
>
|
||||||
|
<Checkbox />
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
component="th"
|
||||||
|
scope="row"
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
fullWidth
|
||||||
|
type="number"
|
||||||
|
/>
|
||||||
|
</TableCell>
|
||||||
|
<TableCell
|
||||||
|
component="th"
|
||||||
|
scope="row"
|
||||||
|
>
|
||||||
|
<IconButton>
|
||||||
|
<FuseSvgIcon>heroicons-outline:trash</FuseSvgIcon>
|
||||||
|
</IconButton>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TableInvoiceRender;
|
||||||
|
|
@ -0,0 +1,65 @@
|
||||||
|
import { Box, Grid, Typography, Divider } from '@mui/material';
|
||||||
|
|
||||||
|
function DataTransmitter() {
|
||||||
|
return (
|
||||||
|
<Box className="mt-10 p-20 shadow-2 rounded-8">
|
||||||
|
<Typography
|
||||||
|
component="h3"
|
||||||
|
className="mb-7"
|
||||||
|
>
|
||||||
|
Datos emisor
|
||||||
|
</Typography>
|
||||||
|
<Divider className="border-1 mb-10" />
|
||||||
|
<Grid
|
||||||
|
container
|
||||||
|
spacing={2}
|
||||||
|
>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
md={6}
|
||||||
|
xs={12}
|
||||||
|
>
|
||||||
|
<b>Razón Social:</b> Jonathan Andres Alvarez Flores
|
||||||
|
</Grid>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
md={6}
|
||||||
|
xs={12}
|
||||||
|
>
|
||||||
|
<b>Nombre Comercial:</b> Jonathan Andres Alvarez Flores
|
||||||
|
</Grid>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
md={6}
|
||||||
|
xs={12}
|
||||||
|
>
|
||||||
|
<b>Ruc:</b> 17215785512001
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
md={6}
|
||||||
|
xs={12}
|
||||||
|
>
|
||||||
|
<b>Dirección:</b> Calle Oe11g y s32
|
||||||
|
</Grid>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
md={6}
|
||||||
|
xs={12}
|
||||||
|
>
|
||||||
|
<b>Contribuyente Especial:</b> NO
|
||||||
|
</Grid>
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
md={6}
|
||||||
|
xs={12}
|
||||||
|
>
|
||||||
|
<b>Obligado Contabilidad:</b> NO
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DataTransmitter;
|
||||||
|
|
@ -1,257 +1,265 @@
|
||||||
import FusePageSimple from "@fuse/core/FusePageSimple";
|
import FusePageSimple from '@fuse/core/FusePageSimple';
|
||||||
import FuseSvgIcon from "@fuse/core/FuseSvgIcon";
|
import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
|
||||||
import {
|
import { Button, Paper, Table, TableBody, TableCell, TableHead, TableRow, Typography, styled } from '@mui/material';
|
||||||
Button,
|
import clsx from 'clsx';
|
||||||
Paper,
|
import { format } from 'date-fns';
|
||||||
Table,
|
import { useTranslation } from 'react-i18next';
|
||||||
TableBody,
|
import { Link } from 'react-router-dom';
|
||||||
TableCell,
|
|
||||||
TableHead,
|
|
||||||
TableRow,
|
|
||||||
Typography,
|
|
||||||
styled,
|
|
||||||
} from "@mui/material";
|
|
||||||
import clsx from "clsx";
|
|
||||||
import { format } from "date-fns";
|
|
||||||
import { useTranslation } from "react-i18next";
|
|
||||||
import { Link } from "react-router-dom";
|
|
||||||
|
|
||||||
const Root = styled(FusePageSimple)(({ theme }) => ({
|
const Root = styled(FusePageSimple)(({ theme }) => ({
|
||||||
"& .FusePageSimple-header": {
|
'& .FusePageSimple-header': {
|
||||||
backgroundColor: theme.palette.background.paper,
|
backgroundColor: theme.palette.background.paper,
|
||||||
boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`,
|
boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`
|
||||||
},
|
}
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const ListInvoiceRender = () => {
|
function ListInvoiceRender() {
|
||||||
const { t } = useTranslation("invoicePage");
|
const { t } = useTranslation('invoicePage');
|
||||||
const columns = [
|
const columns = ['Número factura', 'Fecha', 'Cliente', 'Identificación', 'Valor', 'Estado', 'Acciones'];
|
||||||
"Número factura",
|
|
||||||
"Fecha",
|
|
||||||
"Cliente",
|
|
||||||
"Identificación",
|
|
||||||
"Valor",
|
|
||||||
"Estado",
|
|
||||||
"Acciones",
|
|
||||||
];
|
|
||||||
|
|
||||||
const rows = [
|
const rows = [
|
||||||
{
|
{
|
||||||
id: "528651571NT",
|
id: '528651571NT',
|
||||||
date: "2019-10-07T22:22:37.274Z",
|
date: '2019-10-07T22:22:37.274Z',
|
||||||
name: "Morgan Page",
|
name: 'Morgan Page',
|
||||||
identification: "17215896114",
|
identification: '17215896114',
|
||||||
amount: 1358.75,
|
amount: 1358.75,
|
||||||
status: "completed",
|
status: 'completed',
|
||||||
action: true,
|
action: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "421436904YT",
|
id: '421436904YT',
|
||||||
date: "2019-12-18T14:51:24.461Z",
|
date: '2019-12-18T14:51:24.461Z',
|
||||||
name: "Nita Hebert",
|
name: 'Nita Hebert',
|
||||||
identification: "17215896114",
|
identification: '17215896114',
|
||||||
amount: -1042.82,
|
amount: -1042.82,
|
||||||
status: "completed",
|
status: 'completed',
|
||||||
action: true,
|
action: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "685377421YT",
|
id: '685377421YT',
|
||||||
date: "2019-12-25T17:52:14.304Z",
|
date: '2019-12-25T17:52:14.304Z',
|
||||||
name: "Marsha Chambers",
|
name: 'Marsha Chambers',
|
||||||
identification: "17215896114",
|
identification: '17215896114',
|
||||||
amount: 1828.16,
|
amount: 1828.16,
|
||||||
status: "pending",
|
status: 'pending',
|
||||||
action: true,
|
action: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "884960091RT",
|
id: '884960091RT',
|
||||||
date: "2019-11-29T06:32:16.111Z",
|
date: '2019-11-29T06:32:16.111Z',
|
||||||
name: "Charmaine Jackson",
|
name: 'Charmaine Jackson',
|
||||||
identification: "17215896114",
|
identification: '17215896114',
|
||||||
amount: 1647.55,
|
amount: 1647.55,
|
||||||
status: "completed",
|
status: 'completed',
|
||||||
action: true,
|
action: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "361402213NT",
|
id: '361402213NT',
|
||||||
date: "2019-11-24T12:13:23.064Z",
|
date: '2019-11-24T12:13:23.064Z',
|
||||||
name: "Maura Carey",
|
name: 'Maura Carey',
|
||||||
identification: "17215896114",
|
identification: '17215896114',
|
||||||
amount: -927.43,
|
amount: -927.43,
|
||||||
status: "completed",
|
status: 'completed',
|
||||||
action: true,
|
action: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "361402213NT",
|
id: '361402213NT',
|
||||||
date: "2019-11-24T12:13:23.064Z",
|
date: '2019-11-24T12:13:23.064Z',
|
||||||
name: "Maura Carey",
|
name: 'Maura Carey',
|
||||||
identification: "17215896114",
|
identification: '17215896114',
|
||||||
amount: -927.43,
|
amount: -927.43,
|
||||||
status: "completed",
|
status: 'completed',
|
||||||
action: true,
|
action: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "361402213NT",
|
id: '361402213NT',
|
||||||
date: "2019-11-24T12:13:23.064Z",
|
date: '2019-11-24T12:13:23.064Z',
|
||||||
name: "Maura Carey",
|
name: 'Maura Carey',
|
||||||
identification: "17215896114",
|
identification: '17215896114',
|
||||||
amount: -927.43,
|
amount: -927.43,
|
||||||
status: "completed",
|
status: 'completed',
|
||||||
action: true,
|
action: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "361402213NT",
|
id: '361402213NT',
|
||||||
date: "2019-11-24T12:13:23.064Z",
|
date: '2019-11-24T12:13:23.064Z',
|
||||||
name: "Maura Carey",
|
name: 'Maura Carey',
|
||||||
identification: "17215896114",
|
identification: '17215896114',
|
||||||
amount: -927.43,
|
amount: -927.43,
|
||||||
status: "completed",
|
status: 'completed',
|
||||||
action: true,
|
action: true
|
||||||
},
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Root
|
<Root
|
||||||
header={
|
header={
|
||||||
<div className="p-24">
|
<div className="p-24">
|
||||||
<h4>{t("TITLE")}</h4>
|
<h4>{t('TITLE')}</h4>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
content={
|
content={
|
||||||
<Paper className="flex flex-col flex-auto p-24 shadow rounded-2 overflow-hidden mt-6">
|
<Paper className="flex flex-col flex-auto p-24 shadow rounded-2 overflow-hidden mt-6">
|
||||||
<div className="flex md:flex-row justify-between flex-col">
|
<div className="flex md:flex-row justify-between flex-col">
|
||||||
<div>
|
<div>
|
||||||
<Typography className="mr-16 text-lg font-medium tracking-tight leading-6 truncate">
|
<Typography className="mr-16 text-lg font-medium tracking-tight leading-6 truncate">
|
||||||
{t("TITLE_TABLE")}
|
{t('TITLE_TABLE')}
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography className="font-medium" color="text.secondary">
|
<Typography
|
||||||
1 pendiente, 4 completadas
|
className="font-medium"
|
||||||
</Typography>
|
color="text.secondary"
|
||||||
</div>
|
>
|
||||||
<div>
|
1 pendiente, 4 completadas
|
||||||
<Button
|
</Typography>
|
||||||
size="small"
|
</div>
|
||||||
variant="contained"
|
<div>
|
||||||
color="primary"
|
<Button
|
||||||
component={Link}
|
size="small"
|
||||||
to={'/invoice/edit'}
|
variant="contained"
|
||||||
startIcon={
|
color="primary"
|
||||||
<FuseSvgIcon
|
component={Link}
|
||||||
className="text-48 text-white"
|
to="/invoice/edit"
|
||||||
size={24}
|
startIcon={
|
||||||
color="action"
|
<FuseSvgIcon
|
||||||
>
|
className="text-48 text-white"
|
||||||
heroicons-outline:plus
|
size={24}
|
||||||
</FuseSvgIcon>
|
color="action"
|
||||||
}
|
>
|
||||||
>
|
heroicons-outline:plus
|
||||||
Nueva factura
|
</FuseSvgIcon>
|
||||||
</Button>
|
}
|
||||||
</div>
|
>
|
||||||
</div>
|
Nueva factura
|
||||||
<div className="table-responsive mt-24">
|
</Button>
|
||||||
<Table className="simple w-full min-w-full h-full">
|
</div>
|
||||||
<TableHead>
|
</div>
|
||||||
<TableRow>
|
<div className="table-responsive mt-24">
|
||||||
{columns.map((column, index) => (
|
<Table className="simple w-full min-w-full h-full">
|
||||||
<TableCell key={index}>
|
<TableHead>
|
||||||
<Typography
|
<TableRow>
|
||||||
color="text.secondary"
|
{columns.map((column, index) => (
|
||||||
className="font-semibold text-12 whitespace-nowrap"
|
<TableCell key={index}>
|
||||||
>
|
<Typography
|
||||||
{column}
|
color="text.secondary"
|
||||||
</Typography>
|
className="font-semibold text-12 whitespace-nowrap"
|
||||||
</TableCell>
|
>
|
||||||
))}
|
{column}
|
||||||
</TableRow>
|
</Typography>
|
||||||
</TableHead>
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{rows.map((row, index) => (
|
{rows.map((row, index) => (
|
||||||
<TableRow key={index}>
|
<TableRow key={index}>
|
||||||
{Object.entries(row).map(([key, value]) => {
|
{Object.entries(row).map(([key, value]) => {
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case "id": {
|
case 'id': {
|
||||||
return (
|
return (
|
||||||
<TableCell key={key} component="th" scope="row">
|
<TableCell
|
||||||
<Typography color="text.secondary">
|
key={key}
|
||||||
{value}
|
component="th"
|
||||||
</Typography>
|
scope="row"
|
||||||
</TableCell>
|
>
|
||||||
);
|
<Typography color="text.secondary">{value}</Typography>
|
||||||
}
|
</TableCell>
|
||||||
case "date": {
|
);
|
||||||
return (
|
}
|
||||||
<TableCell key={key} component="th" scope="row">
|
case 'date': {
|
||||||
<Typography>
|
return (
|
||||||
{
|
<TableCell
|
||||||
// @ts-ignore
|
key={key}
|
||||||
format(new Date(value), "dd/MM/yyyy")
|
component="th"
|
||||||
}
|
scope="row"
|
||||||
</Typography>
|
>
|
||||||
</TableCell>
|
<Typography>
|
||||||
);
|
{
|
||||||
}
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
case "amount": {
|
// @ts-ignore
|
||||||
return (
|
format(new Date(value), 'dd/MM/yyyy')
|
||||||
<TableCell key={key} component="th" scope="row">
|
}
|
||||||
<Typography>
|
</Typography>
|
||||||
{value.toLocaleString("en-US", {
|
</TableCell>
|
||||||
style: "currency",
|
);
|
||||||
currency: "USD",
|
}
|
||||||
})}
|
case 'amount': {
|
||||||
</Typography>
|
return (
|
||||||
</TableCell>
|
<TableCell
|
||||||
);
|
key={key}
|
||||||
}
|
component="th"
|
||||||
case "status": {
|
scope="row"
|
||||||
return (
|
>
|
||||||
<TableCell key={key} component="th" scope="row">
|
<Typography>
|
||||||
<Typography
|
{value.toLocaleString('en-US', {
|
||||||
className={clsx(
|
style: 'currency',
|
||||||
"inline-flex items-center font-bold text-10 px-10 py-2 rounded-full tracking-wide uppercase",
|
currency: 'USD'
|
||||||
value === "pending" &&
|
})}
|
||||||
"bg-red-100 text-red-800 dark:bg-red-600 dark:text-red-50",
|
</Typography>
|
||||||
value === "completed" &&
|
</TableCell>
|
||||||
"bg-green-50 text-green-800 dark:bg-green-600 dark:text-green-50"
|
);
|
||||||
)}
|
}
|
||||||
>
|
case 'status': {
|
||||||
{value}
|
return (
|
||||||
</Typography>
|
<TableCell
|
||||||
</TableCell>
|
key={key}
|
||||||
);
|
component="th"
|
||||||
}
|
scope="row"
|
||||||
case "action": {
|
>
|
||||||
return (
|
<Typography
|
||||||
<TableCell key={key} component="th" scope="row">
|
className={clsx(
|
||||||
<Button
|
'inline-flex items-center font-bold text-10 px-10 py-2 rounded-full tracking-wide uppercase',
|
||||||
size="small"
|
value === 'pending' &&
|
||||||
variant="contained"
|
'bg-red-100 text-red-800 dark:bg-red-600 dark:text-red-50',
|
||||||
color="primary"
|
value === 'completed' &&
|
||||||
>
|
'bg-green-50 text-green-800 dark:bg-green-600 dark:text-green-50'
|
||||||
Ver
|
)}
|
||||||
</Button>
|
>
|
||||||
</TableCell>
|
{value}
|
||||||
);
|
</Typography>
|
||||||
}
|
</TableCell>
|
||||||
default: {
|
);
|
||||||
return (
|
}
|
||||||
<TableCell key={key} component="th" scope="row">
|
case 'action': {
|
||||||
<Typography>{value}</Typography>
|
return (
|
||||||
</TableCell>
|
<TableCell
|
||||||
);
|
key={key}
|
||||||
}
|
component="th"
|
||||||
}
|
scope="row"
|
||||||
})}
|
>
|
||||||
</TableRow>
|
<Button
|
||||||
))}
|
size="small"
|
||||||
</TableBody>
|
variant="contained"
|
||||||
</Table>
|
color="primary"
|
||||||
</div>
|
>
|
||||||
</Paper>
|
Ver
|
||||||
}
|
</Button>
|
||||||
/>
|
</TableCell>
|
||||||
);
|
);
|
||||||
};
|
}
|
||||||
|
default: {
|
||||||
|
return (
|
||||||
|
<TableCell
|
||||||
|
key={key}
|
||||||
|
component="th"
|
||||||
|
scope="row"
|
||||||
|
>
|
||||||
|
<Typography>{value}</Typography>
|
||||||
|
</TableCell>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
</Paper>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export default ListInvoiceRender;
|
export default ListInvoiceRender;
|
||||||
|
|
|
||||||
|
|
@ -17,31 +17,31 @@ table.simple {
|
||||||
}
|
}
|
||||||
|
|
||||||
table.simple thead tr th {
|
table.simple thead tr th {
|
||||||
padding: 16px 8px;
|
/* padding: 16px 16px; */
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.simple thead tr th:first-child {
|
table.simple thead tr th:first-child {
|
||||||
padding-left: 24px;
|
padding-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.simple thead tr th:last-child {
|
table.simple thead tr th:last-child {
|
||||||
padding-right: 24px;
|
padding-right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.simple tbody tr td {
|
table.simple tbody tr td {
|
||||||
padding: 12px 8px;
|
padding: 12px 12px;
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
table.simple tbody tr td:first-child {
|
table.simple tbody tr td:first-child {
|
||||||
padding-left: 24px;
|
padding-left: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.simple tbody tr td:last-child {
|
table.simple tbody tr td:last-child {
|
||||||
padding-right: 24px;
|
padding-right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.simple tbody tr:last-child td {
|
table.simple tbody tr:last-child td {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue