180 lines
15 KiB
HTML
180 lines
15 KiB
HTML
<?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> |