Update app.py

app.py

@@ -22,6 +22,7 @@ REAL_ADMIN_PASSWORD = os.getenv("ADMIN_PASSWORD") or "2016-11-11"
 supabase: Client = create_client(SUPABASE_URL, SUPABASE_KEY)
 
 def get_bookings():
+    # 這裡抓取所有資料，沒有設限制
     try:
         res = supabase.table("bookings").select("*").order("created_at", desc=True).execute()
         if not res.data: return pd.DataFrame()
@@ -89,13 +90,17 @@ def send_confirmation_hybrid(booking_id):
         return log_msg
     except Exception as e: return f"Error: {e}"
 
-# 🔥🔥🔥 3.0 版卡片：標籤化 + 大字體 + 重發功能 🔥🔥🔥
+# 🔥🔥🔥 3.1 版卡片：大字體 + 高對比 ID + 標題計數 🔥🔥🔥
 def render_booking_cards():
     df = get_bookings()
+    
+    # 在標題顯示總筆數，方便您確認是否抓漏了
+    count_html = f"<div style='color:#888; margin-bottom:10px; text-align:right;'>共找到 {len(df)} 筆訂位資料</div>"
+    
     if df.empty:
-        return "<div style='text-align:center; padding:60px; color:#666; font-size:1.2em;'>📭 目前沒有訂位資料</div>"
+        return f"{count_html}<div style='text-align:center; padding:60px; color:#666; font-size:1.2em;'>📭 目前沒有訂位資料</div>"
     
-    cards_html = "<div style='display: flex; flex-direction: column; gap: 20px; padding-bottom: 80px;'>"
+    cards_html = f"{count_html}<div style='display: flex; flex-direction: column; gap: 20px; padding-bottom: 80px;'>"
     
     for index, row in df.iterrows():
         # 狀態邏輯
@@ -131,71 +136,79 @@ def render_booking_cards():
         <div class="booking-card" style="
             background: #1e1e1e; 
             border-left: 6px solid {border_color};
-            border-radius: 10px; 
-            padding: 20px; 
+            border-radius: 12px; 
+            padding: 22px; 
             box-shadow: 0 6px 16px rgba(0,0,0,0.4);
             font-family: 'Segoe UI', Roboto, sans-serif;
             position: relative;">
             
-            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; border-bottom:1px solid #333; padding-bottom:10px;">
-                <div style="font-size:1.1em; color:#d4af37; font-weight:600;">
-                    <span style="font-size:0.8em; color:#888; margin-right:5px;">📅 日期</span> {row['date']}
+            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; border-bottom:1px solid #333; padding-bottom:12px;">
+                <div style="font-size:1.2em; color:#d4af37; font-weight:600;">
+                    <span style="font-size:0.75em; color:#888; margin-right:5px; font-weight:normal;">📅 日期</span> {row['date']}
                 </div>
                 <div style="
                     color: {status_color}; 
                     background: {status_color}1a; 
-                    padding: 4px 12px; 
+                    padding: 6px 14px; 
                     border-radius: 20px; 
-                    font-size: 0.85em; 
+                    font-size: 0.9em; 
                     font-weight: bold;
                     letter-spacing: 1px;">
                     {status}
                 </div>
             </div>
 
-            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:15px; margin-bottom:15px;">
+            <div style="display:grid; grid-template-columns: 1fr 1fr; gap:15px; margin-bottom:20px;">
                 <div>
-                    <div style="font-size:0.8em; color:#666; margin-bottom:2px;">⏰ 訂位時間</div>
-                    <div style="font-size:1.6em; color:#fff; font-weight:800; font-family:monospace;">{row['time']}</div>
+                    <div style="font-size:0.9em; color:#666; margin-bottom:4px;">⏰ 訂位時間</div>
+                    <div style="font-size:1.8em; color:#fff; font-weight:800; font-family:monospace; letter-spacing:-1px;">{row['time']}</div>
                 </div>
                 <div>
-                    <div style="font-size:0.8em; color:#666; margin-bottom:2px;">👥 人數</div>
-                    <div style="font-size:1.6em; color:#fff; font-weight:800;">{row['pax']} <span style="font-size:0.5em; font-weight:400; color:#888;">位</span></div>
+                    <div style="font-size:0.9em; color:#666; margin-bottom:4px;">👥 人數</div>
+                    <div style="font-size:1.8em; color:#fff; font-weight:800;">{row['pax']} <span style="font-size:0.5em; font-weight:400; color:#888;">位</span></div>
                 </div>
             </div>
             
-            <div style="background:#262626; padding:15px; border-radius:8px; margin-bottom:15px;">
-                <div style="margin-bottom:8px;">
-                    <span style="color:#888; font-size:0.85em; display:inline-block; width:40px;">姓名</span>
-                    <span style="color:#eee; font-size:1.1em; font-weight:600;">{row['name']}</span>
+            <div style="background:#262626; padding:18px; border-radius:10px; margin-bottom:18px;">
+                <div style="margin-bottom:12px;">
+                    <span style="color:#666; font-size:0.9em; display:block; margin-bottom:2px;">👤 姓名 Name</span>
+                    <span style="color:#eee; font-size:1.3em; font-weight:700;">{row['name']}</span>
                 </div>
-                <div style="margin-bottom:8px;">
-                    <span style="color:#888; font-size:0.85em; display:inline-block; width:40px;">電話</span>
-                    <a href="tel:{row['tel']}" style="color:#4dabf7; text-decoration:none; font-size:1.05em; letter-spacing:0.5px;">{row['tel']}</a>
+                <div style="margin-bottom:12px;">
+                    <span style="color:#666; font-size:0.9em; display:block; margin-bottom:2px;">📞 電話 Phone</span>
+                    <a href="tel:{row['tel']}" style="color:#4dabf7; text-decoration:none; font-size:1.2em; letter-spacing:0.5px; font-weight:500;">{row['tel']}</a>
                 </div>
                 <div>
-                    <span style="color:#888; font-size:0.85em; display:inline-block; width:40px;">信箱</span>
-                    <span style="color:#aaa; font-size:0.95em;">{row['email'] or '未提供'}</span>
+                    <span style="color:#666; font-size:0.9em; display:block; margin-bottom:2px;">✉️ 信箱 Email</span>
+                    <span style="color:#ccc; font-size:1.1em; word-break:break-all;">{row['email'] or '未提供'}</span>
                 </div>
             </div>
 
             <div style="margin-bottom:20px;">
-                <div style="font-size:0.8em; color:#888; margin-bottom:4px;">📝 備註事項</div>
-                <div style="color:#d4af37; background:#d4af371a; padding:10px; border-radius:6px; font-size:0.95em; line-height:1.5;">
+                <div style="font-size:0.9em; color:#888; margin-bottom:6px;">📝 備註事項 Note</div>
+                <div style="color:#d4af37; background:#d4af371a; padding:12px; border-radius:8px; font-size:1.0em; line-height:1.5;">
                     {row.get('remarks') or '無特別備註'}
                 </div>
             </div>
 
-            <div style="display:flex; justify-content:space-between; align-items:center; border-top:1px solid #333; padding-top:15px;">
-                <span style="font-size:0.75em; color:#444; font-family:monospace;">ID: {row['id']}</span>
+            <div style="display:flex; justify-content:space-between; align-items:center; border-top:1px solid #333; padding-top:18px;">
+                <span style="
+                    font-size: 0.85em; 
+                    color: #aaa; 
+                    font-family: monospace; 
+                    background: #333; 
+                    padding: 4px 8px; 
+                    border-radius: 4px;">
+                    ID: {row['id']}
+                </span>
                 
                 <button onclick="{btn_onclick}" style="
                     border: none; 
-                    padding: 10px 24px; 
-                    border-radius: 6px; 
-                    font-size: 0.95em; 
+                    padding: 12px 28px; 
+                    border-radius: 8px; 
+                    font-size: 1em; 
                     transition: all 0.2s;
-                    width: 140px;
+                    min-width: 140px;
                     {btn_style}">
                     {btn_text}
                 </button>
@@ -237,32 +250,33 @@ function() {
 }
 """
 
-# --- CSS 優化 (修復 elem_style 錯誤) ---
-# 把原本 inline 的 elem_style 移到這裡的 header-panel
+# --- CSS (樣式全放在這) ---
 custom_css = """
 body, .gradio-container { background-color: #0F0F0F; color: #fff; }
 
-/* 讓卡片容器可以滾動但隱藏捲軸 */
+/* 捲軸美化 */
 #booking_display { 
     max-height: 85vh; 
     overflow-y: auto; 
     padding-right: 5px;
 }
-#booking_display::-webkit-scrollbar { width: 4px; }
-#booking_display::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
+#booking_display::-webkit-scrollbar { width: 6px; }
+#booking_display::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
+#booking_display::-webkit-scrollbar-track { background: #222; }
+
 button:active { transform: scale(0.98); }
 
 /* Header Panel 樣式 */
 #header-panel {
     background: #1a1a1a;
     border: none;
-    padding: 10px;
+    padding: 15px;
     margin-bottom: 20px;
+    border-radius: 10px;
 }
 """
 
 # --- 介面 ---
-# ⚠️ 注意：css 參數從 Blocks 移到 launch
 with gr.Blocks(title="Admin") as demo:
     
     # 1. 登入
@@ -276,7 +290,6 @@ with gr.Blocks(title="Admin") as demo:
         
     # 2. 後台
     with gr.Group(visible=False) as admin_row:
-        # 修正：移除 elem_style，改用 elem_id
         with gr.Row(variant="panel", elem_id="header-panel"):
             gr.Markdown("### 🍷 Cié Cié Dashboard")
             refresh_btn = gr.Button("🔄 刷新列表", size="sm", variant="secondary")
@@ -298,7 +311,6 @@ with gr.Blocks(title="Admin") as demo:
         
         refresh_btn.click(render_booking_cards, outputs=booking_display)
         
-        # 點擊卡片 -> 發�� -> 刷新卡片
         hidden_send_btn.click(
             send_confirmation_hybrid, 
             inputs=hidden_id_input, 
@@ -308,9 +320,8 @@ with gr.Blocks(title="Admin") as demo:
             outputs=booking_display
         )
 
-    # 載入 JS
-    demo.load(None, js=js_logic)
+    # 載入 JS 與 CSS
+    demo.launch(css=custom_css, js=js_logic)
 
 if __name__ == "__main__":
-    # ⚠️ 修正：將 css 參數移至 launch()
-    demo.launch(css=custom_css)
+    demo.launch()