Hugging Face's logo

Spaces:
csmith715
/
samplefinancialdashboard
Running

App Files Community
csmith715 commited on
Commit
d0b0c08
·
verified ·
1 Parent(s): e7c74e0

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +599 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Samplefinancialdashboard
3
- emoji: 📉
4
- colorFrom: blue
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: samplefinancialdashboard
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,599 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Plowman Capital Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .sidebar {
12
+ transition: all 0.3s;
13
+ }
14
+ .sidebar.collapsed {
15
+ width: 70px;
16
+ }
17
+ .sidebar.collapsed .nav-text {
18
+ display: none;
19
+ }
20
+ .sidebar.collapsed .logo-text {
21
+ display: none;
22
+ }
23
+ .sidebar.collapsed .expand-icon {
24
+ transform: rotate(180deg);
25
+ }
26
+ .content {
27
+ transition: all 0.3s;
28
+ }
29
+ .content.expanded {
30
+ margin-left: 70px;
31
+ }
32
+ .card-hover:hover {
33
+ transform: translateY(-5px);
34
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
35
+ }
36
+ .card-hover {
37
+ transition: all 0.3s ease;
38
+ }
39
+ .progress-bar {
40
+ height: 8px;
41
+ border-radius: 4px;
42
+ background-color: #e5e7eb;
43
+ }
44
+ .progress-fill {
45
+ height: 100%;
46
+ border-radius: 4px;
47
+ transition: width 0.6s ease;
48
+ }
49
+ .investment-card:hover .investment-actions {
50
+ opacity: 1;
51
+ }
52
+ .investment-actions {
53
+ opacity: 0;
54
+ transition: opacity 0.3s ease;
55
+ }
56
+ </style>
57
+ </head>
58
+ <body class="bg-gray-50 font-sans">
59
+ <div class="flex h-screen overflow-hidden">
60
+ <!-- Sidebar -->
61
+ <div class="sidebar bg-indigo-800 text-white w-64 flex flex-col fixed h-full z-10">
62
+ <div class="p-4 flex items-center justify-between border-b border-indigo-700">
63
+ <div class="flex items-center">
64
+ <i class="fas fa-chart-line text-2xl mr-3"></i>
65
+ <span class="logo-text text-xl font-bold">Plowman Capital</span>
66
+ </div>
67
+ <button id="toggleSidebar" class="expand-icon text-white focus:outline-none">
68
+ <i class="fas fa-chevron-left"></i>
69
+ </button>
70
+ </div>
71
+ <nav class="flex-1 overflow-y-auto py-4">
72
+ <div class="px-4 mb-8">
73
+ <div class="flex items-center px-4 py-3 bg-indigo-900 rounded-lg">
74
+ <i class="fas fa-home mr-3"></i>
75
+ <span class="nav-text">Dashboard</span>
76
+ </div>
77
+ </div>
78
+ <div class="px-4 mb-8">
79
+ <h3 class="nav-text uppercase text-xs font-semibold text-indigo-400 px-4 mb-2">Investments</h3>
80
+ <ul>
81
+ <li class="mb-1">
82
+ <a href="#" class="flex items-center px-4 py-2 text-indigo-200 hover:bg-indigo-700 rounded-lg">
83
+ <i class="fas fa-building mr-3"></i>
84
+ <span class="nav-text">Real Estate</span>
85
+ </a>
86
+ </li>
87
+ <li class="mb-1">
88
+ <a href="#" class="flex items-center px-4 py-2 text-indigo-200 hover:bg-indigo-700 rounded-lg">
89
+ <i class="fas fa-briefcase mr-3"></i>
90
+ <span class="nav-text">Business Stakes</span>
91
+ </a>
92
+ </li>
93
+ <li class="mb-1">
94
+ <a href="#" class="flex items-center px-4 py-2 text-indigo-200 hover:bg-indigo-700 rounded-lg">
95
+ <i class="fas fa-chart-pie mr-3"></i>
96
+ <span class="nav-text">Portfolio Analysis</span>
97
+ </a>
98
+ </li>
99
+ </ul>
100
+ </div>
101
+ <div class="px-4 mb-8">
102
+ <h3 class="nav-text uppercase text-xs font-semibold text-indigo-400 px-4 mb-2">Financials</h3>
103
+ <ul>
104
+ <li class="mb-1">
105
+ <a href="#" class="flex items-center px-4 py-2 text-indigo-200 hover:bg-indigo-700 rounded-lg">
106
+ <i class="fas fa-money-bill-wave mr-3"></i>
107
+ <span class="nav-text">Cash Flow</span>
108
+ </a>
109
+ </li>
110
+ <li class="mb-1">
111
+ <a href="#" class="flex items-center px-4 py-2 text-indigo-200 hover:bg-indigo-700 rounded-lg">
112
+ <i class="fas fa-percentage mr-3"></i>
113
+ <span class="nav-text">ROI & IRR</span>
114
+ </a>
115
+ </li>
116
+ <li class="mb-1">
117
+ <a href="#" class="flex items-center px-4 py-2 text-indigo-200 hover:bg-indigo-700 rounded-lg">
118
+ <i class="fas fa-hand-holding-usd mr-3"></i>
119
+ <span class="nav-text">Distributions</span>
120
+ </a>
121
+ </li>
122
+ </ul>
123
+ </div>
124
+ <div class="px-4 mb-8">
125
+ <h3 class="nav-text uppercase text-xs font-semibold text-indigo-400 px-4 mb-2">Reports</h3>
126
+ <ul>
127
+ <li class="mb-1">
128
+ <a href="#" class="flex items-center px-4 py-2 text-indigo-200 hover:bg-indigo-700 rounded-lg">
129
+ <i class="fas fa-file-alt mr-3"></i>
130
+ <span class="nav-text">Monthly</span>
131
+ </a>
132
+ </li>
133
+ <li class="mb-1">
134
+ <a href="#" class="flex items-center px-4 py-2 text-indigo-200 hover:bg-indigo-700 rounded-lg">
135
+ <i class="fas fa-file-invoice mr-3"></i>
136
+ <span class="nav-text">Quarterly</span>
137
+ </a>
138
+ </li>
139
+ <li class="mb-1">
140
+ <a href="#" class="flex items-center px-4 py-2 text-indigo-200 hover:bg-indigo-700 rounded-lg">
141
+ <i class="fas fa-file-contract mr-3"></i>
142
+ <span class="nav-text">Annual</span>
143
+ </a>
144
+ </li>
145
+ </ul>
146
+ </div>
147
+ </nav>
148
+ </div>
149
+
150
+ <!-- Main Content -->
151
+ <div class="content flex-1 overflow-y-auto ml-64">
152
+ <header class="bg-white shadow-sm">
153
+ <div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
154
+ <h1 class="text-2xl font-bold text-gray-800">Investment Dashboard</h1>
155
+ <div class="flex items-center space-x-4">
156
+ <div class="relative">
157
+ <input type="text" placeholder="Search investments..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
158
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
159
+ </div>
160
+ <div class="flex items-center space-x-2">
161
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
162
+ <i class="fas fa-bell"></i>
163
+ </button>
164
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200">
165
+ <i class="fas fa-cog"></i>
166
+ </button>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </header>
171
+
172
+ <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
173
+ <!-- Summary Cards -->
174
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
175
+ <div class="card-hover bg-white p-6 rounded-xl shadow-sm border border-gray-100">
176
+ <div class="flex justify-between items-start">
177
+ <div>
178
+ <p class="text-sm font-medium text-gray-500">Total Portfolio Value</p>
179
+ <h3 class="text-2xl font-bold mt-1">$12.8M</h3>
180
+ <p class="text-sm text-green-500 mt-2 flex items-center">
181
+ <i class="fas fa-arrow-up mr-1"></i> 8.2% from last quarter
182
+ </p>
183
+ </div>
184
+ <div class="bg-indigo-100 p-3 rounded-lg">
185
+ <i class="fas fa-chart-line text-indigo-600 text-xl"></i>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ <div class="card-hover bg-white p-6 rounded-xl shadow-sm border border-gray-100">
190
+ <div class="flex justify-between items-start">
191
+ <div>
192
+ <p class="text-sm font-medium text-gray-500">Annualized ROI</p>
193
+ <h3 class="text-2xl font-bold mt-1">14.7%</h3>
194
+ <p class="text-sm text-green-500 mt-2 flex items-center">
195
+ <i class="fas fa-arrow-up mr-1"></i> 2.3% from last year
196
+ </p>
197
+ </div>
198
+ <div class="bg-green-100 p-3 rounded-lg">
199
+ <i class="fas fa-percentage text-green-600 text-xl"></i>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ <div class="card-hover bg-white p-6 rounded-xl shadow-sm border border-gray-100">
204
+ <div class="flex justify-between items-start">
205
+ <div>
206
+ <p class="text-sm font-medium text-gray-500">YTD Distributions</p>
207
+ <h3 class="text-2xl font-bold mt-1">$1.2M</h3>
208
+ <p class="text-sm text-blue-500 mt-2 flex items-center">
209
+ <i class="fas fa-calendar mr-1"></i> Next: Q3 estimate $450k
210
+ </p>
211
+ </div>
212
+ <div class="bg-blue-100 p-3 rounded-lg">
213
+ <i class="fas fa-hand-holding-usd text-blue-600 text-xl"></i>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ <div class="card-hover bg-white p-6 rounded-xl shadow-sm border border-gray-100">
218
+ <div class="flex justify-between items-start">
219
+ <div>
220
+ <p class="text-sm font-medium text-gray-500">Cash Position</p>
221
+ <h3 class="text-2xl font-bold mt-1">$3.4M</h3>
222
+ <p class="text-sm text-purple-500 mt-2 flex items-center">
223
+ <i class="fas fa-piggy-bank mr-1"></i> 26% of portfolio
224
+ </p>
225
+ </div>
226
+ <div class="bg-purple-100 p-3 rounded-lg">
227
+ <i class="fas fa-wallet text-purple-600 text-xl"></i>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+
233
+ <!-- Performance Charts -->
234
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
235
+ <!-- Portfolio Value Over Time -->
236
+ <div class="card-hover bg-white p-6 rounded-xl shadow-sm border border-gray-100">
237
+ <div class="flex justify-between items-center mb-4">
238
+ <h2 class="text-lg font-semibold text-gray-800">Portfolio Value Trend</h2>
239
+ <div class="flex space-x-2">
240
+ <button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-700 rounded-md">1Y</button>
241
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-md">3Y</button>
242
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-md">5Y</button>
243
+ </div>
244
+ </div>
245
+ <canvas id="portfolioChart" height="250"></canvas>
246
+ </div>
247
+
248
+ <!-- ROI by Investment -->
249
+ <div class="card-hover bg-white p-6 rounded-xl shadow-sm border border-gray-100">
250
+ <div class="flex justify-between items-center mb-4">
251
+ <h2 class="text-lg font-semibold text-gray-800">ROI by Investment</h2>
252
+ <div class="flex space-x-2">
253
+ <button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-700 rounded-md">Current</button>
254
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-md">Annual</button>
255
+ </div>
256
+ </div>
257
+ <canvas id="roiChart" height="250"></canvas>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- Investment Performance Table -->
262
+ <div class="card-hover bg-white p-6 rounded-xl shadow-sm border border-gray-100 mb-8">
263
+ <div class="flex justify-between items-center mb-6">
264
+ <h2 class="text-lg font-semibold text-gray-800">Investment Performance</h2>
265
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 flex items-center">
266
+ <i class="fas fa-plus mr-2"></i> Add Investment
267
+ </button>
268
+ </div>
269
+ <div class="overflow-x-auto">
270
+ <table class="min-w-full divide-y divide-gray-200">
271
+ <thead class="bg-gray-50">
272
+ <tr>
273
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Investment</th>
274
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
275
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Current Value</th>
276
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cost Basis</th>
277
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ROI</th>
278
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IRR</th>
279
+ <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Distribution</th>
280
+ <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
281
+ </tr>
282
+ </thead>
283
+ <tbody class="bg-white divide-y divide-gray-200">
284
+ <!-- Real Estate Investments -->
285
+ <tr class="investment-card hover:bg-gray-50">
286
+ <td class="px-6 py-4 whitespace-nowrap">
287
+ <div class="flex items-center">
288
+ <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-md flex items-center justify-center">
289
+ <i class="fas fa-building text-indigo-600"></i>
290
+ </div>
291
+ <div class="ml-4">
292
+ <div class="text-sm font-medium text-gray-900">Riverfront Apartments</div>
293
+ <div class="text-sm text-gray-500">Acquired 2018</div>
294
+ </div>
295
+ </div>
296
+ </td>
297
+ <td class="px-6 py-4 whitespace-nowrap">
298
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-100 text-indigo-800">Real Estate</span>
299
+ </td>
300
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$4,250,000</td>
301
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$3,200,000</td>
302
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-medium">32.8%</td>
303
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-medium">18.4%</td>
304
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$125,000 (Q2 2023)</td>
305
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium investment-actions">
306
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-chart-line"></i></a>
307
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-file-invoice"></i></a>
308
+ <a href="#" class="text-indigo-600 hover:text-indigo-900"><i class="fas fa-ellipsis-v"></i></a>
309
+ </td>
310
+ </tr>
311
+ <tr class="investment-card hover:bg-gray-50">
312
+ <td class="px-6 py-4 whitespace-nowrap">
313
+ <div class="flex items-center">
314
+ <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-md flex items-center justify-center">
315
+ <i class="fas fa-building text-indigo-600"></i>
316
+ </div>
317
+ <div class="ml-4">
318
+ <div class="text-sm font-medium text-gray-900">Mountain View Office</div>
319
+ <div class="text-sm text-gray-500">Acquired 2020</div>
320
+ </div>
321
+ </div>
322
+ </td>
323
+ <td class="px-6 py-4 whitespace-nowrap">
324
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-100 text-indigo-800">Real Estate</span>
325
+ </td>
326
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$3,100,000</td>
327
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$2,750,000</td>
328
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-medium">12.7%</td>
329
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-medium">9.2%</td>
330
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$85,000 (Q2 2023)</td>
331
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium investment-actions">
332
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-chart-line"></i></a>
333
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-file-invoice"></i></a>
334
+ <a href="#" class="text-indigo-600 hover:text-indigo-900"><i class="fas fa-ellipsis-v"></i></a>
335
+ </td>
336
+ </tr>
337
+
338
+ <!-- Business Investments -->
339
+ <tr class="investment-card hover:bg-gray-50">
340
+ <td class="px-6 py-4 whitespace-nowrap">
341
+ <div class="flex items-center">
342
+ <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-md flex items-center justify-center">
343
+ <i class="fas fa-briefcase text-green-600"></i>
344
+ </div>
345
+ <div class="ml-4">
346
+ <div class="text-sm font-medium text-gray-900">TechSolutions Inc.</div>
347
+ <div class="text-sm text-gray-500">Acquired 2019</div>
348
+ </div>
349
+ </div>
350
+ </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">Business</span>
353
+ </td>
354
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$2,800,000</td>
355
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,500,000</td>
356
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-medium">86.7%</td>
357
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-medium">32.1%</td>
358
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$75,000 (Q2 2023)</td>
359
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium investment-actions">
360
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-chart-line"></i></a>
361
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-file-invoice"></i></a>
362
+ <a href="#" class="text-indigo-600 hover:text-indigo-900"><i class="fas fa-ellipsis-v"></i></a>
363
+ </td>
364
+ </tr>
365
+ <tr class="investment-card hover:bg-gray-50">
366
+ <td class="px-6 py-4 whitespace-nowrap">
367
+ <div class="flex items-center">
368
+ <div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-md flex items-center justify-center">
369
+ <i class="fas fa-briefcase text-green-600"></i>
370
+ </div>
371
+ <div class="ml-4">
372
+ <div class="text-sm font-medium text-gray-900">GreenEnergy Co.</div>
373
+ <div class="text-sm text-gray-500">Acquired 2021</div>
374
+ </div>
375
+ </div>
376
+ </td>
377
+ <td class="px-6 py-4 whitespace-nowrap">
378
+ <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Business</span>
379
+ </td>
380
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$1,650,000</td>
381
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$1,800,000</td>
382
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">-8.3%</td>
383
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-red-600 font-medium">-4.2%</td>
384
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$0 (No distributions)</td>
385
+ <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium investment-actions">
386
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-chart-line"></i></a>
387
+ <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-file-invoice"></i></a>
388
+ <a href="#" class="text-indigo-600 hover:text-indigo-900"><i class="fas fa-ellipsis-v"></i></a>
389
+ </td>
390
+ </tr>
391
+ </tbody>
392
+ </table>
393
+ </div>
394
+ </div>
395
+
396
+ <!-- Cash Flow & Distributions -->
397
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
398
+ <!-- Monthly Cash Flow -->
399
+ <div class="card-hover bg-white p-6 rounded-xl shadow-sm border border-gray-100">
400
+ <div class="flex justify-between items-center mb-4">
401
+ <h2 class="text-lg font-semibold text-gray-800">Monthly Cash Flow</h2>
402
+ <div class="flex space-x-2">
403
+ <button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-700 rounded-md">2023</button>
404
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-md">2022</button>
405
+ </div>
406
+ </div>
407
+ <canvas id="cashFlowChart" height="250"></canvas>
408
+ </div>
409
+
410
+ <!-- Distribution History -->
411
+ <div class="card-hover bg-white p-6 rounded-xl shadow-sm border border-gray-100">
412
+ <div class="flex justify-between items-center mb-4">
413
+ <h2 class="text-lg font-semibold text-gray-800">Distribution History</h2>
414
+ <div class="flex space-x-2">
415
+ <button class="px-3 py-1 text-xs bg-indigo-100 text-indigo-700 rounded-md">All</button>
416
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-md">Real Estate</button>
417
+ <button class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-md">Business</button>
418
+ </div>
419
+ </div>
420
+ <div class="space-y-4">
421
+ <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
422
+ <div>
423
+ <p class="text-sm font-medium text-gray-900">Q2 2023 Distribution</p>
424
+ <p class="text-xs text-gray-500">June 15, 2023</p>
425
+ </div>
426
+ <div class="text-right">
427
+ <p class="text-sm font-medium text-gray-900">$285,000</p>
428
+ <p class="text-xs text-gray-500">3 investments</p>
429
+ </div>
430
+ </div>
431
+ <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
432
+ <div>
433
+ <p class="text-sm font-medium text-gray-900">Q1 2023 Distribution</p>
434
+ <p class="text-xs text-gray-500">March 15, 2023</p>
435
+ </div>
436
+ <div class="text-right">
437
+ <p class="text-sm font-medium text-gray-900">$265,000</p>
438
+ <p class="text-xs text-gray-500">3 investments</p>
439
+ </div>
440
+ </div>
441
+ <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
442
+ <div>
443
+ <p class="text-sm font-medium text-gray-900">Q4 2022 Distribution</p>
444
+ <p class="text-xs text-gray-500">December 15, 2022</p>
445
+ </div>
446
+ <div class="text-right">
447
+ <p class="text-sm font-medium text-gray-900">$310,000</p>
448
+ <p class="text-xs text-gray-500">4 investments</p>
449
+ </div>
450
+ </div>
451
+ <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
452
+ <div>
453
+ <p class="text-sm font-medium text-gray-900">Q3 2022 Distribution</p>
454
+ <p class="text-xs text-gray-500">September 15, 2022</p>
455
+ </div>
456
+ <div class="text-right">
457
+ <p class="text-sm font-medium text-gray-900">$240,000</p>
458
+ <p class="text-xs text-gray-500">3 investments</p>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ </div>
464
+ </main>
465
+ </div>
466
+ </div>
467
+
468
+ <script>
469
+ // Toggle sidebar
470
+ document.getElementById('toggleSidebar').addEventListener('click', function() {
471
+ const sidebar = document.querySelector('.sidebar');
472
+ const content = document.querySelector('.content');
473
+
474
+ sidebar.classList.toggle('collapsed');
475
+ content.classList.toggle('expanded');
476
+ });
477
+
478
+ // Portfolio Value Chart
479
+ const portfolioCtx = document.getElementById('portfolioChart').getContext('2d');
480
+ const portfolioChart = new Chart(portfolioCtx, {
481
+ type: 'line',
482
+ data: {
483
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
484
+ datasets: [{
485
+ label: 'Portfolio Value',
486
+ data: [10.5, 10.7, 11.0, 11.2, 11.5, 11.8, 12.1, 12.3, 12.5, 12.6, 12.7, 12.8],
487
+ borderColor: '#6366F1',
488
+ backgroundColor: 'rgba(99, 102, 241, 0.1)',
489
+ borderWidth: 2,
490
+ fill: true,
491
+ tension: 0.4
492
+ }]
493
+ },
494
+ options: {
495
+ responsive: true,
496
+ plugins: {
497
+ legend: {
498
+ display: false
499
+ }
500
+ },
501
+ scales: {
502
+ y: {
503
+ beginAtZero: false,
504
+ ticks: {
505
+ callback: function(value) {
506
+ return '$' + value + 'M';
507
+ }
508
+ }
509
+ }
510
+ }
511
+ }
512
+ });
513
+
514
+ // ROI Chart
515
+ const roiCtx = document.getElementById('roiChart').getContext('2d');
516
+ const roiChart = new Chart(roiCtx, {
517
+ type: 'bar',
518
+ data: {
519
+ labels: ['Riverfront', 'Mountain View', 'TechSolutions', 'GreenEnergy'],
520
+ datasets: [{
521
+ label: 'ROI',
522
+ data: [32.8, 12.7, 86.7, -8.3],
523
+ backgroundColor: [
524
+ 'rgba(99, 102, 241, 0.7)',
525
+ 'rgba(99, 102, 241, 0.7)',
526
+ 'rgba(16, 185, 129, 0.7)',
527
+ 'rgba(239, 68, 68, 0.7)'
528
+ ],
529
+ borderColor: [
530
+ 'rgba(99, 102, 241, 1)',
531
+ 'rgba(99, 102, 241, 1)',
532
+ 'rgba(16, 185, 129, 1)',
533
+ 'rgba(239, 68, 68, 1)'
534
+ ],
535
+ borderWidth: 1
536
+ }]
537
+ },
538
+ options: {
539
+ responsive: true,
540
+ plugins: {
541
+ legend: {
542
+ display: false
543
+ }
544
+ },
545
+ scales: {
546
+ y: {
547
+ beginAtZero: true,
548
+ ticks: {
549
+ callback: function(value) {
550
+ return value + '%';
551
+ }
552
+ }
553
+ }
554
+ }
555
+ }
556
+ });
557
+
558
+ // Cash Flow Chart
559
+ const cashFlowCtx = document.getElementById('cashFlowChart').getContext('2d');
560
+ const cashFlowChart = new Chart(cashFlowCtx, {
561
+ type: 'bar',
562
+ data: {
563
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
564
+ datasets: [{
565
+ label: 'Income',
566
+ data: [85, 82, 90, 88, 95, 110, 105, 100, 95, 92, 90, 285],
567
+ backgroundColor: 'rgba(16, 185, 129, 0.7)',
568
+ borderColor: 'rgba(16, 185, 129, 1)',
569
+ borderWidth: 1
570
+ }, {
571
+ label: 'Expenses',
572
+ data: [45, 40, 42, 48, 50, 55, 52, 50, 48, 45, 42, 60],
573
+ backgroundColor: 'rgba(239, 68, 68, 0.7)',
574
+ borderColor: 'rgba(239, 68, 68, 1)',
575
+ borderWidth: 1
576
+ }]
577
+ },
578
+ options: {
579
+ responsive: true,
580
+ plugins: {
581
+ legend: {
582
+ position: 'top',
583
+ }
584
+ },
585
+ scales: {
586
+ y: {
587
+ beginAtZero: true,
588
+ ticks: {
589
+ callback: function(value) {
590
+ return '$' + value + 'k';
591
+ }
592
+ }
593
+ }
594
+ }
595
+ }
596
+ });
597
+ </script>
598
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=csmith715/samplefinancialdashboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
599
+ </html>