Tabla Detalle Productos

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 InvoiceConfigs from '../main/invoice/InvoiceConfig';
 
-const routeConfigs: FuseRouteConfigsType = [ExampleConfig, SignOutConfig, SignInConfig, SignUpConfig, ProjectDashboardAppConfig, ...InvoiceConfigs];
+const routeConfigs: FuseRouteConfigsType = [ExampleConfig, SignOutConfig, SignInConfig, SignUpConfig, ProjectDashboardAppConfig, ProductoConfig, ...InvoiceConfigs];
 
 /**
  * The routes of the application.

src/app/main/producto/Producto.tsx

@@ -2,6 +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';
 
 const Root = styled(FusePageSimple)(({ theme }) => ({
 	'& .FusePageSimple-header': {
@@ -25,6 +26,9 @@ function Producto() {
 					<h4>{t('PRODUCTOS')}</h4>
 				</div>
 			}
+			content={
+				<ListDetalleProductoRender/>
+			}
 		/>
 	)
 }

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

@@ -0,0 +1,206 @@
+import * as React from 'react';
+import FuseSvgIcon from "@fuse/core/FuseSvgIcon";
+import {
+  Button,
+  IconButton,
+  Paper,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TablePagination,
+  TableRow,
+  Typography,
+} from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import clsx from "clsx";
+
+function ListDetalleProductoRender() {
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(+event.target.value);
+    setPage(0);
+  };
+
+  const { t } = useTranslation("products");
+  const columns = [
+    "Código",
+    "Nombre",
+    "Descripción",
+    "Stock Mínimo",
+    "Estado",
+    "Acciones"
+  ];
+
+  const rows = [
+    {
+      artCodigo: 1,
+      artNombre: "Servicios Profesionales",
+      artDescripcion: "Prestación de servicios",
+      artStockMinimo: 0,
+      artEstado: "activo",
+      action: true,
+    },
+    {
+      artCodigo: 2,
+      artNombre: "Servicios Varios",
+      artDescripcion: "",
+      artStockMinimo: 0,
+      artEstado: "inactivo",
+      action: true,
+    },
+    {
+      artCodigo: 3,
+      artNombre: "Servicios Profesionales",
+      artDescripcion: "Prestación de servicios",
+      artStockMinimo: 0,
+      artEstado: "activo",
+      action: true,
+    },
+    {
+      artCodigo: 4,
+      artNombre: "Servicios Varios",
+      artDescripcion: "",
+      artStockMinimo: 0,
+      artEstado: "inactivo",
+      action: true,
+    },
+    {
+      artCodigo: 5,
+      artNombre: "Servicios Profesionales",
+      artDescripcion: "Prestación de servicios",
+      artStockMinimo: 0,
+      artEstado: "activo",
+      action: true,
+    },
+    {
+      artCodigo: 6,
+      artNombre: "Servicios Varios",
+      artDescripcion: "",
+      artStockMinimo: 0,
+      artEstado: "inactivo",
+      action: true,
+    },
+  ];
+
+  return (
+    <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>
+          <Typography className="mr-16 text-lg font-medium tracking-tight leading-6 truncate">
+            {t("Detalle de productos")}
+          </Typography>
+        </div>
+        <div>
+          <Button
+            size="small"
+            variant="contained"
+            color="secondary"
+            component={Link}
+            to={'/invoice/edit'}
+            startIcon={
+              <FuseSvgIcon
+                className="text-48 text-white"
+                size={24}
+                color="action"
+              >
+                heroicons-outline:plus
+              </FuseSvgIcon>
+            }
+          >
+            Registrar Producto
+          </Button>
+        </div>
+      </div>
+      <div className="table-responsive mt-24">
+        <Table className="simple w-full min-w-full h-full">
+          <TableHead>
+            <TableRow>
+              {columns.map((column, index) => (
+                <TableCell key={index}>
+                  <Typography
+                    color="text.secondary"
+                    className="font-semibold text-12 whitespace-nowrap"
+                  >
+                    {column}
+                  </Typography>
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+            {rows
+            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+            .map((row, index) => (
+              <TableRow key={index} >
+                {Object.entries(row).map(([key, value]) => {
+                  switch (key) {
+                    case "artEstado": {
+                      return (
+                        <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 === "inactivo" &&
+                              "bg-red-100 text-red-800 dark:bg-red-600 dark:text-red-50",
+                              value === "activo" &&
+                              "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">
+                          <div>
+                              <IconButton size="small" color="inherit">
+                                <FuseSvgIcon >heroicons-outline:pencil-alt</FuseSvgIcon>
+                              </IconButton>
+                              </div>
+                              <div>
+                              <IconButton size="small" color="default">                           
+                                <FuseSvgIcon>heroicons-outline:trash</FuseSvgIcon>
+                              </IconButton> 
+                              </div>
+                            </TableCell>
+                      );
+                    }
+                    default: {
+                      return (
+                        <TableCell key={key} component="th" scope="row">
+                          <Typography>{value}</Typography>
+                        </TableCell>
+                      );
+                    }
+                  }
+                })}
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        <TablePagination
+        rowsPerPageOptions={[5, 10, 25]}
+        component="div"
+        count={rows.length}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        onPageChange={handleChangePage}
+        onRowsPerPageChange={handleChangeRowsPerPage}
+      />
+      </div>
+    </Paper>
+  )
+}
+
+export default ListDetalleProductoRender;

src/app/main/producto/widgets/types/DetalleProductoType.ts

@@ -0,0 +1,14 @@
+type DetalleProductoRow = {
+    artCodigo: number;
+    artNombre: string;
+    artDescripcion: string;
+    artStockMinimo: number;
+    artEstado: any;
+};
+
+type DetalleProductoType = {
+    columns: string[];
+    rows: DetalleProductoRow[];
+};
+
+export default DetalleProductoType;