1327 lines
48 KiB
Plaintext
1327 lines
48 KiB
Plaintext
<%@ Page Title="" Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="Dashboard.aspx.vb" Inherits="General_Dashboard" %>
|
||
|
||
<asp:Content ID="Content1" ContentPlaceHolderID="H" runat="Server">
|
||
<li>
|
||
<asp:LinkButton ID="LnkExportarPDF" runat="server"> <i class="fa fa-file-pdf-o" style="font-weight:bold;"></i> Exportar PDF</asp:LinkButton>
|
||
</li>
|
||
</asp:Content>
|
||
<asp:Content ID="Content2" ContentPlaceHolderID="Css" runat="Server">
|
||
<style type="text/css">
|
||
@import url("https://code.highcharts.com/css/highcharts.css");
|
||
@import url("https://code.highcharts.com/dashboards/css/datagrid.css");
|
||
@import url("https://code.highcharts.com/dashboards/css/dashboards.css");
|
||
|
||
.table-bordered thead th {
|
||
background-color: #f8f9fa;
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
}
|
||
|
||
.table-striped tbody tr:nth-of-type(odd) {
|
||
background-color: rgba(0,0,0,.05);
|
||
}
|
||
|
||
.table td, .table th {
|
||
padding: 2px;
|
||
}
|
||
|
||
.dashboard-stat {
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
border-radius: 4px;
|
||
color: white;
|
||
}
|
||
|
||
.dashboard-stat .visual > i {
|
||
font-size: 35px;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.dashboard-stat .details {
|
||
padding-right: 15px;
|
||
}
|
||
|
||
.blue {
|
||
background: #3598dc;
|
||
}
|
||
|
||
.green {
|
||
background: #32c5d2;
|
||
}
|
||
|
||
.purple {
|
||
background: #8e44ad;
|
||
}
|
||
|
||
.red {
|
||
background: #e7505a;
|
||
}
|
||
|
||
.indicador-valor {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.indicador-detalle {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
|
||
.unoaunoold {
|
||
color: #999b9b;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.Dia {
|
||
background-image: url(/Imagenes/FondoCal.jpg);
|
||
background-repeat: repeat-x;
|
||
height: 17px;
|
||
font-size: 10px;
|
||
text-align: right;
|
||
}
|
||
|
||
.Hora {
|
||
background-color: #E3EFFF;
|
||
height: 30px;
|
||
font-size: 10px;
|
||
border-right: solid 1px #5D8CC9;
|
||
border-bottom: solid 1px #5D8CC9;
|
||
}
|
||
|
||
.Mes {
|
||
background-image: url(/Imagenes/Caption.jpg);
|
||
height: 27px;
|
||
}
|
||
|
||
.Link {
|
||
color: #0000b9;
|
||
}
|
||
|
||
.calendariopanel {
|
||
z-index: 999;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0px;
|
||
left: 0px;
|
||
border: 0px;
|
||
background-color: transparent;
|
||
position: absolute;
|
||
}
|
||
|
||
.calendarioback {
|
||
background-color: #000;
|
||
z-index: -90;
|
||
top: 0px;
|
||
opacity: 0.3;
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.calendariobody {
|
||
width: 520px;
|
||
display: table;
|
||
background-color: #fff;
|
||
margin-top: 7%;
|
||
margin-left: 28%;
|
||
}
|
||
|
||
.calendariobody label {
|
||
font-size: 12px;
|
||
}
|
||
|
||
.tareasinicio tr td:nth-child(1) {
|
||
}
|
||
|
||
.portlet.light > .portlet-title > .caption > .caption-subject {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.fix > div {
|
||
height: inherit !important;
|
||
width: inherit !important;
|
||
}
|
||
|
||
|
||
.fix > div > .ajax__html_editor_extender_texteditor {
|
||
height: 150px !important;
|
||
}
|
||
|
||
/*#overlay a:hover {
|
||
position: fixed;
|
||
display: none;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0,0,0,0.5);
|
||
z-index: 2;
|
||
cursor: pointer;
|
||
}*/
|
||
|
||
|
||
#moopio a {
|
||
display: block;
|
||
}
|
||
|
||
#moopio a:hover {
|
||
background-color: rgba(0,0,0,0.5);
|
||
transform: scale(1.2);
|
||
cursor: default;
|
||
}
|
||
|
||
|
||
.MultiLineTextBox {
|
||
resize: none;
|
||
}
|
||
|
||
|
||
.select2-container--open {
|
||
z-index: 1000 !important;
|
||
}
|
||
|
||
|
||
|
||
|
||
#divsmsdash {
|
||
/* Estilo general compacto */
|
||
--hcg-font-size: 8px !important;
|
||
--hcg-padding: 4px;
|
||
--hcg-border-radius: 6px;
|
||
}
|
||
|
||
.dashboard-container {
|
||
font-size: 16px; /* Tamaño base */
|
||
}
|
||
|
||
.highcharts-data-table table {
|
||
/* Estilo general compacto */
|
||
--hcg-font-size: 8px !important;
|
||
--hcg-padding: 4px;
|
||
--hcg-border-radius: 6px;
|
||
}
|
||
|
||
#divsmsdash .hcg-theme-default, .highcharts-datagrid-theme-default {
|
||
--hcg-font-size: 10px;
|
||
--hcg-padding: 5px;
|
||
}
|
||
|
||
.highcharts-figure,
|
||
.highcharts-data-table table {
|
||
min-width: 310px;
|
||
max-width: 800px;
|
||
margin: 1em auto;
|
||
}
|
||
|
||
#container {
|
||
height: 400px;
|
||
}
|
||
|
||
.highcharts-data-table table {
|
||
font-family: Verdana, sans-serif;
|
||
border-collapse: collapse;
|
||
border: 1px solid #ebebeb;
|
||
margin: 10px auto;
|
||
text-align: center;
|
||
width: 100%;
|
||
max-width: 500px;
|
||
}
|
||
|
||
.highcharts-data-table caption {
|
||
padding: 1em 0;
|
||
font-size: 1.2em;
|
||
color: #555;
|
||
}
|
||
|
||
.highcharts-data-table th {
|
||
font-weight: 600;
|
||
padding: 0.5em;
|
||
}
|
||
|
||
.highcharts-data-table td,
|
||
.highcharts-data-table th,
|
||
.highcharts-data-table caption {
|
||
padding: 0.5em;
|
||
}
|
||
|
||
.highcharts-data-table thead tr,
|
||
.highcharts-data-table tr:nth-child(even) {
|
||
background: #f8f8f8;
|
||
}
|
||
|
||
.highcharts-data-table tr:hover {
|
||
background: #f1f7ff;
|
||
}
|
||
|
||
.highcharts-description {
|
||
margin: 0.3rem 10px;
|
||
}
|
||
|
||
h1#title {
|
||
padding-top: 10px;
|
||
margin: 0;
|
||
background-color: #3d3d3d;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
|
||
#kpi-vitamin-a .highcharts-dashboards-component-title::before,
|
||
#kpi-iron .highcharts-dashboards-component-title::before {
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 28px;
|
||
display: inline-block;
|
||
padding: 0;
|
||
margin-right: 4px;
|
||
background-color: var(--highcharts-color-0);
|
||
content: " ";
|
||
}
|
||
|
||
#kpi-iron .highcharts-dashboards-component-title::before {
|
||
background-color: var(--highcharts-color-2);
|
||
}
|
||
|
||
#kpi-vitamin-a .highcharts-dashboards-component-kpi-subtitle,
|
||
#kpi-iron .highcharts-dashboards-component-kpi-subtitle {
|
||
margin-top: 10px;
|
||
font-size: 1.2em;
|
||
color: var(--highcharts-neutral-color-60);
|
||
}
|
||
|
||
#kpi-vitamin-a .highcharts-dashboards-component-kpi-value,
|
||
#kpi-iron .highcharts-dashboards-component-kpi-value {
|
||
font-size: 4em;
|
||
line-height: 2.4rem;
|
||
margin-top: 10px;
|
||
color: var(--highcharts-color-0);
|
||
}
|
||
|
||
#kpi-iron .highcharts-dashboards-component-kpi-value {
|
||
color: var(--highcharts-color-2);
|
||
}
|
||
|
||
#dashboard-col-1 .highcharts-color-0 {
|
||
fill: var(--highcharts-color-2);
|
||
stroke: var(--highcharts-color-2);
|
||
}
|
||
|
||
#kpi-vitamin-a .highcharts-dashboards-component-kpi-value::after,
|
||
#kpi-iron .highcharts-dashboards-component-kpi-value::after {
|
||
content: "";
|
||
display: block;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.highcharts-plot-line {
|
||
stroke-dasharray: 2px;
|
||
stroke: var(--highcharts-color-3);
|
||
}
|
||
|
||
.highcharts-plot-line-label {
|
||
fill: var(--highcharts-color-3);
|
||
}
|
||
|
||
.highcharts-description {
|
||
padding: 0 20px;
|
||
}
|
||
|
||
#kpi-vitamin-a,
|
||
#kpi-iron {
|
||
flex: 1 1 100%;
|
||
height: 205px;
|
||
}
|
||
|
||
/* LARGE */
|
||
@media (max-width: 1200px) {
|
||
#dashboard-col-0,
|
||
#dashboard-col-1 {
|
||
flex: 1 1 35%;
|
||
}
|
||
|
||
#kpi-wrapper {
|
||
flex: 1 1 30%;
|
||
}
|
||
|
||
#kpi-vitamin-a,
|
||
#kpi-iron {
|
||
flex: 1 1 100%;
|
||
}
|
||
}
|
||
|
||
/* MEDIUM */
|
||
@media (max-width: 992px) {
|
||
#dashboard-col-0,
|
||
#dashboard-col-1 {
|
||
flex: 1 1 50%;
|
||
}
|
||
|
||
#kpi-wrapper {
|
||
flex: 1 1 100%;
|
||
}
|
||
|
||
#kpi-vitamin-a,
|
||
#kpi-iron {
|
||
flex: 1 1 50%;
|
||
}
|
||
}
|
||
|
||
/* SMALL */
|
||
@media (max-width: 576px) {
|
||
#dashboard-col-0,
|
||
#dashboard-col-1 {
|
||
flex: 1 1 100%;
|
||
}
|
||
|
||
#kpi-wrapper {
|
||
flex: 1 1 100%;
|
||
}
|
||
|
||
#kpi-vitamin-a,
|
||
#kpi-iron {
|
||
flex: 1 1 50%;
|
||
}
|
||
}
|
||
|
||
.highcharts-figure,
|
||
.highcharts-data-table table {
|
||
min-width: 310px;
|
||
max-width: 800px;
|
||
margin: 1em auto;
|
||
}
|
||
|
||
#container {
|
||
height: 400px;
|
||
}
|
||
|
||
.highcharts-data-table table {
|
||
font-family: Verdana, sans-serif;
|
||
border-collapse: collapse;
|
||
border: 1px solid #ebebeb;
|
||
margin: 10px auto;
|
||
text-align: center;
|
||
width: 100%;
|
||
max-width: 500px;
|
||
}
|
||
|
||
.highcharts-data-table caption {
|
||
padding: 1em 0;
|
||
font-size: 1.2em;
|
||
color: #555;
|
||
}
|
||
|
||
.highcharts-data-table th {
|
||
font-weight: 600;
|
||
padding: 0.5em;
|
||
}
|
||
|
||
.highcharts-data-table td,
|
||
.highcharts-data-table th,
|
||
.highcharts-data-table caption {
|
||
padding: 0.5em;
|
||
}
|
||
|
||
.highcharts-data-table thead tr,
|
||
.highcharts-data-table tr:nth-child(even) {
|
||
background: #f8f8f8;
|
||
}
|
||
|
||
.highcharts-data-table tr:hover {
|
||
background: #f1f7ff;
|
||
}
|
||
|
||
.highcharts-description {
|
||
margin: 0.3rem 10px;
|
||
}
|
||
|
||
h1#title {
|
||
padding-top: 10px;
|
||
margin: 0;
|
||
background-color: #3d3d3d;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
|
||
#kpi-vitamin-a .highcharts-dashboards-component-title::before,
|
||
#kpi-iron .highcharts-dashboards-component-title::before {
|
||
width: 14px;
|
||
height: 14px;
|
||
border-radius: 28px;
|
||
display: inline-block;
|
||
padding: 0;
|
||
margin-right: 4px;
|
||
background-color: var(--highcharts-color-0);
|
||
content: " ";
|
||
}
|
||
|
||
#kpi-iron .highcharts-dashboards-component-title::before {
|
||
background-color: var(--highcharts-color-2);
|
||
}
|
||
|
||
#kpi-vitamin-a .highcharts-dashboards-component-kpi-subtitle,
|
||
#kpi-iron .highcharts-dashboards-component-kpi-subtitle {
|
||
margin-top: 10px;
|
||
font-size: 1.2em;
|
||
color: var(--highcharts-neutral-color-60);
|
||
}
|
||
|
||
#kpi-vitamin-a .highcharts-dashboards-component-kpi-value,
|
||
#kpi-iron .highcharts-dashboards-component-kpi-value {
|
||
font-size: 4em;
|
||
line-height: 2.4rem;
|
||
margin-top: 10px;
|
||
color: var(--highcharts-color-0);
|
||
}
|
||
|
||
#kpi-iron .highcharts-dashboards-component-kpi-value {
|
||
color: var(--highcharts-color-2);
|
||
}
|
||
|
||
#dashboard-col-1 .highcharts-color-0 {
|
||
fill: var(--highcharts-color-2);
|
||
stroke: var(--highcharts-color-2);
|
||
}
|
||
|
||
#kpi-vitamin-a .highcharts-dashboards-component-kpi-value::after,
|
||
#kpi-iron .highcharts-dashboards-component-kpi-value::after {
|
||
content: "";
|
||
display: block;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.highcharts-plot-line {
|
||
stroke-dasharray: 2px;
|
||
stroke: var(--highcharts-color-3);
|
||
}
|
||
|
||
.highcharts-plot-line-label {
|
||
fill: var(--highcharts-color-3);
|
||
}
|
||
|
||
.highcharts-description {
|
||
padding: 0 20px;
|
||
}
|
||
|
||
#kpi-vitamin-a,
|
||
#kpi-iron {
|
||
flex: 1 1 100%;
|
||
height: 205px;
|
||
}
|
||
|
||
/* LARGE */
|
||
@media (max-width: 1200px) {
|
||
#dashboard-col-0,
|
||
#dashboard-col-1 {
|
||
flex: 1 1 35%;
|
||
}
|
||
|
||
#kpi-wrapper {
|
||
flex: 1 1 30%;
|
||
}
|
||
|
||
#kpi-vitamin-a,
|
||
#kpi-iron {
|
||
flex: 1 1 100%;
|
||
}
|
||
}
|
||
|
||
/* MEDIUM */
|
||
@media (max-width: 992px) {
|
||
#dashboard-col-0,
|
||
#dashboard-col-1 {
|
||
flex: 1 1 50%;
|
||
}
|
||
|
||
#kpi-wrapper {
|
||
flex: 1 1 100%;
|
||
}
|
||
|
||
#kpi-vitamin-a,
|
||
#kpi-iron {
|
||
flex: 1 1 50%;
|
||
}
|
||
}
|
||
|
||
/* SMALL */
|
||
@media (max-width: 576px) {
|
||
#dashboard-col-0,
|
||
#dashboard-col-1 {
|
||
flex: 1 1 100%;
|
||
}
|
||
|
||
#kpi-wrapper {
|
||
flex: 1 1 100%;
|
||
}
|
||
|
||
#kpi-vitamin-a,
|
||
#kpi-iron {
|
||
flex: 1 1 50%;
|
||
}
|
||
}
|
||
|
||
.resumen-grid {
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
}
|
||
|
||
|
||
|
||
.sucursal-header {
|
||
vertical-align: middle !important;
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.header-group {
|
||
display: block;
|
||
font-weight: bold;
|
||
padding: 2px;
|
||
}
|
||
|
||
|
||
.sub-columns {
|
||
/* Cambiamos de grid a flex para que cada div se distribuya correctamente */
|
||
display: flex !important;
|
||
justify-content: space-between;
|
||
gap: 1rem; /* espacio entre Venta y Utilidad */
|
||
}
|
||
|
||
.sub-columns > div {
|
||
flex: 1 1 0; /* igual ancho para cada uno, y que puedan encoger */
|
||
min-width: 0; /* PERMITIR que el contenido se encoja y rompa línea si es muy largo */
|
||
}
|
||
|
||
.sub-header {
|
||
padding: 2px;
|
||
}
|
||
|
||
.sub-data {
|
||
padding: 2px;
|
||
text-align: right;
|
||
border-left: 1px solid #dee2e6;
|
||
}
|
||
|
||
.sub-data:first-child {
|
||
border-left: none;
|
||
}
|
||
|
||
.row.gx-4 {
|
||
column-gap: 1.5rem;
|
||
}
|
||
|
||
.row.gy-4 {
|
||
row-gap: 1.5rem;
|
||
}
|
||
|
||
.dashboard-stat {
|
||
padding: 1.5rem;
|
||
border-radius: 4px;
|
||
color: white;
|
||
}
|
||
|
||
/* Estilo base para todos los GridViews */
|
||
.custom-grid {
|
||
-webkit-text-size-adjust: 100%;
|
||
line-height: 1.42857;
|
||
font-family: "Open Sans", sans-serif;
|
||
color: #333;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
border-radius: 0 !important;
|
||
float: left;
|
||
position: relative;
|
||
min-height: 1px;
|
||
padding-left: 15px;
|
||
padding-right: 15px;
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
/* Para que los encabezados capitalicen sólo la primera letra */
|
||
.custom-grid th {
|
||
text-transform: capitalize;
|
||
}
|
||
|
||
.custom-grid th,
|
||
.custom-grid td {
|
||
border: none !important; /* Quita todas las líneas */
|
||
}
|
||
|
||
|
||
|
||
/* Opcional: quita cualquier padding extra en encabezados */
|
||
.custom-grid thead th {
|
||
padding: 2px !important;
|
||
}
|
||
|
||
|
||
.custom-grid,
|
||
.resumen-grid {
|
||
border-collapse: collapse !important;
|
||
border: none !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
|
||
|
||
/* Línea gruesa bajo los títulos */
|
||
.custom-grid thead th,
|
||
.resumen-grid thead th {
|
||
border-bottom: 2px solid #dee2e6 !important;
|
||
}
|
||
|
||
/* Línea fina entre filas de datos */
|
||
.custom-grid tbody tr + tr td,
|
||
.resumen-grid tbody tr + tr td {
|
||
border-top: 1px solid #dee2e6 !important;
|
||
}
|
||
|
||
|
||
.custom-grid th,
|
||
.resumen-grid th {
|
||
text-transform: capitalize !important;
|
||
}
|
||
|
||
/* Evita overflow horizontal */
|
||
.custom-grid {
|
||
table-layout: fixed;
|
||
}
|
||
|
||
/* Envuelve texto largo */
|
||
.custom-grid td,
|
||
.custom-grid th {
|
||
white-space: normal !important;
|
||
word-wrap: break-word !important;
|
||
}
|
||
|
||
/* Habilita scrolling horizontal si aún se desborda */
|
||
.table-responsive {
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.custom-grid,
|
||
.resumen-grid {
|
||
font-size: 8px !important;
|
||
}
|
||
|
||
/* Reduce el padding de celdas encabezado/datos a 4px */
|
||
.custom-grid th,
|
||
.custom-grid td {
|
||
padding: 2px !important;
|
||
}
|
||
|
||
/* Define alto fijo y padding reducido en el contenedor scrollable */
|
||
.portlet-body.table-responsive {
|
||
padding: 2px !important;
|
||
max-height: 170px !important;
|
||
overflow-y: auto; /* si necesitas scroll vertical */
|
||
}
|
||
|
||
.portlet {
|
||
height: 200px !important;
|
||
}
|
||
|
||
.row.gx-4.gy-4 {
|
||
align-items: flex-start; /* Alinea siempre los portlets por arriba */
|
||
}
|
||
/* 1) Padding global reducido a 4px */
|
||
.row,
|
||
.portlet,
|
||
.portlet-title,
|
||
.portlet-body,
|
||
.dashboard-stat,
|
||
.custom-grid,
|
||
.resumen-grid
|
||
.highcharts-container, /* Highcharts interna */
|
||
#divVentasMensuales /* tu contenedor de gráfica */ {
|
||
padding: 2px !important;
|
||
}
|
||
|
||
/* 2) Altura máxima de 250px para todos los contenedores scrollables */
|
||
.portlet-body.table-responsive {
|
||
max-height: 170px !important;
|
||
overflow-y: auto; /* scroll interno si supera 250px */
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* ——— Resumen‑grid idéntico a custom‑grid ——— */
|
||
.resumen-grid,
|
||
.custom-grid {
|
||
border-collapse: collapse;
|
||
width: 100% !important;
|
||
table-layout: fixed;
|
||
font-size: 8px !important;
|
||
}
|
||
|
||
.resumen-grid th,
|
||
.resumen-grid td {
|
||
/* mismo borde inferior */
|
||
border: none !important;
|
||
padding: 2px !important;
|
||
/* mismo wrapping */
|
||
white-space: normal !important;
|
||
word-wrap: break-word !important;
|
||
}
|
||
|
||
/* ——— Wrapper scrollable idéntico ——— */
|
||
.portlet-body.table-responsive {
|
||
/* padding interior reducido */
|
||
padding: 2px !important;
|
||
/* misma altura máxima */
|
||
max-height: 170px !important;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
|
||
|
||
/* ajustar los sub‑contenedores de “Utilidad” */
|
||
#gvResumenSucursales .sub-columns,
|
||
#gvResumenSucursales .sub-columns > div {
|
||
padding: 2px !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
|
||
.custom-grid td,
|
||
.custom-grid th,
|
||
.resumen-grid td,
|
||
.resumen-grid th {
|
||
padding: 2px !important; /* Padding uniforme de 2px */
|
||
vertical-align: middle !important;
|
||
}
|
||
|
||
|
||
.portlet-body.table-responsive {
|
||
height: 170px !important; /* Altura exacta */
|
||
overflow-y: auto !important; /* Scroll vertical si hay overflow */
|
||
padding: 2px !important; /* Padding interno reducido */
|
||
}
|
||
|
||
|
||
#gvResumenSucursales .sub-data {
|
||
padding: 2px !important; /* Padding igual al resto */
|
||
border-left: 1px solid #dee2e6 !important;
|
||
}
|
||
|
||
/* Eliminar padding extra en sub-columnas */
|
||
#gvResumenSucursales .sub-columns > div {
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
/*----------------------------------------
|
||
ANCHO DE COLUMNAS DE IMPORTES (AÑO, MES, ETC)
|
||
-----------------------------------------*/
|
||
.custom-grid td:nth-child(2),
|
||
.custom-grid td:nth-child(3),
|
||
.custom-grid td:nth-child(4),
|
||
.custom-grid td:nth-child(5) {
|
||
width: 150px !important;
|
||
min-width: 150px !important;
|
||
max-width: 150px !important;
|
||
text-align: center !important;
|
||
}
|
||
|
||
/* Asegurar ancho libre para primera columna */
|
||
.custom-grid td:first-child,
|
||
.custom-grid th:first-child {
|
||
width: auto !important;
|
||
min-width: auto !important;
|
||
max-width: none !important;
|
||
}
|
||
|
||
.portlet-title {
|
||
margin-bottom: 0px !important; /* Reducir espacio inferior */
|
||
padding: 2px 0 !important; /* Padding vertical mínimo */
|
||
}
|
||
|
||
.portlet-title .caption-subject {
|
||
font-size: 14px !important; /* Tamaño de fuente compacto */
|
||
}
|
||
|
||
|
||
|
||
/* 1) Restauramos la posición natural de la tabla */
|
||
.portlet.light > .portlet-body.table-responsive {
|
||
padding-top: 0 !important;
|
||
margin-top: -16px !important;
|
||
}
|
||
|
||
/* 2) Dibujamos la línea separadora justo después del título */
|
||
.portlet.light > .portlet-title {
|
||
position: relative; /* para el pseudo-elemento */
|
||
margin-bottom: 0 !important; /* sin espacios extra */
|
||
padding-bottom: 0 !important;
|
||
}
|
||
|
||
.portlet.light > .portlet-title::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 14px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 2px; /* grosor de la línea */
|
||
background-color: #dee2e6; /* mismo color que tus tablas */
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
}
|
||
|
||
.portlet > .portlet-title {
|
||
border-bottom: none !important;
|
||
margin-bottom: 0 !important;
|
||
padding-bottom: 0 !important;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
</style>
|
||
</asp:Content>
|
||
<asp:Content ID="Content3" ContentPlaceHolderID="E" runat="Server">
|
||
</asp:Content>
|
||
<asp:Content ID="Content7" ContentPlaceHolderID="C" runat="Server">
|
||
<asp:UpdatePanel ID="UPDashboard" runat="server" RenderMode="Inline" UpdateMode="Conditional">
|
||
<ContentTemplate>
|
||
<div class="row filter-row">
|
||
<div class="col-md-2"></div>
|
||
<div class="col-md-3">
|
||
<div class="form-group row align-items-center">
|
||
<asp:Label ID="lblDashboardOption" runat="server"
|
||
Text="Opción"
|
||
CssClass="col-form-label col-md-2 mb-0"
|
||
AssociatedControlID="ddlDashboardOption"
|
||
Style="margin-right: 10px; vertical-align: middle;" />
|
||
<div class="col-md-9">
|
||
<asp:DropDownList ID="ddlDashboardOption" runat="server" AutoPostBack="True"
|
||
CssClass="form-control select2me"
|
||
OnSelectedIndexChanged="ddlDashboardOption_SelectedIndexChanged">
|
||
<asp:ListItem Value="1">Ingresos</asp:ListItem>
|
||
<asp:ListItem Value="2">Recuperación</asp:ListItem>
|
||
<asp:ListItem Value="3">Compras</asp:ListItem>
|
||
<asp:ListItem Value="4">Gasto</asp:ListItem>
|
||
<asp:ListItem Value="5">Cuentas por Pagar</asp:ListItem>
|
||
<asp:ListItem Value="6">Inventario</asp:ListItem>
|
||
<asp:ListItem Value="7">Utilidad</asp:ListItem>
|
||
<asp:ListItem Value="8">Impuestos</asp:ListItem>
|
||
<asp:ListItem Value="9">CRM</asp:ListItem>
|
||
<asp:ListItem Value="10">RH</asp:ListItem>
|
||
<asp:ListItem Value="11">AF</asp:ListItem>
|
||
</asp:DropDownList>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<asp:MultiView ID="mvDashboard" runat="server" ActiveViewIndex="0">
|
||
<asp:View ID="viewIngresos" runat="server">
|
||
<div class="row gx-4 gy-4">
|
||
<div class="col-lg-6">
|
||
<div class="row gx-3" id="DivIndicadoresLeft" runat="server"></div>
|
||
|
||
|
||
|
||
<div class="portlet light">
|
||
<div class="portlet-title">
|
||
<div class="caption caption-md">
|
||
<i class="icon-bar-chart font-dark hide"></i>
|
||
<span class="caption-subject font-dark bold">Utilidad</span>
|
||
</div>
|
||
</div>
|
||
<div class="portlet-body table-responsive">
|
||
|
||
<asp:GridView ID="gvResumenSucursales"
|
||
runat="server"
|
||
CssClass="table table-hover table-light custom-grid"
|
||
AutoGenerateColumns="false" Width="100%">
|
||
<Columns>
|
||
|
||
<asp:TemplateField HeaderStyle-HorizontalAlign="Center">
|
||
<HeaderTemplate>
|
||
|
||
<asp:Label runat="server" Text="Sucursal" CssClass="header-group" />
|
||
|
||
<div class="sub-columns">
|
||
<div class="sub-header"> </div>
|
||
<div class="sub-header"> </div>
|
||
</div>
|
||
</HeaderTemplate>
|
||
<ItemStyle Width="150px" Font-Bold="True" />
|
||
<ItemTemplate>
|
||
<%# Eval("Sucursal") %>
|
||
</ItemTemplate>
|
||
</asp:TemplateField>
|
||
|
||
|
||
<asp:TemplateField HeaderText="Año"
|
||
HeaderStyle-HorizontalAlign="Center">
|
||
<HeaderTemplate>
|
||
<asp:Label runat="server"
|
||
Text="Año"
|
||
CssClass="header-group" />
|
||
<div class="sub-columns">
|
||
<div class="sub-header">Venta</div>
|
||
<div class="sub-header">Utilidad</div>
|
||
</div>
|
||
</HeaderTemplate>
|
||
<ItemTemplate>
|
||
<div class="sub-columns">
|
||
<div class="sub-data"><%# String.Format("{0:N2}", Eval("VentaAnual")) %></div>
|
||
<div class="sub-data"><%# String.Format("{0:N2}", Eval("UtilidadAnual")) %></div>
|
||
</div>
|
||
</ItemTemplate>
|
||
</asp:TemplateField>
|
||
|
||
|
||
<asp:TemplateField HeaderText="Mes"
|
||
HeaderStyle-HorizontalAlign="Center">
|
||
<HeaderTemplate>
|
||
<asp:Label runat="server"
|
||
Text="Mes"
|
||
CssClass="header-group" />
|
||
<div class="sub-columns">
|
||
<div class="sub-header">Venta</div>
|
||
<div class="sub-header">Utilidad</div>
|
||
</div>
|
||
</HeaderTemplate>
|
||
<ItemTemplate>
|
||
<div class="sub-columns">
|
||
<div class="sub-data"><%# String.Format("{0:N2}", Eval("VentaMensual")) %></div>
|
||
<div class="sub-data"><%# String.Format("{0:N2}", Eval("UtilidadMensual")) %></div>
|
||
</div>
|
||
</ItemTemplate>
|
||
</asp:TemplateField>
|
||
</Columns>
|
||
</asp:GridView>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="col-lg-6 mb-4">
|
||
|
||
<div class="row gx-3" id="DivIndicadoresRight" runat="server"></div>
|
||
|
||
<div id="divVentasMensuales" class="mt-3" style="width: 100%; height: 300px;"></div>
|
||
|
||
</div>
|
||
|
||
<div class="col-lg-6 mb-4">
|
||
<div class="portlet light">
|
||
<div class="portlet-title">
|
||
<div class="caption caption-md">
|
||
<span class="caption-subject font-dark bold">Ventas por sucursal</span>
|
||
</div>
|
||
</div>
|
||
<div class="portlet-body table-responsive">
|
||
<asp:GridView ID="gvVentasPorSucursal"
|
||
runat="server"
|
||
CssClass="table table-hover table-light custom-grid"
|
||
AutoGenerateColumns="false"
|
||
Width="100%">
|
||
<Columns>
|
||
<asp:TemplateField HeaderText="Sucursal">
|
||
<ItemTemplate><%# Eval("Sucursal") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Año">
|
||
<ItemTemplate><%# Eval("Año", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Mes">
|
||
<ItemTemplate><%# Eval("Mes", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Semana">
|
||
<ItemTemplate><%# Eval("Semana", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Día">
|
||
<ItemTemplate><%# Eval("Día", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
</Columns>
|
||
</asp:GridView>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="col-lg-6 mb-4">
|
||
<div class="portlet light">
|
||
<div class="portlet-title">
|
||
<div class="caption caption-md">
|
||
<span class="caption-subject font-dark bold">Ventas por vendedor</span>
|
||
</div>
|
||
</div>
|
||
<div class="portlet-body table-responsive">
|
||
<asp:GridView ID="gvVentasPorVendedor"
|
||
runat="server"
|
||
CssClass="table table-hover table-light custom-grid"
|
||
AutoGenerateColumns="false"
|
||
Width="100%">
|
||
<Columns>
|
||
<asp:TemplateField HeaderText="Vendedor">
|
||
<ItemTemplate><%# Eval("Vendedor") %></ItemTemplate>
|
||
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Año">
|
||
<ItemTemplate><%# Eval("Año", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Mes">
|
||
<ItemTemplate><%# Eval("Mes", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Semana">
|
||
<ItemTemplate><%# Eval("Semana", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Día">
|
||
<ItemTemplate><%# Eval("Día", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
</Columns>
|
||
</asp:GridView>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="col-lg-6 mb-4">
|
||
<div class="portlet light">
|
||
<div class="portlet-title">
|
||
<div class="caption caption-md">
|
||
<span class="caption-subject font-dark bold">Ventas por clasificación</span>
|
||
</div>
|
||
</div>
|
||
<div class="portlet-body table-responsive">
|
||
<asp:GridView ID="gvVentasPorClasificacion"
|
||
runat="server"
|
||
CssClass="table table-hover table-light custom-grid"
|
||
AutoGenerateColumns="false"
|
||
Width="100%">
|
||
<Columns>
|
||
<asp:TemplateField HeaderText="Clasificación">
|
||
<ItemTemplate><%# Eval("Clasificacion") %></ItemTemplate>
|
||
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Año">
|
||
<ItemTemplate><%# Eval("Año", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Mes">
|
||
<ItemTemplate><%# Eval("Mes", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Semana">
|
||
<ItemTemplate><%# Eval("Semana", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Día">
|
||
<ItemTemplate><%# Eval("Día", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
</Columns>
|
||
</asp:GridView>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="col-lg-6 mb-4">
|
||
<div class="portlet light">
|
||
<div class="portlet-title">
|
||
<div class="caption caption-md">
|
||
<span class="caption-subject font-dark bold">Ventas por marca</span>
|
||
</div>
|
||
</div>
|
||
<div class="portlet-body table-responsive">
|
||
<asp:GridView ID="gvVentasPorMarca"
|
||
runat="server"
|
||
CssClass="table table-hover table-light custom-grid"
|
||
AutoGenerateColumns="false"
|
||
Width="100%">
|
||
<Columns>
|
||
<asp:TemplateField HeaderText="Marca">
|
||
<ItemTemplate><%# Eval("Marca") %></ItemTemplate>
|
||
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Año">
|
||
<ItemTemplate><%# Eval("Año", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Mes">
|
||
<ItemTemplate><%# Eval("Mes", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Semana">
|
||
<ItemTemplate><%# Eval("Semana", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Día">
|
||
<ItemTemplate><%# Eval("Día", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
</Columns>
|
||
</asp:GridView>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6 mb-4">
|
||
<div class="portlet light">
|
||
<div class="portlet-title">
|
||
<div class="caption caption-md">
|
||
<span class="caption-subject font-dark bold">Ventas por PS</span>
|
||
</div>
|
||
</div>
|
||
<div class="portlet-body table-responsive">
|
||
<asp:GridView ID="gvVentasPorPS"
|
||
runat="server"
|
||
CssClass="table table-hover table-light custom-grid"
|
||
AutoGenerateColumns="false"
|
||
Width="100%">
|
||
<Columns>
|
||
<asp:TemplateField HeaderText="PS">
|
||
<ItemTemplate><%# Eval("ProductoServicio") %></ItemTemplate>
|
||
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Año">
|
||
<ItemTemplate><%# Eval("Año", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Mes">
|
||
<ItemTemplate><%# Eval("Mes", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Semana">
|
||
<ItemTemplate><%# Eval("Semana", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Día">
|
||
<ItemTemplate><%# Eval("Día", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
</Columns>
|
||
</asp:GridView>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6 mb-4">
|
||
<div class="portlet light">
|
||
<div class="portlet-title">
|
||
<div class="caption caption-md">
|
||
<span class="caption-subject font-dark bold">Ventas por Cliente</span>
|
||
</div>
|
||
</div>
|
||
<div class="portlet-body table-responsive">
|
||
<asp:GridView ID="gvVentasPorCliente"
|
||
runat="server"
|
||
CssClass="table table-hover table-light custom-grid"
|
||
AutoGenerateColumns="false"
|
||
Width="100%">
|
||
<Columns>
|
||
<asp:TemplateField HeaderText="Cliente">
|
||
<ItemTemplate><%# Eval("NombreCliente") %></ItemTemplate>
|
||
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Año">
|
||
<ItemTemplate><%# Eval("Año", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Mes">
|
||
<ItemTemplate><%# Eval("Mes", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Semana">
|
||
<ItemTemplate><%# Eval("Semana", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Día">
|
||
<ItemTemplate><%# Eval("Día", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
</Columns>
|
||
</asp:GridView>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6 mb-4">
|
||
<div class="portlet light">
|
||
<div class="portlet-title">
|
||
<div class="caption caption-md">
|
||
<span class="caption-subject font-dark bold">Ventas por Proveedor</span>
|
||
</div>
|
||
</div>
|
||
<div class="portlet-body table-responsive">
|
||
<asp:GridView ID="gvVentasPorProveedor"
|
||
runat="server"
|
||
CssClass="table table-hover table-light custom-grid"
|
||
AutoGenerateColumns="false"
|
||
Width="100%">
|
||
<Columns>
|
||
<asp:TemplateField HeaderText="Proveedor">
|
||
<ItemTemplate><%# Eval("NombreProveedor") %></ItemTemplate>
|
||
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Año">
|
||
<ItemTemplate><%# Eval("Año", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Mes">
|
||
<ItemTemplate><%# Eval("Mes", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Semana">
|
||
<ItemTemplate><%# Eval("Semana", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
<asp:TemplateField HeaderText="Día">
|
||
<ItemTemplate><%# Eval("Día", "{0:N2}") %></ItemTemplate>
|
||
</asp:TemplateField>
|
||
</Columns>
|
||
</asp:GridView>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</asp:View>
|
||
|
||
|
||
<asp:View ID="viewRecuperacion" runat="server">
|
||
</asp:View>
|
||
|
||
|
||
<asp:View ID="viewCompras" runat="server">
|
||
</asp:View>
|
||
|
||
|
||
<asp:View ID="viewGasto" runat="server">
|
||
</asp:View>
|
||
|
||
|
||
<asp:View ID="viewCuentasPagar" runat="server">
|
||
</asp:View>
|
||
|
||
|
||
<asp:View ID="viewInventario" runat="server">
|
||
</asp:View>
|
||
|
||
|
||
<asp:View ID="viewUtilidad" runat="server">
|
||
</asp:View>
|
||
|
||
|
||
<asp:View ID="viewImpuestos" runat="server">
|
||
</asp:View>
|
||
|
||
|
||
<asp:View ID="viewCRM" runat="server">
|
||
</asp:View>
|
||
|
||
|
||
<asp:View ID="viewRH" runat="server">
|
||
<!-- Placeholder para RH -->
|
||
</asp:View>
|
||
|
||
|
||
<asp:View ID="viewAF" runat="server">
|
||
</asp:View>
|
||
</asp:MultiView>
|
||
</ContentTemplate>
|
||
</asp:UpdatePanel>
|
||
</asp:Content>
|
||
<asp:Content ID="Content8" ContentPlaceHolderID="JS" runat="Server">
|
||
<script src="/Metronic/assets/global/plugins/jquery.pulsate.min.js"></script>
|
||
<script src="/Scripts/Highcharts/layout.js"></script>
|
||
<script type="text/javascript">
|
||
function pageLoad() {
|
||
$(document).ready(function () {
|
||
// Inicializar tooltips
|
||
$('.tooltips').tooltip();
|
||
});
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
|
||
</asp:Content>
|
||
|