Hugging Face's logo

Spaces:
entropy25
/
customer
Sleeping

App Files Community
entropy25 commited on
Commit
1a6b8bf
·
verified ·
1 Parent(s): 50579f0

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +32 -37
app.py CHANGED
@@ -201,101 +201,96 @@ class B2BCustomerAnalytics:
201
 
202
  # Create modern horizontal dashboard
203
  summary_html = f"""
204
- <div style="display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 3rem;">
 
205
 
206
  <!-- Card 1: Total Customers -->
207
- <div style="flex: 1; min-width: 230px; background: white; padding: 1.25rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); border-left: 4px solid #3b82f6; display: flex; align-items: center; gap: 1rem;">
208
  <!-- Left Icon -->
209
- <div style="flex-shrink: 0; padding: 0.6rem; background: #dbeafe; border-radius: 0.75rem;">
210
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#1d4ed8" style="width:28px; height:28px;">
211
  <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m-7.5-2.962a3.75 3.75 0 015.962 0zM16.5 9.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5zM12 15.75h.008v.008H12v-.008z" />
212
  </svg>
213
  </div>
214
  <!-- Right Text Content -->
215
  <div>
216
- <span style="font-size: 1.75rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">{total_customers:,}</span>
217
- <h3 style="color: #1f2937; font-weight: 600; margin: 0.1rem 0; font-size: 1rem;">Total Customers</h3>
218
- <p style="color: #6b7280; font-size: 0.875rem; margin: 0;">Active enterprise clients</p>
219
  </div>
220
  </div>
221
 
222
  <!-- Card 2: Total Revenue -->
223
- <div style="flex: 1; min-width: 230px; background: white; padding: 1.25rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); border-left: 4px solid #10b981; display: flex; align-items: center; gap: 1rem;">
224
  <!-- Left Icon -->
225
- <div style="flex-shrink: 0; padding: 0.6rem; background: #d1fae5; border-radius: 0.75rem;">
226
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#047857" style="width:28px; height:28px;">
227
  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.75A.75.75 0 013 4.5h.75m0 0a.75.75 0 01.75.75v.75m0 0h.75a.75.75 0 010 1.5h-.75m0 0a.75.75 0 01-.75.75v.75m0 0h.75a.75.75 0 010 1.5h-.75m0 0a.75.75 0 01-.75.75v.75m0 0h.75a.75.75 0 010 1.5h-.75m0 0a.75.75 0 01-.75.75V18a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 18v.75m-18 0v-.75a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 18v.75" />
228
  </svg>
229
  </div>
230
  <!-- Right Text Content -->
231
  <div>
232
- <span style="font-size: 1.75rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">${(total_revenue/1000000):.1f}M</span>
233
- <h3 style="color: #1f2937; font-weight: 600; margin: 0.1rem 0; font-size: 1rem;">Total Revenue</h3>
234
- <p style="color: #6b7280; font-size: 0.875rem; margin: 0;">Contract value sum</p>
235
  </div>
236
  </div>
237
 
238
  <!-- Card 3: Avg Order Value -->
239
- <div style="flex: 1; min-width: 230px; background: white; padding: 1.25rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); border-left: 4px solid #8b5cf6; display: flex; align-items: center; gap: 1rem;">
240
  <!-- Left Icon -->
241
- <div style="flex-shrink: 0; padding: 0.6rem; background: #ede9fe; border-radius: 0.75rem;">
242
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#7c3aed" style="width:28px; height:28px;">
243
  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
244
  </svg>
245
  </div>
246
  <!-- Right Text Content -->
247
  <div>
248
- <span style="font-size: 1.75rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">${avg_order_value:.0f}</span>
249
- <h3 style="color: #1f2937; font-weight: 600; margin: 0.1rem 0; font-size: 1rem;">Avg Order Value</h3>
250
- <p style="color: #6b7280; font-size: 0.875rem; margin: 0;">Per order average</p>
251
  </div>
252
  </div>
253
 
254
  <!-- Card 4: High Risk Clients -->
255
- <div style="flex: 1; min-width: 230px; background: white; padding: 1.25rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); border-left: 4px solid #ef4444; display: flex; align-items: center; gap: 1rem;">
256
  <!-- Left Icon -->
257
- <div style="flex-shrink: 0; padding: 0.6rem; background: #fee2e2; border-radius: 0.75rem;">
258
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#dc2626" style="width:28px; height:28px;">
259
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
260
  </svg>
261
  </div>
262
  <!-- Right Text Content -->
263
  <div>
264
- <span style="font-size: 1.75rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">{risk_dist.get('High', 0)}</span>
265
- <h3 style="color: #1f2937; font-weight: 600; margin: 0.1rem 0; font-size: 1rem;">High Risk Clients</h3>
266
- <p style="color: #6b7280; font-size: 0.875rem; margin: 0;">Need immediate attention</p>
267
  </div>
268
  </div>
269
 
270
  <!-- Card 5: Champion Customers -->
271
- <div style="flex: 1; min-width: 230px; background: white; padding: 1.25rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); border-left: 4px solid #f59e0b; display: flex; align-items: center; gap: 1rem;">
272
  <!-- Left Icon -->
273
- <div style="flex-shrink: 0; padding: 0.6rem; background: #fef3c7; border-radius: 0.75rem;">
274
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#d97706" style="width:28px; height:28px;">
275
  <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9a9.06 9.06 0 00-4.914.932l-.006.004c-.317.184-.644.362-.978.536a.75.75 0 01-1.114-.658l.012-.023c.125-.23.26-.456.402-.676l.01-.017a9.02 9.02 0 013.91-4.013l.006-.004a9.02 9.02 0 014.013-3.91l.017-.01c.22-.142.446-.277.676-.402l.023-.012a.75.75 0 01.658 1.114c-.174.334-.352.66-.536.978l-.004.006a9.06 9.06 0 00-.932 4.914zM16.5 18.75h-9m9 0a12.015 12.015 0 01-9 0" />
276
  </svg>
277
  </div>
278
  <!-- Right Text Content -->
279
  <div>
280
- <span style="font-size: 1.75rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">{segment_dist.get('Champions', 0)}</span>
281
- <h3 style="color: #1f2937; font-weight: 600; margin: 0.1rem 0; font-size: 1rem;">Champion Customers</h3>
282
- <p style="color: #6b7280; font-size: 0.875rem; margin: 0;">Top tier clients</p>
283
  </div>
284
  </div>
285
 
286
  <!-- Card 6: Healthy Customers -->
287
- <div style="flex: 1; min-width: 230px; background: white; padding: 1.25rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); border-left: 4px solid #06b6d4; display: flex; align-items: center; gap: 1rem;">
288
  <!-- Left Icon -->
289
- <div style="flex-shrink: 0; padding: 0.6rem; background: #cffafe; border-radius: 0.75rem;">
290
- <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#0891b2" style="width:28px; height:28px;">
291
  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
292
  </svg>
293
  </div>
294
  <!-- Right Text Content -->
295
  <div>
296
- <span style="font-size: 1.75rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">{risk_dist.get('Low', 0)}</span>
297
- <h3 style="color: #1f2937; font-weight: 600; margin: 0.1rem 0; font-size: 1rem;">Healthy Customers</h3>
298
- <p style="color: #6b7280; font-size: 0.875rem; margin: 0;">Low churn risk</p>
299
  </div>
300
  </div>
301
 
 
201
 
202
  # Create modern horizontal dashboard
203
  summary_html = f"""
204
+ <!-- Flex container for the KPI cards. Adjustments made for a more compact layout. -->
205
+ <div style="display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 3rem;">
206
 
207
  <!-- Card 1: Total Customers -->
208
+ <div style="flex: 1; min-width: 200px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05); border-left: 4px solid #3b82f6; display: flex; align-items: center; gap: 0.75rem;">
209
  <!-- Left Icon -->
210
+ <div style="flex-shrink: 0; padding: 0.5rem; background: #dbeafe; border-radius: 0.5rem;">
211
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#1d4ed8" style="width:24px; height:24px;">
212
  <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m-7.5-2.962a3.75 3.75 0 015.962 0zM16.5 9.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5zM12 15.75h.008v.008H12v-.008z" />
213
  </svg>
214
  </div>
215
  <!-- Right Text Content -->
216
  <div>
217
+ <span style="font-size: 1.5rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">{total_customers:,}</span>
218
+ <h3 style="color: #374151; font-weight: 600; margin: 0; font-size: 0.875rem;">Total Customers</h3>
 
219
  </div>
220
  </div>
221
 
222
  <!-- Card 2: Total Revenue -->
223
+ <div style="flex: 1; min-width: 200px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05); border-left: 4px solid #10b981; display: flex; align-items: center; gap: 0.75rem;">
224
  <!-- Left Icon -->
225
+ <div style="flex-shrink: 0; padding: 0.5rem; background: #d1fae5; border-radius: 0.5rem;">
226
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#047857" style="width:24px; height:24px;">
227
  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.75A.75.75 0 013 4.5h.75m0 0a.75.75 0 01.75.75v.75m0 0h.75a.75.75 0 010 1.5h-.75m0 0a.75.75 0 01-.75.75v.75m0 0h.75a.75.75 0 010 1.5h-.75m0 0a.75.75 0 01-.75.75v.75m0 0h.75a.75.75 0 010 1.5h-.75m0 0a.75.75 0 01-.75.75V18a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 18v.75m-18 0v-.75a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 18v.75" />
228
  </svg>
229
  </div>
230
  <!-- Right Text Content -->
231
  <div>
232
+ <span style="font-size: 1.5rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">${(total_revenue/1000000):.1f}M</span>
233
+ <h3 style="color: #374151; font-weight: 600; margin: 0; font-size: 0.875rem;">Total Revenue</h3>
 
234
  </div>
235
  </div>
236
 
237
  <!-- Card 3: Avg Order Value -->
238
+ <div style="flex: 1; min-width: 200px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05); border-left: 4px solid #8b5cf6; display: flex; align-items: center; gap: 0.75rem;">
239
  <!-- Left Icon -->
240
+ <div style="flex-shrink: 0; padding: 0.5rem; background: #ede9fe; border-radius: 0.5rem;">
241
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#7c3aed" style="width:24px; height:24px;">
242
  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
243
  </svg>
244
  </div>
245
  <!-- Right Text Content -->
246
  <div>
247
+ <span style="font-size: 1.5rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">${avg_order_value:.0f}</span>
248
+ <h3 style="color: #374151; font-weight: 600; margin: 0; font-size: 0.875rem;">Avg Order Value</h3>
 
249
  </div>
250
  </div>
251
 
252
  <!-- Card 4: High Risk Clients -->
253
+ <div style="flex: 1; min-width: 200px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05); border-left: 4px solid #ef4444; display: flex; align-items: center; gap: 0.75rem;">
254
  <!-- Left Icon -->
255
+ <div style="flex-shrink: 0; padding: 0.5rem; background: #fee2e2; border-radius: 0.5rem;">
256
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#dc2626" style="width:24px; height:24px;">
257
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
258
  </svg>
259
  </div>
260
  <!-- Right Text Content -->
261
  <div>
262
+ <span style="font-size: 1.5rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">{risk_dist.get('High', 0)}</span>
263
+ <h3 style="color: #374151; font-weight: 600; margin: 0; font-size: 0.875rem;">High Risk Clients</h3>
 
264
  </div>
265
  </div>
266
 
267
  <!-- Card 5: Champion Customers -->
268
+ <div style="flex: 1; min-width: 200px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05); border-left: 4px solid #f59e0b; display: flex; align-items: center; gap: 0.75rem;">
269
  <!-- Left Icon -->
270
+ <div style="flex-shrink: 0; padding: 0.5rem; background: #fef3c7; border-radius: 0.5rem;">
271
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#d97706" style="width:24px; height:24px;">
272
  <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9a9.06 9.06 0 00-4.914.932l-.006.004c-.317.184-.644.362-.978.536a.75.75 0 01-1.114-.658l.012-.023c.125-.23.26-.456.402-.676l.01-.017a9.02 9.02 0 013.91-4.013l.006-.004a9.02 9.02 0 014.013-3.91l.017-.01c.22-.142.446-.277.676-.402l.023-.012a.75.75 0 01.658 1.114c-.174.334-.352.66-.536.978l-.004.006a9.06 9.06 0 00-.932 4.914zM16.5 18.75h-9m9 0a12.015 12.015 0 01-9 0" />
273
  </svg>
274
  </div>
275
  <!-- Right Text Content -->
276
  <div>
277
+ <span style="font-size: 1.5rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">{segment_dist.get('Champions', 0)}</span>
278
+ <h3 style="color: #374151; font-weight: 600; margin: 0; font-size: 0.875rem;">Champion Customers</h3>
 
279
  </div>
280
  </div>
281
 
282
  <!-- Card 6: Healthy Customers -->
283
+ <div style="flex: 1; min-width: 200px; background: white; padding: 1rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -2px rgba(0,0,0,0.05); border-left: 4px solid #06b6d4; display: flex; align-items: center; gap: 0.75rem;">
284
  <!-- Left Icon -->
285
+ <div style="flex-shrink: 0; padding: 0.5rem; background: #cffafe; border-radius: 0.5rem;">
286
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#0891b2" style="width:24px; height:24px;">
287
  <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
288
  </svg>
289
  </div>
290
  <!-- Right Text Content -->
291
  <div>
292
+ <span style="font-size: 1.5rem; font-weight: 700; color: #1f2937; display: block; line-height: 1.2;">{risk_dist.get('Low', 0)}</span>
293
+ <h3 style="color: #374151; font-weight: 600; margin: 0; font-size: 0.875rem;">Healthy Customers</h3>
 
294
  </div>
295
  </div>
296