PEDIDOS EN MODULO RESTAURANTE DEL

src/app.js

@@ -15,6 +15,7 @@ const clientesRutas = require('./rutas/rt_clientes');
 const productosRutas = require('./rutas/rt_items');
 const generalesRutas = require('./rutas/rt_Generales');
 const cloud_rutas = require('./rutas/rt_cloud');
+const app_restaurant = require('./rutas/rt_apps');
 
 //configuraciones
 app.set('port',process.env.PORT||puerto);
@@ -49,6 +50,7 @@ app.use('/', clientesRutas);
 app.use('/', productosRutas);
 app.use('/', generalesRutas);
 app.use('/', cloud_rutas);
+app.use('/', app_restaurant);
 
 //prueba de json directa
 app.get('/pruebaJson',function(req,res){

src/config.js

@@ -5,6 +5,7 @@ const config = {
         user: 'admin',
         pswd: 'Dx.1706%',
         db_a: 'TELCOTRONICS',
+        //db_a: 'facturacion',
         debg: false,
         sock: '/'
     },

src/controladores/controlador_Apps.js

@@ -0,0 +1,27 @@
+const controlador = {};
+
+controlador.app_restaurant = (req, res) => {
+  res.render('app_restaurant');
+};
+controlador.dashboard = (req, res) => {
+  res.render('modulos/dashboard');
+  //let html = res.attachment([dash_board]);
+  //res.send({"data":html});
+  //res.send('dash_board');
+};
+controlador.user = (req, res) => {
+  console.log(req.body);
+  req.getConnection((err, conn) => {
+    conn.query(`SELECT cod_usr,nombre,apellido,n_sesion,rol FROM usuarios where form_init = 'RESTAURANT' or ROL='admin'`, (err, rows) => {
+      if (err) {
+        res.json(err);
+        next(err);
+      } else {
+        var Origen = { usuarios: rows };
+        res.json(Origen);
+      }
+    });
+  });
+}
+
+module.exports = controlador;

src/controladores/controlador_General.js

@@ -60,9 +60,7 @@ function stringTo_md5(data_string) {
 controlador.login_test = (req, res) => {
   res.render('login_test');
 };
-controlador.dash = (req, res) => {
+
-  res.render('admin_dash');
-};
 //*********  FORM APP-PEDIDOS-SIGMA  ********//
 controlador.app_sigma = (req, res) => {
   res.render('app_pedidos');
@@ -73,7 +71,7 @@ controlador.app_PEDIDOS = (req, res) => {
   const consulta = req.query.origen;
   console.log("Consulta: " + req.query);
   req.getConnection((err, conn) => {
-    conn.query(`SELECT * FROM ver_pedidos WHERE PedUsoPrdct_origen like ?`, [consulta], (err, rows) => {
+    conn.query(`SELECT * FROM ver_pedidos WHERE PedUsoPrdct_origen like ? order by PedUsoPrdct_id desc`, [consulta], (err, rows) => {
       //conn.query(`SELECT * FROM ver_pedidos `,(err,rows)=>{
       if (err) {
         res.json(err);
@@ -125,7 +123,7 @@ controlador.recibe_pedidos = async (req, res) => {
     PedUsoPrdct_Num: "1",
     PedUsoPrdct_idClient: json.clienteId,
     PedUsoPrdct_reg: reg_DB(),
-    PedUsoPrdct_estado: json.plataforma,
+    PedUsoPrdct_estado: json.estado,
     PedUsoPrdct_plataforma: json.plataforma,
     PedUsoPrdct_usuario: json.user,
     PedUsoPrdct_valor: json.valor,
@@ -206,4 +204,6 @@ function reg_DB() {
   return fecha;
 }
 
+
+
 module.exports = controlador;

src/public/css/restaurant.css

@@ -162,6 +162,7 @@ body {
     position: absolute;
     left: 15px;
     top: 4px;
+    color: #999;
 }
 .user{
     position: relative;
@@ -358,6 +359,19 @@ body {
 }
 
 /**** MODO RESPONSIVO *****/
+@media(max-width:1400px){
+    .detalles .card_table {
+        position: relative;
+        padding: 20px;
+        padding-top: 10px;
+        display: grid;
+        min-width: auto; 
+        background: #1F497D;
+    }
+    .card_table{
+        min-width: none;
+    }
+}
 @media(max-width:992px){
     .navigation{
         left: -250px;

src/public/css/restaurant_form.css

@@ -0,0 +1,112 @@
+/********* TABLAS *********/
+.panel_header{
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+.panel_header .h2{
+    font-weight: 600;
+}
+.panel_header input{
+    position: relative;
+    padding: 5px;
+    background: rgba(10, 10, 10, 0.45);
+    text-decoration: none;
+    border-radius: 6px;
+}
+
+.panel_table table{
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 10px;
+    overflow: auto;
+}
+.panel_table table thead td{
+    font-weight: 600;
+    background:rgba(10, 10, 10, 0.2)
+}
+.panel_table table tr{
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.panel_table table tr:last-child{
+    border-bottom: none;
+}
+.panel_table table tr:hover{
+    background: rgba(76, 144, 247, 0.5);
+    color:rgba(10, 10, 10, 0.45);
+    cursor: pointer;
+}
+.panel_table table tr td{
+    padding: 9px 5px;
+}
+.panel_table table tr td:nth-child(2),.panel_table table tr td:nth-child(2){
+    text-align: center;
+    padding-right: 20px;
+}
+.panel_table table tr td:nth-child(3),.panel_table table tr td:nth-child(3){
+    text-align: left;
+    padding-right: 20px;
+}
+.panel_table table tr td:nth-child(5),.panel_table table tr td:nth-child(5){
+    text-align: right;
+    padding-right: 20px;
+}
+.panel_table table tr td:last-child,.panel_table table tr td:last-child{
+    text-align: center;
+}
+
+/********* ESTADOS *********/
+.estado {
+    position: relative;
+    padding: 2px 2px;
+    border-radius: 3px;
+    font-size: 14px;
+    font-weight: 300;
+    letter-spacing: 1px;
+}
+.ACTIVO{
+    margin: auto;
+    background: #00A65A;
+    color: white;
+}
+.pendiente{
+    margin: auto;
+    background: #F39C12;
+    color: white;
+}
+.PROCESANDO{
+    margin: auto;
+    background: #F39C12;
+    color: white;
+}
+.FACTURADO{
+    margin: auto;
+    background: #3C8DBC;
+    color: white;
+}
+.error{
+    margin: auto;
+    background: #DF5645;
+    color: white;
+}
+
+@media(max-width:768px){
+    .panel_table table{
+        width: 100%;
+        border-collapse: collapse;
+        margin-top: 10px;
+        overflow: auto;
+        font-size: 9px;
+    }
+    .estado{
+        font-size: 10px;
+        padding: auto;
+    }
+    .panel_table table tr td {
+        padding: 4px 2px;
+    }
+    .panel_header .h2{
+        font-size: 0.5em;
+    }
+}

src/public/js/app_restaurant.js

@@ -0,0 +1,93 @@
+async function ver_usuarios(){
+    let user = await get_json("/usuarios");
+    console.log(user);
+}
+
+async function mostrar_form(form_aRender){
+    console.log(form_aRender);
+    switch(form_aRender){
+        case 'clientes': 
+            let cli = await get_html("/verClientesJsonApp");
+            await console.log(cli);
+            break;
+        case 'pedidos': 
+            let pedidos = await get_json("/consultaPedidos?origen=%");
+            var thead = "<td>ID</td><td>Nombre</td><td>Fecha</td><td>Origen</td><td>Valor</td><td>Estado</td>";
+            let tabla = await generaTab_html(pedidos.ConsultaPedidos,thead);
+            await render(tabla);
+            //await console.log(pedidos.ConsultaPedidos);
+            break;
+        case 'usuarios': 
+            let user = await get_json("/users");
+            console.log(user);
+            break;
+        case 'dashboard': 
+            let dash = await get_html("/dash_board");
+            console.log(dash);
+            break;
+    }
+}
+
+async function get_json(url) {
+    var data;
+    await fetch(url, {
+        method: 'GET',
+        headers: {
+            "Content-Type": "application/json",
+        },
+    })
+    .then(res => res.json())
+    .then(res => {
+        data = res;
+        return res;
+    })
+    .catch(err => console.log('Solicitud fallida', err)); // Capturar errores;
+    return data;
+}
+async function get_html(url) {
+    await fetch(url, {
+        method: 'GET',
+        headers: {
+            "Content-Type": "application/json",
+        },
+    })
+    .then(res => {
+        console.log(res);
+        render(res);
+        //return res;
+    })
+    .catch(
+        err => console.log('Solicitud fallida', err)
+    ); // Capturar errores;
+}
+
+async function render(dat_html) {
+    let contenedor = document.getElementById('contenido');
+    contenedor.innerHTML = dat_html;
+}
+
+async function generaTab_html(json,heder_tab){
+    var tab = `
+    <div class="panel_table">
+     <div class="panel_header">
+        <h2>Ordenes Recientes</h2>
+        <input type="date" id="select_fecha" name="filtro_fecha">
+    </div>
+    <table><thead><tr>${heder_tab}</tr></thead><tbody>`;
+    for (let key in json) {
+        let valor = json[key].PedUsoPrdct_valor;
+        let fecha = json[key].PedUsoPrdct_reg;
+        let fila = `<tr>
+                    <td>${json[key].PedUsoPrdct_id}</td>
+                    <td>${json[key].client_nombre}</td>
+                    <td>${fecha.substr(0, 10)}</td>
+                    <td>${json[key].PedUsoPrdct_origen}</td>
+                    <td> ${valor.toFixed(2)}</td>
+                    <td><span class="estado ${json[key].PedUsoPrdct_estado}">${json[key].PedUsoPrdct_estado}</span></td>
+                </tr>`;
+        tab = tab+fila;
+    }
+    tab = tab+"</tbody></table></div>";
+    //console.log(json);
+    return tab;
+}

src/rutas/rt_Generales.js

@@ -15,6 +15,6 @@ rutas.get('/recepcionPedidos', controlador_init.recibe_pedidos);//receptar pedid
 rutas.get('/', controlador_init.app_login);//FORM LOGIN DE LA APP
 rutas.post('/login', controlador_init.auth);//Authenticacion de APP
 rutas.get('/login_test', controlador_init.login_test);//login testing css / dev
-rutas.get('/admin_dash', controlador_init.dash);//login testing css / dev
+
 
 module.exports = rutas;

src/rutas/rt_apps

@@ -0,0 +1,9 @@
+const express = require('express');
+const rutas =  express.Router();
+
+const controlador_init = require('../controladores/controlador_Apps');
+rutas.get('/app_restaurant', controlador_init.app_restaurant);//login testing css / dev
+//rutas.get('/usuarios', controlador_init.user);//
+rutas.get('/dash_board', controlador_init.dashboard);//
+rutas.get('/users', controlador_init.user);//devuelve usuaios con el el ROL meseros
+module.exports = rutas;

src/views/admin_dash.ejs

@@ -1,256 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SIGMA Restaurante</title>
-
-    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
-        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
-    <link rel="stylesheet" href="../css/restaurant.css">
-    <link rel="icon" sizes="64x64" href="../img/favicon_restaurant/favicon.ico">
-
-</head>
-
-<body>
-    <div class="container">
-        <div class="navigation">
-            <ul>
-                <li>
-                    <a href="#" id="logo" onclick="toggleMenu()">
-                        <span class="icon">
-                            <img src="../img/favicon_sigma/android-chrome-192x192.png" alt="Logo" width="58">
-                        </span>
-                        <span class="nom_app">
-                            <span class="titulo">SIGMA</span>
-                            <span class="subtitulo">Restaurant </span>
-                        </span>
-                    </a>
-                </li>
-
-                <li>
-                    <a href="#">
-                        <span class="icon"><i class="fa fa-home" aria-hidden="true"></i></span>
-                        <span class="title">Inicio</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="#">
-                        <span class="icon"><i class="fa fa-cart-plus" aria-hidden="true"></i></span>
-                        <span class="title">Pedidos</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="#">
-                        <span class="icon"><i class="fa fa-users" aria-hidden="true"></i></span>
-                        <span class="title">Clientes</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="#">
-                        <span class="icon"><i class="fa fa-cutlery" aria-hidden="true"></i></span>
-                        <span class="title">Mesas</span>
-                    </a>
-                </li>
-                
-                <li>
-                    <a href="#">
-                        <span class="icon"><i class="fa fa-coffee" aria-hidden="true"></i></span>
-                        <span class="title">Menu</span>
-                    </a>
-                </li>
-                <li>
-                    <a href="#">
-                        <span class="icon"><i class="fa fa-cog" aria-hidden="true"></i></span>
-                        <span class="title">Configuracion</span>
-                    </a>
-                </li>
-
-                <li>
-                    <a href="#">
-                        <span class="icon"><i class="fa fa-comments" aria-hidden="true"></i></span>
-                        <span class="title">Chat</span>
-                    </a>
-                </li>
-                <li><a href="#">
-                        <span class="icon"><i class="fa fa-lock" aria-hidden="true"></i></span>
-                        <span class="title">Contraseña</span>
-                    </a>
-                </li>
-                <li><a href="#">
-                        <span class="icon"><i class="fa fa-sign-out" aria-hidden="true"></i></span>
-                        <span class="title">Salir</span>
-                    </a>
-                </li>
-
-            </ul>
-        </div>
-        <div class="main">
-            <div class="topbar">
-                <div class="toggle" onclick="toggleMenu()">
-
-                </div>
-                <div class="buscar">
-                    <label>
-                        <input type="text" placeholder="Buscar Aqui" />
-                        <i class="fa fa-search" aria-hidden="true"></i>
-                    </label>
-                </div>
-                <div class="user">
-                    <img src="../img/usuario2.jpeg" alt="usr">
-                </div>
-            </div>
-            <div class="cardBox">
-
-
-                <div class="card">
-                    <div class="">
-                        <div class="numeros">125.33</div>
-                        <div class="card_nombre">Pedidos</div>
-                        <div class="footer"></div>
-                    </div>
-                    <div class="iconBox">
-                        <i class="fa fa-shopping-bag" aria-hidden="true"></i>
-                    </div>
-                </div>
-                <div class="card">
-                    <div class="">
-                        <div class="numeros">125.33</div>
-                        <div class="card_nombre">Compras Ingresadas</div>
-                        <div class="footer"></div>
-                    </div>
-                    <div class="iconBox">
-                        <i class="fa fa-shopping-cart" aria-hidden="true"></i>
-                    </div>
-                </div>
-                <div class="card">
-                    <div class="">
-                        <div class="numeros">125.33</div>
-                        <div class="card_nombre">Ventas Emitidas</div>
-                        <div class="footer"></div>
-                    </div>
-                    <div class="iconBox">
-
-                        <i class="fa fa-money" aria-hidden="true"></i>
-                    </div>
-                </div>
-                <div class="card">
-                    <div class="">
-                        <div class="numeros">125.33</div>
-                        <div class="card_nombre">Vistas Diarias</div>
-                        <div class="footer"></div>
-                    </div>
-                    <div class="iconBox">
-                        <i class="fa fa-eye" aria-hidden="true"></i>
-                    </div>
-                </div>
-            </div>
-
-            <div class="detalles">
-                <div class="card_table ordenesRecientes">
-                    <div class="card_header">
-                        <h2>Ordenes Recientes</h2>
-                        <a href="#" class="btn">Ver Todas</a>
-                    </div>
-                    <table>
-                        <thead>
-                            <tr>
-                                <td>ID</td>
-                                <td>Nombre</td>
-                                <td>Valor</td>
-                                <td>Metodo Pago</td>
-                                <td>Estado</td>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>1</td>
-                                <td>Diego Farias</td>
-                                <td>150.66</td>
-                                <td>Tranferencia</td>
-                                <td><span class=" estado finalizada">ENVIADO</span></td>
-                            </tr>
-                            <tr>
-                                <td>2</td>
-                                <td>Paul Fernando</td>
-                                <td>12.36</td>
-                                <td>EFECTIVO</td>
-                                <td><span class="estado iniciada">RECIBIDO</span></td>
-                            </tr>
-                            <tr>
-                                <td>3</td>
-                                <td>Pablo Xavier Farias</td>
-                                <td>2.36</td>
-                                <td>CONTRA ENTREGA</td>
-                                <td><span class="estado pendiente">PROCESANDO</span></td>
-                            </tr>
-                            <tr>
-                                <td>3</td>
-                                <td>Pepito la Lora</td>
-                                <td>0.0</td>
-                                <td>CANCELADO</td>
-                                <td class="estado"><span class="estado error">ERROR</span></td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <div class="card_table items_recientes">
-                    <div class="card_header">
-                        <h2>Consumos Recientes</h2>
-                        <a href="#" class="btn">Ver Todas</a>
-                    </div>
-                    <table>
-                        <tbody>
-                            <tr>
-                                <td width="64px">
-                                    <div class="img_Item">
-                                        <img src="../img/items/img1.jpg" alt="item">
-                                    </div>
-                                </td>
-                                <td><h4>Hamburgesa<br><span>Doble</span></h4></td>
-                            </tr>
-                            <tr>
-                                <td width="64px">
-                                    <div class="img_Item">
-                                        <img src="../img/items/img2.jpg" alt="item">
-                                    </div>
-                                </td>
-                                <td><h4>Pizza<br><span>Americana</span></h4></td>
-                            </tr>
-                            <tr>
-                                <td width="64px">
-                                    <div class="img_Item">
-                                        <img src="../img/items/img3.jpg" alt="item">
-                                    </div>
-                                </td>
-                                <td><h4>Alitas BBQ<br><span>Salsas BBQ y Brandy</span></h4></td>
-                            </tr>
-                            <tr>
-                                <td width="64px">
-                                    <div class="img_Item">
-                                        <img src="../img/items/img4.jpg" alt="item">
-                                    </div>
-                                </td>
-                                <td><h4>Pulpo<br><span>a la Parrilla</span></h4></td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-    </div>
-    <Script>
-        function toggleMenu() {
-            let toggle = document.querySelector('.toggle'); //selecionamos el boton menu
-            toggle.classList.toggle('active'); //agregamos una class active
-            let navigation = document.querySelector('.navigation');
-            navigation.classList.toggle('active');
-            let main = document.querySelector('.main');
-            main.classList.toggle('active');
-        }
-    </Script>
-</body>
-
-</html>

src/views/app_restaurant.ejs

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SIGMA Restaurante</title>
+
+    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
+        integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+    <link rel="stylesheet" href="../css/restaurant.css">
+    <link rel="stylesheet" href="../css/restaurant_form.css">
+    <link rel="icon" sizes="64x64" href="../img/favicon_restaurant/favicon.ico">
+
+</head>
+
+<body>
+    <div class="container">
+        <div class="navigation">
+            <ul>
+                <li>
+                    <a href="#" id="logo" onclick="toggleMenu()">
+                        <span class="icon">
+                            <img src="../img/favicon_sigma/android-chrome-192x192.png" alt="Logo" width="58">
+                        </span>
+                        <span class="nom_app">
+                            <span class="titulo">SIGMA</span>
+                            <span class="subtitulo">Restaurant </span>
+                        </span>
+                    </a>
+                </li>
+
+                <li>
+                    <a href="#" onclick="mostrar_form('dashboard')">
+                        <span class="icon"><i class="fa fa-home" aria-hidden="true"></i></span>
+                        <span class="title">Inicio</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#" onclick="mostrar_form('usuarios')">
+                        <span class="icon"><i class="fa fa-user" aria-hidden="true"></i></span>
+                        <span class="title">Usuarios</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#" onclick="mostrar_form('pedidos')">
+                        <span class="icon"><i class="fa fa-cart-plus" aria-hidden="true"></i></span>
+                        <span class="title">Pedidos</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#" onclick="mostrar_form('clientes')">
+                        <span class="icon"><i class="fa fa-users" aria-hidden="true"></i></span>
+                        <span class="title">Clientes</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#" onclick="mostrar_form('usuarios')">
+                        <span class="icon"><i class="fa fa-cutlery" aria-hidden="true"></i></span>
+                        <span class="title">Mesas</span>
+                    </a>
+                </li>
+
+                <li>
+                    <a href="#" onclick="mostrar_form('usuarios')">
+                        <span class="icon"><i class="fa fa-coffee" aria-hidden="true"></i></span>
+                        <span class="title">Menu</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="#">
+                        <span class="icon"><i class="fa fa-cog" aria-hidden="true"></i></span>
+                        <span class="title">Configuracion</span>
+                    </a>
+                </li>
+
+                <li>
+                    <a href="#" onclick="mostrar_form('usuarios')">
+                        <span class="icon"><i class="fa fa-comments" aria-hidden="true"></i></span>
+                        <span class="title">Chat</span>
+                    </a>
+                </li>
+                <li><a href="#">
+                        <span class="icon"><i class="fa fa-lock" aria-hidden="true"></i></span>
+                        <span class="title">Contraseña</span>
+                    </a>
+                </li>
+                <li><a href="#">
+                        <span class="icon"><i class="fa fa-sign-out" aria-hidden="true"></i></span>
+                        <span class="title">Salir</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div class="main">
+            <div class="topbar">
+                <div class="toggle" onclick="toggleMenu()">
+
+                </div>
+                <div class="buscar">
+                    <label>
+                        <input type="text" placeholder="Buscar Aqui" />
+                        <i class="fa fa-search" aria-hidden="true"></i>
+                    </label>
+                </div>
+                <div class="user">
+                    <img src="../img/usuario2.jpeg" alt="usr">
+                </div>
+            </div>
+            <!---******** CONTENIDO PARA RENDERIZAR ********--->
+            <div class="contenido" id="contenido">
+                <%- include("modulos/dashboard") %>
+            </div>
+        </div>
+    </div>
+    <Script>
+        function toggleMenu() {
+            let toggle = document.querySelector('.toggle'); //selecionamos el boton menu
+            toggle.classList.toggle('active'); //agregamos una class active
+            let navigation = document.querySelector('.navigation');
+            navigation.classList.toggle('active');
+            let main = document.querySelector('.main');
+            main.classList.toggle('active');
+        }
+
+        
+    </Script>
+    <script src="../js/app_restaurant.js"></script>
+</body>
+
+</html>

src/views/modulos/dashboard.ejs

@@ -0,0 +1,143 @@
+<div class="cardBox">
+    <div class="card">
+        <div class="">
+            <div class="numeros">125.33</div>
+            <div class="card_nombre">Pedidos</div>
+            <div class="footer"></div>
+        </div>
+        <div class="iconBox">
+            <i class="fa fa-shopping-bag" aria-hidden="true"></i>
+        </div>
+    </div>
+    <div class="card">
+        <div class="">
+            <div class="numeros">125.33</div>
+            <div class="card_nombre">Compras Ingresadas</div>
+            <div class="footer"></div>
+        </div>
+        <div class="iconBox">
+            <i class="fa fa-shopping-cart" aria-hidden="true"></i>
+        </div>
+    </div>
+    <div class="card">
+        <div class="">
+            <div class="numeros">125.33</div>
+            <div class="card_nombre">Ventas Emitidas</div>
+            <div class="footer"></div>
+        </div>
+        <div class="iconBox">
+
+            <i class="fa fa-money" aria-hidden="true"></i>
+        </div>
+    </div>
+    <div class="card">
+        <div class="">
+            <div class="numeros">125.33</div>
+            <div class="card_nombre">Vistas Diarias</div>
+            <div class="footer"></div>
+        </div>
+        <div class="iconBox">
+            <i class="fa fa-eye" aria-hidden="true"></i>
+        </div>
+    </div>
+</div>
+
+<div class="detalles">
+    <div class="card_table ordenesRecientes">
+        <div class="card_header">
+            <h2>Ordenes Recientes</h2>
+            <a href="#" class="btn">Ver Todas</a>
+        </div>
+        <table>
+            <thead>
+                <tr>
+                    <td>ID</td>
+                    <td>Nombre</td>
+                    <td>Valor</td>
+                    <td>Metodo Pago</td>
+                    <td>Estado</td>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>1</td>
+                    <td>Diego Farias</td>
+                    <td>150.66</td>
+                    <td>Tranferencia</td>
+                    <td><span class=" estado finalizada">ENVIADO</span></td>
+                </tr>
+                <tr>
+                    <td>2</td>
+                    <td>Paul Fernando</td>
+                    <td>12.36</td>
+                    <td>EFECTIVO</td>
+                    <td><span class="estado iniciada">RECIBIDO</span></td>
+                </tr>
+                <tr>
+                    <td>3</td>
+                    <td>Pablo Xavier Farias</td>
+                    <td>2.36</td>
+                    <td>CONTRA ENTREGA</td>
+                    <td><span class="estado pendiente">PROCESANDO</span></td>
+                </tr>
+                <tr>
+                    <td>3</td>
+                    <td>Pepito la Lora</td>
+                    <td>0.0</td>
+                    <td>CANCELADO</td>
+                    <td class="estado"><span class="estado error">ERROR</span></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="card_table items_recientes">
+        <div class="card_header">
+            <h2>Consumos Recientes</h2>
+            <a href="#" class="btn">Ver Todas</a>
+        </div>
+        <table>
+            <tbody>
+                <tr>
+                    <td width="64px">
+                        <div class="img_Item">
+                            <img src="../img/items/img1.jpg" alt="item">
+                        </div>
+                    </td>
+                    <td>
+                        <h4>Hamburgesa<br><span>Doble</span></h4>
+                    </td>
+                </tr>
+                <tr>
+                    <td width="64px">
+                        <div class="img_Item">
+                            <img src="../img/items/img2.jpg" alt="item">
+                        </div>
+                    </td>
+                    <td>
+                        <h4>Pizza<br><span>Americana</span></h4>
+                    </td>
+                </tr>
+                <tr>
+                    <td width="64px">
+                        <div class="img_Item">
+                            <img src="../img/items/img3.jpg" alt="item">
+                        </div>
+                    </td>
+                    <td>
+                        <h4>Alitas BBQ<br><span>Salsas BBQ y Brandy</span></h4>
+                    </td>
+                </tr>
+                <tr>
+                    <td width="64px">
+                        <div class="img_Item">
+                            <img src="../img/items/img4.jpg" alt="item">
+                        </div>
+                    </td>
+                    <td>
+                        <h4>Pulpo<br><span>a la Parrilla</span></h4>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</div>