app.py

# ----------------------------------------------- Relevant Librarires -----------------------------------------------

import streamlit as st
import plistlib
import pandas as pd
from bs4 import BeautifulSoup

from utils import divider_color, remove_emojis, order_processor, display_order, display_split

st.set_page_config(
    page_title="Grocery Splitter",
    page_icon="🧮",
    layout="wide",
    initial_sidebar_state="collapsed",
)

# Remove whitespace from the top of the page and sidebar
st.markdown(
    """
        <style>
            .block-container {
                padding-top: 3rem;
                padding-bottom: 3rem;
                padding-left: 6vw;
                padding-right: 6vw;
            }

            /* Print styles for full-width PDF */
            @page {
                margin: 0.5cm;
                size: auto;
            }

            @media print {
                * {
                    box-sizing: border-box !important;
                }

                html, body {
                    width: 100% !important;
                    margin: 0 !important;
                    padding: 0 !important;
                    font-size: 12px !important;
                }

                .block-container {
                    padding: 0 !important;
                    max-width: none !important;
                    width: 100% !important;
                    min-width: 0 !important;
                }

                .main, .main .block-container {
                    max-width: none !important;
                    width: 100% !important;
                    padding: 0 !important;
                    margin: 0 !important;
                }

                /* Hide Streamlit elements not needed in print */
                header, footer, .stDeployButton,
                [data-testid="stToolbar"],
                [data-testid="stDecoration"],
                [data-testid="stStatusWidget"],
                [data-testid="stSidebar"],
                .stButton button,
                iframe,
                [data-testid="stHeader"] {
                    display: none !important;
                }

                /* Make content full width */
                .stApp, .main, [data-testid="stAppViewContainer"],
                [data-testid="stMainBlockContainer"] {
                    width: 100% !important;
                    max-width: none !important;
                    min-width: 0 !important;
                    overflow: visible !important;
                    padding: 0 !important;
                    margin: 0 !important;
                }

                /* Preserve colors */
                * {
                    -webkit-print-color-adjust: exact !important;
                    print-color-adjust: exact !important;
                    color-adjust: exact !important;
                }

                /* Ensure columns don't break across pages */
                .row-widget, .stHorizontalBlock {
                    page-break-inside: avoid;
                }

                /* Make columns flexible */
                [data-testid="column"], .stColumn {
                    min-width: 0 !important;
                    flex: 1 1 auto !important;
                    width: auto !important;
                }

                /* Scale down wide content to fit */
                [data-testid="stHorizontalBlock"] {
                    flex-wrap: nowrap !important;
                    width: 100% !important;
                }
            }
        </style>
        """,
    unsafe_allow_html=True,
)


# ----------------------------------------------- Main Page -----------------------------------------------


st.subheader("Grocery Splitter", divider=divider_color)
st.markdown(
    """
<p style="font-size: 13px; font-weight: 400;">
    Helping with the age-old problem of splitting grocery bills with friends and family.
</p>
""",
    unsafe_allow_html=True,
)
st.markdown("<br/>", unsafe_allow_html=True)

# Create a friends tags
st.write(":material/group: &nbsp; Add your friends / family to split the bill with:")
raw_names = st.text_input("Enter the names separated by commas ( , )")

names = []
if raw_names:
    st.markdown("<br/>", unsafe_allow_html=True)
    names = [
        remove_emojis(f).strip().capitalize()
        for f in raw_names.split(",")]
    
    st.write(f"Friends / Family found:")
    for f in names:
        st.write(f":material/person: &nbsp; {f}")


# Tabs with custom logos
if raw_names:
    # check for duplicates
    if len(names) != len(set(names)):
        st.markdown("<br/>", unsafe_allow_html=True)
        st.warning(
            "&nbsp; &nbsp; &nbsp; Please remove duplicate names from the list. If you want to add a friend with the same name, please add an extra detail like a last name to differentiate them.",
            icon=":material/warning:",
        )
    
    elif len(names) > 0:
        st.markdown("<br/><br/>", unsafe_allow_html=True)

        stores = [
            "&nbsp; ![Asda Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Asda_logo.svg/250px-Asda_logo.svg.png) &nbsp; &nbsp;",
            "&nbsp; ![Tesco Logo](https://upload.wikimedia.org/wikipedia/commons/2/23/Tesco_logo.png) &nbsp; &nbsp;",
        ]

        store_choice = st.radio(
            "Select the store to upload your order",
            stores,
            horizontal=True,
        )
        
        st.markdown("<br/>", unsafe_allow_html=True)

        # File uploader
        uploaded_file = st.file_uploader(
            "Upload your file containing the orders from ASDA here",
            type=["html", "webarchive"],
        )

        st.markdown("<br/>", unsafe_allow_html=True)

        # Steps inside a toggle
        with st.expander("&nbsp; &nbsp; How to Download Your Order List", icon=":material/download:"):
            st.divider()
            st.write("Follow the steps below to download your order list from ASDA:")
            steps = [
                "Go to the stores website and log in to your account.",
                "Navigate to the 'Orders' section.",
                "Select the latest order you want to split.",
                "Right-click on the page and select 'Save As'.",
                "Save the file as 'Webpage, HTML only' or 'Web Archive'.",
                "Upload the saved file using the file uploader below",
            ]

            for i, step in enumerate(steps, start=1):
                st.markdown(f"&nbsp; &nbsp; &nbsp; **Step {i}:** &nbsp; {step}")

        if uploaded_file:
            with st.spinner("Processing the uploaded file..."):
                # if the file is a webarchive file
                if uploaded_file.type == "application/x-webarchive":
                    webarchive = plistlib.load(uploaded_file)
                    data = webarchive.get("WebMainResource", {}).get("WebResourceData")

                    # Decode and print
                    html = data.decode("utf-8", errors="replace")
                    soup = BeautifulSoup(html, "html.parser")

                else:
                    soup = BeautifulSoup(uploaded_file, "html.parser")
                
                items = order_processor(store_choice, soup, stores)
                

            if items:
                items = pd.DataFrame(items)
                # ignore duplicate items
                items = items.drop_duplicates(subset=["name", "weight"], keep="first").reset_index(drop=True)
                
                st.markdown("<br/><br/>", unsafe_allow_html=True)
                split = display_order(items, names)
                display_split(split, items)

            else:
                st.info(
                    "&nbsp; No items found. Please upload a valid order receipt.",
                    icon=":material/info:",
                )