dashboard_theme/ui_theme.py

# ui_theme.py
import base64
import datetime
import streamlit as st
import streamlit.components.v1 as components


# ===== [1] 페이지 기본 세팅 =====
def set_page(

    title: str = "AJIN Industrial Co., Ltd",

    layout: str = "wide",

    initial_sidebar_state: str = "expanded",  # 기본은 열림. 토글은 사용자 자유

):
    st.set_page_config(
        page_title=title,
        layout=layout,
        initial_sidebar_state=initial_sidebar_state,
    )

# ===== [2] 유틸: 이미지 → base64 =====
def _img_to_base64(path: str) -> str:
    with open(path, "rb") as f:
        return base64.b64encode(f.read()).decode()

# ===== [3] 전역 CSS (상단바 유지, 사이드바 폭 연동, 배너/본문 밀림) =====
def inject_global_css(

    *,

    banner_h: str = "72px",

    header_h_default: str = "58px",   # 초기 추정 높이 (JS로 실제값 동기화)

    navy_900: str = "#0a1424",

    navy_800: str = "#101d33",

    line: str = "#2a3a5a",

    text: str = "#e9eef7",

    muted: str = "#aeb7c6",

    yellow: str = "#ffbd39",

    green: str = "#69d06d",

    red: str = "#ff5858",

    hide_menu_footer: bool = False,   # 메뉴/푸터 숨김 여부 (원하면 True)

):
    st.markdown(
        f"""

<style>

:root {{

  --banner-h: {banner_h};

  --st-header-h: {header_h_default};   /* JS로 실제 높이 동기화됨 */

  --ajin-navy-900: {navy_900};

  --ajin-navy-800: {navy_800};

  --ajin-line: {line};

  --ajin-text: {text};

  --ajin-muted: {muted};

  --ajin-yellow: {yellow};

  --ajin-green: {green};

  --ajin-red: {red};

  --sbw: 0px;  /* 사이드바 실제 너비 (JS로 동기화) */

}}



html, body, .stApp {{ margin:0 !important; }}

.stApp {{ background: var(--ajin-navy-900); }}



/* 상단바(헤더/툴바) 유지 + 컬러 커스터마이즈 */

header[data-testid="stHeader"] {{

  background: var(--ajin-navy-800) !important;

  border-bottom: 1px solid var(--ajin-line) !important;

  box-shadow: none !important;

}}

header[data-testid="stHeader"] * {{ color: var(--ajin-text) !important; }}

[data-testid="stToolbar"] {{ background: transparent !important; }}

[data-testid="stToolbar"] svg {{ fill: var(--ajin-text) !important; color: var(--ajin-text) !important; }}



/* 배너: 상단바 높이만큼 아래 + 사이드바 폭만큼 오른쪽 밀림 */

.fixed-banner {{

  position: fixed;

  top: var(--st-header-h);

  left: var(--sbw);

  width: calc(100% - var(--sbw));

  z-index: 100000;

  height: var(--banner-h);

  display:flex; align-items:center;

  background: var(--ajin-navy-800);

  border-bottom: 1px solid var(--ajin-line);

  padding: 0 18px;

}}

.fixed-banner .wrap {{ display:flex; align-items:center; gap:14px; width:100%; }}

.fixed-banner img.logo {{ height:46px; }}

.fixed-banner .title {{ color:var(--ajin-text); font-weight:800; font-size:20px; letter-spacing:.3px; }}

.fixed-banner .right {{ margin-left:auto; color:var(--ajin-muted); font-size:13px; font-weight:600; }}



/* 본문: 상단(헤더+배너) + 좌측(사이드바 폭) 보정 */

.block-container {{

  padding-top: calc(var(--st-header-h) + var(--banner-h) + 8px) !important;

  padding-left: var(--sbw) !important;

}}



/* 사이드바 컬러만 통일 */

[data-testid="stSidebar"] {{

  background: linear-gradient(180deg, #0e1a30 0%, #0b1527 100%);

  border-right:1px solid var(--ajin-line);

}}

[data-testid="stSidebar"] * {{ color: var(--ajin-text) !important; }}



/* 카드 프리셋(옵션) */

.card {{

  border:1px solid var(--ajin-line); border-radius:16px;

  background: var(--ajin-navy-800); padding:16px 18px; color:var(--ajin-text);

  box-shadow: 0 8px 24px rgba(0,0,0,.25);

}}

.card h3 {{ margin:0 0 12px 0; font-size:18px; }}



/* 메뉴/푸터 표시 여부 */

{ "#MainMenu {{visibility:hidden;}} footer {{visibility:hidden;}}" if hide_menu_footer else "" }



/* 홈 링크(집 아이콘) 크기/여백 살짝 줄이기 */

[data-testid="stPageLink"] a {{

  font-size: 13px;

  padding: 6px 10px;

  border-radius: 10px;

  background: rgba(255,255,255,0.04);

  border: 1px solid var(--ajin-line);

  display: inline-flex;

  align-items: center;

  gap: 8px;

}}



/* 원형 4버튼 레이아웃 & 버튼 모양 */

.sb-rounds {{

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

  margin-top: 10px;

}}

/* page_link 요소를 동그란 버튼처럼 보이도록 */

.sb-rounds [data-testid="stPageLink"] a {{

  display: flex;

  align-items: center;

  justify-content: center;

  height: 64px;

  border-radius: 999px;

  border: 1px solid var(--ajin-line);

  background: rgba(255,255,255,0.06);

  font-weight: 700;

  font-size: 12px;

  text-align: center;

  padding: 0 8px;             /* 긴 라벨 줄바꿈 여유 */

  line-height: 1.1;

}}

.sb-rounds [data-testid="stPageLink"] a:hover {{

  background: rgba(255,255,255,0.12);

}}

</style>

""",
        unsafe_allow_html=True,
    )


# ===== [4] 고정 상단 배너 =====
def render_fixed_banner(*, logo_path: str, title: str):
    logo_b64 = _img_to_base64(logo_path)
    now_txt = datetime.datetime.now().strftime("%Y-%m-%d %H:%M")
    st.markdown(
        f"""

<div class="fixed-banner">

  <div class="wrap">

    <img class="logo" src="data:image/png;base64,{logo_b64}" />

    <div class="title">{title}</div>

    <div class="right">{now_txt}</div>

  </div>

</div>

""",
        unsafe_allow_html=True,
    )

# ===== [5] 사이드바: 날짜·시계 (필수) =====
def render_sidebar_clock(show_seconds: bool = False):
    now = datetime.datetime.now()
    time_fmt = "%H:%M:%S" if show_seconds else "%H:%M"
    st.sidebar.markdown(
        f"""

<div style="text-align:center; padding: 6px 8px 12px 8px; border-bottom:1px solid var(--ajin-line);">

  <div style="font-size:18px; color:var(--ajin-muted); margin-bottom:4px;">{now.strftime("%Y.%m.%d (%a)")}</div>

  <div style="font-size:76px; line-height:1.0; font-weight:800; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.25);">{now.strftime(time_fmt)}</div>

</div>

""",
        unsafe_allow_html=True,
    )



def enable_header_height_sync():
    components.html(
        """

<script>

(function(){

  const root = window.parent?.document?.documentElement || document.documentElement;



  function syncHeader(){

    const hdr = window.parent?.document?.querySelector('header[data-testid="stHeader"]');

    if(!hdr) return;

    root.style.setProperty('--st-header-h', (hdr.offsetHeight || 0) + 'px');

  }



  function init(){

    const hdr = window.parent?.document?.querySelector('header[data-testid="stHeader"]');

    if(hdr){

      syncHeader();

      new ResizeObserver(syncHeader).observe(hdr);

      window.addEventListener('resize', syncHeader);

    } else {

      const poll = setInterval(()=>{

        const h = window.parent?.document?.querySelector('header[data-testid="stHeader"]');

        if(h){ clearInterval(poll); syncHeader(); new ResizeObserver(syncHeader).observe(h); }

      }, 150);

    }

  }



  init();

})();

</script>

""",
        height=0,
    )


def enable_sidebar_width_sync():
    """

    사이드바의 '보이는 너비'를 측정해 CSS 변수 --sbw 에 반영.

    열림/닫힘/반응형 변화에 따라 배너와 본문이 같이 밀려납니다.

    """
    components.html(
        """

<script>

(function(){

  const root = window.parent?.document?.documentElement || document.documentElement;



  function syncSidebar(){

    const sb = window.parent?.document?.querySelector('[data-testid="stSidebar"]');

    let w = 0;

    if (sb){

      const r = sb.getBoundingClientRect();

      // 화면 밖(닫힘)이나 거의 0이면 0 처리

      w = (r.right <= 0 || r.width < 40) ? 0 : r.width;

    }

    root.style.setProperty('--sbw', w + 'px');

  }



  function init(){

    syncSidebar();

    const body = window.parent?.document?.body || document.body;

    if (body){ new ResizeObserver(syncSidebar).observe(body); }

    const sb = window.parent?.document?.querySelector('[data-testid="stSidebar"]');

    if (sb){ new ResizeObserver(syncSidebar).observe(sb); }

    window.addEventListener('resize', syncSidebar);

  }



  init();

})();

</script>

""",
        height=0,
    )


# def render_sidebar_main_button(main_script: str = "HOME.py",
#                                label: str = "Go to the main page"):
#     """
#     사이드바에 둥근 직사각형 네비 버튼을 렌더링합니다.
#     - main_script: 메인 페이지 파일명 (루트에 있는 스크립트)
#     - label: 버튼 라벨
#     """
#     # 버튼 스타일 (사이드바에만 적용)
#     st.sidebar.markdown("""
#     <style>
#       .sb-mainbtn [data-testid="stPageLink"] a {
#         display: flex; align-items: center; justify-content: center;
#         height: 48px; width: 100%;
#         border-radius: 999px;
#         border: 1px solid var(--ajin-line);
#         background: rgba(255,255,255,0.06);
#         color: var(--ajin-text) !important;
#         font-weight: 800; font-size: 13px;
#         text-decoration: none;
#       }
#       .sb-mainbtn [data-testid="stPageLink"] a:hover {
#         background: rgba(255,255,255,0.12);
#       }
#       .sb-mainbtn { margin-top: 10px; margin-bottom: 10px; }
#     </style>
#     """, unsafe_allow_html=True)

#     with st.sidebar:
#         st.markdown('<div class="sb-mainbtn">', unsafe_allow_html=True)
#         # 아이콘 없이 텍스트만 표기 (항상 메인으로 이동)
#         st.page_link(main_script, label=label)
#         st.markdown('</div>', unsafe_allow_html=True)

def render_sidebar_nav():
    with st.sidebar:
        st.markdown('<div class="sb-rounds">', unsafe_allow_html=True)
        st.page_link("pages/01_라인별_가동_현황.py", label="라인별 가동 현황")
        st.page_link("pages/02_비가동_일지.py",       label="비가동 일지")
        st.page_link("pages/03_수리_이력.py",         label="수리 이력")
        st.page_link("pages/04_스페어_현황_리포트.py", label="스페어 현황 리포트")
        st.markdown('</div>', unsafe_allow_html=True)