|
1
|
<!DOCTYPE html>
|
|
2
|
<html class="light" lang="en"><head>
|
|
3
|
<meta charset="utf-8"/>
|
|
4
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
5
|
<title>ERP Dashboard - Document Approval</title>
|
|
6
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
7
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
|
8
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
9
|
<script id="tailwind-config">
|
|
10
|
tailwind.config = {
|
|
11
|
darkMode: "class",
|
|
12
|
theme: {
|
|
13
|
extend: {
|
|
14
|
colors: {
|
|
15
|
"primary": "#135bec",
|
|
16
|
"background-light": "#f6f6f8",
|
|
17
|
"background-dark": "#101622",
|
|
18
|
},
|
|
19
|
fontFamily: {
|
|
20
|
"display": ["Inter"]
|
|
21
|
},
|
|
22
|
borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
|
|
23
|
},
|
|
24
|
},
|
|
25
|
}
|
|
26
|
</script>
|
|
27
|
<style>
|
|
28
|
body {
|
|
29
|
font-family: 'Inter', sans-serif;
|
|
30
|
}
|
|
31
|
.material-symbols-outlined {
|
|
32
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
33
|
}
|
|
34
|
</style>
|
|
35
|
</head>
|
|
36
|
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100">
|
|
37
|
<div class="flex h-screen overflow-hidden">
|
|
38
|
<aside class="w-64 border-r border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 flex flex-col justify-between shrink-0">
|
|
39
|
<div class="flex flex-col gap-6 p-4">
|
|
40
|
<div class="flex items-center gap-3 px-2">
|
|
41
|
<div class="bg-primary rounded-lg p-1.5 text-white">
|
|
42
|
<span class="material-symbols-outlined block">deployed_code</span>
|
|
43
|
</div>
|
|
44
|
<div class="flex flex-col">
|
|
45
|
<h1 class="text-slate-900 dark:text-white text-base font-bold leading-tight">ERP System</h1>
|
|
46
|
<p class="text-slate-500 text-xs font-medium uppercase tracking-wider">Enterprise Ed.</p>
|
|
47
|
</div>
|
|
48
|
</div>
|
|
49
|
<nav class="flex flex-col gap-1">
|
|
50
|
<div class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary/10 text-primary">
|
|
51
|
<span class="material-symbols-outlined text-[20px]">dashboard</span>
|
|
52
|
<p class="text-sm font-semibold">Dashboard</p>
|
|
53
|
</div>
|
|
54
|
<div class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer">
|
|
55
|
<span class="material-symbols-outlined text-[20px]">shopping_cart</span>
|
|
56
|
<p class="text-sm font-medium">Procurement</p>
|
|
57
|
</div>
|
|
58
|
<div class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer">
|
|
59
|
<span class="material-symbols-outlined text-[20px]">leaderboard</span>
|
|
60
|
<p class="text-sm font-medium">Sales</p>
|
|
61
|
</div>
|
|
62
|
<div class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer">
|
|
63
|
<span class="material-symbols-outlined text-[20px]">inventory_2</span>
|
|
64
|
<p class="text-sm font-medium">Inventory</p>
|
|
65
|
</div>
|
|
66
|
<div class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer">
|
|
67
|
<span class="material-symbols-outlined text-[20px]">account_balance_wallet</span>
|
|
68
|
<p class="text-sm font-medium">Finance</p>
|
|
69
|
</div>
|
|
70
|
</nav>
|
|
71
|
</div>
|
|
72
|
<div class="p-4 border-t border-slate-100 dark:border-slate-800">
|
|
73
|
<div class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors cursor-pointer">
|
|
74
|
<span class="material-symbols-outlined text-[20px]">settings</span>
|
|
75
|
<p class="text-sm font-medium">Settings</p>
|
|
76
|
</div>
|
|
77
|
<div class="mt-4 flex items-center gap-3 p-2">
|
|
78
|
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-8 border border-slate-200" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBSL6lKXucRhSUps0Ag070qLXs0s-uvqS2AR9peZdG0Li2XgdSPQK8Z_P8zIb2LeFfRUpWDEl40WPkpzzjXcH-yHe4MkDuvwdi0UaeKt6CGhdwGKKzI08UTShTC6oiJqZ6gUsGfOAXdaXEsEaz3CowlGRCWP-YtTmNT4QcyKeWG4Oart0vjhn6JTtoX85BPTgiDpin7JKg5sBrd4JP0nGRZy1aMMcgezISncylJnUB_7Ehmh9h19pgN_kvZDMJGfViD3sto6S42YjcP");'></div>
|
|
79
|
<div class="flex flex-col">
|
|
80
|
<p class="text-xs font-bold text-slate-900 dark:text-white">Alex Rivera</p>
|
|
81
|
<p class="text-[10px] text-slate-500">Ops Manager</p>
|
|
82
|
</div>
|
|
83
|
</div>
|
|
84
|
</div>
|
|
85
|
</aside>
|
|
86
|
<main class="flex-1 overflow-y-auto flex flex-col">
|
|
87
|
<header class="h-16 flex items-center justify-between border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 px-8 sticky top-0 z-10">
|
|
88
|
<div class="flex items-center gap-8">
|
|
89
|
<div class="flex items-center gap-2">
|
|
90
|
<a class="text-slate-400 hover:text-primary text-sm font-medium" href="#">Home</a>
|
|
91
|
<span class="text-slate-300 text-sm">/</span>
|
|
92
|
<span class="text-slate-900 dark:text-white text-sm font-semibold">Dashboard</span>
|
|
93
|
</div>
|
|
94
|
<div class="h-9 w-px bg-slate-200 dark:bg-slate-800"></div>
|
|
95
|
<div class="relative w-72">
|
|
96
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
97
|
<span class="material-symbols-outlined text-slate-400 text-[20px]">search</span>
|
|
98
|
</div>
|
|
99
|
<input class="block w-full h-10 pl-10 pr-3 py-2 border-none bg-slate-100 dark:bg-slate-800 rounded-lg text-sm placeholder-slate-500 focus:ring-2 focus:ring-primary focus:bg-white dark:focus:bg-slate-700 transition-all" placeholder="Search orders, docs, or materials..." type="text"/>
|
|
100
|
</div>
|
|
101
|
</div>
|
|
102
|
<div class="flex items-center gap-4">
|
|
103
|
<div class="hidden lg:flex items-center gap-6 mr-4">
|
|
104
|
<a class="text-slate-600 dark:text-slate-400 text-sm font-semibold hover:text-primary transition-colors" href="#">Reports</a>
|
|
105
|
<a class="text-slate-600 dark:text-slate-400 text-sm font-semibold hover:text-primary transition-colors" href="#">Approvals</a>
|
|
106
|
</div>
|
|
107
|
<button class="relative p-2 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800">
|
|
108
|
<span class="material-symbols-outlined">notifications</span>
|
|
109
|
<span class="absolute top-1.5 right-1.5 block h-2 w-2 rounded-full bg-red-500 ring-2 ring-white"></span>
|
|
110
|
</button>
|
|
111
|
<button class="p-2 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800">
|
|
112
|
<span class="material-symbols-outlined">help</span>
|
|
113
|
</button>
|
|
114
|
</div>
|
|
115
|
</header>
|
|
116
|
<div class="p-8 max-w-7xl mx-auto w-full flex flex-col gap-8">
|
|
117
|
<div class="flex flex-col gap-1">
|
|
118
|
<h2 class="text-3xl font-extrabold tracking-tight text-slate-900 dark:text-white">Operations Overview</h2>
|
|
119
|
<p class="text-slate-500 dark:text-slate-400 font-medium">Manage pending tasks and review system-wide procurement health.</p>
|
|
120
|
</div>
|
|
121
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
122
|
<div class="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex flex-col gap-2">
|
|
123
|
<div class="flex items-center justify-between">
|
|
124
|
<p class="text-slate-500 dark:text-slate-400 text-sm font-semibold uppercase tracking-wider">Total Month Spend</p>
|
|
125
|
<span class="material-symbols-outlined text-primary">payments</span>
|
|
126
|
</div>
|
|
127
|
<p class="text-3xl font-bold text-slate-900 dark:text-white">$124,500.00</p>
|
|
128
|
<div class="flex items-center gap-1.5 text-emerald-600 font-bold text-sm">
|
|
129
|
<span class="material-symbols-outlined text-[16px]">trending_up</span>
|
|
130
|
<span>+12.4%</span>
|
|
131
|
<span class="text-slate-400 font-normal">vs last month</span>
|
|
132
|
</div>
|
|
133
|
</div>
|
|
134
|
<div class="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex flex-col gap-2">
|
|
135
|
<div class="flex items-center justify-between">
|
|
136
|
<p class="text-slate-500 dark:text-slate-400 text-sm font-semibold uppercase tracking-wider">Inventory Health</p>
|
|
137
|
<span class="material-symbols-outlined text-orange-500">inventory</span>
|
|
138
|
</div>
|
|
139
|
<p class="text-3xl font-bold text-slate-900 dark:text-white">94.2%</p>
|
|
140
|
<div class="flex items-center gap-1.5 text-emerald-600 font-bold text-sm">
|
|
141
|
<span class="material-symbols-outlined text-[16px]">check_circle</span>
|
|
142
|
<span>Optimal</span>
|
|
143
|
<span class="text-slate-400 font-normal">range (90%+)</span>
|
|
144
|
</div>
|
|
145
|
</div>
|
|
146
|
<div class="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex flex-col gap-2">
|
|
147
|
<div class="flex items-center justify-between">
|
|
148
|
<p class="text-slate-500 dark:text-slate-400 text-sm font-semibold uppercase tracking-wider">Active POs</p>
|
|
149
|
<span class="material-symbols-outlined text-purple-500">receipt_long</span>
|
|
150
|
</div>
|
|
151
|
<p class="text-3xl font-bold text-slate-900 dark:text-white">32</p>
|
|
152
|
<div class="flex items-center gap-1.5 text-slate-500 font-bold text-sm">
|
|
153
|
<span class="material-symbols-outlined text-[16px]">schedule</span>
|
|
154
|
<span>8 closing today</span>
|
|
155
|
</div>
|
|
156
|
</div>
|
|
157
|
</div>
|
|
158
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
159
|
<div class="lg:col-span-1 flex flex-col gap-4">
|
|
160
|
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden h-full flex flex-col">
|
|
161
|
<div class="p-5 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
|
|
162
|
<div class="flex items-center gap-2">
|
|
163
|
<h3 class="text-lg font-bold text-slate-900 dark:text-white">Document Approval</h3>
|
|
164
|
<span class="px-2 py-0.5 bg-primary/10 text-primary text-xs font-bold rounded-full border border-primary/20">7 Pending</span>
|
|
165
|
</div>
|
|
166
|
<span class="material-symbols-outlined text-slate-400 text-[20px]">assignment_turned_in</span>
|
|
167
|
</div>
|
|
168
|
<div class="flex-1 overflow-y-auto">
|
|
169
|
<div class="flex flex-col">
|
|
170
|
<div class="group flex items-center justify-between px-5 py-4 border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors cursor-pointer">
|
|
171
|
<div class="flex items-center gap-3">
|
|
172
|
<div class="size-10 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 flex items-center justify-center">
|
|
173
|
<span class="material-symbols-outlined">local_shipping</span>
|
|
174
|
</div>
|
|
175
|
<div>
|
|
176
|
<p class="text-sm font-bold text-slate-900 dark:text-white">Goods Receipt</p>
|
|
177
|
<p class="text-xs text-slate-500">Awaiting inspection</p>
|
|
178
|
</div>
|
|
179
|
</div>
|
|
180
|
<div class="flex items-center gap-2">
|
|
181
|
<span class="text-sm font-bold text-slate-900 dark:text-white">3</span>
|
|
182
|
<span class="material-symbols-outlined text-slate-300 group-hover:text-primary transition-colors text-[20px]">chevron_right</span>
|
|
183
|
</div>
|
|
184
|
</div>
|
|
185
|
<div class="group flex items-center justify-between px-5 py-4 border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors cursor-pointer">
|
|
186
|
<div class="flex items-center gap-3">
|
|
187
|
<div class="size-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 text-blue-600 flex items-center justify-center">
|
|
188
|
<span class="material-symbols-outlined">request_quote</span>
|
|
189
|
</div>
|
|
190
|
<div>
|
|
191
|
<p class="text-sm font-bold text-slate-900 dark:text-white">Purchase Order</p>
|
|
192
|
<p class="text-xs text-slate-500">Requires signature</p>
|
|
193
|
</div>
|
|
194
|
</div>
|
|
195
|
<div class="flex items-center gap-2">
|
|
196
|
<span class="text-sm font-bold text-slate-900 dark:text-white">2</span>
|
|
197
|
<span class="material-symbols-outlined text-slate-300 group-hover:text-primary transition-colors text-[20px]">chevron_right</span>
|
|
198
|
</div>
|
|
199
|
</div>
|
|
200
|
<div class="group flex items-center justify-between px-5 py-4 border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors cursor-pointer">
|
|
201
|
<div class="flex items-center gap-3">
|
|
202
|
<div class="size-10 rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-600 flex items-center justify-center">
|
|
203
|
<span class="material-symbols-outlined">sell</span>
|
|
204
|
</div>
|
|
205
|
<div>
|
|
206
|
<p class="text-sm font-bold text-slate-900 dark:text-white">Sales Order</p>
|
|
207
|
<p class="text-xs text-slate-500">Credit check limit</p>
|
|
208
|
</div>
|
|
209
|
</div>
|
|
210
|
<div class="flex items-center gap-2">
|
|
211
|
<span class="text-sm font-bold text-slate-900 dark:text-white">1</span>
|
|
212
|
<span class="material-symbols-outlined text-slate-300 group-hover:text-primary transition-colors text-[20px]">chevron_right</span>
|
|
213
|
</div>
|
|
214
|
</div>
|
|
215
|
<div class="group flex items-center justify-between px-5 py-4 border-b border-slate-50 dark:border-slate-800/50 hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors cursor-pointer">
|
|
216
|
<div class="flex items-center gap-3">
|
|
217
|
<div class="size-10 rounded-lg bg-purple-100 dark:bg-purple-900/30 text-purple-600 flex items-center justify-center">
|
|
218
|
<span class="material-symbols-outlined">move_up</span>
|
|
219
|
</div>
|
|
220
|
<div>
|
|
221
|
<p class="text-sm font-bold text-slate-900 dark:text-white">Stock Transfer</p>
|
|
222
|
<p class="text-xs text-slate-500">Inter-warehouse</p>
|
|
223
|
</div>
|
|
224
|
</div>
|
|
225
|
<div class="flex items-center gap-2">
|
|
226
|
<span class="text-sm font-bold text-slate-900 dark:text-white">1</span>
|
|
227
|
<span class="material-symbols-outlined text-slate-300 group-hover:text-primary transition-colors text-[20px]">chevron_right</span>
|
|
228
|
</div>
|
|
229
|
</div>
|
|
230
|
</div>
|
|
231
|
</div>
|
|
232
|
<div class="p-5 bg-slate-50 dark:bg-slate-800/20">
|
|
233
|
<button class="w-full py-2.5 bg-primary hover:bg-primary/90 text-white text-sm font-bold rounded-lg transition-all shadow-sm shadow-primary/20">View All Approvals</button>
|
|
234
|
</div>
|
|
235
|
</div>
|
|
236
|
</div>
|
|
237
|
<div class="lg:col-span-2 flex flex-col gap-6">
|
|
238
|
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden">
|
|
239
|
<div class="p-5 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
|
|
240
|
<h3 class="text-lg font-bold text-slate-900 dark:text-white">Recent Procurement Actions</h3>
|
|
241
|
<button class="text-primary text-sm font-bold hover:underline">Download CSV</button>
|
|
242
|
</div>
|
|
243
|
<div class="overflow-x-auto">
|
|
244
|
<table class="w-full text-left border-collapse">
|
|
245
|
<thead>
|
|
246
|
<tr class="bg-slate-50 dark:bg-slate-800/50">
|
|
247
|
<th class="px-6 py-3 text-[11px] font-bold text-slate-500 uppercase tracking-widest">Document ID</th>
|
|
248
|
<th class="px-6 py-3 text-[11px] font-bold text-slate-500 uppercase tracking-widest">Vendor / Partner</th>
|
|
249
|
<th class="px-6 py-3 text-[11px] font-bold text-slate-500 uppercase tracking-widest">Amount</th>
|
|
250
|
<th class="px-6 py-3 text-[11px] font-bold text-slate-500 uppercase tracking-widest">Status</th>
|
|
251
|
</tr>
|
|
252
|
</thead>
|
|
253
|
<tbody class="divide-y divide-slate-100 dark:divide-slate-800">
|
|
254
|
<tr class="hover:bg-slate-50/50 dark:hover:bg-slate-800/30 transition-colors">
|
|
255
|
<td class="px-6 py-4">
|
|
256
|
<p class="text-sm font-bold text-slate-900 dark:text-white">PO-2023-0042</p>
|
|
257
|
<p class="text-xs text-slate-400">Mar 12, 10:24 AM</p>
|
|
258
|
</td>
|
|
259
|
<td class="px-6 py-4 text-sm font-medium text-slate-600 dark:text-slate-300">Global Tech Solutions</td>
|
|
260
|
<td class="px-6 py-4 text-sm font-bold text-slate-900 dark:text-white">$12,400.00</td>
|
|
261
|
<td class="px-6 py-4">
|
|
262
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-bold bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">
|
|
263
|
<span class="size-1.5 rounded-full bg-emerald-500"></span>
|
|
264
|
Approved
|
|
265
|
</span>
|
|
266
|
</td>
|
|
267
|
</tr>
|
|
268
|
<tr class="hover:bg-slate-50/50 dark:hover:bg-slate-800/30 transition-colors">
|
|
269
|
<td class="px-6 py-4">
|
|
270
|
<p class="text-sm font-bold text-slate-900 dark:text-white">GR-552-X</p>
|
|
271
|
<p class="text-xs text-slate-400">Mar 12, 09:15 AM</p>
|
|
272
|
</td>
|
|
273
|
<td class="px-6 py-4 text-sm font-medium text-slate-600 dark:text-slate-300">Logistics Corp Int.</td>
|
|
274
|
<td class="px-6 py-4 text-sm font-bold text-slate-900 dark:text-white">$4,250.00</td>
|
|
275
|
<td class="px-6 py-4">
|
|
276
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-bold bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
|
|
277
|
<span class="size-1.5 rounded-full bg-amber-500"></span>
|
|
278
|
Pending
|
|
279
|
</span>
|
|
280
|
</td>
|
|
281
|
</tr>
|
|
282
|
<tr class="hover:bg-slate-50/50 dark:hover:bg-slate-800/30 transition-colors">
|
|
283
|
<td class="px-6 py-4">
|
|
284
|
<p class="text-sm font-bold text-slate-900 dark:text-white">SO-992-K</p>
|
|
285
|
<p class="text-xs text-slate-400">Mar 11, 04:30 PM</p>
|
|
286
|
</td>
|
|
287
|
<td class="px-6 py-4 text-sm font-medium text-slate-600 dark:text-slate-300">Acme Industries</td>
|
|
288
|
<td class="px-6 py-4 text-sm font-bold text-slate-900 dark:text-white">$32,100.00</td>
|
|
289
|
<td class="px-6 py-4">
|
|
290
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-bold bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-400">
|
|
291
|
<span class="size-1.5 rounded-full bg-slate-400"></span>
|
|
292
|
Draft
|
|
293
|
</span>
|
|
294
|
</td>
|
|
295
|
</tr>
|
|
296
|
</tbody>
|
|
297
|
</table>
|
|
298
|
</div>
|
|
299
|
<div class="p-4 border-t border-slate-100 dark:border-slate-800 flex justify-center">
|
|
300
|
<button class="text-slate-500 hover:text-primary text-sm font-bold flex items-center gap-2">
|
|
301
|
Show 10 more results
|
|
302
|
<span class="material-symbols-outlined text-[18px]">expand_more</span>
|
|
303
|
</button>
|
|
304
|
</div>
|
|
305
|
</div>
|
|
306
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
307
|
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm p-5 flex flex-col gap-4">
|
|
308
|
<div class="flex items-center justify-between">
|
|
309
|
<h3 class="text-sm font-bold text-slate-900 dark:text-white">Warehouse Capacity</h3>
|
|
310
|
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Real-time</span>
|
|
311
|
</div>
|
|
312
|
<div class="h-44 w-full bg-slate-50 dark:bg-slate-800/50 rounded-lg flex flex-col p-4">
|
|
313
|
<div class="flex items-end gap-3 h-28 w-full justify-around border-b border-slate-200 dark:border-slate-700 pb-1">
|
|
314
|
<div class="flex flex-col items-center flex-1 h-full justify-end">
|
|
315
|
<div class="w-full max-w-[32px] bg-emerald-500 rounded-t h-[35%] relative group" title="Jakarta Main: 35% Used">
|
|
316
|
<div class="absolute -top-6 left-1/2 -translate-x-1/2 hidden group-hover:block bg-slate-800 text-white text-[10px] py-0.5 px-1.5 rounded whitespace-nowrap">35%</div>
|
|
317
|
</div>
|
|
318
|
</div>
|
|
319
|
<div class="flex flex-col items-center flex-1 h-full justify-end">
|
|
320
|
<div class="w-full max-w-[32px] bg-red-500 rounded-t h-[92%] relative group" title="Surabaya Hub: 92% Used">
|
|
321
|
<div class="absolute -top-6 left-1/2 -translate-x-1/2 hidden group-hover:block bg-slate-800 text-white text-[10px] py-0.5 px-1.5 rounded whitespace-nowrap font-bold">92%</div>
|
|
322
|
</div>
|
|
323
|
</div>
|
|
324
|
<div class="flex flex-col items-center flex-1 h-full justify-end">
|
|
325
|
<div class="w-full max-w-[32px] bg-orange-500 rounded-t h-[78%] relative group" title="Bandung Store: 78% Used">
|
|
326
|
<div class="absolute -top-6 left-1/2 -translate-x-1/2 hidden group-hover:block bg-slate-800 text-white text-[10px] py-0.5 px-1.5 rounded whitespace-nowrap">78%</div>
|
|
327
|
</div>
|
|
328
|
</div>
|
|
329
|
<div class="flex flex-col items-center flex-1 h-full justify-end">
|
|
330
|
<div class="w-full max-w-[32px] bg-emerald-500 rounded-t h-[22%] relative group" title="Medan WH: 22% Used">
|
|
331
|
<div class="absolute -top-6 left-1/2 -translate-x-1/2 hidden group-hover:block bg-slate-800 text-white text-[10px] py-0.5 px-1.5 rounded whitespace-nowrap">22%</div>
|
|
332
|
</div>
|
|
333
|
</div>
|
|
334
|
<div class="flex flex-col items-center flex-1 h-full justify-end">
|
|
335
|
<div class="w-full max-w-[32px] bg-primary rounded-t h-[60%] relative group" title="Semarang Dist: 60% Used">
|
|
336
|
<div class="absolute -top-6 left-1/2 -translate-x-1/2 hidden group-hover:block bg-slate-800 text-white text-[10px] py-0.5 px-1.5 rounded whitespace-nowrap">60%</div>
|
|
337
|
</div>
|
|
338
|
</div>
|
|
339
|
</div>
|
|
340
|
<div class="flex items-start gap-3 w-full justify-around pt-2">
|
|
341
|
<div class="flex-1 text-center">
|
|
342
|
<p class="text-[9px] font-bold text-slate-600 dark:text-slate-400 leading-tight">Jakarta<br/>Main</p>
|
|
343
|
</div>
|
|
344
|
<div class="flex-1 text-center">
|
|
345
|
<p class="text-[9px] font-bold text-slate-600 dark:text-slate-400 leading-tight">Surabaya<br/>Hub</p>
|
|
346
|
</div>
|
|
347
|
<div class="flex-1 text-center">
|
|
348
|
<p class="text-[9px] font-bold text-slate-600 dark:text-slate-400 leading-tight">Bandung<br/>Store</p>
|
|
349
|
</div>
|
|
350
|
<div class="flex-1 text-center">
|
|
351
|
<p class="text-[9px] font-bold text-slate-600 dark:text-slate-400 leading-tight">Medan<br/>WH</p>
|
|
352
|
</div>
|
|
353
|
<div class="flex-1 text-center">
|
|
354
|
<p class="text-[9px] font-bold text-slate-600 dark:text-slate-400 leading-tight">Semarang<br/>Dist</p>
|
|
355
|
</div>
|
|
356
|
</div>
|
|
357
|
</div>
|
|
358
|
</div>
|
|
359
|
<div class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm p-5 flex flex-col gap-4">
|
|
360
|
<h3 class="text-sm font-bold text-slate-900 dark:text-white">System Notifications</h3>
|
|
361
|
<div class="flex flex-col gap-3">
|
|
362
|
<div class="flex gap-3 items-start">
|
|
363
|
<div class="size-2 mt-1.5 rounded-full bg-primary shrink-0"></div>
|
|
364
|
<p class="text-xs text-slate-600 dark:text-slate-400">Backup completed successfully for EMEA Database cluster.</p>
|
|
365
|
</div>
|
|
366
|
<div class="flex gap-3 items-start">
|
|
367
|
<div class="size-2 mt-1.5 rounded-full bg-orange-500 shrink-0"></div>
|
|
368
|
<p class="text-xs text-slate-600 dark:text-slate-400">3 SKUs falling below reorder threshold in Berlin Warehouse.</p>
|
|
369
|
</div>
|
|
370
|
<div class="flex gap-3 items-start">
|
|
371
|
<div class="size-2 mt-1.5 rounded-full bg-slate-300 shrink-0"></div>
|
|
372
|
<p class="text-xs text-slate-600 dark:text-slate-400">New vendor 'Titan Alloys' successfully onboarded.</p>
|
|
373
|
</div>
|
|
374
|
</div>
|
|
375
|
</div>
|
|
376
|
</div>
|
|
377
|
</div>
|
|
378
|
</div>
|
|
379
|
</div>
|
|
380
|
<footer class="mt-auto py-6 px-8 border-t border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 flex justify-between items-center text-xs text-slate-400 font-medium">
|
|
381
|
<div>© 2024 Enterprise Resource Planning System. All rights reserved.</div>
|
|
382
|
<div class="flex gap-6">
|
|
383
|
<a class="hover:text-primary" href="#">Documentation</a>
|
|
384
|
<a class="hover:text-primary" href="#">Security</a>
|
|
385
|
<a class="hover:text-primary" href="#">API Status</a>
|
|
386
|
</div>
|
|
387
|
</footer>
|
|
388
|
</main>
|
|
389
|
</div>
|
|
390
|
|
|
391
|
</body></html>
|
