Hugging Face's logo

Spaces:
FlipFlopsNSocks
/
undefined
Running

App Files Community
FlipFlopsNSocks commited on
Commit
a7fe11b
·
verified ·
1 Parent(s): 36952e0

Now the financial model

Browse files
Files changed (4) hide show
  1. earned-value.html +2 -2
  2. financial.html +505 -0
  3. index.html +2 -2
  4. tracking.html +2 -2
earned-value.html CHANGED
@@ -58,12 +58,12 @@
58
  </a>
59
  </li>
60
  <li>
61
- <a href="financial.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
62
  <i data-feather="dollar-sign" class="w-5 h-5"></i>
63
  <span>Financial</span>
64
  </a>
65
  </li>
66
- <li>
67
  <a href="tracking.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
68
  <i data-feather="activity" class="w-5 h-5"></i>
69
  <span>Tracking</span>
 
58
  </a>
59
  </li>
60
  <li>
61
+ <a href="financial.html" class="flex items-center space-x-2 p-2 rounded-lg bg-gray-700 text-white">
62
  <i data-feather="dollar-sign" class="w-5 h-5"></i>
63
  <span>Financial</span>
64
  </a>
65
  </li>
66
+ <li>
67
  <a href="tracking.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
68
  <i data-feather="activity" class="w-5 h-5"></i>
69
  <span>Tracking</span>
financial.html ADDED
@@ -0,0 +1,505 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Financial Module | PipeFlow Pro</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
11
+ <style>
12
+ .sidebar {
13
+ transition: all 0.3s ease;
14
+ }
15
+ .kpi-card {
16
+ transition: all 0.3s ease;
17
+ }
18
+ .kpi-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
21
+ }
22
+ .data-table th {
23
+ background-color: #f3f4f6;
24
+ font-weight: 600;
25
+ }
26
+ .data-table tr:nth-child(even) {
27
+ background-color: #f9fafb;
28
+ }
29
+ .data-table tr:hover {
30
+ background-color: #f1f5f9;
31
+ }
32
+ </style>
33
+ </head>
34
+ <body class="bg-gray-50 font-sans">
35
+ <!-- Vanta.js Background -->
36
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
37
+
38
+ <!-- Main Layout -->
39
+ <div class="relative z-10 flex h-screen overflow-hidden">
40
+ <!-- Sidebar -->
41
+ <div class="sidebar bg-gray-800 text-white w-64 flex-shrink-0 transform -translate-x-full md:translate-x-0 transition duration-300 ease-in-out">
42
+ <div class="p-4 border-b border-gray-700">
43
+ <div class="flex items-center space-x-2">
44
+ <i data-feather="pipe" class="text-blue-400"></i>
45
+ <h1 class="text-xl font-bold">PipeFlow Pro</h1>
46
+ </div>
47
+ <p class="text-gray-400 text-sm mt-1">Industrial Piping Command Center</p>
48
+ </div>
49
+
50
+ <nav class="p-4">
51
+ <div class="mb-6">
52
+ <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-3">Modules</h3>
53
+ <ul class="space-y-2">
54
+ <li>
55
+ <a href="index.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
56
+ <i data-feather="home" class="w-5 h-5"></i>
57
+ <span>Dashboard</span>
58
+ </a>
59
+ </li>
60
+ <li>
61
+ <a href="financial.html" class="flex items-center space-x-2 p-2 rounded-lg bg-gray-700 text-white">
62
+ <i data-feather="dollar-sign" class="w-5 h-5"></i>
63
+ <span>Financial</span>
64
+ </a>
65
+ </li>
66
+ <li>
67
+ <a href="tracking.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
68
+ <i data-feather="activity" class="w-5 h-5"></i>
69
+ <span>Tracking</span>
70
+ </a>
71
+ </li>
72
+ <li>
73
+ <a href="earned-value.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
74
+ <i data-feather="trending-up" class="w-5 h-5"></i>
75
+ <span>Earned Value</span>
76
+ </a>
77
+ </li>
78
+ <li>
79
+ <a href="plan-forecast.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
80
+ <i data-feather="calendar" class="w-5 h-5"></i>
81
+ <span>Plan & Forecast</span>
82
+ </a>
83
+ </li>
84
+ </ul>
85
+ </div>
86
+
87
+ <div>
88
+ <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-3">Settings</h3>
89
+ <ul class="space-y-2">
90
+ <li>
91
+ <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
92
+ <i data-feather="user" class="w-5 h-5"></i>
93
+ <span>Profile</span>
94
+ </a>
95
+ </li>
96
+ <li>
97
+ <a href="#" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
98
+ <i data-feather="settings" class="w-5 h-5"></i>
99
+ <span>Preferences</span>
100
+ </a>
101
+ </li>
102
+ </ul>
103
+ </div>
104
+ </nav>
105
+ </div>
106
+
107
+ <!-- Main Content -->
108
+ <div class="flex-1 overflow-auto">
109
+ <!-- Top Navigation -->
110
+ <header class="bg-white shadow-sm">
111
+ <div class="flex items-center justify-between px-6 py-4">
112
+ <div class="flex items-center space-x-4">
113
+ <button id="sidebar-toggle" class="md:hidden text-gray-500">
114
+ <i data-feather="menu"></i>
115
+ </button>
116
+ <h2 class="text-xl font-semibold text-gray-800">Financial Module</h2>
117
+ </div>
118
+
119
+ <div class="flex items-center space-x-4">
120
+ <div class="relative">
121
+ <i data-feather="bell" class="text-gray-500"></i>
122
+ <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
123
+ </div>
124
+ <div class="flex items-center space-x-2">
125
+ <img src="https://static.photos/people/40x40/1" alt="User" class="w-8 h-8 rounded-full">
126
+ <span class="text-sm font-medium">John Doe</span>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </header>
131
+
132
+ <!-- Financial Content -->
133
+ <main class="p-6">
134
+ <!-- Header -->
135
+ <div class="mb-6">
136
+ <div class="flex items-center justify-between">
137
+ <div>
138
+ <h3 class="text-lg font-semibold">Financial Overview</h3>
139
+ <p class="text-gray-600">Track budgets, expenditures, and financial performance</p>
140
+ </div>
141
+ <div class="flex space-x-3">
142
+ <button class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 flex items-center">
143
+ <i data-feather="download" class="w-4 h-4 mr-2"></i>
144
+ Export Report
145
+ </button>
146
+ <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center">
147
+ <i data-feather="plus" class="w-4 h-4 mr-2"></i>
148
+ Add Budget
149
+ </button>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Financial KPIs -->
155
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
156
+ <div class="kpi-card bg-white rounded-xl shadow-md overflow-hidden">
157
+ <div class="p-5">
158
+ <div class="flex items-center justify-between mb-4">
159
+ <span class="text-gray-500">Total Budget</span>
160
+ <div class="bg-blue-100 p-2 rounded-full">
161
+ <i data-feather="dollar-sign" class="text-blue-500 w-5 h-5"></i>
162
+ </div>
163
+ </div>
164
+ <h4 class="text-2xl font-bold mb-2">$4,200,000</h4>
165
+ <div class="flex items-center text-sm">
166
+ <span class="text-gray-500 mr-2">Project Budget</span>
167
+ </div>
168
+ </div>
169
+ </div>
170
+
171
+ <div class="kpi-card bg-white rounded-xl shadow-md overflow-hidden">
172
+ <div class="p-5">
173
+ <div class="flex items-center justify-between mb-4">
174
+ <span class="text-gray-500">Committed Costs</span>
175
+ <div class="bg-purple-100 p-2 rounded-full">
176
+ <i data-feather="file-text" class="text-purple-500 w-5 h-5"></i>
177
+ </div>
178
+ </div>
179
+ <h4 class="text-2xl font-bold mb-2">$3,150,000</h4>
180
+ <div class="flex items-center text-sm">
181
+ <span class="text-gray-500 mr-2">75% of budget</span>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="kpi-card bg-white rounded-xl shadow-md overflow-hidden">
187
+ <div class="p-5">
188
+ <div class="flex items-center justify-between mb-4">
189
+ <span class="text-gray-500">Actual Costs</span>
190
+ <div class="bg-green-100 p-2 rounded-full">
191
+ <i data-feather="credit-card" class="text-green-500 w-5 h-5"></i>
192
+ </div>
193
+ </div>
194
+ <h4 class="text-2xl font-bold mb-2">$2,940,000</h4>
195
+ <div class="flex items-center text-sm">
196
+ <span class="text-gray-500 mr-2">70% of budget</span>
197
+ </div>
198
+ </div>
199
+ </div>
200
+
201
+ <div class="kpi-card bg-white rounded-xl shadow-md overflow-hidden">
202
+ <div class="p-5">
203
+ <div class="flex items-center justify-between mb-4">
204
+ <span class="text-gray-500">Forecasted Variance</span>
205
+ <div class="bg-yellow-100 p-2 rounded-full">
206
+ <i data-feather="trending-up" class="text-yellow-500 w-5 h-5"></i>
207
+ </div>
208
+ </div>
209
+ <h4 class="text-2xl font-bold mb-2">-$105,000</h4>
210
+ <div class="flex items-center text-sm">
211
+ <span class="text-gray-500 mr-2">Under Budget</span>
212
+ </div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+
217
+ <!-- Financial Charts -->
218
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
219
+ <!-- Budget vs Actual -->
220
+ <div class="bg-white p-6 rounded-lg shadow">
221
+ <div class="flex items-center justify-between mb-4">
222
+ <h3 class="text-lg font-semibold">Budget vs Actual</h3>
223
+ <div class="flex space-x-2">
224
+ <button class="px-3 py-1 text-sm bg-blue-500 text-white rounded-lg">Monthly</button>
225
+ <button class="px-3 py-1 text-sm border border-gray-300 rounded-lg">Quarterly</button>
226
+ </div>
227
+ </div>
228
+ <canvas id="budgetChart" height="250"></canvas>
229
+ </div>
230
+
231
+ <!-- Cost Breakdown -->
232
+ <div class="bg-white p-6 rounded-lg shadow">
233
+ <div class="flex items-center justify-between mb-4">
234
+ <h3 class="text-lg font-semibold">Cost Breakdown</h3>
235
+ <div class="flex items-center space-x-2">
236
+ <span class="text-sm text-gray-500">By Category</span>
237
+ </div>
238
+ </div>
239
+ <canvas id="costBreakdownChart" height="250"></canvas>
240
+ </div>
241
+ </div>
242
+
243
+ <!-- Budget Allocation Table -->
244
+ <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
245
+ <div class="px-6 py-4 border-b border-gray-200">
246
+ <h3 class="text-lg font-semibold">Budget Allocation</h3>
247
+ </div>
248
+ <div class="overflow-x-auto">
249
+ <table class="data-table min-w-full divide-y divide-gray-200">
250
+ <thead>
251
+ <tr>
252
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
253
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Budget</th>
254
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Committed</th>
255
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actual</th>
256
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Variance</th>
257
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">% Spent</th>
258
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
259
+ </tr>
260
+ </thead>
261
+ <tbody class="bg-white divide-y divide-gray-200">
262
+ <tr>
263
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Materials</td>
264
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,680,000</td>
265
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,512,000</td>
266
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,428,000</td>
267
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500 font-medium">+$84,000</td>
268
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">85%</td>
269
+ <td class="px-6 py-4 whitespace-nowrap">
270
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Under Budget</span>
271
+ </td>
272
+ </tr>
273
+ <tr>
274
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Labor</td>
275
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,470,000</td>
276
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,260,000</td>
277
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,176,000</td>
278
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500 font-medium">+$84,000</td>
279
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">80%</td>
280
+ <td class="px-6 py-4 whitespace-nowrap">
281
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Under Budget</span>
282
+ </td>
283
+ </tr>
284
+ <tr>
285
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Equipment</td>
286
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$630,000</td>
287
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$504,000</td>
288
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$462,000</td>
289
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-500 font-medium">+$42,000</td>
290
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">73%</td>
291
+ <td class="px-6 py-4 whitespace-nowrap">
292
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Under Budget</span>
293
+ </td>
294
+ </tr>
295
+ <tr>
296
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Subcontractors</td>
297
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$420,000</td>
298
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$378,000</td>
299
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$378,000</td>
300
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 font-medium">$0</td>
301
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">90%</td>
302
+ <td class="px-6 py-4 whitespace-nowrap">
303
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">On Track</span>
304
+ </td>
305
+ </tr>
306
+ </tbody>
307
+ </table>
308
+ </div>
309
+ </div>
310
+
311
+ <!-- Recent Transactions -->
312
+ <div class="bg-white rounded-lg shadow overflow-hidden">
313
+ <div class="px-6 py-4 border-b border-gray-200">
314
+ <h3 class="text-lg font-semibold">Recent Transactions</h3>
315
+ </div>
316
+ <div class="overflow-x-auto">
317
+ <table class="data-table min-w-full divide-y divide-gray-200">
318
+ <thead>
319
+ <tr>
320
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
321
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
322
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th>
323
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
324
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
325
+ </tr>
326
+ </thead>
327
+ <tbody class="bg-white divide-y divide-gray-200">
328
+ <tr>
329
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-15</td>
330
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Pipe Material Delivery - Zone 3</td>
331
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Materials</td>
332
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$84,000</td>
333
+ <td class="px-6 py-4 whitespace-nowrap">
334
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Approved</span>
335
+ </td>
336
+ </tr>
337
+ <tr>
338
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-12</td>
339
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Welding Crew - Week 19</td>
340
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Labor</td>
341
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$42,000</td>
342
+ <td class="px-6 py-4 whitespace-nowrap">
343
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Approved</span>
344
+ </td>
345
+ </tr>
346
+ <tr>
347
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-10</td>
348
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Crane Rental - Zone 2</td>
349
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Equipment</td>
350
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$21,000</td>
351
+ <td class="px-6 py-4 whitespace-nowrap">
352
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Approved</span>
353
+ </td>
354
+ </tr>
355
+ <tr>
356
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-08</td>
357
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Inspection Services - Zone 1</td>
358
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Subcontractors</td>
359
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$12,600</td>
360
+ <td class="px-6 py-4 whitespace-nowrap">
361
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Approved</span>
362
+ </td>
363
+ </tr>
364
+ <tr>
365
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-05-05</td>
366
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Valve Installation - Zone 4</td>
367
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Materials</td>
368
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$33,600</td>
369
+ <td class="px-6 py-4 whitespace-nowrap">
370
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Approved</span>
371
+ </td>
372
+ </tr>
373
+ </tbody>
374
+ </table>
375
+ </div>
376
+ </div>
377
+ </main>
378
+ </div>
379
+ </div>
380
+
381
+ <script>
382
+ // Initialize Feather Icons
383
+ feather.replace();
384
+
385
+ // Initialize Vanta.js background
386
+ VANTA.NET({
387
+ el: "#vanta-bg",
388
+ color: 0x3b82f6,
389
+ backgroundColor: 0xf8fafc,
390
+ points: 12,
391
+ maxDistance: 20,
392
+ spacing: 15
393
+ });
394
+
395
+ // Toggle sidebar on mobile
396
+ document.getElementById('sidebar-toggle').addEventListener('click', function() {
397
+ document.querySelector('.sidebar').classList.toggle('translate-x-0');
398
+ });
399
+
400
+ // Initialize Budget vs Actual Chart
401
+ const budgetCtx = document.getElementById('budgetChart').getContext('2d');
402
+ const budgetChart = new Chart(budgetCtx, {
403
+ type: 'bar',
404
+ data: {
405
+ labels: ['Materials', 'Labor', 'Equipment', 'Subcontractors'],
406
+ datasets: [
407
+ {
408
+ label: 'Budget',
409
+ data: [1680000, 1470000, 630000, 420000],
410
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
411
+ borderColor: 'rgba(59, 130, 246, 1)',
412
+ borderWidth: 1
413
+ },
414
+ {
415
+ label: 'Actual',
416
+ data: [1428000, 1176000, 462000, 378000],
417
+ backgroundColor: 'rgba(16, 185, 129, 0.7)',
418
+ borderColor: 'rgba(16, 185, 129, 1)',
419
+ borderWidth: 1
420
+ }
421
+ ]
422
+ },
423
+ options: {
424
+ responsive: true,
425
+ plugins: {
426
+ legend: {
427
+ position: 'top',
428
+ },
429
+ tooltip: {
430
+ callbacks: {
431
+ label: function(context) {
432
+ let label = context.dataset.label || '';
433
+ if (label) {
434
+ label += ': ';
435
+ }
436
+ if (context.parsed.y !== null) {
437
+ label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed.y);
438
+ }
439
+ return label;
440
+ }
441
+ }
442
+ }
443
+ },
444
+ scales: {
445
+ y: {
446
+ beginAtZero: true,
447
+ ticks: {
448
+ callback: function(value) {
449
+ return '$' + (value / 1000) + 'K';
450
+ }
451
+ }
452
+ }
453
+ }
454
+ }
455
+ });
456
+
457
+ // Initialize Cost Breakdown Chart
458
+ const costCtx = document.getElementById('costBreakdownChart').getContext('2d');
459
+ const costBreakdownChart = new Chart(costCtx, {
460
+ type: 'doughnut',
461
+ data: {
462
+ labels: ['Materials', 'Labor', 'Equipment', 'Subcontractors'],
463
+ datasets: [{
464
+ data: [1680000, 1470000, 630000, 420000],
465
+ backgroundColor: [
466
+ 'rgba(59, 130, 246, 0.7)',
467
+ 'rgba(16, 185, 129, 0.7)',
468
+ 'rgba(245, 158, 11, 0.7)',
469
+ 'rgba(139, 92, 246, 0.7)'
470
+ ],
471
+ borderColor: [
472
+ 'rgba(59, 130, 246, 1)',
473
+ 'rgba(16, 185, 129, 1)',
474
+ 'rgba(245, 158, 11, 1)',
475
+ 'rgba(139, 92, 246, 1)'
476
+ ],
477
+ borderWidth: 1
478
+ }]
479
+ },
480
+ options: {
481
+ responsive: true,
482
+ plugins: {
483
+ legend: {
484
+ position: 'right',
485
+ },
486
+ tooltip: {
487
+ callbacks: {
488
+ label: function(context) {
489
+ let label = context.label || '';
490
+ if (label) {
491
+ label += ': ';
492
+ }
493
+ if (context.parsed !== null) {
494
+ label += new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(context.parsed);
495
+ }
496
+ return label;
497
+ }
498
+ }
499
+ }
500
+ }
501
+ }
502
+ });
503
+ </script>
504
+ </body>
505
+ </html>
index.html CHANGED
@@ -47,12 +47,12 @@
47
  <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-3">Modules</h3>
48
  <ul class="space-y-2">
49
  <li>
50
- <a href="#financial" class="flex items-center space-x-2 p-2 rounded-lg bg-gray-700 text-white">
51
  <i data-feather="dollar-sign" class="w-5 h-5"></i>
52
  <span>Financial</span>
53
  </a>
54
  </li>
55
- <li>
56
  <a href="tracking.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
57
  <i data-feather="activity" class="w-5 h-5"></i>
58
  <span>Tracking</span>
 
47
  <h3 class="text-xs uppercase tracking-wider text-gray-400 mb-3">Modules</h3>
48
  <ul class="space-y-2">
49
  <li>
50
+ <a href="financial.html" class="flex items-center space-x-2 p-2 rounded-lg bg-gray-700 text-white">
51
  <i data-feather="dollar-sign" class="w-5 h-5"></i>
52
  <span>Financial</span>
53
  </a>
54
  </li>
55
+ <li>
56
  <a href="tracking.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
57
  <i data-feather="activity" class="w-5 h-5"></i>
58
  <span>Tracking</span>
tracking.html CHANGED
@@ -57,12 +57,12 @@
57
  </a>
58
  </li>
59
  <li>
60
- <a href="financial.html" class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-700">
61
  <i data-feather="dollar-sign" class="w-5 h-5"></i>
62
  <span>Financial</span>
63
  </a>
64
  </li>
65
- <li>
66
  <a href="tracking.html" class="flex items-center space-x-2 p-2 rounded-lg bg-gray-700 text-white">
67
  <i data-feather="activity" class="w-5 h-5"></i>
68
  <span>Tracking</span>
 
57
  </a>
58
  </li>
59
  <li>
60
+ <a href="financial.html" class="flex items-center space-x-2 p-2 rounded-lg bg-gray-700 text-white">
61
  <i data-feather="dollar-sign" class="w-5 h-5"></i>
62
  <span>Financial</span>
63
  </a>
64
  </li>
65
+ <li>
66
  <a href="tracking.html" class="flex items-center space-x-2 p-2 rounded-lg bg-gray-700 text-white">
67
  <i data-feather="activity" class="w-5 h-5"></i>
68
  <span>Tracking</span>