|
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>Unified Approval Workspace - ERP System</title>
|
|
6
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
7
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@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
|
"sap-blue": "#0a6ed1",
|
|
19
|
"sap-gray": "#f2f2f2"
|
|
20
|
},
|
|
21
|
fontFamily: {
|
|
22
|
"display": ["Inter"]
|
|
23
|
},
|
|
24
|
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
|
|
25
|
},
|
|
26
|
},
|
|
27
|
}
|
|
28
|
</script>
|
|
29
|
<style type="text/tailwindcss">body {
|
|
30
|
font-family: "Inter", sans-serif
|
|
31
|
}
|
|
32
|
.material-symbols-outlined {
|
|
33
|
font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24
|
|
34
|
}
|
|
35
|
.timeline-line {
|
|
36
|
width: 2px;
|
|
37
|
background-color: #e7ebf3;
|
|
38
|
position: absolute;
|
|
39
|
top: 24px;
|
|
40
|
bottom: 0;
|
|
41
|
left: 11px
|
|
42
|
}
|
|
43
|
.sap-table-row:hover {
|
|
44
|
background-color: #f0f7ff
|
|
45
|
}
|
|
46
|
.sap-table-row.selected {
|
|
47
|
background-color: #e5effa;
|
|
48
|
border-left: 4px solid #135bec
|
|
49
|
}
|
|
50
|
input[type="date"]::-webkit-calendar-picker-indicator {
|
|
51
|
filter: invert(0.4);
|
|
52
|
cursor: pointer
|
|
53
|
}
|
|
54
|
.dark input[type="date"]::-webkit-calendar-picker-indicator {
|
|
55
|
filter: invert(0.8)
|
|
56
|
}
|
|
57
|
select {
|
|
58
|
background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuB8s720FVY92-9GMM9U7ugOE3Lzl8Q7mIW0OD5cLUG6MF3g5ASoea_PGg0BIeGdJDwpwBxKhmFLWzSro8HQDERUTQrJLNqW0xG9k8IxGYSbB2x2vrLFblYgetQ3P9dWOZIy0tw522Wm_fgCZ3-kMQ6Ff-a4HDfspkgIPQ13VqIY2mG7V7kYF2Ssj8ggqi0uqddWu3AMg37BJSW-IHpZZaJEqfGa6FnSY5-w4QtOIzDs5g-ib0vXz_XD7IQMBJLZWMm3MFPf0wifomWL);
|
|
59
|
background-position: right 0.5rem center;
|
|
60
|
background-repeat: no-repeat;
|
|
61
|
background-size: 1.5em 1.5em;
|
|
62
|
padding-right: 2.5rem;
|
|
63
|
-webkit-appearance: none;
|
|
64
|
-moz-appearance: none;
|
|
65
|
appearance: none
|
|
66
|
}</style>
|
|
67
|
</head>
|
|
68
|
<body class="bg-background-light dark:bg-background-dark font-display text-[#0d121b] dark:text-white min-h-screen">
|
|
69
|
<div class="layout-container flex h-full grow flex-col">
|
|
70
|
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#e7ebf3] dark:border-b-gray-800 bg-white dark:bg-[#1a212f] px-10 py-3 sticky top-0 z-50">
|
|
71
|
<div class="flex items-center gap-8">
|
|
72
|
<div class="flex items-center gap-4 text-primary">
|
|
73
|
<div class="size-6">
|
|
74
|
<svg fill="currentColor" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
|
75
|
<path d="M4 42.4379C4 42.4379 14.0962 36.0744 24 41.1692C35.0664 46.8624 44 42.2078 44 42.2078L44 7.01134C44 7.01134 35.068 11.6577 24.0031 5.96913C14.0971 0.876274 4 7.27094 4 7.27094L4 42.4379Z"></path>
|
|
76
|
</svg>
|
|
77
|
</div>
|
|
78
|
<h2 class="text-[#0d121b] dark:text-white text-lg font-bold leading-tight tracking-[-0.015em]">Enterprise ERP</h2>
|
|
79
|
</div>
|
|
80
|
<nav class="hidden md:flex items-center gap-9">
|
|
81
|
<a class="text-[#0d121b] dark:text-gray-300 text-sm font-medium leading-normal hover:text-primary" href="#">Dashboard</a>
|
|
82
|
<a class="text-[#0d121b] dark:text-gray-300 text-sm font-medium leading-normal hover:text-primary" href="#">Documents</a>
|
|
83
|
<a class="text-primary text-sm font-bold leading-normal border-b-2 border-primary py-4 -mb-4" href="#">Approvals</a>
|
|
84
|
<a class="text-[#0d121b] dark:text-gray-300 text-sm font-medium leading-normal hover:text-primary" href="#">Reports</a>
|
|
85
|
</nav>
|
|
86
|
</div>
|
|
87
|
<div class="flex flex-1 justify-end gap-6 items-center">
|
|
88
|
<div class="flex gap-2">
|
|
89
|
<button class="flex items-center justify-center rounded-lg h-10 w-10 bg-[#e7ebf3] dark:bg-gray-800 text-[#0d121b] dark:text-white">
|
|
90
|
<span class="material-symbols-outlined text-xl">notifications</span>
|
|
91
|
</button>
|
|
92
|
</div>
|
|
93
|
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 border-2 border-white dark:border-gray-800" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuA7W3Y9oNguVStfem7lAIK8K2LfW6C1BpiXuuYWjg4kwhJ79s5Iq4LlDZtsOPFuinFydQKZZfqU8GiSFURCd4d1qfoGKTmflQMpX_hCHzKyZN4VaL3BQ0eLUDYJuHlRre1XjGtUASOUlpyr_Y9u4wPmNgd_sgZmC-x30yzSGp93WSwJrjtABTqROjgm0-cvHgZpl5iXz8AGtGUApTEs0xQdqgCupu8s0LCgQS1icd1goKY3xk-zmjJ0-MaZQ3MIdgwk2MOW3exIPfmH");'></div>
|
|
94
|
</div>
|
|
95
|
</header>
|
|
96
|
<main class="flex-1 flex flex-col p-6 gap-6 max-w-[1600px] mx-auto w-full">
|
|
97
|
<section class="bg-white dark:bg-[#1a212f] rounded-xl border border-[#e7ebf3] dark:border-gray-800 shadow-sm overflow-hidden flex flex-col">
|
|
98
|
<div class="p-4 border-b border-[#e7ebf3] dark:border-gray-800 flex flex-wrap items-center justify-between gap-4">
|
|
99
|
<div class="flex items-center gap-6">
|
|
100
|
<h1 class="text-xl font-bold">Document Approvals</h1>
|
|
101
|
<div class="flex items-center gap-4">
|
|
102
|
<div class="flex items-center gap-2 bg-[#f8f9fc] dark:bg-gray-800 px-3 py-1.5 rounded-lg border border-[#e7ebf3] dark:border-gray-700">
|
|
103
|
<span class="text-[10px] font-bold text-[#4c669a] uppercase mr-1">Document Type:</span>
|
|
104
|
<select class="bg-transparent border-none text-sm focus:ring-0 p-0 pr-8 font-medium">
|
|
105
|
<option>All Types</option>
|
|
106
|
<option>Goods Receipt</option>
|
|
107
|
<option>Purchase Order</option>
|
|
108
|
<option>Sales Order</option>
|
|
109
|
<option>Stock Transfer</option>
|
|
110
|
<option>Invoice</option>
|
|
111
|
</select>
|
|
112
|
</div>
|
|
113
|
<div class="flex items-center gap-2 bg-[#f8f9fc] dark:bg-gray-800 px-3 py-1.5 rounded-lg border border-[#e7ebf3] dark:border-gray-700">
|
|
114
|
<span class="material-symbols-outlined text-sm text-[#4c669a]">date_range</span>
|
|
115
|
<div class="flex items-center gap-2">
|
|
116
|
<input class="bg-transparent border-none text-xs focus:ring-0 p-0 w-28 font-medium" placeholder="Start Date" type="date"/>
|
|
117
|
<span class="text-gray-400 text-xs">—</span>
|
|
118
|
<input class="bg-transparent border-none text-xs focus:ring-0 p-0 w-28 font-medium" placeholder="End Date" type="date"/>
|
|
119
|
</div>
|
|
120
|
</div>
|
|
121
|
<button class="text-primary text-sm font-semibold hover:underline">Clear Filters</button>
|
|
122
|
</div>
|
|
123
|
</div>
|
|
124
|
<div class="flex items-center gap-2">
|
|
125
|
<div class="relative">
|
|
126
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-lg">search</span>
|
|
127
|
<input class="pl-10 pr-4 py-2 bg-[#f8f9fc] dark:bg-gray-800 border-[#e7ebf3] dark:border-gray-700 rounded-lg text-sm w-64 focus:ring-primary focus:border-primary" placeholder="Search Document No..." type="text"/>
|
|
128
|
</div>
|
|
129
|
</div>
|
|
130
|
</div>
|
|
131
|
<div class="overflow-x-auto">
|
|
132
|
<table class="w-full text-left border-collapse">
|
|
133
|
<thead class="bg-gray-50 dark:bg-gray-800/50">
|
|
134
|
<tr>
|
|
135
|
<th class="px-6 py-3 text-xs font-bold text-[#4c669a] dark:text-gray-400 uppercase tracking-widest">Document Type</th>
|
|
136
|
<th class="px-6 py-3 text-xs font-bold text-[#4c669a] dark:text-gray-400 uppercase tracking-widest">Document No</th>
|
|
137
|
<th class="px-6 py-3 text-xs font-bold text-[#4c669a] dark:text-gray-400 uppercase tracking-widest">Created Date</th>
|
|
138
|
<th class="px-6 py-3 text-xs font-bold text-[#4c669a] dark:text-gray-400 uppercase tracking-widest">Requester</th>
|
|
139
|
<th class="px-6 py-3 text-xs font-bold text-[#4c669a] dark:text-gray-400 uppercase tracking-widest">Status</th>
|
|
140
|
</tr>
|
|
141
|
</thead>
|
|
142
|
<tbody class="divide-y divide-[#e7ebf3] dark:divide-gray-800">
|
|
143
|
<tr class="sap-table-row selected cursor-pointer">
|
|
144
|
<td class="px-6 py-4 text-sm">
|
|
145
|
<div class="flex items-center gap-2">
|
|
146
|
<span class="material-symbols-outlined text-gray-400 text-lg">local_shipping</span>
|
|
147
|
<span>Goods Receipt</span>
|
|
148
|
</div>
|
|
149
|
</td>
|
|
150
|
<td class="px-6 py-4 font-bold text-primary">GR-2401-00012</td>
|
|
151
|
<td class="px-6 py-4 text-sm">Oct 24, 2023</td>
|
|
152
|
<td class="px-6 py-4 text-sm">John Doe</td>
|
|
153
|
<td class="px-6 py-4">
|
|
154
|
<span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase bg-amber-100 text-amber-700 border border-amber-200">Pending Action</span>
|
|
155
|
</td>
|
|
156
|
</tr>
|
|
157
|
<tr class="sap-table-row cursor-pointer">
|
|
158
|
<td class="px-6 py-4 text-sm">
|
|
159
|
<div class="flex items-center gap-2">
|
|
160
|
<span class="material-symbols-outlined text-gray-400 text-lg">shopping_cart</span>
|
|
161
|
<span>Purchase Order</span>
|
|
162
|
</div>
|
|
163
|
</td>
|
|
164
|
<td class="px-6 py-4 font-bold text-primary">PO-2023-9901</td>
|
|
165
|
<td class="px-6 py-4 text-sm">Oct 23, 2023</td>
|
|
166
|
<td class="px-6 py-4 text-sm">Sarah Jenkins</td>
|
|
167
|
<td class="px-6 py-4">
|
|
168
|
<span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase bg-amber-100 text-amber-700 border border-amber-200">Pending Action</span>
|
|
169
|
</td>
|
|
170
|
</tr>
|
|
171
|
<tr class="sap-table-row cursor-pointer">
|
|
172
|
<td class="px-6 py-4 text-sm">
|
|
173
|
<div class="flex items-center gap-2">
|
|
174
|
<span class="material-symbols-outlined text-gray-400 text-lg">sell</span>
|
|
175
|
<span>Sales Order</span>
|
|
176
|
</div>
|
|
177
|
</td>
|
|
178
|
<td class="px-6 py-4 font-bold text-primary">SO-4502-1200</td>
|
|
179
|
<td class="px-6 py-4 text-sm">Oct 22, 2023</td>
|
|
180
|
<td class="px-6 py-4 text-sm">Mike Ross</td>
|
|
181
|
<td class="px-6 py-4">
|
|
182
|
<span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase bg-blue-100 text-blue-700 border border-blue-200">In Review</span>
|
|
183
|
</td>
|
|
184
|
</tr>
|
|
185
|
<tr class="sap-table-row cursor-pointer">
|
|
186
|
<td class="px-6 py-4 text-sm">
|
|
187
|
<div class="flex items-center gap-2">
|
|
188
|
<span class="material-symbols-outlined text-gray-400 text-lg">inventory_2</span>
|
|
189
|
<span>Stock Transfer</span>
|
|
190
|
</div>
|
|
191
|
</td>
|
|
192
|
<td class="px-6 py-4 font-bold text-primary">ST-1102-4412</td>
|
|
193
|
<td class="px-6 py-4 text-sm">Oct 21, 2023</td>
|
|
194
|
<td class="px-6 py-4 text-sm">Emily Blunt</td>
|
|
195
|
<td class="px-6 py-4">
|
|
196
|
<span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase bg-green-100 text-green-700 border border-green-200">Approved</span>
|
|
197
|
</td>
|
|
198
|
</tr>
|
|
199
|
<tr class="sap-table-row cursor-pointer">
|
|
200
|
<td class="px-6 py-4 text-sm">
|
|
201
|
<div class="flex items-center gap-2">
|
|
202
|
<span class="material-symbols-outlined text-gray-400 text-lg">receipt</span>
|
|
203
|
<span>Invoice</span>
|
|
204
|
</div>
|
|
205
|
</td>
|
|
206
|
<td class="px-6 py-4 font-bold text-primary">INV-8891-002</td>
|
|
207
|
<td class="px-6 py-4 text-sm">Oct 21, 2023</td>
|
|
208
|
<td class="px-6 py-4 text-sm">Robert Downey</td>
|
|
209
|
<td class="px-6 py-4">
|
|
210
|
<span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase bg-amber-100 text-amber-700 border border-amber-200">Pending Action</span>
|
|
211
|
</td>
|
|
212
|
</tr>
|
|
213
|
</tbody>
|
|
214
|
</table>
|
|
215
|
</div>
|
|
216
|
<div class="px-6 py-4 border-t border-[#e7ebf3] dark:border-gray-800 flex items-center justify-between bg-[#fcfcfd] dark:bg-[#1a212f]">
|
|
217
|
<div class="flex items-center gap-6">
|
|
218
|
<div class="flex items-center gap-2">
|
|
219
|
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">Rows per page:</span>
|
|
220
|
<select class="bg-white dark:bg-gray-800 border border-[#e7ebf3] dark:border-gray-700 rounded-md text-xs font-semibold py-1 px-2 focus:ring-primary focus:border-primary cursor-pointer min-w-[70px]">
|
|
221
|
<option value="10">10</option>
|
|
222
|
<option selected="" value="20">20</option>
|
|
223
|
<option value="50">50</option>
|
|
224
|
</select>
|
|
225
|
</div>
|
|
226
|
<span class="text-xs font-medium text-gray-500 dark:text-gray-400">1-5 of 150 documents</span>
|
|
227
|
</div>
|
|
228
|
<div class="flex items-center gap-1">
|
|
229
|
<button class="p-1 text-gray-400 hover:text-primary hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors disabled:opacity-30 disabled:cursor-not-allowed" disabled="">
|
|
230
|
<span class="material-symbols-outlined text-xl">chevron_left</span>
|
|
231
|
</button>
|
|
232
|
<div class="flex items-center gap-1 mx-2">
|
|
233
|
<button class="h-8 w-8 flex items-center justify-center text-xs font-bold rounded-md bg-primary text-white">1</button>
|
|
234
|
<button class="h-8 w-8 flex items-center justify-center text-xs font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">2</button>
|
|
235
|
<button class="h-8 w-8 flex items-center justify-center text-xs font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">3</button>
|
|
236
|
<span class="px-1 text-gray-400 text-xs">...</span>
|
|
237
|
<button class="h-8 w-8 flex items-center justify-center text-xs font-medium rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">8</button>
|
|
238
|
</div>
|
|
239
|
<button class="p-1 text-gray-500 hover:text-primary hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors">
|
|
240
|
<span class="material-symbols-outlined text-xl">chevron_right</span>
|
|
241
|
</button>
|
|
242
|
</div>
|
|
243
|
</div>
|
|
244
|
</section>
|
|
245
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
246
|
<div class="lg:col-span-2 flex flex-col gap-6">
|
|
247
|
<div class="bg-white dark:bg-[#1a212f] rounded-xl border border-[#e7ebf3] dark:border-gray-800 shadow-sm overflow-hidden">
|
|
248
|
<div class="p-6 border-b border-[#e7ebf3] dark:border-gray-800 flex justify-between items-center">
|
|
249
|
<div class="flex items-center gap-3">
|
|
250
|
<h2 class="text-xl font-bold">Document Detail: GR-2401-00012</h2>
|
|
251
|
<span class="px-3 py-1 bg-amber-50 dark:bg-amber-900/20 text-amber-600 text-[10px] font-bold uppercase rounded border border-amber-100">Action Required</span>
|
|
252
|
</div>
|
|
253
|
<div class="flex gap-2">
|
|
254
|
<button class="p-2 hover:bg-gray-100 rounded-lg transition-colors"><span class="material-symbols-outlined text-gray-500">print</span></button>
|
|
255
|
<button class="p-2 hover:bg-gray-100 rounded-lg transition-colors"><span class="material-symbols-outlined text-gray-500">share</span></button>
|
|
256
|
</div>
|
|
257
|
</div>
|
|
258
|
<div class="p-6">
|
|
259
|
<h3 class="text-xs font-bold text-[#4c669a] uppercase tracking-widest mb-4">Document Summary</h3>
|
|
260
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-4 bg-[#f8f9fc] dark:bg-gray-800 rounded-lg">
|
|
261
|
<div class="flex flex-col gap-1">
|
|
262
|
<span class="text-[10px] font-bold text-[#4c669a] uppercase">Requester</span>
|
|
263
|
<div class="flex items-center gap-2 mt-1">
|
|
264
|
<div class="size-6 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-[10px]">JD</div>
|
|
265
|
<p class="text-sm font-semibold">John Doe</p>
|
|
266
|
</div>
|
|
267
|
</div>
|
|
268
|
<div class="flex flex-col gap-1">
|
|
269
|
<span class="text-[10px] font-bold text-[#4c669a] uppercase">Department</span>
|
|
270
|
<p class="text-sm font-semibold mt-1">Logistics & Supply Chain</p>
|
|
271
|
</div>
|
|
272
|
<div class="flex flex-col gap-1">
|
|
273
|
<span class="text-[10px] font-bold text-[#4c669a] uppercase">Total Value</span>
|
|
274
|
<p class="text-lg font-black text-primary">$12,450.00</p>
|
|
275
|
</div>
|
|
276
|
</div>
|
|
277
|
</div>
|
|
278
|
<div class="px-6 pb-6">
|
|
279
|
<h3 class="text-xs font-bold text-[#4c669a] uppercase tracking-widest mb-4">Line Items</h3>
|
|
280
|
<div class="overflow-x-auto border border-[#e7ebf3] dark:border-gray-800 rounded-lg">
|
|
281
|
<table class="w-full text-left text-sm">
|
|
282
|
<thead class="bg-gray-50 dark:bg-gray-800/50 border-b border-[#e7ebf3] dark:border-gray-800">
|
|
283
|
<tr>
|
|
284
|
<th class="px-4 py-2 font-bold text-[#4c669a]">Description</th>
|
|
285
|
<th class="px-4 py-2 font-bold text-[#4c669a] text-right">Qty</th>
|
|
286
|
<th class="px-4 py-2 font-bold text-[#4c669a] text-right">Price</th>
|
|
287
|
<th class="px-4 py-2 font-bold text-[#4c669a] text-right">Total</th>
|
|
288
|
</tr>
|
|
289
|
</thead>
|
|
290
|
<tbody class="divide-y divide-[#e7ebf3] dark:divide-gray-800">
|
|
291
|
<tr>
|
|
292
|
<td class="px-4 py-3">Hydraulic Pump System - Type B</td>
|
|
293
|
<td class="px-4 py-3 text-right">2</td>
|
|
294
|
<td class="px-4 py-3 text-right">$4,500.00</td>
|
|
295
|
<td class="px-4 py-3 text-right font-bold">$9,000.00</td>
|
|
296
|
</tr>
|
|
297
|
<tr>
|
|
298
|
<td class="px-4 py-3">Air Filter Assembly</td>
|
|
299
|
<td class="px-4 py-3 text-right">10</td>
|
|
300
|
<td class="px-4 py-3 text-right">$345.00</td>
|
|
301
|
<td class="px-4 py-3 text-right font-bold">$3,450.00</td>
|
|
302
|
</tr>
|
|
303
|
</tbody>
|
|
304
|
</table>
|
|
305
|
</div>
|
|
306
|
</div>
|
|
307
|
</div>
|
|
308
|
<div class="bg-white dark:bg-[#1a212f] rounded-xl border-2 border-primary/30 shadow-lg p-6">
|
|
309
|
<div class="flex items-center gap-2 mb-4">
|
|
310
|
<span class="material-symbols-outlined text-primary">rate_review</span>
|
|
311
|
<h3 class="text-lg font-bold">Review Verdict</h3>
|
|
312
|
</div>
|
|
313
|
<div class="flex flex-col gap-3">
|
|
314
|
<label class="text-xs font-bold text-[#4c669a]">Comments <span class="text-red-500">*</span></label>
|
|
315
|
<textarea class="w-full rounded-lg border-[#e7ebf3] dark:border-gray-700 bg-[#f8f9fc] dark:bg-gray-800 focus:ring-primary focus:border-primary text-sm p-3 min-h-[100px]" placeholder="Add your feedback here..."></textarea>
|
|
316
|
<div class="flex justify-end gap-3 pt-2">
|
|
317
|
<button class="px-6 py-2.5 bg-white border border-red-200 text-red-600 text-sm font-bold rounded-lg hover:bg-red-50 transition-colors">Reject</button>
|
|
318
|
<button class="px-10 py-2.5 bg-primary text-white text-sm font-bold rounded-lg hover:bg-blue-700 shadow-md transition-colors">Approve Document</button>
|
|
319
|
</div>
|
|
320
|
</div>
|
|
321
|
</div>
|
|
322
|
</div>
|
|
323
|
<div class="flex flex-col gap-6">
|
|
324
|
<div class="bg-white dark:bg-[#1a212f] rounded-xl border border-[#e7ebf3] dark:border-gray-800 shadow-sm p-6">
|
|
325
|
<h3 class="text-sm font-bold uppercase tracking-wider text-[#4c669a] mb-6">Approval Timeline</h3>
|
|
326
|
<div class="relative flex flex-col gap-8">
|
|
327
|
<div class="relative flex gap-4">
|
|
328
|
<div class="timeline-line"></div>
|
|
329
|
<div class="z-10 flex h-6 w-6 items-center justify-center rounded-full bg-green-500 text-white shadow-sm">
|
|
330
|
<span class="material-symbols-outlined text-xs">check</span>
|
|
331
|
</div>
|
|
332
|
<div>
|
|
333
|
<p class="text-xs font-bold">Document Created</p>
|
|
334
|
<p class="text-[10px] text-[#4c669a]">Oct 24, 10:00 AM</p>
|
|
335
|
</div>
|
|
336
|
</div>
|
|
337
|
<div class="relative flex gap-4">
|
|
338
|
<div class="timeline-line"></div>
|
|
339
|
<div class="z-10 flex h-6 w-6 items-center justify-center rounded-full bg-primary ring-4 ring-primary/20 text-white shadow-sm">
|
|
340
|
<span class="material-symbols-outlined text-xs">pending</span>
|
|
341
|
</div>
|
|
342
|
<div>
|
|
343
|
<p class="text-xs font-bold text-primary">Awaiting Your Approval</p>
|
|
344
|
<p class="text-[10px] text-primary/70">Current Step</p>
|
|
345
|
</div>
|
|
346
|
</div>
|
|
347
|
<div class="relative flex gap-4 opacity-50">
|
|
348
|
<div class="z-10 flex h-6 w-6 items-center justify-center rounded-full bg-gray-200 text-gray-500 shadow-sm">
|
|
349
|
<span class="material-symbols-outlined text-xs">person</span>
|
|
350
|
</div>
|
|
351
|
<div>
|
|
352
|
<p class="text-xs font-bold">Final Finance Review</p>
|
|
353
|
<p class="text-[10px] text-[#4c669a]">Upcoming</p>
|
|
354
|
</div>
|
|
355
|
</div>
|
|
356
|
</div>
|
|
357
|
</div>
|
|
358
|
<div class="bg-white dark:bg-[#1a212f] rounded-xl border border-[#e7ebf3] dark:border-gray-800 shadow-sm p-6">
|
|
359
|
<div class="flex justify-between items-center mb-4">
|
|
360
|
<h3 class="text-sm font-bold uppercase tracking-wider text-[#4c669a]">Attachments (2)</h3>
|
|
361
|
<button class="text-primary text-[10px] font-bold hover:underline">+ Upload</button>
|
|
362
|
</div>
|
|
363
|
<div class="flex flex-col gap-3">
|
|
364
|
<div class="flex items-center gap-3 p-2 rounded-lg border border-dashed border-[#e7ebf3] hover:bg-gray-50 cursor-pointer transition-colors">
|
|
365
|
<div class="size-8 bg-red-100 rounded flex items-center justify-center text-red-600">
|
|
366
|
<span class="material-symbols-outlined text-lg">picture_as_pdf</span>
|
|
367
|
</div>
|
|
368
|
<div class="flex-1 overflow-hidden">
|
|
369
|
<p class="text-[10px] font-bold truncate">Vendor_Invoice_772.pdf</p>
|
|
370
|
<p class="text-[9px] text-[#4c669a]">1.2 MB</p>
|
|
371
|
</div>
|
|
372
|
</div>
|
|
373
|
<div class="flex items-center gap-3 p-2 rounded-lg border border-dashed border-[#e7ebf3] hover:bg-gray-50 cursor-pointer transition-colors">
|
|
374
|
<div class="size-8 bg-blue-100 rounded flex items-center justify-center text-blue-600">
|
|
375
|
<span class="material-symbols-outlined text-lg">image</span>
|
|
376
|
</div>
|
|
377
|
<div class="flex-1 overflow-hidden">
|
|
378
|
<p class="text-[10px] font-bold truncate">Delivery_Proof.jpg</p>
|
|
379
|
<p class="text-[9px] text-[#4c669a]">850 KB</p>
|
|
380
|
</div>
|
|
381
|
</div>
|
|
382
|
</div>
|
|
383
|
</div>
|
|
384
|
<div class="bg-white dark:bg-[#1a212f] rounded-xl border border-[#e7ebf3] dark:border-gray-800 shadow-sm p-6">
|
|
385
|
<h3 class="text-sm font-bold uppercase tracking-wider text-[#4c669a] mb-4">Linked Objects</h3>
|
|
386
|
<div class="flex flex-col gap-3">
|
|
387
|
<a class="flex items-center gap-3 p-3 bg-white dark:bg-gray-800 border border-[#e7ebf3] dark:border-gray-700 rounded-lg hover:border-primary hover:bg-blue-50/50 transition-all group" href="#">
|
|
388
|
<span class="material-symbols-outlined text-gray-400 group-hover:text-primary text-xl">receipt_long</span>
|
|
389
|
<div class="flex-1">
|
|
390
|
<p class="text-[10px] font-bold text-[#4c669a] uppercase leading-none mb-1">Purchase Order</p>
|
|
391
|
<p class="text-sm font-bold text-primary">PO-2023-9901</p>
|
|
392
|
</div>
|
|
393
|
<span class="material-symbols-outlined text-gray-300 text-sm">open_in_new</span>
|
|
394
|
</a>
|
|
395
|
<a class="flex items-center gap-3 p-3 bg-white dark:bg-gray-800 border border-[#e7ebf3] dark:border-gray-700 rounded-lg hover:border-primary hover:bg-blue-50/50 transition-all group" href="#">
|
|
396
|
<span class="material-symbols-outlined text-gray-400 group-hover:text-primary text-xl">description</span>
|
|
397
|
<div class="flex-1">
|
|
398
|
<p class="text-[10px] font-bold text-[#4c669a] uppercase leading-none mb-1">Invoice Ref</p>
|
|
399
|
<p class="text-sm font-bold text-primary">INV-772-2023</p>
|
|
400
|
</div>
|
|
401
|
<span class="material-symbols-outlined text-gray-300 text-sm">open_in_new</span>
|
|
402
|
</a>
|
|
403
|
</div>
|
|
404
|
</div>
|
|
405
|
</div>
|
|
406
|
</div>
|
|
407
|
</main>
|
|
408
|
<div class="fixed bottom-6 right-6 z-50 hidden" id="success-toast">
|
|
409
|
<div class="bg-white dark:bg-[#1a212f] border-l-4 border-green-500 shadow-2xl rounded-lg p-4 flex items-center gap-4">
|
|
410
|
<span class="material-symbols-outlined text-green-500">check_circle</span>
|
|
411
|
<div>
|
|
412
|
<p class="text-sm font-bold">Document Approved</p>
|
|
413
|
<p class="text-xs text-[#4c669a]">Workflow has been updated successfully.</p>
|
|
414
|
</div>
|
|
415
|
</div>
|
|
416
|
</div>
|
|
417
|
</div>
|
|
418
|
|
|
419
|
</body></html>
|
