Formulario Registro Producto y organización de ventanas de producto

src/app/configs/navigationConfig.ts

@@ -44,7 +44,7 @@ const navigationConfig: FuseNavItemType[] = [
 		translate: 'PRODUCT',
 		type: 'item',
 		icon: 'heroicons-outline:clipboard-check',
-		url: 'producto'
+		url: 'product/list'
 	}
 
 ];

src/app/configs/routesConfig.tsx

@@ -9,10 +9,10 @@ import SignOutConfig from '../main/sign-out/SignOutConfig';
 import Error404Page from '../main/404/Error404Page';
 import ExampleConfig from '../main/example/ExampleConfig';
 import ProjectDashboardAppConfig from '../main/dashboard/project/ProjectDashboardAppConfig';
-import ProductoConfig from '../main/producto/ProductoConfig';
+import ProductoConfigs from '../main/producto/ProductoConfig'
 import InvoiceConfigs from '../main/invoice/InvoiceConfig';
 
-const routeConfigs: FuseRouteConfigsType = [ExampleConfig, SignOutConfig, SignInConfig, SignUpConfig, ProjectDashboardAppConfig, ProductoConfig, ...InvoiceConfigs];
+const routeConfigs: FuseRouteConfigsType = [ExampleConfig, SignOutConfig, SignInConfig, SignUpConfig, ProjectDashboardAppConfig, ...ProductoConfigs, ...InvoiceConfigs];
 
 /**
  * The routes of the application.

src/app/main/producto/Producto.tsx

@@ -2,7 +2,7 @@ import DemoContent from '@fuse/core/DemoContent';
 import FusePageSimple from '@fuse/core/FusePageSimple';
 import { useTranslation } from 'react-i18next';
 import { styled } from '@mui/material/styles';
-import ListDetalleProductoRender from './widgets/DetalleProductoRender';
+import ListDetalleProductoRender from './detalleProducto/DetalleProductoRender';
 import ProductoRender from './ProductoRender';
 
 const Root = styled(FusePageSimple)(({ theme }) => ({

src/app/main/producto/ProductoConfig.ts

@@ -0,0 +1,10 @@
+import { FuseRouteConfigsType } from "@fuse/utils/FuseUtils";
+import FormularioProductoConfig from "./formularioProducto/FormularioProductoConfig";
+import DetalleProductoConfig from "./detalleProducto/DetalleProductoConfig";
+
+const productoConfigs: FuseRouteConfigsType = [
+    DetalleProductoConfig,
+    FormularioProductoConfig
+]
+
+export default productoConfigs;

src/app/main/producto/ProductoConfig.tsx

@@ -1,21 +0,0 @@
-import i18next from "i18next";
-import { lazy } from 'react';
-import en from './i18n/en';
-
-i18next.addResourceBundle('en', 'examplePage', en);
-
-const Producto = lazy(() => import('./Producto'));
-
-const ProductoConfig = {
-    settings: {
-        layout: {}
-    },
-    routes: [
-        {
-            path: 'producto',
-            element: <Producto/>
-        }
-    ]
-};
-
-export default ProductoConfig;

src/app/main/producto/ProductoRender.tsx

@@ -1,11 +1,12 @@
 import BuscarProducto from "./widgets/BuscarProducto";
-import ListDetalleProductoRender from "./widgets/DetalleProductoRender";
+import ListDetalleProductoRender from "./detalleProducto/DetalleProductoRender";
+import DetalleProducto from "./detalleProducto/DetalleProducto";
 
 function ProductoRender() {
     return(
         <div className="w-full p-12 pt-16 sm:pt-24 lg:ltr:pr-0 lg:rtl:pl-0">
             <BuscarProducto></BuscarProducto>
-            <ListDetalleProductoRender></ListDetalleProductoRender>
+            <DetalleProducto></DetalleProducto>
         </div>
     )
 }

src/app/main/producto/detalleProducto/DetalleProducto.tsx

@@ -0,0 +1,9 @@
+import ListDetalleProductoRender from "./DetalleProductoRender"
+
+const DetalleProducto = () => {
+    return(
+        <ListDetalleProductoRender/>
+    )
+}
+
+export default DetalleProducto;

src/app/main/producto/detalleProducto/DetalleProductoConfig.tsx

@@ -0,0 +1,21 @@
+import i18next from "i18next";
+import { lazy } from 'react';
+import es from '../i18n/es';
+
+i18next.addResourceBundle('es', 'detailProduct', es);
+
+const Producto = lazy(() => import('../Producto'));
+
+const DetalleProductoConfig = {
+    settings: {
+        layout: {}
+    },
+    routes: [
+        {
+            path: 'product/list',
+            element: <Producto/>
+        }
+    ]
+};
+
+export default DetalleProductoConfig;

src/app/main/producto/detalleProducto/DetalleProductoRender.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from "react";
 import FuseSvgIcon from "@fuse/core/FuseSvgIcon";
 import {
   Button,
@@ -15,6 +15,7 @@ import {
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import clsx from "clsx";
+import ResponsiveDialog from "../widgets/DialogDelete";
 
 function ListDetalleProductoRender() {
   const [page, setPage] = React.useState(0);
@@ -24,7 +25,9 @@ function ListDetalleProductoRender() {
     setPage(newPage);
   };
 
-  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChangeRowsPerPage = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
     setRowsPerPage(+event.target.value);
     setPage(0);
   };
@@ -36,7 +39,7 @@ function ListDetalleProductoRender() {
     "Descripción",
     "Stock Mínimo",
     "Estado",
-    "Acciones"
+    "Acciones",
   ];
 
   const rows = [
@@ -104,7 +107,7 @@ function ListDetalleProductoRender() {
             variant="contained"
             color="secondary"
             component={Link}
-            to={'/invoice/edit'}
+            to={"/product/form"}
             startIcon={
               <FuseSvgIcon
                 className="text-48 text-white"
@@ -138,69 +141,74 @@ function ListDetalleProductoRender() {
 
           <TableBody>
             {rows
-            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-            .map((row, index) => (
+              .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 "artEstado": {
+                      case "artEstado": {
-                      return (
+                        return (
-                        <TableCell key={key} component="th" scope="row">
+                          <TableCell key={key} component="th" scope="row">
-                          <Typography
+                            <Typography
-                            className={clsx(
+                              className={clsx(
-                              "inline-flex items-center font-bold text-10 px-10 py-2 rounded-full tracking-wide uppercase",
+                                "inline-flex items-center font-bold text-10 px-10 py-2 rounded-full tracking-wide uppercase",
-                              value === "inactivo" &&
+                                value === "inactivo" &&
-                              "bg-red-100 text-red-800 dark:bg-red-600 dark:text-red-50",
+                                  "bg-red-100 text-red-800 dark:bg-red-600 dark:text-red-50",
-                              value === "activo" &&
+                                value === "activo" &&
-                              "bg-green-50 text-green-800 dark:bg-green-600 dark:text-green-50"
+                                  "bg-green-50 text-green-800 dark:bg-green-600 dark:text-green-50"
-                            )}
+                              )}
+                            >
+                              {value}
+                            </Typography>
+                          </TableCell>
+                        );
+                      }
+                      case "action": {
+                        return (
+                          <TableCell
+                            key={key}
+                            component="th"
+                            scope="row"
+                            className="flex gap-5"
                           >
-                            {value}
+                            <div>
-                          </Typography>
-                        </TableCell>
-                      );
-                    }
-                    case "action": {
-                      return (
-                        <TableCell key={key} component="th" scope="row" className="flex gap-5">
-                          <div>
                               <IconButton size="small" color="inherit">
-                                <FuseSvgIcon >heroicons-outline:pencil-alt</FuseSvgIcon>
+                                <FuseSvgIcon>
+                                  heroicons-outline:pencil-alt
+                                </FuseSvgIcon>
                               </IconButton>
-                              </div>
+                            </div>
-                              <div>
+                            <div>
-                              <IconButton size="small" color="default">                           
+                              <ResponsiveDialog></ResponsiveDialog>
-                                <FuseSvgIcon>heroicons-outline:trash</FuseSvgIcon>
+                            </div>
-                              </IconButton> 
+                          </TableCell>
-                              </div>
+                        );
-                            </TableCell>
+                      }
-                      );
+                      default: {
+                        return (
+                          <TableCell key={key} component="th" scope="row">
+                            <Typography>{value}</Typography>
+                          </TableCell>
+                        );
+                      }
                     }
-                    default: {
+                  })}
-                      return (
+                </TableRow>
-                        <TableCell key={key} component="th" scope="row">
+              ))}
-                          <Typography>{value}</Typography>
-                        </TableCell>
-                      );
-                    }
-                  }
-                })}
-              </TableRow>
-            ))}
           </TableBody>
         </Table>
         <TablePagination
-        rowsPerPageOptions={[5, 10, 25]}
+          rowsPerPageOptions={[5, 10, 25]}
-        component="div"
+          component="div"
-        count={rows.length}
+          count={rows.length}
-        rowsPerPage={rowsPerPage}
+          rowsPerPage={rowsPerPage}
-        page={page}
+          page={page}
-        onPageChange={handleChangePage}
+          onPageChange={handleChangePage}
-        onRowsPerPageChange={handleChangeRowsPerPage}
+          onRowsPerPageChange={handleChangeRowsPerPage}
-      />
+        />
       </div>
     </Paper>
-  )
+  );
 }
 
-export default ListDetalleProductoRender;
+export default ListDetalleProductoRender;

src/app/main/producto/formularioProducto/FormularioProducto.tsx

@@ -0,0 +1,9 @@
+import FormularioProductoRender from "./FormularioProductoRender"
+
+const FormularioProducto = () => {
+    return(
+        <FormularioProductoRender/>
+    );
+};
+
+export default FormularioProducto;

src/app/main/producto/formularioProducto/FormularioProductoConfig.tsx

@@ -0,0 +1,23 @@
+import i18next from "i18next";
+import es from "../i18n/es";
+import { lazy } from "react";
+
+i18next.addResourceBundle('es', 'formProducto', es);
+
+const FormularioProducto = lazy(() => import('./FormularioProducto'));
+
+const FormularioProductoConfig = {
+  settings: {
+    layout: {
+      config: {},
+    },
+  },
+  routes: [
+    {
+      path: 'product/form',
+      element: <FormularioProducto />,
+    },
+  ],
+};
+
+export default FormularioProductoConfig;

src/app/main/producto/formularioProducto/FormularioProductoRender.tsx

@@ -0,0 +1,158 @@
+import FusePageSimple from "@fuse/core/FusePageSimple";
+import {
+  Autocomplete,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  Divider,
+  TextField,
+  styled,
+  Button,
+  Grid,
+} from "@mui/material";
+import { useState } from "react";
+
+const FormularioProductoRender = () => {
+  const [formData, setFormData] = useState({
+    codigo: "",
+    tipo: "",
+    nombre: "",
+    descripcion: "",
+    stockMinimo: "",
+    margenGanancia: "",
+    estado: "",
+  });
+
+  const [datosCargados, setDatosCargados] = useState(false);
+
+  const cargarDatosDesdeBD = () => {
+    setDatosCargados(true);
+  };
+
+  return (
+    <Card className="m-20 p-24">
+      <CardHeader title="Registro producto" className="text-16 font-bold " />
+      <Divider />
+      <CardContent className="flex">
+        <Grid className="grid grid-cols-1 sm:grid-cols-6  gap-24 w-full min-w-0 p-24">
+          <TextField
+            className="mt-8 mb-16 sm:col-span-3 lg:col-span-3"
+            required
+            label="Código"
+            id="codigo"
+            name="codigo"
+            variant="outlined"
+            fullWidth
+          />
+
+          <Autocomplete
+            className="mt-8 mb-16 sm:col-span-3 lg:col-span-3"
+            multiple
+            freeSolo
+            options={[]}
+            /* value={value }
+						onChange={(event, newValue) => {
+							onChange(newValue);
+						}} */
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                placeholder="Seleccione el tipo de producto"
+                label="Tipo"
+                variant="outlined"
+                InputLabelProps={{
+                  shrink: true,
+                }}
+              />
+            )}
+          />
+
+          <TextField
+            className="mt-8 mb-16 sm:col-span-3 lg:col-span-3"
+            required
+            label="Nombre"
+            id="nombre"
+            name="nombre"
+            variant="outlined"
+            fullWidth
+          />
+
+          <Autocomplete
+            className="mt-8 mb-16 sm:col-span-3"
+            multiple
+            freeSolo
+            options={["Activo", "Inactivo"]}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                placeholder="Seleccione el estado del producto"
+                label="Estado"
+                variant="outlined"
+                InputLabelProps={{
+                  shrink: true,
+                }}
+              />
+            )}
+          />
+
+          <TextField
+            className="mt-8 mb-16 sm:col-span-3 lg:col-span-3"
+            required
+            label="Stock Mínimo"
+            id="stockMinimo"
+            name="stockMinimo"
+            variant="outlined"
+            fullWidth
+          />
+
+          <TextField
+            className="mt-8 mb-16 sm:col-span-3 md:col-span-3"
+            required
+            label="Margen de Ganancia"
+            id="margenGanancia"
+            name="margenGanancia"
+            variant="outlined"
+            fullWidth
+          />
+
+          <TextField
+            className="mt-8 mb-16 sm:col-span-6 lg:col-span-6"
+            id="descripcion"
+            label="Descripción"
+            name="descripcion"
+            type="text"
+            multiline
+            rows={5}
+            variant="outlined"
+            fullWidth
+          />
+        </Grid>
+      </CardContent>
+      <CardActions
+      className=""
+      >
+        <Button
+          className="w-320"
+          variant="contained"
+          size="small"
+          color="secondary"
+        >
+          Guardar{" "}
+        </Button>
+        {datosCargados && (
+        <Button
+          className="w-320"
+          variant="contained"
+          size="small"
+          color="primary"
+        >
+          Actualizar{" "}
+        </Button>
+        )}
+      </CardActions>
+    </Card>
+  );
+};
+
+export default FormularioProductoRender;

src/app/main/producto/i18n/en.ts

@@ -1,5 +0,0 @@
-const locale = {
-	TITLE: 'Product'
-};
-
-export default locale;

src/app/main/producto/i18n/es.ts

@@ -0,0 +1,5 @@
+const locale = {
+	TITLE: 'Producto'
+};
+
+export default locale;

src/app/main/producto/widgets/DialogDelete.tsx

@@ -0,0 +1,59 @@
+import FuseSvgIcon from "@fuse/core/FuseSvgIcon";
+import {
+  Button,
+  useMediaQuery,
+  useTheme,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  IconButton,
+} from "@mui/material";
+import React from "react";
+
+function ResponsiveDialog() {
+  const [open, setOpen] = React.useState(false);
+  const theme = useTheme();
+  const fullScreen = useMediaQuery(theme.breakpoints.down("sm"));
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <IconButton size="small" color="default"
+      onClick={handleClickOpen}>
+        <FuseSvgIcon>heroicons-outline:trash</FuseSvgIcon>
+      </IconButton>
+      <Dialog
+        fullScreen={fullScreen}
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="responsive-dialog-title"
+      >
+        <DialogTitle id="responsive-dialog-title">{"Confirmar"}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Este elemento se eliminará permanentemente. ¿Deseas continuar?.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button autoFocus onClick={handleClose} color="primary">
+            Cancelar
+          </Button>
+          <Button onClick={handleClose} color="primary" autoFocus>
+            Aceptar
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </div>
+  );
+}
+
+export default ResponsiveDialog;

tsconfig.json

@@ -48,5 +48,5 @@
     "tailwind.config.js",
     "vite.config.mts",
     "vite-env.d.ts"
-  ],
+, "src/app/main/producto/.tsx"  ],
 }