Update app.py

app.py

@@ -1,19 +1,70 @@
 import streamlit as st
+import pandas as pd
 import folium
 from streamlit_folium import st_folium
+from datetime import datetime
 
-st.title("Maldives Vessel Tracker 🚢")
-st.write("Gen Z Vessel Management System")
+# --- CONFIG & STYLING ---
+st.set_page_config(page_title="Maldives Vessel Tracker", layout="wide")
 
-# Dummy Data (like your Room DB)
-vessels = [{"name": "Aanu Quick", "type": "Speedboat", "lat": 4.175, "lon": 73.509}]
+st.markdown("""
+    <style>
+    .main { background-color: #f0f2f6; }
+    .stButton>button { width: 100%; border-radius: 20px; background-color: #0077B6; color: white; }
+    </style>
+    """, unsafe_allow_html=True)
 
-for v in vessels:
-    st.subheader(f"{v['name']} - {v['type']}")
-    if st.button(f"Pay 50 MVR for {v['name']}"):
-        st.success("Payment Successful! 🌊")
+# --- MOCK DATA (Simulating followme.mv) ---
+# In a real app, you would use 'requests' and 'BeautifulSoup' to scrape live data
+data = {
+    "Vessel Name": ["Aanu Quick", "Coral Express", "Aagalaa", "Dhon Hiri", "Altec Dash"],
+    "Type": ["Speedboat", "Ferry", "Supply Boat", "Dhoni", "Speedboat"],
+    "Status": ["Live: On Time", "Delayed", "Scheduled", "Live: On Time", "Live: On Time"],
+    "Lat": [4.1755, 4.1910, 4.1700, 4.2100, 4.1850],
+    "Lon": [73.5093, 73.5200, 73.5000, 73.5350, 73.5150],
+    "Speed": ["31.0 knots", "12.0 knots", "8.5 knots", "22.0 knots", "35.0 knots"]
+}
+df = pd.DataFrame(data)
 
-# Map Preview
-m = folium.Map(location=[4.175, 73.509], zoom_start=12)
-folium.Marker([4.175, 73.509], popup="Aanu Quick").add_to(m)
-st_folium(m, width=700)
+# --- SIDEBAR: SEARCH & FILTERS ---
+st.sidebar.header("🚢 Vessel Finder")
+search_query = st.sidebar.text_input("Search vessel name...", "")
+filter_type = st.sidebar.multiselect("Vessel Type", options=df["Type"].unique(), default=df["Type"].unique())
+
+# Filter Logic
+filtered_df = df[(df["Vessel Name"].str.contains(search_query, case=False)) & (df["Type"].isin(filter_type))]
+
+# --- MAIN UI ---
+st.title("🌊 Maldives Vessel Management")
+st.write(f"Updated: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")
+
+col1, col2 = st.columns([2, 1])
+
+with col1:
+    st.subheader("📍 Live Tracking Map")
+    # Create Folium Map (Dark Theme for Gen Z aesthetic)
+    m = folium.Map(location=[4.1755, 73.5093], zoom_start=13, tiles="cartodbpositron")
+    
+    for _, row in filtered_df.iterrows():
+        color = "green" if "On Time" in row["Status"] else "red"
+        folium.Marker(
+            location=[row["Lat"], row["Lon"]],
+            popup=f"{row['Vessel Name']} ({row['Speed']})",
+            icon=folium.Icon(color=color, icon="ship", prefix="fa")
+        ).add_to(m)
+    
+    st_folium(m, width=800, height=500)
+
+with col2:
+    st.subheader("💳 Fast Payment (50 MVR)")
+    if not filtered_df.empty:
+        selected_vessel = st.selectbox("Select Vessel to Pay", filtered_df["Vessel Name"])
+        if st.button(f"Pay for {selected_vessel}"):
+            st.balloons()
+            st.success(f"Payment for {selected_vessel} successful! Check your SMS for the ticket. 🎫")
+    else:
+        st.warning("No vessels found matching your search.")
+
+# --- DATA TABLE ---
+st.subheader("📋 Vessel Status Board")
+st.dataframe(filtered_df[["Vessel Name", "Type", "Status", "Speed"]], use_container_width=True)