Update app.py

app.py

@@ -27,20 +27,6 @@ st.markdown("""
         padding: 10px 32px !important; font-weight: 700; border: none !important; font-size: 18px !important;
         margin-top: 12px !important;
     }
-    .styled-table th {
-        background: #f3ecff !important;
-        color: #42318d !important;
-        font-weight: bold !important;
-        font-size: 16px !important;
-        padding: 10px 6px !important;
-        border-bottom: 2px solid #A020F0 !important;
-    }
-    .styled-table td {
-        font-size: 15px !important;
-        padding: 8px 4px !important;
-        word-break: break-word;
-        max-width: 220px;
-    }
     </style>
 """, unsafe_allow_html=True)
 
@@ -295,13 +281,57 @@ def fuzzy_match_type(detected_type, checklist_types):
             best_score = score
     return best_type, best_score
 
-def color_row(row):
-    if row["Accepted"] == "Yes":
-        return ['background-color: #e7ffe7'] * len(row)
-    elif row["Accepted"] == "No":
-        return ['background-color: #fff1f0'] * len(row)
-    else:
-        return [''] * len(row)
+# ========== CARD RENDERING FUNCTION ==========
+
+def show_validation_card(result):
+    accepted = result["Accepted"] == "Yes"
+    expired = result["Expired"] == "Yes"
+    genuine = result["Genuine"] == "Yes"
+
+    decision_color = "#d32f2f" if not accepted else "#388e3c"
+    yes_color = "#388e3c"
+    no_color = "#d32f2f"
+    bg_reason = "#ffeaea" if not accepted else "#eafbe8"
+
+    st.markdown(f"""
+    <div style="border-radius:16px;border:2px solid #A020F0; margin-bottom:32px; background:#f9f7ff;padding:18px 22px 22px 22px;box-shadow:0 3px 16px #0001;">
+      <div style="font-size:18px;font-weight:bold;letter-spacing:1px;margin-bottom:6px;">{result['File']}</div>
+      <table style="width:100%;border:none;margin-bottom:12px;">
+        <tr>
+          <td style="width:40%;font-size:17px;font-weight:700;">Decision:</td>
+          <td style="width:60%;font-size:17px;font-weight:700;color:{decision_color};">{'Accepted' if accepted else 'Rejected'}</td>
+        </tr>
+        <tr>
+          <td style="font-size:17px;font-weight:700;">Confidence:</td>
+          <td style="font-size:17px;">{result['Confidence']}%</td>
+        </tr>
+      </table>
+      <div style="border-radius:8px;background:{bg_reason};padding:11px 14px 11px 14px;color:#720000;font-size:15.5px;margin-bottom:17px;">
+        <span style="font-weight:bold;">Reason:</span><br>{result['Reason']}
+      </div>
+      <table style="width:100%;margin-top:10px;margin-bottom:5px;">
+        <tr>
+          <td style="font-weight:600;font-size:15px;border-bottom:1px solid #ddd;padding-bottom:3px;">Detected Document:</td>
+          <td style="font-weight:600;font-size:15px;border-bottom:1px solid #ddd;padding-bottom:3px;">Matched with Checklist:</td>
+        </tr>
+        <tr>
+          <td style="color:{yes_color if accepted else '#222'};font-weight:600;font-size:15px;">{result['Detected Type']}</td>
+          <td style="color:{yes_color if accepted else '#222'};font-weight:600;font-size:15px;">{result['Checklist Match']}</td>
+        </tr>
+        <tr>
+          <td style="font-weight:600;font-size:15px;border-bottom:1px solid #ddd;padding-bottom:3px;">Genuine:</td>
+          <td style="font-weight:600;font-size:15px;border-bottom:1px solid #ddd;padding-bottom:3px;">Expired:</td>
+        </tr>
+        <tr>
+          <td style="color:{yes_color if genuine else no_color};font-weight:600;font-size:15px;">{"Yes" if genuine else "No"}</td>
+          <td style="color:{yes_color if not expired else no_color};font-weight:600;font-size:15px;">{"Yes" if expired else "No"}</td>
+        </tr>
+      </table>
+      <div style="color:#555;font-size:14px;margin-top:7px;">
+        <b>Expiry Date:</b> {result["Expiry Date"]}
+      </div>
+    </div>
+    """, unsafe_allow_html=True)
 
 # ========== PROCESSING ==========
 if 'run_btn' not in locals():
@@ -402,22 +432,11 @@ if run_btn and uploaded_files:
             debug_data.append({uploaded_file.name: debug})
             status_box.success("Validation complete. See result below.")
 
-        # ==== Results table with custom styling ====
+        # ==== Card-style results ====
         if results:
             st.success("All validations complete.")
-            df = pd.DataFrame(results)
-            def style_row(row):
-                color = "#e7ffe7" if row["Accepted"] == "Yes" else "#fff1f0"
-                return [f"background-color: {color}"]*len(row)
-            styled_df = df.style.apply(style_row, axis=1)\
-                .set_table_attributes('class="styled-table"')\
-                .set_properties(**{
-                    'font-size': '15px',
-                    'word-break': 'break-word',
-                    'border': '1px solid #ddd'
-                })
-            st.markdown('<h4 style="margin-top:28px;">Validation Results</h4>', unsafe_allow_html=True)
-            st.write(styled_df.to_html(escape=False), unsafe_allow_html=True)
+            for result in results:
+                show_validation_card(result)
         else:
             st.warning("No valid results.")