diff --git a/ci4/app/Views/themes/vuexy/form/clientes/cliente/_facturacionClienteItems.php b/ci4/app/Views/themes/vuexy/form/clientes/cliente/_facturacionClienteItems.php
new file mode 100644
index 00000000..57238c79
--- /dev/null
+++ b/ci4/app/Views/themes/vuexy/form/clientes/cliente/_facturacionClienteItems.php
@@ -0,0 +1,55 @@
+<div class="row">
+    <div class="col-2">
+        
+        <div class="form-group">
+            <label for="acumuladoFacturacion"><?= lang('Facturas.acumuladoFacturacion') ?></label>
+            <input readonly type="text" class="form-control autonumeric-currency-totales" id="acumuladoFacturacion" name="acumulado_facturacion">
+        </div>
+        <div class="form-group">
+            <label for="totalPendientePago"><?= lang('Facturas.totalPendientePago') ?></label>
+            <input readonly type="text" class="form-control autonumeric-currency-totales" id="totalPendientePago" name="numero_factura">
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <table id="tableOfFacturasCliente" class="table table-striped table-hover" style="width: 100%;">
+        <thead>
+            <tr>
+                <th><?= lang('Facturas.numeroFactura') ?></th>
+                <th><?= lang('Facturas.fechaFactura') ?></th>
+                <th><?= lang('Facturas.total') ?></th>
+                <th><?= lang('Facturas.estado') ?></th>
+                <th><?= lang('Facturas.estadoPago') ?></th>
+                <th class="text-nowrap"><?= lang('Basic.global.Action') ?></th>
+            </tr>
+            <tr>
+                <th><input type="text" class="form-control factura-filter" name="numero"></th>
+                <th>
+                    <input id="fechaFactura" type="text" class="form-control factura-filter" name="fecha_factura_at">
+                </th>
+                <th></th>
+                <th>
+                    <?php if(!auth()->user()->inGroup('cliente-admin') && !auth()->user()->inGroup('cliente-editor')): ?>
+                        <select class="form-control factura-filter-select" name="estado">
+                            <option value=""><?= lang('Facturas.todos') ?></option>
+                            <option value="borrador"><?= lang('Facturas.borrador') ?></option>
+                            <option value="validada"><?= lang('Facturas.validada') ?></option>
+                        </select>
+                    <?php endif; ?>
+                </th>
+                <th>
+                    <select class="form-control factura-filter-select" name="estado_pago">
+                        <option value=""><?= lang('Facturas.todos') ?></option>
+                        <option value="pendiente"><?= lang('Facturas.pendiente') ?></option>
+                        <option value="pagada"><?= lang('Facturas.pagada') ?></option>
+                        <option value="insolvente"><?= lang('Facturas.insolvente') ?></option>
+                    </select>
+                </th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+        </tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/ci4/app/Views/themes/vuexy/form/clientes/cliente/_pedidosClienteItems.php b/ci4/app/Views/themes/vuexy/form/clientes/cliente/_pedidosClienteItems.php
new file mode 100644
index 00000000..e94413f6
--- /dev/null
+++ b/ci4/app/Views/themes/vuexy/form/clientes/cliente/_pedidosClienteItems.php
@@ -0,0 +1,40 @@
+<div class="row">
+    <div class="col-2">
+
+        <div class="form-group">
+            <label for="acumuladoFacturacion"><?= lang('Pedidos.pedidosImpresion') ?></label>
+            <input readonly type="text" class="form-control autonumeric-currency-totales" id="pedidosImpresion"
+                name="pedidos_impresion">
+        </div>
+        <div class="form-group">
+            <label for="totalPendientePago"><?= lang('Pedidos.pedidosMaquetacion') ?></label>
+            <input readonly type="text" class="form-control autonumeric-currency-totales" id="pedidosMaquetacion"
+                name="pedidos_maquetacion">
+        </div>
+        <div class="form-group">
+            <label for="totalPendientePago" class="fw-bold"><?= lang('Pedidos.pedidosTotal') ?></label>
+            <input readonly type="text" class="form-control fw-bold autonumeric-currency-totales" id="totalPedidos"
+                name="total_pedidos">
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <table id="tableOfPedidosCliente" class="table table-striped table-hover" style="width: 100%;">
+        <thead>
+            <tr>
+                <th><?= lang('Pedidos.id') ?></th>
+                <th><?= lang('Pedidos.fecha') ?></th>
+                <th><?= lang('Pedidos.fecha_entrega') ?></th>
+                <th class='noFilter'><?= lang('Pedidos.num_paginas') ?></th>
+                <th class='totalizador'><?= lang('Pedidos.tiradas') ?></th>
+                <th class='totalizador'><?= lang('Pedidos.total_presupuesto') ?></th>
+                <th><?= lang('Pedidos.estado') ?></th>
+                <th class="noFilter text-nowrap"><?= lang('Basic.global.Action') ?></th>
+            </tr>
+        </thead>
+        <tbody>
+
+        </tbody>
+    </table>
+</div>
\ No newline at end of file
diff --git a/httpdocs/assets/js/safekat/pages/cliente/clienteFacturacion.js b/httpdocs/assets/js/safekat/pages/cliente/clienteFacturacion.js
new file mode 100644
index 00000000..3b0d05ab
--- /dev/null
+++ b/httpdocs/assets/js/safekat/pages/cliente/clienteFacturacion.js
@@ -0,0 +1,156 @@
+import Ajax from "../../components/ajax.js";
+
+class ClienteFacturacion {
+    constructor() {
+
+        this.bsRangePickerRange = $('#' + 'fechaFactura');
+        this.clienteId = $('#clienteForm').attr('data-cliente');
+    }
+
+    init() {
+
+        const self = this;
+
+        // select button with data-bs-target="#facturacion"
+        $(document).on('click', '.facturacion-btn', function (e) {
+            e.preventDefault();
+            $('#tableOfFacturasCliente').DataTable().columns.adjust().draw();
+            $(this).tab('show');
+        });
+
+        $(document).on('click', '.btn-edit', function (e) {
+            window.location.href = '/facturas/edit/' + $(this).attr('data-id');
+        });
+
+        const lastColNr = $('#tableOfFacturasCliente').find("tr:first th").length - 1;
+
+        let datatableColumns = [];
+
+        datatableColumns = [
+            { 'data': 'numero' },
+            { 'data': 'fecha_factura_at', searchable: false },
+            { 'data': 'total', render: (d) => `<span class="autonumeric">${d}</span>` },
+            { 'data': 'estado' },
+            { 'data': 'estado_pago' },
+            { 'data': 'action' }
+        ];
+
+        $('#tableOfFacturasCliente').DataTable({
+            processing: true,
+            serverSide: true,
+            autoWidth: true,
+            responsive: true,
+            scrollX: true,
+            orderCellsTop: true,
+            lengthMenu: [5, 10, 25, 50, 75, 100, 250, 500, 1000, 2500],
+            pageLength: 250,
+            "dom": 'lBrtip',
+            order: [[0, 'asc']],
+            language: {
+                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
+            },
+            ajax: {
+                url: '/facturas/datatable',
+                type: 'GET',
+                data: function (d) {
+                    d.cliente_id = self.clienteId;
+                    d.fecha_factura = self.getDate();
+                }
+            },
+            columnDefs: [
+                {
+                    orderable: false,
+                    searchable: false,
+                    targets: [lastColNr]
+                },
+            ],
+            columns: datatableColumns,
+        });
+
+        $(document).on("keyup", ".factura-filter", (event) => {
+            //console.log(this.datatablePlanningRot.column($(event.currentTarget).attr("name")))
+            let columnName = $(event.currentTarget).attr("name");
+            let columnIndex = $('#tableOfFacturasCliente').DataTable().columns().eq(0).filter(function (index) {
+                return $('#tableOfFacturasCliente').DataTable().column(index).dataSrc() === columnName;
+            })[0];
+            $('#tableOfFacturasCliente').DataTable().column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
+
+        $(document).on("change", ".factura-filter-select", (event) => {
+            let columnName = $(event.currentTarget).attr("name");
+            let columnIndex = $('#tableOfFacturasCliente').DataTable().columns().eq(0).filter(function (index) {
+                return $('#tableOfFacturasCliente').DataTable().column(index).dataSrc() === columnName;
+            })[0];
+            $('#tableOfFacturasCliente').DataTable().column(columnIndex).search($(event.currentTarget).val()).draw();
+        });
+
+
+        this.bsRangePickerRange.daterangepicker({
+            ranges: {
+                [window.language.datePicker.hoy]: [moment(), moment()],
+                [window.language.datePicker.ayer]: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+                [window.language.datePicker.ultimos7]: [moment().subtract(6, 'days'), moment()],
+                [window.language.datePicker.ultimos30]: [moment().subtract(29, 'days'), moment()],
+                [window.language.datePicker.esteMes]: [moment().startOf('month'), moment().endOf('month')],
+                [window.language.datePicker.ultimoMes]: [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+            },
+            opens: 'right',
+            language: window.language.datePickerLocale,
+            "locale": {
+                "customRangeLabel": window.language.datePicker.rangoPersonalizado,
+                "format": "YYYY-MM-DD",
+                "separator": " ",
+                "applyLabel": window.language.datePicker.aplicar,
+                "cancelLabel": window.language.datePicker.limpiar,
+
+            },
+            "alwaysShowCalendars": true,
+            autoUpdateInput: false,
+
+        });
+
+        this.bsRangePickerRange.on('apply.daterangepicker', function(ev, picker) {
+
+            $(this).val(picker.startDate.format('DD/MM/YYYY') + ' ' + picker.endDate.format('DD/MM/YYYY'));
+            let table = $('#tableOfFacturasCliente').DataTable();
+            table.column(2).draw();
+        });
+    
+        this.bsRangePickerRange.on('cancel.daterangepicker', function(ev, picker) {
+            $(this).val('');
+            $('#tableOfFacturasCliente').DataTable().column(2).search('').draw();
+        });
+
+        new Ajax('/facturas/getdatoscliente/'+ this.clienteId, 
+            {}, 
+            {},
+            function (response) {
+                AutoNumeric.getAutoNumericElement('#acumuladoFacturacion').set(response.total_facturacion);
+                AutoNumeric.getAutoNumericElement('#totalPendientePago').set(response.total_pendiente);
+            },
+            function (error) {
+                console.log("Error data:", error);
+            }).get();
+    }
+
+    getDate() {
+
+        let picker = this.bsRangePickerRange.data('daterangepicker');
+
+        if (!picker || !picker.startDate || !picker.endDate || $('#fechaFactura').val() == '') {
+            return '';
+        }
+
+        let startDate = picker.startDate.format('YYYY-MM-DD');
+        let endDate = picker.endDate.format('YYYY-MM-DD');
+
+        return startDate + "|" + endDate;
+
+    }
+
+    
+
+
+}
+
+export default ClienteFacturacion;
\ No newline at end of file
diff --git a/httpdocs/assets/js/safekat/pages/cliente/clientePedidos.js b/httpdocs/assets/js/safekat/pages/cliente/clientePedidos.js
new file mode 100644
index 00000000..7b52b834
--- /dev/null
+++ b/httpdocs/assets/js/safekat/pages/cliente/clientePedidos.js
@@ -0,0 +1,159 @@
+import Ajax from "../../components/ajax.js";
+
+class ClientePedidos {
+    constructor() {
+
+        this.clienteId = $('#clienteForm').attr('data-cliente');
+    }
+
+    init() {
+
+        const self = this;
+
+        $(document).on('click', '.pedidos-btn', function (e) {
+            e.preventDefault();
+            $('#tableOfPedidosCliente').DataTable().columns.adjust().draw();
+            $(this).tab('show');
+        });
+
+        $(document).on('click', '.btn-edit', function (e) {
+            window.location.href = '/pedidos/edit/' + $(this).attr('data-id');
+        });
+
+        const lastColNr = $('#tableOfPedidosCliente').find("tr:first th").length - 1;
+
+        let datatableColumns = [];
+
+        datatableColumns = [
+            { 'data': 'id' },
+            { 'data': 'fecha' },
+            { 'data': 'fecha_entrega' },
+            { 'data': 'paginas', searchable: false },
+            { 'data': 'total_tirada', searchable: false },
+            { 'data': 'total_precio', searchable: false },
+            { 'data': 'estado' },
+            { 'data': 'action' }
+        ];
+
+        $('#tableOfPedidosCliente').DataTable({
+            processing: true,
+            serverSide: true,
+            autoWidth: true,
+            responsive: true,
+            scrollX: true,
+            orderCellsTop: true,
+            lengthMenu: [5, 10, 25, 50, 75, 100, 250, 500, 1000, 2500],
+            pageLength: 250,
+            "dom": 'lBrtip',
+            order: [[0, 'desc']],
+            language: {
+                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
+            },
+            ajax: {
+                url: '/pedidos/pedidosCliente',
+                type: 'GET',
+                data: function (d) {
+                    d.cliente_id = self.clienteId;
+                    d.fecha = "";//self.getDate();
+                    d.fecha_entrega = "";//self.getDate();
+                }
+            },
+            columnDefs: [
+                {
+                    orderable: false,
+                    searchable: false,
+                    targets: [lastColNr]
+                },
+            ],
+            columns: datatableColumns,
+        });
+    }
+/*
+        $(document).on("keyup", ".factura-filter", (event) => {
+            //console.log(this.datatablePlanningRot.column($(event.currentTarget).attr("name")))
+            let columnName = $(event.currentTarget).attr("name");
+            let columnIndex = $('#tableOfFacturasCliente').DataTable().columns().eq(0).filter(function (index) {
+                return $('#tableOfFacturasCliente').DataTable().column(index).dataSrc() === columnName;
+            })[0];
+            $('#tableOfFacturasCliente').DataTable().column(columnIndex).search($(event.currentTarget).val()).draw()
+        })
+
+        $(document).on("change", ".factura-filter-select", (event) => {
+            let columnName = $(event.currentTarget).attr("name");
+            let columnIndex = $('#tableOfFacturasCliente').DataTable().columns().eq(0).filter(function (index) {
+                return $('#tableOfFacturasCliente').DataTable().column(index).dataSrc() === columnName;
+            })[0];
+            $('#tableOfFacturasCliente').DataTable().column(columnIndex).search($(event.currentTarget).val()).draw();
+        });
+
+
+        this.bsRangePickerRange.daterangepicker({
+            ranges: {
+                [window.language.datePicker.hoy]: [moment(), moment()],
+                [window.language.datePicker.ayer]: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
+                [window.language.datePicker.ultimos7]: [moment().subtract(6, 'days'), moment()],
+                [window.language.datePicker.ultimos30]: [moment().subtract(29, 'days'), moment()],
+                [window.language.datePicker.esteMes]: [moment().startOf('month'), moment().endOf('month')],
+                [window.language.datePicker.ultimoMes]: [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
+            },
+            opens: 'right',
+            language: window.language.datePickerLocale,
+            "locale": {
+                "customRangeLabel": window.language.datePicker.rangoPersonalizado,
+                "format": "YYYY-MM-DD",
+                "separator": " ",
+                "applyLabel": window.language.datePicker.aplicar,
+                "cancelLabel": window.language.datePicker.limpiar,
+
+            },
+            "alwaysShowCalendars": true,
+            autoUpdateInput: false,
+
+        });
+
+        this.bsRangePickerRange.on('apply.daterangepicker', function(ev, picker) {
+
+            $(this).val(picker.startDate.format('DD/MM/YYYY') + ' ' + picker.endDate.format('DD/MM/YYYY'));
+            let table = $('#tableOfFacturasCliente').DataTable();
+            table.column(2).draw();
+        });
+    
+        this.bsRangePickerRange.on('cancel.daterangepicker', function(ev, picker) {
+            $(this).val('');
+            $('#tableOfFacturasCliente').DataTable().column(2).search('').draw();
+        });
+
+        new Ajax('/facturas/getdatoscliente/'+ this.clienteId, 
+            {}, 
+            {},
+            function (response) {
+                AutoNumeric.getAutoNumericElement('#acumuladoFacturacion').set(response.total_facturacion);
+                AutoNumeric.getAutoNumericElement('#totalPendientePago').set(response.total_pendiente);
+            },
+            function (error) {
+                console.log("Error data:", error);
+            }).get();
+            
+    }
+
+    getDate() {
+
+        let picker = this.bsRangePickerRange.data('daterangepicker');
+
+        if (!picker || !picker.startDate || !picker.endDate || $('#fechaFactura').val() == '') {
+            return '';
+        }
+
+        let startDate = picker.startDate.format('YYYY-MM-DD');
+        let endDate = picker.endDate.format('YYYY-MM-DD');
+
+        return startDate + "|" + endDate;
+
+    }
+    */
+    
+
+
+}
+
+export default ClientePedidos;
\ No newline at end of file