-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcase3.html
More file actions
240 lines (225 loc) · 13.4 KB
/
Copy pathcase3.html
File metadata and controls
240 lines (225 loc) · 13.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Case 3: Procurement - Hackatonsite</title>
<meta name="description" content="Automate procurement order tracking from email notifications to Google Sheets">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body class="bg-gray-50">
<!-- NAVIGATION -->
<header class="bg-white shadow">
<nav class="container mx-auto px-4 py-4">
<div class="flex justify-between items-center">
<h1 class="text-2xl font-bold text-blue-600">
<a href="index.html">Hackatonsite</a>
</h1>
<ul class="flex space-x-6">
<li><a href="index.html" class="hover:text-blue-600">Home</a></li>
<li><a href="case1.html" class="hover:text-blue-600">Case 1</a></li>
<li><a href="case2.html" class="hover:text-blue-600">Case 2</a></li>
<li><a href="case3.html" class="text-blue-600 font-semibold">Case 3</a></li>
<li><a href="case4.html" class="hover:text-blue-600">Case 4</a></li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT -->
<main class="container mx-auto px-4 py-8">
<article class="bg-white rounded-lg shadow-md p-8 max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-gray-900 mb-4">Case 3: Procurement – Order Tracking via Email</h1>
<section class="mb-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-3">Context</h2>
<p class="text-gray-700 mb-3">
Order follow-up with suppliers is currently done manually via email, with manual updates in an Excel sheet.
</p>
<p class="text-gray-700">
This case proposes automating that process through agents that read and classify emails, automatically updating the order status. <strong>The Gmail accounts used are fictitious accounts created solely for the prototype, simulating communication between SAP and suppliers.</strong>
</p>
</section>
<section class="mb-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-3">Case Objective</h2>
<p class="text-gray-700">
<strong>Develop a prototype that detects emails sent from SAP and supplier replies, classifies the content, and automatically updates a Google Sheet with the order status.</strong>
</p>
</section>
<section class="mb-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-3">Key Challenges</h2>
<ul class="list-disc list-inside space-y-2 text-gray-700">
<li>Read emails (via Gmail API, IMAP, or provided .eml files)</li>
<li>Classify the type of reply (confirmation, delay, OOO, delivered, cancellation, etc.)</li>
<li>Automatically update a status sheet</li>
<li>Handle multiple languages (PT/EN) and email formats</li>
</ul>
</section>
<section class="mb-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-3">Available Data / APIs</h2>
<div class="bg-blue-50 rounded p-4 mb-3">
<h3 class="font-semibold text-gray-800 mb-2">Sample Email Files</h3>
<p class="text-gray-700">Sample email files (SAP → supplier, supplier → SAP)</p>
</div>
<div class="bg-blue-50 rounded p-4 mb-3">
<h3 class="font-semibold text-gray-800 mb-2">Gmail API</h3>
<p class="text-gray-700">For real or fictitious integration testing</p>
</div>
<div class="bg-blue-50 rounded p-4 mb-3">
<h3 class="font-semibold text-gray-800 mb-2">Google Sheets API</h3>
<p class="text-gray-700">For updating the tracking sheet</p>
</div>
<div class="bg-blue-50 rounded p-4 mb-3">
<h3 class="font-semibold text-gray-800 mb-2">Reference Documentation</h3>
<p class="text-gray-700">Procurement PO Follow-up Agents (MVP)</p>
</div>
<div class="bg-blue-50 rounded p-4">
<h3 class="font-semibold text-gray-800 mb-2">Email Examples</h3>
<p class="text-gray-700">Email examples provided for testing</p>
</div>
</section>
<section class="mb-6">
<h2 class="text-2xl font-semibold text-gray-800 mb-3">Success Criteria</h2>
<ul class="list-disc list-inside space-y-2 text-gray-700">
<li>✅ Correctly read emails and extract PO and status</li>
<li>✅ Classify supplier replies</li>
<li>✅ Automatically update the status sheet</li>
<li>✅ Explain how the solution could be scaled</li>
</ul>
</section>
<section class="mb-6">
<div class="flex items-center justify-between mb-3">
<h2 class="text-2xl font-semibold text-gray-800">Resources & Sample Data</h2>
<a href="resources/case3/index.html"
class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 text-sm font-semibold">
📁 Browse All Resources
</a>
</div>
<!-- Project Brief -->
<div class="mb-6 bg-purple-50 rounded-lg p-4">
<h3 class="text-xl font-semibold text-gray-800 mb-3">📋 Project Brief</h3>
<div class="space-y-2">
<div class="flex items-center justify-between bg-white rounded p-3 shadow-sm">
<div>
<p class="font-semibold text-gray-800">Procurement PO Follow-up Agents (MVP) - Project Brief</p>
<p class="text-sm text-gray-600">Complete MVP specification with objectives, architecture, and implementation roadmap</p>
</div>
<a href="resources/case3/documents/Procurement - Secil – Procurement Po Follow‑up Agents (mvp) • Project Brief.pdf"
download
class="ml-4 bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 whitespace-nowrap">
Download PDF
</a>
</div>
</div>
</div>
<!-- Sample Emails -->
<div class="mb-6 bg-green-50 rounded-lg p-4">
<h3 class="text-xl font-semibold text-gray-800 mb-3">📧 Sample Emails</h3>
<p class="text-sm text-gray-600 mb-3">Real-world examples of SAP procurement emails and supplier responses</p>
<!-- Email Set 1 -->
<div class="mb-4">
<h4 class="font-semibold text-gray-700 mb-2">PO #4501871521 - Motor Spare Parts</h4>
<div class="grid md:grid-cols-2 gap-2">
<div class="flex items-center justify-between bg-white rounded p-3 shadow-sm">
<div class="flex-1">
<p class="text-sm font-medium text-gray-800">Email Source (.eml)</p>
<p class="text-xs text-gray-600">Portuguese - SAP outbound notification</p>
</div>
<a href="resources/case3/emails/Procurement - Notas de encomenda Secil 4501871521.eml"
download
class="ml-2 bg-green-600 text-white px-3 py-1 rounded text-sm hover:bg-green-700">
.eml
</a>
</div>
<div class="flex items-center justify-between bg-white rounded p-3 shadow-sm">
<div class="flex-1">
<p class="text-sm font-medium text-gray-800">PDF Attachment</p>
<p class="text-xs text-gray-600">PO details and line items</p>
</div>
<a href="resources/case3/documents/Procurement - Notas de encomenda Secil 4501871521.pdf"
download
class="ml-2 bg-green-600 text-white px-3 py-1 rounded text-sm hover:bg-green-700">
PDF
</a>
</div>
</div>
</div>
<!-- Email Set 2 -->
<div class="mb-4">
<h4 class="font-semibold text-gray-700 mb-2">PO #4501879195 - Seal Ring</h4>
<div class="grid md:grid-cols-2 gap-2">
<div class="flex items-center justify-between bg-white rounded p-3 shadow-sm">
<div class="flex-1">
<p class="text-sm font-medium text-gray-800">Email Source (.eml)</p>
<p class="text-xs text-gray-600">English - PO status request</p>
</div>
<a href="resources/case3/emails/Procurement - Secil's PO status 4501879195.eml"
download
class="ml-2 bg-green-600 text-white px-3 py-1 rounded text-sm hover:bg-green-700">
.eml
</a>
</div>
<div class="flex items-center justify-between bg-white rounded p-3 shadow-sm">
<div class="flex-1">
<p class="text-sm font-medium text-gray-800">PDF Attachment</p>
<p class="text-xs text-gray-600">PO details and status</p>
</div>
<a href="resources/case3/documents/Procurement - Secil's PO status 4501879195.pdf"
download
class="ml-2 bg-green-600 text-white px-3 py-1 rounded text-sm hover:bg-green-700">
PDF
</a>
</div>
</div>
</div>
</div>
<!-- Test Data -->
<div class="mb-6 bg-yellow-50 rounded-lg p-4">
<h3 class="text-xl font-semibold text-gray-800 mb-3">🧪 Test Dataset</h3>
<div class="space-y-2">
<div class="flex items-center justify-between bg-white rounded p-3 shadow-sm">
<div>
<p class="font-semibold text-gray-800">Test Emails Collection</p>
<p class="text-sm text-gray-600">14 fictional email scenarios covering various supplier response types (EN/PT)</p>
<p class="text-xs text-gray-500 mt-1">Includes confirmations, delays, OOO, discontinuations, and supply chain issues</p>
</div>
<a href="resources/case3/documents/Procurement - test emails.md"
download
class="ml-4 bg-yellow-600 text-white px-4 py-2 rounded hover:bg-yellow-700 whitespace-nowrap">
Download .md
</a>
</div>
</div>
</div>
<!-- API References -->
<div class="bg-blue-50 rounded-lg p-4">
<h3 class="text-xl font-semibold text-gray-800 mb-3">🔗 Useful Resources</h3>
<ul class="space-y-2">
<li>
<span class="text-gray-700">APIs: Gmail and Google Sheets</span>
</li>
<li>
<span class="text-gray-700">Provided email files</span>
</li>
<li>
<span class="text-gray-700">Document: Procurement PO Follow-up Agents (MVP)</span>
</li>
</ul>
</div>
</section>
<!-- Back to Home Button -->
<div class="mt-8 pt-6 border-t border-gray-200">
<a href="index.html" class="inline-block bg-gray-600 text-white px-6 py-2 rounded hover:bg-gray-700">
← Back to All Cases
</a>
</div>
</article>
</main>
<!-- FOOTER -->
<footer class="bg-gray-800 text-white mt-12 py-6">
<div class="container mx-auto px-4 text-center">
<p>© 2025 Hackatonsite - AI-Driven Development Hackathon</p>
<p class="text-gray-400 text-sm mt-2">Learn. Build. Innovate.</p>
</div>
</footer>
</body>
</html>