Update app.py

app.py

@@ -214,24 +214,74 @@ if process_btn:
     st.dataframe(df)
 
     # --- Dashboard Cards ---
-    st.markdown("### 📊 Compliance Dashboard")
-    col1, col2, col3 = st.columns(3)
-    col4, col5, col6 = st.columns(3)
-
-    unapproved_count = int((df["anomalies"].str.contains("UNAPPROVED_QR", na=False)).sum())
-    on_phone_count = int((df["anomalies"].str.contains("ON_PHONE", na=False)).sum())
-    tampering_count = int((df["anomalies"].str.contains("TAMPERING", na=False)).sum())
-    roi_count = int((df["anomalies"].str.contains("OUTSIDE_ROI", na=False)).sum())
-    absence_count = int((df["anomalies"].str.contains("ABSENCE", na=False)).sum())
-    undecoded_count = int((df["anomalies"].str.contains("UNDECODED_QR", na=False)).sum())
-
-    col1.metric("❌ Unauthorized QRs", unapproved_count)
-    col2.metric("📱 On Phone", on_phone_count)
-    col3.metric("⚠️ Tampered", tampering_count)
-
-    col4.metric("🚫 Outside ROI", roi_count)
-    col5.metric("⏳ QR Missing", absence_count)
-    col6.metric("🔍 Undecoded", undecoded_count)
+   # --- Dashboard Cards (Microsoft-style colored cards) ---
+st.markdown("### 📊 Compliance Dashboard")
+
+# minimal CSS injected once for card styling
+card_css = """
+<style>
+.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
+.card {
+  border-radius: 12px;
+  border: 2px solid rgba(0,0,0,0.12);
+  padding: 16px;
+  background: #fff;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
+  text-align: center;
+}
+.card .label { font-size: 14px; font-weight: 600; opacity: 0.8; margin-bottom: 6px; }
+.card .value { font-size: 28px; font-weight: 800; }
+
+.card.red    { border-color: #B71C1C; background: #FFEBEE; }
+.card.orange { border-color: #EF6C00; background: #FFF3E0; }
+.card.purple { border-color: #6A1B9A; background: #F3E5F5; }
+.card.blue   { border-color: #01579B; background: #E1F5FE; }
+.card.green  { border-color: #1B5E20; background: #E8F5E9; }
+.card.gray   { border-color: #263238; background: #ECEFF1; }
+</style>
+"""
+st.markdown(card_css, unsafe_allow_html=True)
+
+# compute counts (kept same logic/variables you already use)
+unapproved_count = int((df["anomalies"].str.contains("UNAPPROVED_QR", na=False)).sum())
+on_phone_count   = int((df["anomalies"].str.contains("ON_PHONE", na=False)).sum())
+tampering_count  = int((df["anomalies"].str.contains("TAMPERING", na=False)).sum())
+roi_count        = int((df["anomalies"].str.contains("OUTSIDE_ROI", na=False)).sum())
+absence_count    = int((df["anomalies"].str.contains("ABSENCE", na=False)).sum())
+undecoded_count  = int((df["anomalies"].str.contains("UNDECODED_QR", na=False)).sum())
+
+# render: 2 rows x 3 cols, with subtle MS-style colors + borders
+cards_html = f"""
+<div class="dashboard-grid">
+  <div class="card red">
+    <div class="label">❌ Unauthorized QRs</div>
+    <div class="value">{unapproved_count}</div>
+  </div>
+  <div class="card orange">
+    <div class="label">📱 On Phone</div>
+    <div class="value">{on_phone_count}</div>
+  </div>
+  <div class="card purple">
+    <div class="label">⚠️ Tampered</div>
+    <div class="value">{tampering_count}</div>
+  </div>
+  <div class="card blue">
+    <div class="label">🚫 Outside ROI</div>
+    <div class="value">{roi_count}</div>
+  </div>
+  <div class="card green">
+    <div class="label">⏳ QR Missing</div>
+    <div class="value">{absence_count}</div>
+  </div>
+  <div class="card gray">
+    <div class="label">🔍 Undecoded</div>
+    <div class="value">{undecoded_count}</div>
+  </div>
+</div>
+"""
+st.markdown(cards_html, unsafe_allow_html=True)
+# --- end Dashboard Cards ---
+
 
     # --- Alert History ---
     st.subheader("📜 Alert History")