| 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.subheader('Syncore Calendar📅')
|
|
|
|
|
|
|
| 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"
|
|
|
|
|
| HEADERS = {
|
| "x-api-key": "69c23811-1073-4c1c-9902-8d552703c460",
|
| "Accept": "application/json"
|
| }
|
|
|
|
|
| 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]
|
|
|
|
|
| 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")
|
|
|
|
|
| supplier_names = list({
|
| item["supplier"]["name"]
|
| for item in order.get("line_items", []) if item.get("supplier")
|
| })
|
| if len(supplier_names) < 2:
|
|
|
| continue
|
|
|
|
|
| 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"
|
|
|
|
|
| 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)
|
|
|
|
|
| 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
|
|
|
|
|
|
|
|
|
| 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])
|
|
|
|
|
| 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_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>
|
| """
|
|
|
|
|
| components.html(calendar_html, height=900, scrolling=False)
|
|
|
