feat: Add PMJA Receiving Dashboard page for data visualization and session management.

pages/rec.py

@@ -7,7 +7,7 @@ import streamlit.components.v1 as components
 from gs_client import read_ws
 
 st.set_page_config(layout="wide", initial_sidebar_state="collapsed", page_title="PMJA - Dashboard Recebimento")
-
+#carregando
 # ── SESSION ───────────────────────────────────────────────────────────
 _cc = CookieController()
 COOKIE_NAME = "pmja_session"
@@ -166,9 +166,85 @@ def build_frames(df_plot, df_rec, sistemas, cores_sistemas, anos_unicos,
     return frames, meses_pt
 
 # ── LOAD DATA ─────────────────────────────────────────────────────────
-with st.spinner('📊 Carregando dados do Google Sheets...'):
-    df_recebimento = read_ws("recebimento")
-    df_rec_dados   = read_ws("rec_dados")
+# ── LOADING SCREEN ─────────────────────────────────────────────────
+loading_html = """
+<style>
+  *{margin:0;padding:0;box-sizing:border-box}
+  .overlay{
+    position:fixed;inset:0;
+    background:linear-gradient(135deg,#003a70 0%,#0056A3 100%);
+    display:flex;flex-direction:column;align-items:center;justify-content:center;
+    z-index:99999;font-family:'DM Sans',sans-serif;
+    transition:opacity .5s;
+  }
+  .logos{display:flex;align-items:center;gap:32px;margin-bottom:48px}
+  .logo-img{height:40px;filter:brightness(0) invert(1);opacity:.9}
+  .divider{width:1px;height:40px;background:rgba(255,255,255,.25)}
+  .title{font-size:22px;color:#fff;font-weight:800;letter-spacing:-.5px;
+    margin-bottom:4px;text-align:center;font-family:'Sora',sans-serif}
+  .subtitle{font-size:13px;color:rgba(255,255,255,.7);font-weight:600;
+    margin-bottom:52px;text-align:center}
+  .bar-wrap{width:280px;height:4px;background:rgba(255,255,255,.15);
+    border-radius:99px;overflow:hidden;margin-bottom:20px}
+  .bar-fill{height:100%;width:0%;background:#fff;border-radius:99px;transition:width .4s ease}
+  .status{font-size:12px;color:rgba(255,255,255,.65);font-weight:600;
+    letter-spacing:.3px;min-height:18px;text-align:center}
+  .dots span{animation:blink 1.2s infinite;opacity:0}
+  .dots span:nth-child(2){animation-delay:.2s}
+  .dots span:nth-child(3){animation-delay:.4s}
+  @keyframes blink{0%,100%{opacity:0}50%{opacity:1}}
+  .spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.2);
+    border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;
+    margin-bottom:32px}
+  @keyframes spin{to{transform:rotate(360deg)}}
+</style>
+<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700;800&family=Sora:wght@700;800&display=swap" rel="stylesheet">
+
+<div class="overlay" id="overlay">
+  <div class="logos">
+    <img class="logo-img" src="https://companieslogo.com/img/orig/AZ2.F-d26946db.png?t=1720244490" alt="AZ">
+    <div class="divider"></div>
+    <img class="logo-img" src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Logo-engie.svg" alt="Engie">
+  </div>
+  <div class="spinner"></div>
+  <div class="title">PMJA — Dashboard Recebimento</div>
+  <div class="subtitle">Gestão de Materiais</div>
+  <div class="bar-wrap"><div class="bar-fill" id="bar"></div></div>
+  <div class="status" id="status">
+    Conectando ao Google Sheets
+    <span class="dots"><span>.</span><span>.</span><span>.</span></span>
+  </div>
+</div>
+
+<script>
+var steps=[
+  {p:18, msg:'Conectando ao Google Sheets'},
+  {p:40, msg:'Carregando dados de recebimento'},
+  {p:62, msg:'Processando métricas'},
+  {p:80, msg:'Montando gráficos'},
+  {p:95, msg:'Quase pronto'}
+];
+var i=0;
+function next(){
+  if(i>=steps.length) return;
+  var s=steps[i++];
+  document.getElementById('bar').style.width=s.p+'%';
+  document.getElementById('status').innerHTML=
+    s.msg+'<span class="dots"><span>.</span><span>.</span><span>.</span></span>';
+  setTimeout(next, 950+Math.random()*550);
+}
+setTimeout(next, 300);
+</script>
+"""
+
+loading_placeholder = st.empty()
+loading_placeholder.components.v1.html(loading_html, height=0)
+
+df_recebimento = read_ws("recebimento")
+df_rec_dados   = read_ws("rec_dados")
+
+# Fecha o loading ao terminar
+loading_placeholder.empty()
 
 
 if df_recebimento is not None and not df_recebimento.empty: