-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
273 lines (249 loc) · 14.7 KB
/
index.html
File metadata and controls
273 lines (249 loc) · 14.7 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
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ValueCentric — Dashboard</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ── AUTH GUARD (runs before anything renders) ── -->
<script>
(function(){
if(!sessionStorage.getItem('vc_auth')) window.location.href='login.html';
})();
</script>
<!-- ════════ HEADER ════════ -->
<header class="app-header">
<div class="header-left">
<div class="logo">
<div class="logo-icon">⬡</div>
<div>
<div class="logo-title">ValueCentric</div>
<div class="logo-sub">Pharma Supply Chain Ledger</div>
</div>
</div>
</div>
<div class="header-center">
<div id="status" class="status-bar status-info">Connecting to Ganache...</div>
</div>
<div class="header-right">
<!-- Notification Bell -->
<div class="notif-wrapper">
<button class="notif-bell" id="notif-bell" onclick="window.app.toggleNotifications()" title="Notifications">🔔</button>
<span class="notif-badge hidden" id="notif-badge">0</span>
<!-- Notification Dropdown -->
<div class="notif-dropdown hidden" id="notif-dropdown">
<div class="notif-dropdown-hdr">
<span>Notifications</span>
<button class="notif-markall" onclick="window.app.markAllRead()">Mark all read</button>
</div>
<div id="notif-list" class="notif-list">
<div class="notif-empty">No notifications yet</div>
</div>
</div>
</div>
<div class="account-info">
<div class="account-label">Active Account</div>
<div id="activeAccount" class="account-address mono">--</div>
</div>
<span id="roleBadge" class="role-badge">--</span>
<button class="btn-logout" id="btn-logout" onclick="window.app.logout()">⏻ Sign Out</button>
</div>
</header>
<!-- ════════ APP LAYOUT ════════ -->
<div class="app-layout">
<!-- ─── LEFT SIDEBAR ─── -->
<aside class="sidebar">
<!-- User Profile -->
<div class="sidebar-section">
<div class="section-label">Logged In As</div>
<div class="user-profile-card" id="user-profile-card">
<div class="user-icon" id="user-icon">🏭</div>
<div>
<div class="user-role-name" id="user-role-name">--</div>
<div class="user-account mono" id="user-account">--</div>
</div>
</div>
</div>
<!-- Supply Chain Pipeline -->
<div class="sidebar-section">
<div class="section-label">Supply Chain Flow</div>
<div class="pipeline">
<div class="pipeline-step"><div class="step-dot dot-mfr">🏭</div><div class="step-label">Manufacturing</div></div>
<div class="pipeline-line"></div>
<div class="pipeline-step"><div class="step-dot dot-distr">🚚</div><div class="step-label">Distribution</div></div>
<div class="pipeline-line"></div>
<div class="pipeline-step"><div class="step-dot dot-ret">🏪</div><div class="step-label">Retail</div></div>
</div>
<div class="regulator-badge">
<span>⚖️ Regulator</span>
<span class="reg-label">Oversees all stages</span>
</div>
</div>
<!-- Product Lookup -->
<div class="sidebar-section">
<div class="section-label">Product Lookup</div>
<div class="form-group">
<label>Serial Number</label>
<input type="text" id="audit-serial" class="input-field" placeholder="e.g. P9005">
</div>
<button class="btn btn-ghost" id="btn-view-details" onclick="window.app.getDetails()">📊 View Role Details</button>
<button class="btn btn-ghost" id="btn-check-stock" onclick="window.app.checkStock()">📦 Check Stock & Owner</button>
<div id="auditResult" class="audit-result"></div>
</div>
</aside>
<!-- ─── MAIN CONTENT ─── -->
<main class="main-content">
<!-- MANUFACTURER PANEL -->
<div id="panel-manufacturer" class="role-panel hidden">
<div class="panel-header">
<div class="panel-title">🏭 Manufacturer Dashboard</div>
<div class="panel-desc">Register pharmaceutical products as ERC-721 NFTs and transfer ownership to the Distributor</div>
</div>
<div class="panel-grid">
<div class="card">
<div class="card-header"><div class="card-title">Product Registration</div><div class="card-badge">NFT MINT</div></div>
<div class="form-group"><label>Serial Number</label><input type="text" id="reg-serial" class="input-field" placeholder="e.g. P9005"></div>
<div class="form-group"><label>Batch ID</label><input type="text" id="reg-batch" class="input-field" placeholder="e.g. BATCH-ALPHA"></div>
<div class="form-group"><label>Product Name</label><input type="text" id="reg-name" class="input-field" placeholder="e.g. Antiviral-X"></div>
<div class="form-row">
<div class="form-group"><label>Quantity</label><input type="number" id="reg-qty" class="input-field" placeholder="1000" min="1"></div>
<div class="form-group"><label>Price / Unit</label><input type="number" id="reg-price" class="input-field" placeholder="100" min="1"></div>
</div>
<div class="form-group"><label>Origin</label><input type="text" id="reg-origin" class="input-field" placeholder="e.g. India"></div>
<button class="btn btn-primary" id="btn-register" onclick="window.app.registerProduct()">⛏️ Register Product & Mint NFT</button>
</div>
<div class="card">
<div class="card-header"><div class="card-title">Transfer to Distributor</div><div class="card-badge">TRANSFER</div></div>
<div class="card-info"><p>Transfer the NFT ownership to the Distributor. The Distributor must have already submitted a buy request.</p></div>
<div class="form-group"><label>Serial Number</label><input type="text" id="mfr-serial" class="input-field" placeholder="e.g. P9005"></div>
<button class="btn btn-primary" id="btn-transfer-distr" onclick="window.app.transferToDistributor()">📤 Transfer NFT to Distributor</button>
</div>
</div>
</div>
<!-- DISTRIBUTOR PANEL -->
<div id="panel-distributor" class="role-panel hidden">
<div class="panel-header">
<div class="panel-title">🚚 Distributor Dashboard</div>
<div class="panel-desc">Request products, set markup prices, and transfer to the Retailer</div>
</div>
<div class="panel-grid">
<div class="card">
<div class="card-header"><div class="card-title">Purchase Request</div><div class="card-badge">REQUEST</div></div>
<div class="card-info"><p>Submit a buy request to the Manufacturer for a registered product.</p></div>
<div class="form-group"><label>Serial Number</label><input type="text" id="distr-req-serial" class="input-field" placeholder="e.g. P9005"></div>
<button class="btn btn-primary" id="btn-distr-request" onclick="window.app.distributorRequest()">🛒 Submit Buy Request to Manufacturer</button>
</div>
<div class="card">
<div class="card-header"><div class="card-title">Set Markup Price</div><div class="card-badge">PRICING</div></div>
<div class="card-info"><p>After receiving the product NFT, set your distribution markup price.</p></div>
<div class="form-group"><label>Serial Number</label><input type="text" id="distr-price-serial" class="input-field" placeholder="e.g. P9005"></div>
<div class="form-group"><label>New Markup Price (units)</label><input type="number" id="markup-price" class="input-field" placeholder="e.g. 150" min="1"></div>
<button class="btn btn-primary" id="btn-update-price" onclick="window.app.updatePrice()">💰 Update Sale Price</button>
</div>
<div class="card" style="grid-column:1/-1;">
<div class="card-header"><div class="card-title">Transfer to Retailer</div><div class="card-badge">TRANSFER</div></div>
<div class="card-info"><p>Transfer ownership to the Retailer. The Retailer must have submitted a buy request first, and markup price should be set.</p></div>
<div class="form-group"><label>Serial Number</label><input type="text" id="distr-transfer-serial" class="input-field" placeholder="e.g. P9005"></div>
<button class="btn btn-secondary" id="btn-transfer-ret" onclick="window.app.transferToRetailer()">📤 Transfer NFT to Retailer</button>
</div>
</div>
</div>
<!-- RETAILER PANEL -->
<div id="panel-retailer" class="role-panel hidden">
<div class="panel-header">
<div class="panel-title">🏪 Retailer Dashboard</div>
<div class="panel-desc">Request products from the Distributor and manage your inventory</div>
</div>
<div class="panel-grid">
<div class="card">
<div class="card-header"><div class="card-title">Purchase Request</div><div class="card-badge">REQUEST</div></div>
<div class="card-info"><p>Submit a buy request to the Distributor for a product they currently own.</p></div>
<div class="form-group"><label>Serial Number</label><input type="text" id="ret-req-serial" class="input-field" placeholder="e.g. P9005"></div>
<button class="btn btn-primary" id="btn-ret-request" onclick="window.app.retailerRequest()">🛒 Submit Buy Request to Distributor</button>
</div>
<div class="card">
<div class="card-header"><div class="card-title">Inventory Management</div><div class="card-badge">STOCK</div></div>
<div class="card-info"><p>Record sold units by reducing the on-chain stock count.</p></div>
<div class="form-group"><label>Serial Number</label><input type="text" id="ret-reduce-serial" class="input-field" placeholder="e.g. P9005"></div>
<div class="form-group"><label>Units Sold</label><input type="number" id="reduce-amount" class="input-field" placeholder="e.g. 50" min="1"></div>
<button class="btn btn-primary" id="btn-reduce-qty" onclick="window.app.reduceQuantity()">📉 Reduce Stock (Record Sale)</button>
</div>
</div>
</div>
<!-- REGULATOR PANEL -->
<div id="panel-regulator" class="role-panel hidden">
<div class="panel-header">
<div class="panel-title">⚖️ Regulator Dashboard</div>
<div class="panel-desc">Full audit authority — query any product, view complete supply chain data, and issue Smart Recalls</div>
</div>
<div class="panel-grid">
<!-- Full-width: Product Audit Query -->
<div class="card" style="grid-column:1/-1;">
<div class="card-header">
<div class="card-title">📋 Full Product Audit</div>
<div class="card-badge">REGULATOR VIEW</div>
</div>
<div class="card-info">
<p>Enter any product serial number to retrieve its <strong>complete supply chain history</strong> — quantities, both prices, current owner, stage, recall status, and dates.</p>
</div>
<div style="display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end;">
<div class="form-group">
<label>Product Serial Number</label>
<input type="text" id="reg-audit-serial" class="input-field" placeholder="e.g. P9005" onkeydown="if(event.key==='Enter')window.app.regulatorAudit()">
</div>
<button class="btn btn-primary" style="width:auto; padding:10px 20px;" onclick="window.app.regulatorAudit()">🔍 Run Audit</button>
</div>
<div style="display:flex; gap:10px; flex-wrap:wrap; margin-top:-4px;">
<button class="btn btn-ghost" style="width:auto; padding:8px 16px;" onclick="window.app.regulatorStockCheck()">📦 Check Stock & Owner</button>
<button class="btn btn-ghost" style="width:auto; padding:8px 16px;" onclick="window.app.regulatorBalanceCheck()">🪙 Check NFT Balances</button>
</div>
<!-- Audit Results -->
<div id="reg-audit-result" class="reg-audit-display hidden">
<div class="reg-audit-grid" id="reg-audit-grid"></div>
</div>
</div>
<!-- Smart Recall -->
<div class="card recall-card">
<div class="card-header"><div class="card-title">🚨 Smart Recall</div><div class="card-badge badge-danger">CRITICAL ACTION</div></div>
<div class="warning-box">⚠️ <strong>Irreversible.</strong> Issuing a recall permanently flags the product on-chain and blocks ALL future transfers. This cannot be undone.</div>
<div class="form-group"><label>Serial Number to Recall</label><input type="text" id="reg-recall-serial" class="input-field" placeholder="e.g. P9005"></div>
<button class="btn btn-danger" id="btn-smart-recall" onclick="window.app.smartRecall()">🚨 Issue Smart Recall</button>
</div>
<!-- Audit Permissions Summary -->
<div class="card">
<div class="card-header"><div class="card-title">🔑 Access Privileges</div><div class="card-badge">FULL ACCESS</div></div>
<div class="audit-perms">
<div class="perm-item">✅ View all product identifiers & metadata</div>
<div class="perm-item">✅ See initial & current quantities</div>
<div class="perm-item">✅ View manufacturer price & distributor markup</div>
<div class="perm-item">✅ Track current owner & supply chain stage</div>
<div class="perm-item">✅ View manufacturing & expiry dates</div>
<div class="perm-item">✅ Check NFT token balances per actor</div>
<div class="perm-item">✅ Issue Smart Recalls to freeze any product</div>
</div>
</div>
</div>
</div>
</main>
<!-- ─── RIGHT PANEL: Log ─── -->
<aside class="log-panel">
<div class="log-header">
<div class="log-tabs">
<button class="log-tab active" id="tab-tx" onclick="window.app.switchLogTab('tx')">TX Log</button>
<button class="log-tab" id="tab-chain" onclick="window.app.switchLogTab('chain')">⛓ Chain Events</button>
</div>
<button class="btn-clear" onclick="window.app.clearLog()">Clear</button>
</div>
<div id="txLog" class="tx-log">
<div class="log-entry log-info"><span class="log-time">[--:--:--]</span> ℹ️ Awaiting blockchain connection...</div>
</div>
<div id="chainLog" class="tx-log hidden"></div>
</aside>
</div><!-- end .app-layout -->
<script src="https://cdn.jsdelivr.net/npm/web3@1.10.0/dist/web3.min.js"></script>
<script src="app.js"></script>
</body>
</html>