Project 3

Sunshine SLA Monitor

Interactive UI Financial SLA Recovery

Project Overview

An interactive logistics dashboard and SLA-auditing console interface. Built using pure semantic HTML5, CSS variables, and modular Vanilla JS, this tool parses shipment logs, identifies multi-carrier SLA failures, and organizes dispute claims for recovery.

The Problem

Couriers offer guaranteed delivery times, but up to 5% of packages miss their windows. Manually auditing logs to identify these misses, verifying contract rules, and filing billing disputes for UPS, DHL, or FedEx accounts is administrative labor that businesses routinely skip, leaving thousands in unclaimed refunds.

What I Did (Technical Action)

Engineered a responsive, high-performance dashboard layout utilizing modern glassmorphism styling (`backdrop-filter`). Programmed a log-processing class in JavaScript to parse mock API carrier data feeds. Configured structural state management in the front-end to calculate metrics and dynamically redraw elements when filtering by carrier or SLA status without external library overhead.

Digitized my real-world experience as Customer Experience Specialist at Sunshine Corp, where I managed courier accounts and solved 500+ delivery disputes. By structuring this administrative auditing cycle into a dashboard mockup, I demonstrate a systematic, scalable procedure to secure shipping SLA recoveries, recover billing errors, and de-escalate customer concerns.

Why This Stands Out

This proves layout expertise. It shows that I don't rely on massive frameworks (like React or Bootstrap) to build premium, responsive, glassmorphic interfaces. It demonstrates efficient state management and DOM manipulation in Vanilla JS.

Shows immense financial value. It proves that I don't just "resolve customer complaints" — I analyze the underlying delivery SLAs, audit shipping records, and recover real money for the business ($15,000+ saved) while ensuring 100% SLA client compliance.

Project Metrics

Interface Build HTML5 & CSS3 Variables
State Handling Modular ES6 Classes
Reflow Latency Sub-10 milliseconds
Layout Widths Fluid (Mobile to 4K)
Disputes Audited 500+ Actual Cases
Dispute Success Rate 98% Recovered
Direct Cost Recovery $15,000+ Refunded
Daily Logs Audited 10,000+ entries

Dispute Log Parser

sla_parser.js
class SLADisputeAuditor {
  constructor(logs) {
    this.logs = logs;
    this.failedSLAs = [];
  }

  // Process courier log feeds and identify breach conditions
  auditLogs() {
    this.logs.forEach(log => {
      const actualHours = (new Date(log.delivered_time) - new Date(log.ship_time)) / 3600000;
      
      // Check if delivery duration exceeds the SLA contract hours
      if (actualHours > log.contract_sla_hours) {
        const delayHours = actualHours - log.contract_sla_hours;
        
        this.failedSLAs.push({
          tracking_id: log.tracking_id,
          carrier: log.carrier,
          customer_dispute: log.customer_complaint_logged,
          refunding_value: log.shipping_fee * 1.0, // Full refund SLA breach
          delay: delayHours.toFixed(2) + " hrs"
        });
      }
    });
    return this.failedSLAs;
  }

  // Output summary statistics for management review
  getFinancialSummary() {
    let totalRefundPotential = 0;
    this.failedSLAs.forEach(item => {
      totalRefundPotential += item.refunding_value;
    });
    
    return {
      breaches_found: this.failedSLAs.length,
      potential_recovery: "$" + totalRefundPotential.toFixed(2)
    };
  }
}

// Sample logs parsed dynamically
const sampleLogs = [
  { tracking_id: "1Z9A", carrier: "UPS", ship_time: "2026-05-18T10:00:00", delivered_time: "2026-05-19T18:00:00", contract_sla_hours: 24, shipping_fee: 150.00, customer_complaint_logged: true }
];

const auditor = new SLADisputeAuditor(sampleLogs);
auditor.auditLogs();
console.log(auditor.getFinancialSummary());