creacion de factura
This commit is contained in:
Andres Alvarez
parent
202521f225
commit
3f21087779
|
|
@ -171,7 +171,8 @@ export const defaultThemeOptions = {
|
|||
MuiDialog: {
|
||||
styleOverrides: {
|
||||
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 = () => {
|
||||
return (
|
||||
<GenerateInvoiceRender/>
|
||||
)
|
||||
function GenerateInvoice() {
|
||||
return <GenerateInvoiceRender />;
|
||||
}
|
||||
|
||||
export default GenerateInvoice
|
||||
export default GenerateInvoice;
|
||||
|
|
|
|||
|
|
@ -1,90 +1,20 @@
|
|||
import FusePageCarded from "@fuse/core/FusePageCarded";
|
||||
import FusePageSimple from "@fuse/core/FusePageSimple";
|
||||
import {
|
||||
Autocomplete,
|
||||
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";
|
||||
import { Card, CardActions, CardContent, CardHeader, Divider, Button } from '@mui/material';
|
||||
import DataInvoice from './components/dataInvoice/DataInvoice';
|
||||
import DataClient from './components/dataClient/DataClient';
|
||||
import DataTransmitter from './components/dataTransmitter/DataTransmitter';
|
||||
|
||||
const Root = styled(FusePageSimple)(({ theme }) => ({
|
||||
"& .FusePageSimple-header": {
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
boxShadow: `inset 0 0 0 1px ${theme.palette.divider}`,
|
||||
},
|
||||
}));
|
||||
|
||||
const GenerateInvoiceRender = () => {
|
||||
function GenerateInvoiceRender() {
|
||||
return (
|
||||
<Card className=" m-20 p-24">
|
||||
<Card className=" m-20 p-12">
|
||||
<CardHeader
|
||||
title="Crear Factura de venta"
|
||||
className="text-16 font-bold "
|
||||
/>
|
||||
<Divider />
|
||||
<DataInvoice />
|
||||
<DataClient />
|
||||
<CardContent>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={6}>
|
||||
<TextField
|
||||
className="mt-8 mb-16"
|
||||
required
|
||||
label="Name"
|
||||
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>
|
||||
<DataTransmitter />
|
||||
<DataClient />
|
||||
<DataInvoice />
|
||||
</CardContent>
|
||||
<CardActions>
|
||||
<Button
|
||||
|
|
@ -93,11 +23,11 @@ const GenerateInvoiceRender = () => {
|
|||
size="small"
|
||||
color="primary"
|
||||
>
|
||||
Guardar{" "}
|
||||
Guardar{' '}
|
||||
</Button>
|
||||
</CardActions>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default GenerateInvoiceRender;
|
||||
|
|
|
|||
|
|
@ -1,69 +1,30 @@
|
|||
import {
|
||||
Autocomplete,
|
||||
Box,
|
||||
Divider,
|
||||
Grid,
|
||||
TextField,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import { useState } from 'react';
|
||||
import DataClientRender from './DataClientRender';
|
||||
import { Client } from './DataClientInterfaz';
|
||||
|
||||
const DataClient = () => {
|
||||
return (
|
||||
<Box className="mt-10 p-20 shadow-2 rounded-8">
|
||||
<Typography component="h3" className="mb-7">
|
||||
Datos cliente
|
||||
</Typography>
|
||||
<Divider className="border-1 mb-10" />
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={12}>
|
||||
<Autocomplete
|
||||
className="mt-8 mb-16"
|
||||
multiple
|
||||
freeSolo
|
||||
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} >
|
||||
const clientes = [
|
||||
{
|
||||
id: 1,
|
||||
nombreComercial: 'Andres Alvarez',
|
||||
razonSocial: 'Andres Alvarez',
|
||||
identificacion: '1721529707',
|
||||
direccion: 'Calle oe',
|
||||
telefono: '0988545102',
|
||||
correo: 'andres@test.com'
|
||||
}
|
||||
];
|
||||
function DataClient() {
|
||||
const [clients, setClients] = useState<Client[]>(clientes);
|
||||
|
||||
<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>
|
||||
);
|
||||
const handleSelectClient = (value) => {
|
||||
setClients([...clients, value]);
|
||||
};
|
||||
return (
|
||||
<DataClientRender
|
||||
client={clients}
|
||||
handleSelectClient={handleSelectClient}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
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>
|
||||
function DataInvoice() {
|
||||
const [items, setItems] = useState<Array<ItemInvoice>>();
|
||||
|
||||
<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>
|
||||
);
|
||||
const handleAddItem = () => {
|
||||
const newItems: ItemInvoice = {
|
||||
cod: '',
|
||||
description: '',
|
||||
amount: 0,
|
||||
iva: true,
|
||||
unitValue: 1,
|
||||
total: 0
|
||||
};
|
||||
setItems([...items, newItems]);
|
||||
};
|
||||
|
||||
return (
|
||||
<DataInvoiceRender
|
||||
handleAddItem={handleAddItem}
|
||||
items={items}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
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,120 +1,102 @@
|
|||
import FusePageSimple from "@fuse/core/FusePageSimple";
|
||||
import FuseSvgIcon from "@fuse/core/FuseSvgIcon";
|
||||
import {
|
||||
Button,
|
||||
Paper,
|
||||
Table,
|
||||
TableBody,
|
||||
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";
|
||||
import FusePageSimple from '@fuse/core/FusePageSimple';
|
||||
import FuseSvgIcon from '@fuse/core/FuseSvgIcon';
|
||||
import { Button, Paper, Table, TableBody, 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 }) => ({
|
||||
"& .FusePageSimple-header": {
|
||||
'& .FusePageSimple-header': {
|
||||
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 = () => {
|
||||
const { t } = useTranslation("invoicePage");
|
||||
const columns = [
|
||||
"Número factura",
|
||||
"Fecha",
|
||||
"Cliente",
|
||||
"Identificación",
|
||||
"Valor",
|
||||
"Estado",
|
||||
"Acciones",
|
||||
];
|
||||
function ListInvoiceRender() {
|
||||
const { t } = useTranslation('invoicePage');
|
||||
const columns = ['Número factura', 'Fecha', 'Cliente', 'Identificación', 'Valor', 'Estado', 'Acciones'];
|
||||
|
||||
const rows = [
|
||||
{
|
||||
id: "528651571NT",
|
||||
date: "2019-10-07T22:22:37.274Z",
|
||||
name: "Morgan Page",
|
||||
identification: "17215896114",
|
||||
id: '528651571NT',
|
||||
date: '2019-10-07T22:22:37.274Z',
|
||||
name: 'Morgan Page',
|
||||
identification: '17215896114',
|
||||
amount: 1358.75,
|
||||
status: "completed",
|
||||
action: true,
|
||||
status: 'completed',
|
||||
action: true
|
||||
},
|
||||
{
|
||||
id: "421436904YT",
|
||||
date: "2019-12-18T14:51:24.461Z",
|
||||
name: "Nita Hebert",
|
||||
identification: "17215896114",
|
||||
id: '421436904YT',
|
||||
date: '2019-12-18T14:51:24.461Z',
|
||||
name: 'Nita Hebert',
|
||||
identification: '17215896114',
|
||||
amount: -1042.82,
|
||||
status: "completed",
|
||||
action: true,
|
||||
status: 'completed',
|
||||
action: true
|
||||
},
|
||||
{
|
||||
id: "685377421YT",
|
||||
date: "2019-12-25T17:52:14.304Z",
|
||||
name: "Marsha Chambers",
|
||||
identification: "17215896114",
|
||||
id: '685377421YT',
|
||||
date: '2019-12-25T17:52:14.304Z',
|
||||
name: 'Marsha Chambers',
|
||||
identification: '17215896114',
|
||||
amount: 1828.16,
|
||||
status: "pending",
|
||||
action: true,
|
||||
status: 'pending',
|
||||
action: true
|
||||
},
|
||||
{
|
||||
id: "884960091RT",
|
||||
date: "2019-11-29T06:32:16.111Z",
|
||||
name: "Charmaine Jackson",
|
||||
identification: "17215896114",
|
||||
id: '884960091RT',
|
||||
date: '2019-11-29T06:32:16.111Z',
|
||||
name: 'Charmaine Jackson',
|
||||
identification: '17215896114',
|
||||
amount: 1647.55,
|
||||
status: "completed",
|
||||
action: true,
|
||||
status: 'completed',
|
||||
action: true
|
||||
},
|
||||
{
|
||||
id: "361402213NT",
|
||||
date: "2019-11-24T12:13:23.064Z",
|
||||
name: "Maura Carey",
|
||||
identification: "17215896114",
|
||||
id: '361402213NT',
|
||||
date: '2019-11-24T12:13:23.064Z',
|
||||
name: 'Maura Carey',
|
||||
identification: '17215896114',
|
||||
amount: -927.43,
|
||||
status: "completed",
|
||||
action: true,
|
||||
status: 'completed',
|
||||
action: true
|
||||
},
|
||||
{
|
||||
id: "361402213NT",
|
||||
date: "2019-11-24T12:13:23.064Z",
|
||||
name: "Maura Carey",
|
||||
identification: "17215896114",
|
||||
id: '361402213NT',
|
||||
date: '2019-11-24T12:13:23.064Z',
|
||||
name: 'Maura Carey',
|
||||
identification: '17215896114',
|
||||
amount: -927.43,
|
||||
status: "completed",
|
||||
action: true,
|
||||
status: 'completed',
|
||||
action: true
|
||||
},
|
||||
{
|
||||
id: "361402213NT",
|
||||
date: "2019-11-24T12:13:23.064Z",
|
||||
name: "Maura Carey",
|
||||
identification: "17215896114",
|
||||
id: '361402213NT',
|
||||
date: '2019-11-24T12:13:23.064Z',
|
||||
name: 'Maura Carey',
|
||||
identification: '17215896114',
|
||||
amount: -927.43,
|
||||
status: "completed",
|
||||
action: true,
|
||||
status: 'completed',
|
||||
action: true
|
||||
},
|
||||
{
|
||||
id: "361402213NT",
|
||||
date: "2019-11-24T12:13:23.064Z",
|
||||
name: "Maura Carey",
|
||||
identification: "17215896114",
|
||||
id: '361402213NT',
|
||||
date: '2019-11-24T12:13:23.064Z',
|
||||
name: 'Maura Carey',
|
||||
identification: '17215896114',
|
||||
amount: -927.43,
|
||||
status: "completed",
|
||||
action: true,
|
||||
},
|
||||
status: 'completed',
|
||||
action: true
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Root
|
||||
header={
|
||||
<div className="p-24">
|
||||
<h4>{t("TITLE")}</h4>
|
||||
<h4>{t('TITLE')}</h4>
|
||||
</div>
|
||||
}
|
||||
content={
|
||||
|
|
@ -122,9 +104,12 @@ const ListInvoiceRender = () => {
|
|||
<div className="flex md:flex-row justify-between flex-col">
|
||||
<div>
|
||||
<Typography className="mr-16 text-lg font-medium tracking-tight leading-6 truncate">
|
||||
{t("TITLE_TABLE")}
|
||||
{t('TITLE_TABLE')}
|
||||
</Typography>
|
||||
<Typography className="font-medium" color="text.secondary">
|
||||
<Typography
|
||||
className="font-medium"
|
||||
color="text.secondary"
|
||||
>
|
||||
1 pendiente, 4 completadas
|
||||
</Typography>
|
||||
</div>
|
||||
|
|
@ -134,7 +119,7 @@ const ListInvoiceRender = () => {
|
|||
variant="contained"
|
||||
color="primary"
|
||||
component={Link}
|
||||
to={'/invoice/edit'}
|
||||
to="/invoice/edit"
|
||||
startIcon={
|
||||
<FuseSvgIcon
|
||||
className="text-48 text-white"
|
||||
|
|
@ -171,49 +156,64 @@ const ListInvoiceRender = () => {
|
|||
<TableRow key={index}>
|
||||
{Object.entries(row).map(([key, value]) => {
|
||||
switch (key) {
|
||||
case "id": {
|
||||
case 'id': {
|
||||
return (
|
||||
<TableCell key={key} component="th" scope="row">
|
||||
<Typography color="text.secondary">
|
||||
{value}
|
||||
</Typography>
|
||||
<TableCell
|
||||
key={key}
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
<Typography color="text.secondary">{value}</Typography>
|
||||
</TableCell>
|
||||
);
|
||||
}
|
||||
case "date": {
|
||||
case 'date': {
|
||||
return (
|
||||
<TableCell key={key} component="th" scope="row">
|
||||
<TableCell
|
||||
key={key}
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
<Typography>
|
||||
{
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
format(new Date(value), "dd/MM/yyyy")
|
||||
format(new Date(value), 'dd/MM/yyyy')
|
||||
}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
);
|
||||
}
|
||||
case "amount": {
|
||||
case 'amount': {
|
||||
return (
|
||||
<TableCell key={key} component="th" scope="row">
|
||||
<TableCell
|
||||
key={key}
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
<Typography>
|
||||
{value.toLocaleString("en-US", {
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
{value.toLocaleString('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD'
|
||||
})}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
);
|
||||
}
|
||||
case "status": {
|
||||
case 'status': {
|
||||
return (
|
||||
<TableCell key={key} component="th" scope="row">
|
||||
<TableCell
|
||||
key={key}
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
<Typography
|
||||
className={clsx(
|
||||
"inline-flex items-center font-bold text-10 px-10 py-2 rounded-full tracking-wide uppercase",
|
||||
value === "pending" &&
|
||||
"bg-red-100 text-red-800 dark:bg-red-600 dark:text-red-50",
|
||||
value === "completed" &&
|
||||
"bg-green-50 text-green-800 dark:bg-green-600 dark:text-green-50"
|
||||
'inline-flex items-center font-bold text-10 px-10 py-2 rounded-full tracking-wide uppercase',
|
||||
value === 'pending' &&
|
||||
'bg-red-100 text-red-800 dark:bg-red-600 dark:text-red-50',
|
||||
value === 'completed' &&
|
||||
'bg-green-50 text-green-800 dark:bg-green-600 dark:text-green-50'
|
||||
)}
|
||||
>
|
||||
{value}
|
||||
|
|
@ -221,9 +221,13 @@ const ListInvoiceRender = () => {
|
|||
</TableCell>
|
||||
);
|
||||
}
|
||||
case "action": {
|
||||
case 'action': {
|
||||
return (
|
||||
<TableCell key={key} component="th" scope="row">
|
||||
<TableCell
|
||||
key={key}
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
<Button
|
||||
size="small"
|
||||
variant="contained"
|
||||
|
|
@ -236,7 +240,11 @@ const ListInvoiceRender = () => {
|
|||
}
|
||||
default: {
|
||||
return (
|
||||
<TableCell key={key} component="th" scope="row">
|
||||
<TableCell
|
||||
key={key}
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
<Typography>{value}</Typography>
|
||||
</TableCell>
|
||||
);
|
||||
|
|
@ -252,6 +260,6 @@ const ListInvoiceRender = () => {
|
|||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default ListInvoiceRender;
|
||||
|
|
|
|||
|
|
@ -17,31 +17,31 @@ table.simple {
|
|||
}
|
||||
|
||||
table.simple thead tr th {
|
||||
padding: 16px 8px;
|
||||
/* padding: 16px 16px; */
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.simple thead tr th:first-child {
|
||||
padding-left: 24px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
table.simple thead tr th:last-child {
|
||||
padding-right: 24px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
table.simple tbody tr td {
|
||||
padding: 12px 8px;
|
||||
padding: 12px 12px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
table.simple tbody tr td:first-child {
|
||||
padding-left: 24px;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
||||
table.simple tbody tr td:last-child {
|
||||
padding-right: 24px;
|
||||
padding-right: 0px;
|
||||
}
|
||||
|
||||
table.simple tbody tr:last-child td {
|
||||
|
|
|
|||
Loading…
Reference in New Issue