Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
234 changes: 209 additions & 25 deletions src/SupplyChainPlatform.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,42 @@ function Warehouse() {
// --- Main Component ---

const INCOTERMS_DATA = {
"EXW": "Ex Works: Buyer takes all risk from seller's door.",
"FOB": "Free On Board: Seller covers costs until goods are on ship.",
"CIF": "Cost, Insurance, and Freight: Seller pays to destination port.",
"DDP": "Delivered Duty Paid: Seller covers all costs including taxes."
"EXW": {
"desc": "Ex Works: Buyer takes all risk from seller's door.",
"risk": "Seller's premises",
"cost": "Seller's premises",
"modes": "Any"
},
"FCA": {
"desc": "Free Carrier: Seller delivers to carrier at named place.",
"risk": "Delivery to carrier",
"cost": "Delivery to carrier",
"modes": "Any"
},
"FOB": {
"desc": "Free On Board: Seller covers costs until goods are on ship.",
"risk": "On board vessel",
"cost": "On board vessel",
"modes": "Sea/Inland Waterway"
},
"CIF": {
"desc": "Cost, Insurance, and Freight: Seller pays to destination port.",
"risk": "On board vessel",
"cost": "Destination port",
"modes": "Sea/Inland Waterway"
},
"DAP": {
"desc": "Delivered at Place: Seller delivers at named destination.",
"risk": "At destination (ready for unloading)",
"cost": "At destination (ready for unloading)",
"modes": "Any"
},
"DDP": {
"desc": "Delivered Duty Paid: Seller covers all costs including taxes.",
"risk": "At destination (ready for unloading)",
"cost": "At destination (cleared for import)",
"modes": "Any"
}
};

export default function SupplyChainPlatform() {
Expand All @@ -75,6 +107,8 @@ export default function SupplyChainPlatform() {
const [trackingId, setTrackingId] = useState('');
const [aiStatus, setAiStatus] = useState('Idle');
const [blockchainLog, setBlockchainLog] = useState([]);
const [pipelineStep, setPipelineStep] = useState(0);
const [securityScan, setSecurityScan] = useState(null);

const logToBlockchain = async (event) => {
setAiStatus('Securing data on blockchain...');
Expand All @@ -94,14 +128,54 @@ export default function SupplyChainPlatform() {
}, 1500);
};

const runDataPipeline = () => {
setPipelineStep(1);
const steps = [
'Ingesting IoT Telemetry...',
'Cleaning Data...',
'Running AI Transformers...',
'Loading to Warehouse...'
];
let i = 0;
const interval = setInterval(() => {
Comment on lines +131 to +140
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): Consider cleaning up the interval in runDataPipeline to avoid it running after unmount or multiple triggers.

The interval created here is only cleared when the loop finishes. If the component unmounts mid-run, the interval can still fire and attempt state updates, causing React warnings and a potential memory leak. Please store the interval ID (e.g., in a ref) and clear it in a useEffect cleanup, or switch to a cancelable recursive setTimeout pattern.

if (i < steps.length) {
setAiStatus(steps[i]);
setPipelineStep(i + 1);
i++;
} else {
clearInterval(interval);
setAiStatus('Pipeline Complete.');
logToBlockchain('Data Pipeline Executed');
}
}, 800);
};

const runSecurityScan = () => {
setAiStatus('Scanning for anomalies...');
setTimeout(() => {
setSecurityScan({
anomaly: "CRITICAL: Route deviation 22% detected near high-risk zone.",
iotRisk: "MEDIUM: 3 sensors running outdated firmware.",
fraud: "CLEAN: All invoices verified for this shipment."
});
setAiStatus('Security Scan Complete.');
logToBlockchain('Security Audit Triggered');
}, 2000);
};

return (
<div className="supply-chain-container" style={{ color: 'white', textAlign: 'left', padding: '20px' }}>
<h2>Supply Chain & Digital Twin Platform</h2>
<div className="supply-chain-container" style={{ color: 'white', textAlign: 'left', padding: '20px', fontFamily: 'sans-serif' }}>
<header style={{ borderBottom: '1px solid #444', marginBottom: '20px', paddingBottom: '10px' }}>
<h2 style={{ margin: 0 }}>Supply Chain & Logistics AI Platform</h2>
<small style={{ color: '#888' }}>Enhanced Data Engineering & Security Integration</small>
</header>

<div className="tabs" style={{ marginBottom: '20px', display: 'flex', gap: '10px' }}>
<button onClick={() => setActiveTab('twin')}>Digital Twin (3D)</button>
<button onClick={() => setActiveTab('incoterms')}>Incoterms</button>
<button onClick={() => setActiveTab('logistics')}>Logistics AI</button>
<div className="tabs" style={{ marginBottom: '20px', display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
<button style={btnStyle(activeTab === 'twin')} onClick={() => setActiveTab('twin')}>Digital Twin (3D)</button>
<button style={btnStyle(activeTab === 'incoterms')} onClick={() => setActiveTab('incoterms')}>Incoterms</button>
<button style={btnStyle(activeTab === 'logistics')} onClick={() => setActiveTab('logistics')}>Logistics AI</button>
<button style={btnStyle(activeTab === 'security')} onClick={() => setActiveTab('security')}>Security & Risk</button>
<button style={btnStyle(activeTab === 'data')} onClick={() => setActiveTab('data')}>Data Engineering</button>
</div>

{activeTab === 'twin' && (
Expand Down Expand Up @@ -135,17 +209,35 @@ export default function SupplyChainPlatform() {
{activeTab === 'incoterms' && (
<div style={{ background: '#222', padding: '20px', borderRadius: '10px' }}>
<h3>Incoterms 2020 Navigator</h3>
<select
value={selectedTerm}
onChange={(e) => setSelectedTerm(e.target.value)}
style={{ padding: '10px', borderRadius: '5px', width: '100%', marginBottom: '20px' }}
>
{Object.keys(INCOTERMS_DATA).map(term => (
<option key={term} value={term}>{term}</option>
))}
</select>
<div style={{ padding: '20px', border: '1px solid #444', borderRadius: '5px' }}>
<strong>{selectedTerm}:</strong> {INCOTERMS_DATA[selectedTerm]}
<div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: '20px' }}>
<ul style={{ listStyle: 'none', padding: 0 }}>
{Object.keys(INCOTERMS_DATA).map(term => (
<li
key={term}
onClick={() => setSelectedTerm(term)}
style={{
padding: '10px',
cursor: 'pointer',
background: selectedTerm === term ? '#444' : '#333',
marginBottom: '5px',
borderRadius: '4px'
}}
>
{term} - {INCOTERMS_DATA[term].desc.split(':')[0]}
</li>
))}
</ul>
<div style={{ padding: '20px', border: '1px solid #444', borderRadius: '5px', background: '#1a1a1a' }}>
<h4 style={{ marginTop: 0, color: '#00ff00' }}>{selectedTerm} Details</h4>
<p>{INCOTERMS_DATA[selectedTerm].desc}</p>
<table style={{ width: '100%', fontSize: '14px', borderCollapse: 'collapse' }}>
<tbody>
<tr style={{ borderBottom: '1px solid #333' }}><td style={{ padding: '8px' }}>Risk Transfer</td><td style={{ padding: '8px', color: '#aaa' }}>{INCOTERMS_DATA[selectedTerm].risk}</td></tr>
<tr style={{ borderBottom: '1px solid #333' }}><td style={{ padding: '8px' }}>Cost Transfer</td><td style={{ padding: '8px', color: '#aaa' }}>{INCOTERMS_DATA[selectedTerm].cost}</td></tr>
<tr><td style={{ padding: '8px' }}>Transport Modes</td><td style={{ padding: '8px', color: '#aaa' }}>{INCOTERMS_DATA[selectedTerm].modes}</td></tr>
</tbody>
</table>
</div>
</div>
</div>
)}
Expand All @@ -154,14 +246,15 @@ export default function SupplyChainPlatform() {
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
<div style={{ background: '#222', padding: '20px', borderRadius: '10px' }}>
<h3>Logistics Optimizer</h3>
<p style={{ fontSize: '14px', color: '#aaa' }}>AI-driven route and delay prediction based on live environmental data.</p>
<input
type="text"
placeholder="Enter Tracking ID (e.g. SHIP-123)"
value={trackingId}
onChange={(e) => setTrackingId(e.target.value)}
style={{ padding: '10px', width: '80%', marginBottom: '10px' }}
style={{ padding: '10px', width: '80%', marginBottom: '10px', background: '#333', color: 'white', border: '1px solid #555' }}
/>
<button onClick={runAIPrediction} style={{ display: 'block' }}>Run AI Analysis</button>
<button onClick={runAIPrediction} style={{ display: 'block', padding: '10px 20px', background: '#007bff', border: 'none', color: 'white', borderRadius: '4px', cursor: 'pointer' }}>Run AI Analysis</button>
<p style={{ marginTop: '20px', color: '#aaa' }}>Status: <span style={{ color: '#00ff00' }}>{aiStatus}</span></p>
</div>

Expand All @@ -180,9 +273,100 @@ export default function SupplyChainPlatform() {
</div>
)}

<footer style={{ marginTop: '30px', fontSize: '12px', color: '#666' }}>
Supply Chain AI Services Software v1.0.0 | Integrated with Digital Twin & Web3 Ledger.
{activeTab === 'security' && (
<div style={{ background: '#222', padding: '20px', borderRadius: '10px' }}>
<h3>AI Security & Risk Analyzer</h3>
<div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}>
<button onClick={runSecurityScan} style={{ padding: '10px 20px', background: '#dc3545', border: 'none', color: 'white', borderRadius: '4px' }}>Perform Full Security Audit</button>
<span style={{ alignSelf: 'center', color: '#aaa' }}>System Status: {aiStatus}</span>
</div>

{securityScan && (
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '15px' }}>
<SecurityCard title="Shipment Anomaly" status="CRITICAL" desc={securityScan.anomaly} color="#ff4444" />
<SecurityCard title="IoT Cyber Risk" status="MEDIUM" desc={securityScan.iotRisk} color="#ffbb33" />
<SecurityCard title="Fraud Detection" status="SECURE" desc={securityScan.fraud} color="#00C851" />
</div>
)}
</div>
)}

{activeTab === 'data' && (
<div style={{ background: '#222', padding: '20px', borderRadius: '10px' }}>
<h3>Data Engineering Pipeline</h3>
<p style={{ fontSize: '14px', color: '#aaa' }}>Visualize the flow of telemetry from IoT edge devices to the analytics warehouse.</p>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', margin: '40px 0', padding: '20px', background: '#111', borderRadius: '8px' }}>
<PipelineNode active={pipelineStep >= 1} label="IoT Ingestion" />
<Arrow active={pipelineStep >= 1} />
<PipelineNode active={pipelineStep >= 2} label="Cleaning" />
<Arrow active={pipelineStep >= 2} />
<PipelineNode active={pipelineStep >= 3} label="AI Transform" />
<Arrow active={pipelineStep >= 3} />
<PipelineNode active={pipelineStep >= 4} label="Data Warehouse" />
</div>
<button onClick={runDataPipeline} disabled={pipelineStep > 0 && pipelineStep < 4} style={{ padding: '10px 20px', background: '#28a745', border: 'none', color: 'white', borderRadius: '4px' }}>
Trigger Pipeline Run
</button>
</div>
)}

<footer style={{ marginTop: '30px', fontSize: '12px', color: '#666', borderTop: '1px solid #333', paddingTop: '10px' }}>
Supply Chain AI Services Software v1.2.0 | Integrated with Digital Twin, Web3 Ledger & AI Security.
</footer>
</div>
);
}

// --- Helper Components ---

function btnStyle(active) {
return {
padding: '10px 15px',
background: active ? '#444' : '#222',
color: active ? '#00ff00' : 'white',
border: '1px solid #555',
borderRadius: '4px',
cursor: 'pointer',
fontWeight: active ? 'bold' : 'normal'
};
}

function SecurityCard({ title, status, desc, color }) {
return (
<div style={{ border: `1px solid ${color}`, padding: '15px', borderRadius: '8px', background: 'rgba(255,255,255,0.05)' }}>
<h4 style={{ margin: '0 0 10px 0', color: color }}>{title}</h4>
<div style={{ fontSize: '12px', fontWeight: 'bold', marginBottom: '5px' }}>Status: {status}</div>
<p style={{ fontSize: '13px', margin: 0, color: '#ccc' }}>{desc}</p>
</div>
);
}

function PipelineNode({ active, label }) {
return (
<div style={{ textAlign: 'center' }}>
<div style={{
width: '60px',
height: '60px',
borderRadius: '50%',
background: active ? '#00ff00' : '#333',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: '0 auto 10px',
boxShadow: active ? '0 0 15px #00ff00' : 'none',
transition: 'all 0.5s ease'
}}>
{active ? '✅' : '⚙️'}
</div>
<span style={{ fontSize: '12px', color: active ? 'white' : '#666' }}>{label}</span>
</div>
);
}

function Arrow({ active }) {
return (
<div style={{ flex: 1, height: '2px', background: active ? '#00ff00' : '#333', margin: '0 10px', position: 'relative' }}>
{active && <div style={{ position: 'absolute', right: 0, top: '-4px', border: '5px solid transparent', borderLeftColor: '#00ff00' }} />}
</div>
);
}
34 changes: 34 additions & 0 deletions supply_chain_platform/ai_logistics_engine.py
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,40 @@ def analyze_supply_chain_risk(self, inventory_level, demand_forecast):
else:
return "LOW: Healthy inventory levels."

class DataEngineeringPipe:
"""Simulates Data Engineering processes for Supply Chain Analytics."""

def simulate_pipeline(self, batch_size=100):
print(f"[*] Ingesting {batch_size} events from IoT Gateway...")
time.sleep(0.5)
print(f"[*] Processing: Normalizing timestamps and cleaning null values...")
time.sleep(0.5)
print(f"[*] Transform: Calculating rolling averages for sensor telemetry...")
time.sleep(0.5)
print(f"[*] Load: Storing results in Data Warehouse and Vector DB...")
return {"status": "SUCCESS", "records_processed": batch_size, "latency_ms": random.randint(100, 500)}

class TransportOptimizer:
"""Advanced Transportation & Route Optimization."""

def calculate_multimodal_cost(self, distance, weight, mode='Truck'):
"""Calculates cost based on transport mode."""
rates = {
"Truck": 1.5, # $ per km per ton
"Rail": 0.8,
"Sea": 0.2,
"Air": 5.0
}
rate = rates.get(mode, 1.5)
cost = distance * (weight / 1000) * rate
carbon_footprint = distance * (weight / 1000) * (rate * 0.1) # Simplified CO2 estimate

return {
"mode": mode,
"estimated_cost_usd": round(cost, 2),
"carbon_footprint_kg": round(carbon_footprint, 2)
}

if __name__ == "__main__":
engine = AILogisticsEngine()
print(f"Predicted Delay: {engine.predict_delivery_delay(5000, 'storm')} hours")
Loading
Loading