app.py

import streamlit as st
import json
import requests
import streamlit.components.v1 as components
import datetime


st.set_page_config(
    page_title="Key Innovations Inc.",
    page_icon="https://tscstatic.keyinnovations.ca/logo/logo_1T895ONEIG.png",
    layout="wide"
)
st.image("https://tscstatic.keyinnovations.ca/logo/logo_1T895ONEIG.png", width=150)
#st.title('Syncore Calendar')
st.subheader('Syncore Calendar📅')


# API Endpoint 
ALL_JOBS_URL = "https://api.syncore.app/v2/orders/jobs?date_from={}&date_to={}&limit=1000"
SALES_ORDERS_URL = "https://api.syncore.app/v2/orders/jobs/{}/salesorders"

# API Headers
HEADERS = {
    "x-api-key": "69c23811-1073-4c1c-9902-8d552703c460",
    "Accept": "application/json"
}

# Function to fetch jobs for the selected month with pagination
def fetch_jobs(selected_year, selected_month):
    first_day = datetime.date(selected_year, selected_month, 1)
    last_day = (first_day + datetime.timedelta(days=32)).replace(day=1) - datetime.timedelta(days=1)

    date_from, date_to = first_day.strftime("%Y-%m-%d"), last_day.strftime("%Y-%m-%d")

    all_jobs = []
    page = 1  

    while True:
        url = f"https://api.syncore.app/v2/orders/jobs?date_from={date_from}&date_to={date_to}&limit=100&page={page}"
        response = requests.get(url, headers=HEADERS)

        if response.status_code == 200:
            data = response.json()
            new_jobs = data.get("jobs", [])

            if not new_jobs:
                break  

            all_jobs.extend(new_jobs)
            page += 1  

        else:
            st.error(f"API Error (Fetching Jobs): {response.status_code} - {response.text}")
            break

    return [job["id"] for job in all_jobs]

# Function to fetch sales orders for jobs 
def fetch_sales_orders_for_jobs(job_ids):
    orders = []
    priority_colors = {"High": "#dc2626", "Medium": "#2563eb", "Low": "#22c55e"}  
    today = datetime.date.today()

    processed_alerts = set()  

    for job_id in job_ids:
        url = SALES_ORDERS_URL.format(job_id)
        response = requests.get(url, headers=HEADERS)

        if response.status_code == 200:
            data = response.json()
            if "salesorders" in data:
                for order in data["salesorders"]:
                    job_created = order.get("date", "Not Available")
                    estimated_delivery_date = order.get("estimated_delivery_date", "Not Available")
                    job_number = order.get("job_number", "NA")

                    # Extract supplier names 
                    supplier_names = list({
                        item["supplier"]["name"]
                        for item in order.get("line_items", []) if item.get("supplier")
                    })
                    if len(supplier_names) < 2:
                        #print(len(supplier_names))
                        continue 
                    
                    # Assign priority based on estimated delivery date
                    priority = "Low"  
                    if estimated_delivery_date != "Not Available":
                        estimated_date = datetime.datetime.strptime(estimated_delivery_date, "%Y-%m-%d").date()
                        days_until_delivery = (estimated_date - today).days
                        if days_until_delivery <= 15:
                            priority = "High"
                        elif 16 <= days_until_delivery <= 30:
                            priority = "Medium"

                    # Add job event 
                    if job_created != "Not Available":
                        job_event = {
                            "id": f"{job_number}-job",
                            "title": f"{job_number}<br><strong>🛠 Suppliers:</strong> {', '.join(supplier_names)}<br>📅 {job_created} → 🚚 {estimated_delivery_date}",
                            "start": job_created,
                            "color": priority_colors.get(priority, "#2563eb")
                        }
                        orders.append(job_event)

                    # Add delivery alert
                    if estimated_delivery_date != "Not Available" and job_id not in processed_alerts:
                        delivery_alert_event = {
                            "id": f"{job_number}-alert",
                            "title": f"{job_number}<br>🚨 Delivery Day",
                            "start": estimated_delivery_date,
                            "color": "#ff9800"
                        }
                        orders.append(delivery_alert_event)
                        processed_alerts.add(job_id)  

        else:
            st.error(f"API Fetch Error (Sales Orders for Job {job_id}): {response.status_code}")

    return orders



# Handle Calendar Month Switching
if "selected_month" not in st.session_state:
    today = datetime.date.today()
    st.session_state.selected_year = today.year
    st.session_state.selected_month = today.month

params = st.query_params  

if "year" in params and "month" in params:
    st.session_state.selected_year = int(params["year"][0])
    st.session_state.selected_month = int(params["month"][0])

# Show loading animation
with st.spinner("Fetching jobs... Please wait."):
    job_ids = fetch_jobs(st.session_state.selected_year, st.session_state.selected_month)

with st.spinner("Processing sales orders... This may take up to 60 seconds"):
    orders = fetch_sales_orders_for_jobs(job_ids)
    st.balloons()

events_json = json.dumps(orders)

# Calendar with Priority Legend & Delivery Alerts
calendar_html = f"""

<!DOCTYPE html>

<html>

<head>

    <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/locales-all.min.js"></script>

    <style>

        body {{

            font-family: 'Poppins', sans-serif;

            background-color: #f8fafc;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: flex-start;

            height: 100vh;

            padding: 20px;

        }}

        /* 📌 Priority Legend Styling */

        .priority-legend {{

            display: flex;

            justify-content: center;

            align-items: center;

            gap: 20px;

            padding: 10px;

            background: white;

            border-radius: 8px;

            margin-bottom: 15px;

            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);

            width: 85vw;

            max-width: 1200px;

        }}

        .priority-box {{

            display: flex;

            align-items: center;

            gap: 8px;

            font-size: 14px;

            font-weight: bold;

        }}

        .priority-box span {{

            width: 16px;

            height: 16px;

            display: inline-block;

            border-radius: 4px;

        }}

       #calendar-container {{

            width: 100vw;

            height: 100vh;

            background: white;

            box-shadow: none;

            border-radius: 0;

            padding: 0;

            margin: 0;

            display: flex;

            justify-content: center;

            align-items: center;

        }}



        #calendar {{

            width: 95%;

            height: 95%;

        }}

        .fc-event {{

            border-radius: 6px;

            padding: 6px;

            font-size: 12px;

            font-weight: bold;

            white-space: normal;

            text-align: left;

            line-height: 1.5;

            display: flex;

            flex-direction: column;

            justify-content: center;

            background: rgba(0, 0, 0, 0.1);

            border-left: 5px solid #2563eb;

            color: black;

            transition: all 0.2s ease-in-out;

            box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.12);

        }}

        .fc-event-title {{

            padding: 6px;

            background: white;

            border-radius: 4px;

            font-size: 12px;

            font-weight: 600;

            white-space: normal;

            line-height: 1.4;

            text-align: left;

        }}

    </style>

    <script>

        document.addEventListener('DOMContentLoaded', function() {{

            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {{

                initialView: 'dayGridMonth',

                editable: true,

                selectable: true,

                height: '100%',

                themeSystem: 'standard',

                headerToolbar: {{

                    left: 'prev,next today',

                    center: 'title',

                    right: 'dayGridMonth,timeGridWeek,timeGridDay'

                }},

                eventContent: function(arg) {{

                    return {{ html: arg.event.title }};

                }},

                events: {events_json},

                buttonIcons: true,

            }});

            calendar.render();

        }});

    </script>

</head>

<body>

    <!-- 📌 Priority Legend Section (Now Outside Calendar) -->

    <div class="priority-legend">

        <div class="priority-box">

            <span style="background-color: #dc2626;"></span> High Priority

        </div>

        <div class="priority-box">

            <span style="background-color: #2563eb;"></span> Medium Priority

        </div>

        <div class="priority-box">

            <span style="background-color: #22c55e;"></span> Low Priority

        </div>

        <div class="priority-box">

            <span style="background-color: #ff9800;"></span> Delivery Alert

        </div>

    </div>



    <!-- 📌 Calendar Container -->

    <div id='calendar-container'>

        <div id='calendar'></div>

    </div>

</body>

</html>

"""

# Display the FullCalendar.js 
components.html(calendar_html, height=900, scrolling=False)