Batch Production & Efficiency Dashboard

An end-to-end data integration and visualization project. This repository contains tools to ingest and process raw batch production logs and supplier pricing data, serve the combined dataset via a Python Flask API, and present a front-end interactive dashboard (the Batch Efficiency Matrix).

---

🏗️ Project Architecture

The application is structured into three main layers:

├── raw_data/                       # Input CSVs containing raw data
│   ├── production_log.csv          # Raw batch logs (material sizes, yield)
│   └── supplier_catalog.csv        # Supplier price list and shipping methods
│
├── data_processing/
│   └── production_log_finance.ipynb # Jupyter Notebook for ETL and calculations
│
├── backend/
│   ├── app.py                      # Flask API serving processed data
│   └── Production_log_data.csv     # Cleaned and merged dataset (output of ETL)
│
└── frontend/
    ├── display.html                # Dashboard user interface
    ├── styles.css                  # UI styling with modern cards and tables
    └── data.js                     # Async client to fetch data and compute KPIs

Note: All files reside in the root directory for this current deployment.

---

📊 Data Pipeline (ETL)

The core data transformation is executed in production_log_finance.ipynb.

1. Inputs

• production_log.csv: Contains details of each batch process.
  • Batch_ID: Unique identifier (e.g., BCH-001).
  • Raw_Material_KG: Total raw material weight in kilograms.
  • Yield_Pct: Yield percentage achieved.
  • Supplier_Code: Key linking to the supplier catalog (e.g., SUP_104).
• supplier_catalog.csv: Contains catalog information for suppliers.
  • Supplier_Code: Code matching the production logs.
  • Supplier_Name: Full business name of the supplier.
  • Cost_Per_KG_USD: Cost per unit (renamed during processing to Cost_Per_KG_NG).
  • Freight_Type: Shipping classification (Sea, Air, Land).

2. Processing Steps

• Standardizes Supplier_Code in both datasets to uppercase and strips trailing whitespace.
• Merges the datasets using a left-join on Supplier_Code.
• Renames cost currency reference from USD to local currency (NG).
• Computes Total_Batch_Cost as: $$\text{Total Batch Cost} = \text{Raw Material (KG)} \times \text{Cost per KG}$$
• Projects the target columns and writes them to Production_log_data.csv.

---

⚡ Backend Flask API

The API layer is managed by app.py.

• Endpoint: /get_data (GET)
• CORS Support: Configured using flask-cors to allow cross-origin requests from the browser dashboard.
• Data Load: Reads Production_log_data.csv on startup and returns it as a JSON array.

---

🖥️ Interactive Dashboard (Frontend)

The frontend consists of three files providing a responsive and modern Batch Efficiency Matrix interface:

• display.html: Sets up the structural containers, the KPI metric grid, and the tabular display.
• styles.css: Implements styling rules, including:
  • Clean card elements with left-accent borders representing metrics.
  • Subtle table animations (hover effects on rows).
  • Modern sans-serif typography (Segoe UI) and soft slate background (#f4f6f9).
• data.js: Runs asynchronously to fetch dataset rows, populate the dynamic HTML table, and calculate live KPIs:
  • Total Operational Spend: Sum of Total_Batch_Cost across all batches.
  • Average Batch Yield: Arithmetic mean of Yield_Pct.
  • Total Batches Processed: Count of active batches.

---

🚀 Getting Started

📋 Prerequisites

Ensure Python is installed on your machine along with these packages:

pip install pandas flask flask-cors

🏃 Running the Application

1. Prepare/Process Data: Ensure Production_log_data.csv is up to date by running the cells in production_log_finance.ipynb.

2. Start the API Server: Execute the Flask script:

   python app.py

   The server will start running locally at http://127.0.0.1:5000/.

3. Open the Dashboard: Open display.html in any web browser to view the live dashboard and metrics.