feat: example
parent
9ab8b32ad6
commit
121a3e1cd4
|
|
@ -0,0 +1,109 @@
|
||||||
|
package br.com.agapesistemas.agtemplate.agtemplate.view;
|
||||||
|
|
||||||
|
import jakarta.annotation.PostConstruct;
|
||||||
|
import jakarta.faces.view.ViewScoped;
|
||||||
|
import jakarta.inject.Named;
|
||||||
|
import java.io.Serializable;
|
||||||
|
import org.primefaces.model.chart.Axis;
|
||||||
|
import org.primefaces.model.chart.AxisType;
|
||||||
|
import org.primefaces.model.chart.BarChartModel;
|
||||||
|
import org.primefaces.model.chart.ChartSeries;
|
||||||
|
|
||||||
|
@ViewScoped
|
||||||
|
@Named("agtemplateDashboardBean")
|
||||||
|
public class DashboardBean implements Serializable {
|
||||||
|
|
||||||
|
private BarChartModel folhaModel;
|
||||||
|
private BarChartModel previdenciaModel;
|
||||||
|
private String filtro = "exemplo";
|
||||||
|
|
||||||
|
@PostConstruct
|
||||||
|
public void init() {
|
||||||
|
createFolhaModel();
|
||||||
|
createPrevidenciaModel();
|
||||||
|
}
|
||||||
|
|
||||||
|
private void createFolhaModel() {
|
||||||
|
folhaModel = new BarChartModel();
|
||||||
|
|
||||||
|
ChartSeries serie1 = new ChartSeries();
|
||||||
|
serie1.setLabel("Referência 1");
|
||||||
|
serie1.set("Jan", 120);
|
||||||
|
serie1.set("Feb", 200);
|
||||||
|
serie1.set("Mar", 160);
|
||||||
|
serie1.set("Apr", 90);
|
||||||
|
serie1.set("May", 140);
|
||||||
|
serie1.set("Jun", 150);
|
||||||
|
|
||||||
|
ChartSeries serie2 = new ChartSeries();
|
||||||
|
serie2.setLabel("Referência 2");
|
||||||
|
serie2.set("Jan", 60);
|
||||||
|
serie2.set("Feb", 160);
|
||||||
|
serie2.set("Mar", 90);
|
||||||
|
serie2.set("Apr", 140);
|
||||||
|
serie2.set("May", 100);
|
||||||
|
serie2.set("Jun", 120);
|
||||||
|
|
||||||
|
folhaModel.addSeries(serie1);
|
||||||
|
folhaModel.addSeries(serie2);
|
||||||
|
folhaModel.setTitle("Demonstrativo da folha");
|
||||||
|
folhaModel.setLegendPosition("ne");
|
||||||
|
|
||||||
|
Axis xAxis = folhaModel.getAxis(AxisType.X);
|
||||||
|
xAxis.setLabel("Mês");
|
||||||
|
|
||||||
|
Axis yAxis = folhaModel.getAxis(AxisType.Y);
|
||||||
|
yAxis.setLabel("Valor");
|
||||||
|
yAxis.setMin(0);
|
||||||
|
yAxis.setMax(250);
|
||||||
|
}
|
||||||
|
|
||||||
|
private void createPrevidenciaModel() {
|
||||||
|
previdenciaModel = new BarChartModel();
|
||||||
|
|
||||||
|
ChartSeries serie1 = new ChartSeries();
|
||||||
|
serie1.setLabel("Referência 1");
|
||||||
|
serie1.set("Jan", 110);
|
||||||
|
serie1.set("Feb", 210);
|
||||||
|
serie1.set("Mar", 170);
|
||||||
|
serie1.set("Apr", 95);
|
||||||
|
serie1.set("May", 135);
|
||||||
|
|
||||||
|
ChartSeries serie2 = new ChartSeries();
|
||||||
|
serie2.setLabel("Referência 2");
|
||||||
|
serie2.set("Jan", 50);
|
||||||
|
serie2.set("Feb", 140);
|
||||||
|
serie2.set("Mar", 70);
|
||||||
|
serie2.set("Apr", 130);
|
||||||
|
serie2.set("May", 100);
|
||||||
|
|
||||||
|
previdenciaModel.addSeries(serie1);
|
||||||
|
previdenciaModel.addSeries(serie2);
|
||||||
|
previdenciaModel.setTitle("Demonstrativo de previdência");
|
||||||
|
previdenciaModel.setLegendPosition("ne");
|
||||||
|
|
||||||
|
Axis xAxis = previdenciaModel.getAxis(AxisType.X);
|
||||||
|
xAxis.setLabel("Mês");
|
||||||
|
|
||||||
|
Axis yAxis = previdenciaModel.getAxis(AxisType.Y);
|
||||||
|
yAxis.setLabel("Valor");
|
||||||
|
yAxis.setMin(0);
|
||||||
|
yAxis.setMax(250);
|
||||||
|
}
|
||||||
|
|
||||||
|
public BarChartModel getFolhaModel() {
|
||||||
|
return folhaModel;
|
||||||
|
}
|
||||||
|
|
||||||
|
public BarChartModel getPrevidenciaModel() {
|
||||||
|
return previdenciaModel;
|
||||||
|
}
|
||||||
|
|
||||||
|
public String getFiltro() {
|
||||||
|
return filtro;
|
||||||
|
}
|
||||||
|
|
||||||
|
public void setFiltro(String filtro) {
|
||||||
|
this.filtro = filtro;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -7,17 +7,12 @@ import org.primefaces.model.FilterMeta;
|
||||||
import org.primefaces.model.SortMeta;
|
import org.primefaces.model.SortMeta;
|
||||||
import org.primefaces.model.SortOrder;
|
import org.primefaces.model.SortOrder;
|
||||||
import java.util.Collection;
|
import java.util.Collection;
|
||||||
import java.io.IOException;
|
|
||||||
import br.com.agapesistemas.agtemplate.agtemplate.view.base.BaseBean;
|
import br.com.agapesistemas.agtemplate.agtemplate.view.base.BaseBean;
|
||||||
import br.com.agapesistemas.agtemplate.agtemplate.model.to.Tb_template;
|
import br.com.agapesistemas.agtemplate.agtemplate.model.to.Tb_template;
|
||||||
import br.com.agapesistemas.agtemplate.agtemplate.filtro.Tb_templateFiltro;
|
import br.com.agapesistemas.agtemplate.agtemplate.filtro.Tb_templateFiltro;
|
||||||
import br.com.agapesistemas.agtemplate.agtemplate.controller.Tb_templateController;
|
import br.com.agapesistemas.agtemplate.agtemplate.controller.Tb_templateController;
|
||||||
import br.com.agapesistemas.agtemplate.agtemplate.api.service.Tb_templateService;
|
|
||||||
import br.com.agapesistemas.agtemplate.agtemplate.exception.Tb_templateException;
|
|
||||||
import java.util.List;
|
import java.util.List;
|
||||||
import java.util.ArrayList;
|
import java.util.ArrayList;
|
||||||
import java.util.logging.Level;
|
|
||||||
import java.util.logging.Logger;
|
|
||||||
import jakarta.faces.event.ActionEvent;
|
import jakarta.faces.event.ActionEvent;
|
||||||
import jakarta.inject.Named;
|
import jakarta.inject.Named;
|
||||||
import jakarta.faces.view.ViewScoped;
|
import jakarta.faces.view.ViewScoped;
|
||||||
|
|
|
||||||
|
|
@ -53,7 +53,7 @@
|
||||||
<url-pattern>*.xhtml</url-pattern>
|
<url-pattern>*.xhtml</url-pattern>
|
||||||
</servlet-mapping>
|
</servlet-mapping>
|
||||||
<welcome-file-list>
|
<welcome-file-list>
|
||||||
<welcome-file>index.xhtml</welcome-file>
|
<welcome-file>./agtemplate/dashboard.xhtml</welcome-file>
|
||||||
</welcome-file-list>
|
</welcome-file-list>
|
||||||
<mime-mapping>
|
<mime-mapping>
|
||||||
<extension>otf</extension>
|
<extension>otf</extension>
|
||||||
|
|
|
||||||
|
|
@ -1,44 +1,104 @@
|
||||||
<?xml version='1.0' encoding='UTF-8' ?>
|
<?xml version='1.0' encoding='UTF-8' ?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
<ui:composition
|
||||||
xmlns:ui="http://java.sun.com/jsf/facelets"
|
xmlns="http://www.w3.org/1999/xhtml"
|
||||||
xmlns:f="http://java.sun.com/jsf/core"
|
xmlns:ui="http://java.sun.com/jsf/facelets"
|
||||||
xmlns:h="http://java.sun.com/jsf/html"
|
xmlns:f="http://java.sun.com/jsf/core"
|
||||||
xmlns:p="http://primefaces.org/ui"
|
xmlns:h="http://java.sun.com/jsf/html"
|
||||||
xmlns:jsf="http://xmlns.jcp.org/jsf"
|
xmlns:p="http://primefaces.org/ui"
|
||||||
template="../template/template.xhtml" >
|
xmlns:jsf="http://xmlns.jcp.org/jsf"
|
||||||
<ui:define name="HEAD_TITULO_PAGINA">tb_template</ui:define>
|
template="../template/template.xhtml"
|
||||||
<ui:define name="TITULO_PAGINA"><p:menuitem value="tb_template" url="#" /></ui:define>
|
>
|
||||||
<ui:define name="SISTEMA_PAGINA">Agtemplate</ui:define>
|
<ui:define name="HEAD_TITULO_PAGINA">tb_template</ui:define>
|
||||||
<ui:define name="CAMINHO_PAGINA">tb_template</ui:define>
|
<ui:define name="TITULO_PAGINA"
|
||||||
<ui:define name="MENU_BOTOES">
|
><p:menuitem value="tb_template" url="#"
|
||||||
<p:commandButton value="Novo" icon="pi pi-plus" update="@([id$=modalAgtemplateTb_templateCU])" action="#{agtemplateTb_templateBean.clickNovo()}" oncomplete="PF('wvModalAgtemplateTb_templateCU').show();"
|
/></ui:define>
|
||||||
styleClass="ui-button-success" style="margin-right: .5rem" process="@this" >
|
<ui:define name="SISTEMA_PAGINA">agTemplate</ui:define>
|
||||||
<p:resetInput target="modalAgtemplateTb_templateCU"/>
|
<ui:define name="CAMINHO_PAGINA">Dashboard</ui:define>
|
||||||
</p:commandButton>
|
|
||||||
<p:commandButton process="@this" id="deleteAgtemplateTb_templateButton" value="#{agtemplateTb_templateBean.deleteButtonMessage}" icon="pi pi-trash" actionListener="#{agtemplateTb_templateBean.deleteSelectedTb_template}"
|
<ui:define name="HEADER_PAGINA">
|
||||||
styleClass="ui-button-danger" disabled="#{!agtemplateTb_templateBean.hasSelectedTb_template()}" update="@this,panel_formulario,panelAlerta">
|
<div class="headerContainer">
|
||||||
<p:confirm header="Confirmação" message="Remover o(s) tb_template(s) selecionado(s)?" icon="pi pi-exclamation-triangle" />
|
<h1 class="headerTitle">Dashboard</h1>
|
||||||
</p:commandButton>
|
<p>Visualização dos dados parametrizados.</p>
|
||||||
</ui:define>
|
</div>
|
||||||
<ui:define name="MENU_FILTRO"> <h:panelGroup id="optionsPesquisa" layout="block" >
|
</ui:define>
|
||||||
<span class="filter-container ui-input-icon-left">
|
|
||||||
<i class="pi pi-search"></i>
|
<ui:define name="MENU_BOTOES">
|
||||||
<p:inputText onkeypress="if (event.keyCode == 13) {jQuery('#btPesquisa').trigger('click'); return false;}" style="margin-right:10px" id="pesquisa" title="Informar parametros de pesquisa" styleClass="pesquisa" value="#{agtemplateTb_templateBean.pesquisa}" >
|
<p:commandButton
|
||||||
<p:hotkey bind="return" handler="btPesquisa.click();"/>
|
value="Novo"
|
||||||
</p:inputText>
|
icon="pi pi-plus"
|
||||||
</span>
|
update="@([id$=modalAgtemplateTb_templateCU])"
|
||||||
<p:commandButton title="Pesquisar" icon="pi pi-search" id="btPesquisa" update="form_formulario,messages" styleClass="bt_pesquisa m-2" action="#{agtemplateTb_templateBean.clickPesquisar()}" process="optionsPesquisa"/>
|
action="#{agtemplateTb_templateBean.clickNovo()}"
|
||||||
<p:commandButton title="Filtrar" icon="pi pi-filter" styleClass="bt_pesquisa_filtro" process="@this" oncomplete="PF('wvModalAgtemplateTb_templateFiltro').show();" />
|
oncomplete="PF('wvModalAgtemplateTb_templateCU').show();"
|
||||||
</h:panelGroup>
|
styleClass="ui-button-success"
|
||||||
</ui:define>
|
style="margin-right: 0.5rem"
|
||||||
<ui:define name="FORMULARIO">
|
process="@this"
|
||||||
<ui:include src="./forms/crud/Tb_template/Tb_templateConsultLazy.xhtml" />
|
>
|
||||||
</ui:define>
|
<p:resetInput target="modalAgtemplateTb_templateCU" />
|
||||||
<ui:define name="LIVRE">
|
</p:commandButton>
|
||||||
<ui:include src="./forms/modal/Tb_template/Tb_templateR.xhtml" />
|
<p:commandButton
|
||||||
<ui:include src="./forms/modal/Tb_template/Tb_templateD.xhtml" />
|
process="@this"
|
||||||
<ui:include src="./forms/modal/Tb_template/Tb_templateCU.xhtml" />
|
id="deleteAgtemplateTb_templateButton"
|
||||||
<ui:include src="./forms/modal/Tb_template/Tb_templateFiltro.xhtml" />
|
value="#{agtemplateTb_templateBean.deleteButtonMessage}"
|
||||||
</ui:define>
|
icon="pi pi-trash"
|
||||||
|
actionListener="#{agtemplateTb_templateBean.deleteSelectedTb_template}"
|
||||||
|
styleClass="ui-button-danger"
|
||||||
|
disabled="#{!agtemplateTb_templateBean.hasSelectedTb_template()}"
|
||||||
|
update="@this,panel_formulario,panelAlerta"
|
||||||
|
>
|
||||||
|
<p:confirm
|
||||||
|
header="Confirmação"
|
||||||
|
message="Remover o(s) tb_template(s) selecionado(s)?"
|
||||||
|
icon="pi pi-exclamation-triangle"
|
||||||
|
/>
|
||||||
|
</p:commandButton>
|
||||||
|
</ui:define>
|
||||||
|
|
||||||
|
<ui:define name="MENU_FILTRO">
|
||||||
|
<h:panelGroup id="optionsPesquisa" layout="block">
|
||||||
|
<span class="filter-container ui-input-icon-left">
|
||||||
|
<i class="pi pi-search"></i>
|
||||||
|
<p:inputText
|
||||||
|
onkeypress="if (event.keyCode == 13) {
|
||||||
|
jQuery('#btPesquisa').trigger('click');
|
||||||
|
return false;
|
||||||
|
}"
|
||||||
|
style="margin-right: 10px"
|
||||||
|
id="pesquisa"
|
||||||
|
title="Informar parametros de pesquisa"
|
||||||
|
styleClass="pesquisa"
|
||||||
|
value="#{agtemplateTb_templateBean.pesquisa}"
|
||||||
|
>
|
||||||
|
<p:hotkey bind="return" handler="btPesquisa.click();" />
|
||||||
|
</p:inputText>
|
||||||
|
</span>
|
||||||
|
<p:commandButton
|
||||||
|
title="Pesquisar"
|
||||||
|
icon="pi pi-search"
|
||||||
|
id="btPesquisa"
|
||||||
|
update="form_formulario,messages"
|
||||||
|
styleClass="bt_pesquisa m-2"
|
||||||
|
action="#{agtemplateTb_templateBean.clickPesquisar()}"
|
||||||
|
process="optionsPesquisa"
|
||||||
|
/>
|
||||||
|
<p:commandButton
|
||||||
|
title="Filtrar"
|
||||||
|
icon="pi pi-filter"
|
||||||
|
styleClass="bt_pesquisa_filtro"
|
||||||
|
process="@this"
|
||||||
|
oncomplete="PF('wvModalAgtemplateTb_templateFiltro').show();"
|
||||||
|
/>
|
||||||
|
</h:panelGroup>
|
||||||
|
</ui:define>
|
||||||
|
|
||||||
|
<ui:define name="FORMULARIO">
|
||||||
|
<ui:include src="./forms/crud/Tb_template/Tb_templateConsultLazy.xhtml" />
|
||||||
|
</ui:define>
|
||||||
|
|
||||||
|
<ui:define name="LIVRE">
|
||||||
|
<ui:include src="./forms/modal/Tb_template/Tb_templateR.xhtml" />
|
||||||
|
<ui:include src="./forms/modal/Tb_template/Tb_templateD.xhtml" />
|
||||||
|
<ui:include src="./forms/modal/Tb_template/Tb_templateCU.xhtml" />
|
||||||
|
<ui:include src="./forms/modal/Tb_template/Tb_templateFiltro.xhtml" />
|
||||||
|
</ui:define>
|
||||||
</ui:composition>
|
</ui:composition>
|
||||||
|
|
|
||||||
|
|
@ -1,44 +1,180 @@
|
||||||
<?xml version='1.0' encoding='UTF-8' ?>
|
<?xml version='1.0' encoding='UTF-8' ?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
<ui:composition
|
||||||
xmlns:ui="http://java.sun.com/jsf/facelets"
|
xmlns="http://www.w3.org/1999/xhtml"
|
||||||
xmlns:f="http://java.sun.com/jsf/core"
|
xmlns:ui="http://java.sun.com/jsf/facelets"
|
||||||
xmlns:h="http://java.sun.com/jsf/html"
|
xmlns:f="http://java.sun.com/jsf/core"
|
||||||
xmlns:p="http://primefaces.org/ui"
|
xmlns:h="http://java.sun.com/jsf/html"
|
||||||
xmlns:jsf="http://xmlns.jcp.org/jsf"
|
xmlns:p="http://primefaces.org/ui"
|
||||||
template="../template/template.xhtml" >
|
xmlns:jsf="http://xmlns.jcp.org/jsf"
|
||||||
<ui:define name="HEAD_TITULO_PAGINA">tb_template</ui:define>
|
template="../template/template.xhtml"
|
||||||
<ui:define name="TITULO_PAGINA"><p:menuitem value="tb_template" url="#" /></ui:define>
|
>
|
||||||
<ui:define name="SISTEMA_PAGINA">Agtemplate</ui:define>
|
<ui:define name="HEAD_TITULO_PAGINA">tb_template</ui:define>
|
||||||
<ui:define name="CAMINHO_PAGINA">tb_template</ui:define>
|
<ui:define name="TITULO_PAGINA"
|
||||||
<ui:define name="MENU_BOTOES">
|
><p:menuitem value="tb_template" url="#"
|
||||||
<p:commandButton value="Novo" icon="pi pi-plus" update="@([id$=modalAgtemplateTb_templateCU])" action="#{agtemplateTb_templateBean.clickNovo()}" oncomplete="PF('wvModalAgtemplateTb_templateCU').show();"
|
/></ui:define>
|
||||||
styleClass="ui-button-success" style="margin-right: .5rem" process="@this" >
|
<ui:define name="SISTEMA_PAGINA">agTemplate</ui:define>
|
||||||
<p:resetInput target="modalAgtemplateTb_templateCU"/>
|
<ui:define name="CAMINHO_PAGINA">Dashboard</ui:define>
|
||||||
</p:commandButton>
|
|
||||||
<p:commandButton process="@this" id="deleteAgtemplateTb_templateButton" value="#{agtemplateTb_templateBean.deleteButtonMessage}" icon="pi pi-trash" actionListener="#{agtemplateTb_templateBean.deleteSelectedTb_template}"
|
<ui:define name="HEADER_PAGINA">
|
||||||
styleClass="ui-button-danger" disabled="#{!agtemplateTb_templateBean.hasSelectedTb_template()}" update="@this,panel_formulario,panelAlerta">
|
<div class="headerContainer">
|
||||||
<p:confirm header="Confirmação" message="Remover o(s) tb_template(s) selecionado(s)?" icon="pi pi-exclamation-triangle" />
|
<h1 class="headerTitle">Dashboard Folha e Previdência</h1>
|
||||||
</p:commandButton>
|
<p>Visão consolidada dos dados financeiros e previdenciários</p>
|
||||||
</ui:define>
|
</div>
|
||||||
<ui:define name="MENU_FILTRO"> <h:panelGroup id="optionsPesquisa" layout="block" >
|
</ui:define>
|
||||||
<span class="filter-container ui-input-icon-left">
|
|
||||||
<i class="pi pi-search"></i>
|
<ui:define name="FORMULARIO">
|
||||||
<p:inputText onkeypress="if (event.keyCode == 13) {jQuery('#btPesquisa').trigger('click'); return false;}" style="margin-right:10px" id="pesquisa" title="Informar parametros de pesquisa" styleClass="pesquisa" value="#{agtemplateTb_templateBean.pesquisa}" >
|
<div style="display: flex; flex-wrap: wrap; gap: 24px; margin: 24px 0;">
|
||||||
<p:hotkey bind="return" handler="btPesquisa.click();"/>
|
<!-- Card 1: Folha de Pagamento -->
|
||||||
</p:inputText>
|
<div style="flex: 1 1 300px; min-width: 300px; padding: 24px; border-radius: 12px; background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1px solid #e0e0e0;">
|
||||||
</span>
|
<div style="display: flex; align-items: center; margin-bottom: 16px;">
|
||||||
<p:commandButton title="Pesquisar" icon="pi pi-search" id="btPesquisa" update="form_formulario,messages" styleClass="bt_pesquisa m-2" action="#{agtemplateTb_templateBean.clickPesquisar()}" process="optionsPesquisa"/>
|
<div style="background: #2E7D32; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
|
||||||
<p:commandButton title="Filtrar" icon="pi pi-filter" styleClass="bt_pesquisa_filtro" process="@this" oncomplete="PF('wvModalAgtemplateTb_templateFiltro').show();" />
|
<i class="pi pi-money-bill" style="color: white; font-size: 18px;"></i>
|
||||||
</h:panelGroup>
|
</div>
|
||||||
</ui:define>
|
<div>
|
||||||
<ui:define name="FORMULARIO">
|
<h4 style="margin: 0; font-weight: 600; color: #333; font-size: 18px;">Folha de Pagamento</h4>
|
||||||
<ui:include src="./forms/crud/Tb_template/Tb_templateConsultLazy.xhtml" />
|
<p style="color: #666; margin: 4px 0 0; font-size: 13px;">Comparativo entre valores líquidos e brutos</p>
|
||||||
</ui:define>
|
</div>
|
||||||
<ui:define name="LIVRE">
|
</div>
|
||||||
<ui:include src="./forms/modal/Tb_template/Tb_templateR.xhtml" />
|
|
||||||
<ui:include src="./forms/modal/Tb_template/Tb_templateD.xhtml" />
|
<div style="display: flex; gap: 16px; align-items: flex-end; height: 200px; margin-bottom: 24px; justify-content: center;">
|
||||||
<ui:include src="./forms/modal/Tb_template/Tb_templateCU.xhtml" />
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
<ui:include src="./forms/modal/Tb_template/Tb_templateFiltro.xhtml" />
|
<div style="height: 40px; width: 100%; background: #388E3C; border-radius: 6px 6px 0 0;"></div>
|
||||||
</ui:define>
|
<div style="height: 50px; width: 100%; background: #66BB6A; border-radius: 0 0 6px 6px;"></div>
|
||||||
</ui:composition>
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Jan</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="height: 60px; width: 100%; background: #388E3C; border-radius: 6px 6px 0 0;"></div>
|
||||||
|
<div style="height: 90px; width: 100%; background: #66BB6A; border-radius: 0 0 6px 6px;"></div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Fev</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="height: 40px; width: 100%; background: #388E3C; border-radius: 6px 6px 0 0;"></div>
|
||||||
|
<div style="height: 70px; width: 100%; background: #66BB6A; border-radius: 0 0 6px 6px;"></div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Mar</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="height: 35px; width: 100%; background: #388E3C; border-radius: 6px 6px 0 0;"></div>
|
||||||
|
<div style="height: 40px; width: 100%; background: #66BB6A; border-radius: 0 0 6px 6px;"></div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Abr</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="height: 45px; width: 100%; background: #388E3C; border-radius: 6px 6px 0 0;"></div>
|
||||||
|
<div style="height: 60px; width: 100%; background: #66BB6A; border-radius: 0 0 6px 6px;"></div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Mai</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="height: 40px; width: 100%; background: #388E3C; border-radius: 6px 6px 0 0;"></div>
|
||||||
|
<div style="height: 65px; width: 100%; background: #66BB6A; border-radius: 0 0 6px 6px;"></div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Jun</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; gap: 24px; font-size: 13px; color: #444; margin-bottom: 12px; justify-content: center;">
|
||||||
|
<div style="display: flex; align-items: center;"><span style="display:inline-block;width:14px;height:14px;background:#66BB6A;border-radius:3px;margin-right:8px;"></span>Valor Líquido</div>
|
||||||
|
<div style="display: flex; align-items: center;"><span style="display:inline-block;width:14px;height:14px;background:#388E3C;border-radius:3px;margin-right:8px;"></span>Valor Bruto</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card 2: Contribuições Previdenciárias -->
|
||||||
|
<div style="flex: 1 1 300px; min-width: 300px; padding: 24px; border-radius: 12px; background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1px solid #e0e0e0;">
|
||||||
|
<div style="display: flex; align-items: center; margin-bottom: 16px;">
|
||||||
|
<div style="background: #2E7D32; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
|
||||||
|
<i class="pi pi-shield" style="color: white; font-size: 18px;"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 style="margin: 0; font-weight: 600; color: #333; font-size: 18px;">Contribuições Previdenciárias</h4>
|
||||||
|
<p style="color: #666; margin: 4px 0 0; font-size: 13px;">Desembolsos mensais para INSS</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: flex-end; margin-bottom: 16px;">
|
||||||
|
<p:selectOneMenu value="#{agtemplateDashboardBean.filtro}" style="width: 180px;" effect="fade">
|
||||||
|
<f:selectItem itemLabel="Últimos 6 meses" itemValue="6meses" />
|
||||||
|
<f:selectItem itemLabel="Últimos 12 meses" itemValue="12meses" />
|
||||||
|
<f:selectItem itemLabel="Ano atual" itemValue="anoatual" />
|
||||||
|
</p:selectOneMenu>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; gap: 16px; align-items: flex-end; height: 200px; margin-bottom: 16px; justify-content: center;">
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="background: linear-gradient(to top, #4CAF50, #81C784); height: 80px; width: 100%; border-radius: 6px 6px 0 0; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 11px; background: #2E7D32; color: white; padding: 4px 8px; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">R$ 186k</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Jan</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="background: linear-gradient(to top, #4CAF50, #81C784); height: 130px; width: 100%; border-radius: 6px 6px 0 0; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 11px; background: #2E7D32; color: white; padding: 4px 8px; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">R$ 305k</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Fev</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="background: linear-gradient(to top, #4CAF50, #81C784); height: 100px; width: 100%; border-radius: 6px 6px 0 0; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 11px; background: #2E7D32; color: white; padding: 4px 8px; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">R$ 237k</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Mar</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="background: linear-gradient(to top, #4CAF50, #81C784); height: 30px; width: 100%; border-radius: 6px 6px 0 0; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 11px; background: #2E7D32; color: white; padding: 4px 8px; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">R$ 73k</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Abr</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="background: linear-gradient(to top, #4CAF50, #81C784); height: 90px; width: 100%; border-radius: 6px 6px 0 0; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 11px; background: #2E7D32; color: white; padding: 4px 8px; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">R$ 209k</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Mai</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="background: linear-gradient(to top, #4CAF50, #81C784); height: 95px; width: 100%; border-radius: 6px 6px 0 0; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 11px; background: #2E7D32; color: white; padding: 4px 8px; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">R$ 214k</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Jun</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card 3: Despesas por Departamento -->
|
||||||
|
<div style="flex: 1 1 300px; min-width: 300px; padding: 24px; border-radius: 12px; background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1px solid #e0e0e0;">
|
||||||
|
<div style="display: flex; align-items: center; margin-bottom: 16px;">
|
||||||
|
<div style="background: #2E7D32; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
|
||||||
|
<i class="pi pi-sitemap" style="color: white; font-size: 18px;"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 style="margin: 0; font-weight: 600; color: #333; font-size: 18px;">Despesas por Departamento</h4>
|
||||||
|
<p style="color: #666; margin: 4px 0 0; font-size: 13px;">Distribuição dos custos de pessoal</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 16px;">
|
||||||
|
<div style="background: linear-gradient(to right, #43A047, #66BB6A); height: 32px; width: 60%; border-radius: 16px; margin-bottom: 12px; position: relative; min-width: 186px; max-width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; left: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">TI</span>
|
||||||
|
<span style="position: absolute; right: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">R$ 186k</span>
|
||||||
|
</div>
|
||||||
|
<div style="background: linear-gradient(to right, #43A047, #66BB6A); height: 32px; width: 85%; border-radius: 16px; margin-bottom: 12px; position: relative; min-width: 305px; max-width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; left: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">Administrativo</span>
|
||||||
|
<span style="position: absolute; right: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">R$ 305k</span>
|
||||||
|
</div>
|
||||||
|
<div style="background: linear-gradient(to right, #43A047, #66BB6A); height: 32px; width: 70%; border-radius: 16px; margin-bottom: 12px; position: relative; min-width: 237px; max-width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; left: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">Vendas</span>
|
||||||
|
<span style="position: absolute; right: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">R$ 237k</span>
|
||||||
|
</div>
|
||||||
|
<div style="background: linear-gradient(to right, #43A047, #66BB6A); height: 32px; width: 25%; border-radius: 16px; margin-bottom: 12px; position: relative; min-width: 73px; max-width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; left: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">RH</span>
|
||||||
|
<span style="position: absolute; right: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">R$ 73k</span>
|
||||||
|
</div>
|
||||||
|
<div style="background: linear-gradient(to right, #43A047, #66BB6A); height: 32px; width: 65%; border-radius: 16px; margin-bottom: 12px; position: relative; min-width: 209px; max-width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; left: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">Produção</span>
|
||||||
|
<span style="position: absolute; right: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">R$ 209k</span>
|
||||||
|
</div>
|
||||||
|
<div style="background: linear-gradient(to right, #43A047, #66BB6A); height: 32px; width: 67%; border-radius: 16px; position: relative; min-width: 214px; max-width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; left: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">Marketing</span>
|
||||||
|
<span style="position: absolute; right: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">R$ 214k</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ui:define>
|
||||||
|
</ui:composition>
|
||||||
|
|
@ -10,8 +10,7 @@ template="../template/template.xhtml" >
|
||||||
<ui:define name="HEAD_TITULO_PAGINA">HOME</ui:define>
|
<ui:define name="HEAD_TITULO_PAGINA">HOME</ui:define>
|
||||||
<ui:define name="TITULO_PAGINA"><p:menuitem value="agtemplate" url="#" /></ui:define>
|
<ui:define name="TITULO_PAGINA"><p:menuitem value="agtemplate" url="#" /></ui:define>
|
||||||
<ui:define name="CAMINHO_PAGINA">agtemplate</ui:define>
|
<ui:define name="CAMINHO_PAGINA">agtemplate</ui:define>
|
||||||
<ui:define name="MENU_PAGINA">
|
<ui:define name="MENU_PAGINA"></ui:define>
|
||||||
</ui:define>
|
|
||||||
<ui:define name="FORMULARIO"></ui:define>
|
<ui:define name="FORMULARIO"></ui:define>
|
||||||
<ui:define name="LIVRE">
|
<ui:define name="LIVRE">
|
||||||
</ui:define>
|
</ui:define>
|
||||||
|
|
|
||||||
|
|
@ -114,6 +114,17 @@
|
||||||
src: url("#{resource['poseidon-layout:fonts/din-next-black-italic.otf']}")
|
src: url("#{resource['poseidon-layout:fonts/din-next-black-italic.otf']}")
|
||||||
format('opentype');
|
format('opentype');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.headerContainer {
|
||||||
|
padding: 12px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headerContainer .headerTitle {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
|
|
@ -3806,6 +3817,7 @@ p:last-child {
|
||||||
.menu-wrapper .layout-menu-container {
|
.menu-wrapper .layout-menu-container {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
padding: 12px 32px;
|
||||||
}
|
}
|
||||||
.menu-wrapper .layout-menu-container .layout-menu {
|
.menu-wrapper .layout-menu-container .layout-menu {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
|
@ -4175,7 +4187,6 @@ p:last-child {
|
||||||
.layout-menu-container
|
.layout-menu-container
|
||||||
.layout-menu {
|
.layout-menu {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin: 0px 16px;
|
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -103,21 +103,23 @@
|
||||||
|
|
||||||
<div class="layout-main">
|
<div class="layout-main">
|
||||||
<ui:include src="./breadcrumb.xhtml" />
|
<ui:include src="./breadcrumb.xhtml" />
|
||||||
|
|
||||||
|
<ui:insert name="HEADER_PAGINA" />
|
||||||
|
|
||||||
<div class="layout-content">
|
<div class="layout-content">
|
||||||
<h:form prependId="false">
|
<h:form prependId="false">
|
||||||
<div class="grid crud-demo">
|
<div class="grid crud-demo">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="card">
|
<div>
|
||||||
<p:growl id="panelAlerta" showDetail="true" />
|
<p:growl id="panelAlerta" showDetail="true" />
|
||||||
|
<!-- <p:toolbar>
|
||||||
<p:toolbar styleClass="mb-4">
|
|
||||||
<p:toolbarGroup>
|
<p:toolbarGroup>
|
||||||
<ui:insert name="MENU_BOTOES"> </ui:insert>
|
<ui:insert name="MENU_BOTOES"></ui:insert>
|
||||||
</p:toolbarGroup>
|
</p:toolbarGroup>
|
||||||
<p:toolbarGroup>
|
<p:toolbarGroup>
|
||||||
<ui:insert name="MENU_FILTRO"> </ui:insert>
|
<ui:insert name="MENU_FILTRO"></ui:insert>
|
||||||
</p:toolbarGroup>
|
</p:toolbarGroup>
|
||||||
</p:toolbar>
|
</p:toolbar>-->
|
||||||
|
|
||||||
<!-- TABELA -->
|
<!-- TABELA -->
|
||||||
<h:panelGroup layout="block" id="form_formulario">
|
<h:panelGroup layout="block" id="form_formulario">
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -53,7 +53,7 @@
|
||||||
<url-pattern>*.xhtml</url-pattern>
|
<url-pattern>*.xhtml</url-pattern>
|
||||||
</servlet-mapping>
|
</servlet-mapping>
|
||||||
<welcome-file-list>
|
<welcome-file-list>
|
||||||
<welcome-file>index.xhtml</welcome-file>
|
<welcome-file>./agtemplate/dashboard.xhtml</welcome-file>
|
||||||
</welcome-file-list>
|
</welcome-file-list>
|
||||||
<mime-mapping>
|
<mime-mapping>
|
||||||
<extension>otf</extension>
|
<extension>otf</extension>
|
||||||
|
|
|
||||||
|
|
@ -1,44 +1,104 @@
|
||||||
<?xml version='1.0' encoding='UTF-8' ?>
|
<?xml version='1.0' encoding='UTF-8' ?>
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
<ui:composition
|
||||||
xmlns:ui="http://java.sun.com/jsf/facelets"
|
xmlns="http://www.w3.org/1999/xhtml"
|
||||||
xmlns:f="http://java.sun.com/jsf/core"
|
xmlns:ui="http://java.sun.com/jsf/facelets"
|
||||||
xmlns:h="http://java.sun.com/jsf/html"
|
xmlns:f="http://java.sun.com/jsf/core"
|
||||||
xmlns:p="http://primefaces.org/ui"
|
xmlns:h="http://java.sun.com/jsf/html"
|
||||||
xmlns:jsf="http://xmlns.jcp.org/jsf"
|
xmlns:p="http://primefaces.org/ui"
|
||||||
template="../template/template.xhtml" >
|
xmlns:jsf="http://xmlns.jcp.org/jsf"
|
||||||
<ui:define name="HEAD_TITULO_PAGINA">tb_template</ui:define>
|
template="../template/template.xhtml"
|
||||||
<ui:define name="TITULO_PAGINA"><p:menuitem value="tb_template" url="#" /></ui:define>
|
>
|
||||||
<ui:define name="SISTEMA_PAGINA">Agtemplate</ui:define>
|
<ui:define name="HEAD_TITULO_PAGINA">tb_template</ui:define>
|
||||||
<ui:define name="CAMINHO_PAGINA">tb_template</ui:define>
|
<ui:define name="TITULO_PAGINA"
|
||||||
<ui:define name="MENU_BOTOES">
|
><p:menuitem value="tb_template" url="#"
|
||||||
<p:commandButton value="Novo" icon="pi pi-plus" update="@([id$=modalAgtemplateTb_templateCU])" action="#{agtemplateTb_templateBean.clickNovo()}" oncomplete="PF('wvModalAgtemplateTb_templateCU').show();"
|
/></ui:define>
|
||||||
styleClass="ui-button-success" style="margin-right: .5rem" process="@this" >
|
<ui:define name="SISTEMA_PAGINA">agTemplate</ui:define>
|
||||||
<p:resetInput target="modalAgtemplateTb_templateCU"/>
|
<ui:define name="CAMINHO_PAGINA">Dashboard</ui:define>
|
||||||
</p:commandButton>
|
|
||||||
<p:commandButton process="@this" id="deleteAgtemplateTb_templateButton" value="#{agtemplateTb_templateBean.deleteButtonMessage}" icon="pi pi-trash" actionListener="#{agtemplateTb_templateBean.deleteSelectedTb_template}"
|
<ui:define name="HEADER_PAGINA">
|
||||||
styleClass="ui-button-danger" disabled="#{!agtemplateTb_templateBean.hasSelectedTb_template()}" update="@this,panel_formulario,panelAlerta">
|
<div class="headerContainer">
|
||||||
<p:confirm header="Confirmação" message="Remover o(s) tb_template(s) selecionado(s)?" icon="pi pi-exclamation-triangle" />
|
<h1 class="headerTitle">Dashboard</h1>
|
||||||
</p:commandButton>
|
<p>Visualização dos dados parametrizados.</p>
|
||||||
</ui:define>
|
</div>
|
||||||
<ui:define name="MENU_FILTRO"> <h:panelGroup id="optionsPesquisa" layout="block" >
|
</ui:define>
|
||||||
<span class="filter-container ui-input-icon-left">
|
|
||||||
<i class="pi pi-search"></i>
|
<ui:define name="MENU_BOTOES">
|
||||||
<p:inputText onkeypress="if (event.keyCode == 13) {jQuery('#btPesquisa').trigger('click'); return false;}" style="margin-right:10px" id="pesquisa" title="Informar parametros de pesquisa" styleClass="pesquisa" value="#{agtemplateTb_templateBean.pesquisa}" >
|
<p:commandButton
|
||||||
<p:hotkey bind="return" handler="btPesquisa.click();"/>
|
value="Novo"
|
||||||
</p:inputText>
|
icon="pi pi-plus"
|
||||||
</span>
|
update="@([id$=modalAgtemplateTb_templateCU])"
|
||||||
<p:commandButton title="Pesquisar" icon="pi pi-search" id="btPesquisa" update="form_formulario,messages" styleClass="bt_pesquisa m-2" action="#{agtemplateTb_templateBean.clickPesquisar()}" process="optionsPesquisa"/>
|
action="#{agtemplateTb_templateBean.clickNovo()}"
|
||||||
<p:commandButton title="Filtrar" icon="pi pi-filter" styleClass="bt_pesquisa_filtro" process="@this" oncomplete="PF('wvModalAgtemplateTb_templateFiltro').show();" />
|
oncomplete="PF('wvModalAgtemplateTb_templateCU').show();"
|
||||||
</h:panelGroup>
|
styleClass="ui-button-success"
|
||||||
</ui:define>
|
style="margin-right: 0.5rem"
|
||||||
<ui:define name="FORMULARIO">
|
process="@this"
|
||||||
<ui:include src="./forms/crud/Tb_template/Tb_templateConsultLazy.xhtml" />
|
>
|
||||||
</ui:define>
|
<p:resetInput target="modalAgtemplateTb_templateCU" />
|
||||||
<ui:define name="LIVRE">
|
</p:commandButton>
|
||||||
<ui:include src="./forms/modal/Tb_template/Tb_templateR.xhtml" />
|
<p:commandButton
|
||||||
<ui:include src="./forms/modal/Tb_template/Tb_templateD.xhtml" />
|
process="@this"
|
||||||
<ui:include src="./forms/modal/Tb_template/Tb_templateCU.xhtml" />
|
id="deleteAgtemplateTb_templateButton"
|
||||||
<ui:include src="./forms/modal/Tb_template/Tb_templateFiltro.xhtml" />
|
value="#{agtemplateTb_templateBean.deleteButtonMessage}"
|
||||||
</ui:define>
|
icon="pi pi-trash"
|
||||||
|
actionListener="#{agtemplateTb_templateBean.deleteSelectedTb_template}"
|
||||||
|
styleClass="ui-button-danger"
|
||||||
|
disabled="#{!agtemplateTb_templateBean.hasSelectedTb_template()}"
|
||||||
|
update="@this,panel_formulario,panelAlerta"
|
||||||
|
>
|
||||||
|
<p:confirm
|
||||||
|
header="Confirmação"
|
||||||
|
message="Remover o(s) tb_template(s) selecionado(s)?"
|
||||||
|
icon="pi pi-exclamation-triangle"
|
||||||
|
/>
|
||||||
|
</p:commandButton>
|
||||||
|
</ui:define>
|
||||||
|
|
||||||
|
<ui:define name="MENU_FILTRO">
|
||||||
|
<h:panelGroup id="optionsPesquisa" layout="block">
|
||||||
|
<span class="filter-container ui-input-icon-left">
|
||||||
|
<i class="pi pi-search"></i>
|
||||||
|
<p:inputText
|
||||||
|
onkeypress="if (event.keyCode == 13) {
|
||||||
|
jQuery('#btPesquisa').trigger('click');
|
||||||
|
return false;
|
||||||
|
}"
|
||||||
|
style="margin-right: 10px"
|
||||||
|
id="pesquisa"
|
||||||
|
title="Informar parametros de pesquisa"
|
||||||
|
styleClass="pesquisa"
|
||||||
|
value="#{agtemplateTb_templateBean.pesquisa}"
|
||||||
|
>
|
||||||
|
<p:hotkey bind="return" handler="btPesquisa.click();" />
|
||||||
|
</p:inputText>
|
||||||
|
</span>
|
||||||
|
<p:commandButton
|
||||||
|
title="Pesquisar"
|
||||||
|
icon="pi pi-search"
|
||||||
|
id="btPesquisa"
|
||||||
|
update="form_formulario,messages"
|
||||||
|
styleClass="bt_pesquisa m-2"
|
||||||
|
action="#{agtemplateTb_templateBean.clickPesquisar()}"
|
||||||
|
process="optionsPesquisa"
|
||||||
|
/>
|
||||||
|
<p:commandButton
|
||||||
|
title="Filtrar"
|
||||||
|
icon="pi pi-filter"
|
||||||
|
styleClass="bt_pesquisa_filtro"
|
||||||
|
process="@this"
|
||||||
|
oncomplete="PF('wvModalAgtemplateTb_templateFiltro').show();"
|
||||||
|
/>
|
||||||
|
</h:panelGroup>
|
||||||
|
</ui:define>
|
||||||
|
|
||||||
|
<ui:define name="FORMULARIO">
|
||||||
|
<ui:include src="./forms/crud/Tb_template/Tb_templateConsultLazy.xhtml" />
|
||||||
|
</ui:define>
|
||||||
|
|
||||||
|
<ui:define name="LIVRE">
|
||||||
|
<ui:include src="./forms/modal/Tb_template/Tb_templateR.xhtml" />
|
||||||
|
<ui:include src="./forms/modal/Tb_template/Tb_templateD.xhtml" />
|
||||||
|
<ui:include src="./forms/modal/Tb_template/Tb_templateCU.xhtml" />
|
||||||
|
<ui:include src="./forms/modal/Tb_template/Tb_templateFiltro.xhtml" />
|
||||||
|
</ui:define>
|
||||||
</ui:composition>
|
</ui:composition>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,180 @@
|
||||||
|
<?xml version='1.0' encoding='UTF-8' ?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<ui:composition
|
||||||
|
xmlns="http://www.w3.org/1999/xhtml"
|
||||||
|
xmlns:ui="http://java.sun.com/jsf/facelets"
|
||||||
|
xmlns:f="http://java.sun.com/jsf/core"
|
||||||
|
xmlns:h="http://java.sun.com/jsf/html"
|
||||||
|
xmlns:p="http://primefaces.org/ui"
|
||||||
|
xmlns:jsf="http://xmlns.jcp.org/jsf"
|
||||||
|
template="../template/template.xhtml"
|
||||||
|
>
|
||||||
|
<ui:define name="HEAD_TITULO_PAGINA">tb_template</ui:define>
|
||||||
|
<ui:define name="TITULO_PAGINA"
|
||||||
|
><p:menuitem value="tb_template" url="#"
|
||||||
|
/></ui:define>
|
||||||
|
<ui:define name="SISTEMA_PAGINA">agTemplate</ui:define>
|
||||||
|
<ui:define name="CAMINHO_PAGINA">Dashboard</ui:define>
|
||||||
|
|
||||||
|
<ui:define name="HEADER_PAGINA">
|
||||||
|
<div class="headerContainer">
|
||||||
|
<h1 class="headerTitle">Dashboard Folha e Previdência</h1>
|
||||||
|
<p>Visão consolidada dos dados financeiros e previdenciários</p>
|
||||||
|
</div>
|
||||||
|
</ui:define>
|
||||||
|
|
||||||
|
<ui:define name="FORMULARIO">
|
||||||
|
<div style="display: flex; flex-wrap: wrap; gap: 24px; margin: 24px 0;">
|
||||||
|
<!-- Card 1: Folha de Pagamento -->
|
||||||
|
<div style="flex: 1 1 300px; min-width: 300px; padding: 24px; border-radius: 12px; background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1px solid #e0e0e0;">
|
||||||
|
<div style="display: flex; align-items: center; margin-bottom: 16px;">
|
||||||
|
<div style="background: #2E7D32; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
|
||||||
|
<i class="pi pi-money-bill" style="color: white; font-size: 18px;"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 style="margin: 0; font-weight: 600; color: #333; font-size: 18px;">Folha de Pagamento</h4>
|
||||||
|
<p style="color: #666; margin: 4px 0 0; font-size: 13px;">Comparativo entre valores líquidos e brutos</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; gap: 16px; align-items: flex-end; height: 200px; margin-bottom: 24px; justify-content: center;">
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="height: 40px; width: 100%; background: #388E3C; border-radius: 6px 6px 0 0;"></div>
|
||||||
|
<div style="height: 50px; width: 100%; background: #66BB6A; border-radius: 0 0 6px 6px;"></div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Jan</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="height: 60px; width: 100%; background: #388E3C; border-radius: 6px 6px 0 0;"></div>
|
||||||
|
<div style="height: 90px; width: 100%; background: #66BB6A; border-radius: 0 0 6px 6px;"></div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Fev</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="height: 40px; width: 100%; background: #388E3C; border-radius: 6px 6px 0 0;"></div>
|
||||||
|
<div style="height: 70px; width: 100%; background: #66BB6A; border-radius: 0 0 6px 6px;"></div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Mar</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="height: 35px; width: 100%; background: #388E3C; border-radius: 6px 6px 0 0;"></div>
|
||||||
|
<div style="height: 40px; width: 100%; background: #66BB6A; border-radius: 0 0 6px 6px;"></div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Abr</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="height: 45px; width: 100%; background: #388E3C; border-radius: 6px 6px 0 0;"></div>
|
||||||
|
<div style="height: 60px; width: 100%; background: #66BB6A; border-radius: 0 0 6px 6px;"></div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Mai</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="height: 40px; width: 100%; background: #388E3C; border-radius: 6px 6px 0 0;"></div>
|
||||||
|
<div style="height: 65px; width: 100%; background: #66BB6A; border-radius: 0 0 6px 6px;"></div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Jun</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; gap: 24px; font-size: 13px; color: #444; margin-bottom: 12px; justify-content: center;">
|
||||||
|
<div style="display: flex; align-items: center;"><span style="display:inline-block;width:14px;height:14px;background:#66BB6A;border-radius:3px;margin-right:8px;"></span>Valor Líquido</div>
|
||||||
|
<div style="display: flex; align-items: center;"><span style="display:inline-block;width:14px;height:14px;background:#388E3C;border-radius:3px;margin-right:8px;"></span>Valor Bruto</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card 2: Contribuições Previdenciárias -->
|
||||||
|
<div style="flex: 1 1 300px; min-width: 300px; padding: 24px; border-radius: 12px; background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1px solid #e0e0e0;">
|
||||||
|
<div style="display: flex; align-items: center; margin-bottom: 16px;">
|
||||||
|
<div style="background: #2E7D32; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
|
||||||
|
<i class="pi pi-shield" style="color: white; font-size: 18px;"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 style="margin: 0; font-weight: 600; color: #333; font-size: 18px;">Contribuições Previdenciárias</h4>
|
||||||
|
<p style="color: #666; margin: 4px 0 0; font-size: 13px;">Desembolsos mensais para INSS</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; justify-content: flex-end; margin-bottom: 16px;">
|
||||||
|
<p:selectOneMenu value="#{agtemplateDashboardBean.filtro}" style="width: 180px;" effect="fade">
|
||||||
|
<f:selectItem itemLabel="Últimos 6 meses" itemValue="6meses" />
|
||||||
|
<f:selectItem itemLabel="Últimos 12 meses" itemValue="12meses" />
|
||||||
|
<f:selectItem itemLabel="Ano atual" itemValue="anoatual" />
|
||||||
|
</p:selectOneMenu>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex; gap: 16px; align-items: flex-end; height: 200px; margin-bottom: 16px; justify-content: center;">
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="background: linear-gradient(to top, #4CAF50, #81C784); height: 80px; width: 100%; border-radius: 6px 6px 0 0; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 11px; background: #2E7D32; color: white; padding: 4px 8px; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">R$ 186k</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Jan</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="background: linear-gradient(to top, #4CAF50, #81C784); height: 130px; width: 100%; border-radius: 6px 6px 0 0; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 11px; background: #2E7D32; color: white; padding: 4px 8px; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">R$ 305k</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Fev</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="background: linear-gradient(to top, #4CAF50, #81C784); height: 100px; width: 100%; border-radius: 6px 6px 0 0; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 11px; background: #2E7D32; color: white; padding: 4px 8px; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">R$ 237k</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Mar</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="background: linear-gradient(to top, #4CAF50, #81C784); height: 30px; width: 100%; border-radius: 6px 6px 0 0; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 11px; background: #2E7D32; color: white; padding: 4px 8px; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">R$ 73k</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Abr</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="background: linear-gradient(to top, #4CAF50, #81C784); height: 90px; width: 100%; border-radius: 6px 6px 0 0; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 11px; background: #2E7D32; color: white; padding: 4px 8px; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">R$ 209k</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Mai</div>
|
||||||
|
</div>
|
||||||
|
<div style="width: 12%; max-width: 48px; display: flex; flex-direction: column; align-items: center;">
|
||||||
|
<div style="background: linear-gradient(to top, #4CAF50, #81C784); height: 95px; width: 100%; border-radius: 6px 6px 0 0; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 11px; background: #2E7D32; color: white; padding: 4px 8px; border-radius: 12px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">R$ 214k</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-size: 12px; margin-top: 8px; color: #555; font-weight: 500;">Jun</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Card 3: Despesas por Departamento -->
|
||||||
|
<div style="flex: 1 1 300px; min-width: 300px; padding: 24px; border-radius: 12px; background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border: 1px solid #e0e0e0;">
|
||||||
|
<div style="display: flex; align-items: center; margin-bottom: 16px;">
|
||||||
|
<div style="background: #2E7D32; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
|
||||||
|
<i class="pi pi-sitemap" style="color: white; font-size: 18px;"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 style="margin: 0; font-weight: 600; color: #333; font-size: 18px;">Despesas por Departamento</h4>
|
||||||
|
<p style="color: #666; margin: 4px 0 0; font-size: 13px;">Distribuição dos custos de pessoal</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="margin-bottom: 16px;">
|
||||||
|
<div style="background: linear-gradient(to right, #43A047, #66BB6A); height: 32px; width: 60%; border-radius: 16px; margin-bottom: 12px; position: relative; min-width: 186px; max-width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; left: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">TI</span>
|
||||||
|
<span style="position: absolute; right: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">R$ 186k</span>
|
||||||
|
</div>
|
||||||
|
<div style="background: linear-gradient(to right, #43A047, #66BB6A); height: 32px; width: 85%; border-radius: 16px; margin-bottom: 12px; position: relative; min-width: 305px; max-width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; left: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">Administrativo</span>
|
||||||
|
<span style="position: absolute; right: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">R$ 305k</span>
|
||||||
|
</div>
|
||||||
|
<div style="background: linear-gradient(to right, #43A047, #66BB6A); height: 32px; width: 70%; border-radius: 16px; margin-bottom: 12px; position: relative; min-width: 237px; max-width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; left: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">Vendas</span>
|
||||||
|
<span style="position: absolute; right: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">R$ 237k</span>
|
||||||
|
</div>
|
||||||
|
<div style="background: linear-gradient(to right, #43A047, #66BB6A); height: 32px; width: 25%; border-radius: 16px; margin-bottom: 12px; position: relative; min-width: 73px; max-width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; left: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">RH</span>
|
||||||
|
<span style="position: absolute; right: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">R$ 73k</span>
|
||||||
|
</div>
|
||||||
|
<div style="background: linear-gradient(to right, #43A047, #66BB6A); height: 32px; width: 65%; border-radius: 16px; margin-bottom: 12px; position: relative; min-width: 209px; max-width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; left: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">Produção</span>
|
||||||
|
<span style="position: absolute; right: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">R$ 209k</span>
|
||||||
|
</div>
|
||||||
|
<div style="background: linear-gradient(to right, #43A047, #66BB6A); height: 32px; width: 67%; border-radius: 16px; position: relative; min-width: 214px; max-width: 100%; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
|
||||||
|
<span style="position: absolute; left: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">Marketing</span>
|
||||||
|
<span style="position: absolute; right: 16px; top: 6px; color: white; font-size: 12px; font-weight: 500;">R$ 214k</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ui:define>
|
||||||
|
</ui:composition>
|
||||||
|
|
@ -10,8 +10,7 @@ template="../template/template.xhtml" >
|
||||||
<ui:define name="HEAD_TITULO_PAGINA">HOME</ui:define>
|
<ui:define name="HEAD_TITULO_PAGINA">HOME</ui:define>
|
||||||
<ui:define name="TITULO_PAGINA"><p:menuitem value="agtemplate" url="#" /></ui:define>
|
<ui:define name="TITULO_PAGINA"><p:menuitem value="agtemplate" url="#" /></ui:define>
|
||||||
<ui:define name="CAMINHO_PAGINA">agtemplate</ui:define>
|
<ui:define name="CAMINHO_PAGINA">agtemplate</ui:define>
|
||||||
<ui:define name="MENU_PAGINA">
|
<ui:define name="MENU_PAGINA"></ui:define>
|
||||||
</ui:define>
|
|
||||||
<ui:define name="FORMULARIO"></ui:define>
|
<ui:define name="FORMULARIO"></ui:define>
|
||||||
<ui:define name="LIVRE">
|
<ui:define name="LIVRE">
|
||||||
</ui:define>
|
</ui:define>
|
||||||
|
|
|
||||||
|
|
@ -114,6 +114,17 @@
|
||||||
src: url("#{resource['poseidon-layout:fonts/din-next-black-italic.otf']}")
|
src: url("#{resource['poseidon-layout:fonts/din-next-black-italic.otf']}")
|
||||||
format('opentype');
|
format('opentype');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.headerContainer {
|
||||||
|
padding: 12px 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.headerContainer .headerTitle {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
h2,
|
h2,
|
||||||
h3,
|
h3,
|
||||||
|
|
@ -3806,6 +3817,7 @@ p:last-child {
|
||||||
.menu-wrapper .layout-menu-container {
|
.menu-wrapper .layout-menu-container {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
padding: 12px 32px;
|
||||||
}
|
}
|
||||||
.menu-wrapper .layout-menu-container .layout-menu {
|
.menu-wrapper .layout-menu-container .layout-menu {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
|
@ -4175,7 +4187,6 @@ p:last-child {
|
||||||
.layout-menu-container
|
.layout-menu-container
|
||||||
.layout-menu {
|
.layout-menu {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin: 0px 16px;
|
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -8697,11 +8697,8 @@ body .ui-tabs .ui-tabs-navscroller .ui-tabs-navscroller-btn.ui-state-hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-toolbar {
|
body .ui-toolbar {
|
||||||
border: 1px solid #e4e5e5;
|
|
||||||
background: #f6f9fe;
|
|
||||||
color: #515c66;
|
color: #515c66;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
body .ui-wizard .ui-wizard-step-titles .ui-wizard-step-title {
|
||||||
|
|
|
||||||
|
|
@ -103,21 +103,23 @@
|
||||||
|
|
||||||
<div class="layout-main">
|
<div class="layout-main">
|
||||||
<ui:include src="./breadcrumb.xhtml" />
|
<ui:include src="./breadcrumb.xhtml" />
|
||||||
|
|
||||||
|
<ui:insert name="HEADER_PAGINA" />
|
||||||
|
|
||||||
<div class="layout-content">
|
<div class="layout-content">
|
||||||
<h:form prependId="false">
|
<h:form prependId="false">
|
||||||
<div class="grid crud-demo">
|
<div class="grid crud-demo">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="card">
|
<div>
|
||||||
<p:growl id="panelAlerta" showDetail="true" />
|
<p:growl id="panelAlerta" showDetail="true" />
|
||||||
|
<!-- <p:toolbar>
|
||||||
<p:toolbar styleClass="mb-4">
|
|
||||||
<p:toolbarGroup>
|
<p:toolbarGroup>
|
||||||
<ui:insert name="MENU_BOTOES"> </ui:insert>
|
<ui:insert name="MENU_BOTOES"></ui:insert>
|
||||||
</p:toolbarGroup>
|
</p:toolbarGroup>
|
||||||
<p:toolbarGroup>
|
<p:toolbarGroup>
|
||||||
<ui:insert name="MENU_FILTRO"> </ui:insert>
|
<ui:insert name="MENU_FILTRO"></ui:insert>
|
||||||
</p:toolbarGroup>
|
</p:toolbarGroup>
|
||||||
</p:toolbar>
|
</p:toolbar>-->
|
||||||
|
|
||||||
<!-- TABELA -->
|
<!-- TABELA -->
|
||||||
<h:panelGroup layout="block" id="form_formulario">
|
<h:panelGroup layout="block" id="form_formulario">
|
||||||
|
|
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue