Aggiornamento grafica

frontend-angular-new/src/app/components/bet-history/bet-history.html

@@ -0,0 +1,82 @@
+<div class="min-h-screen pb-20">
+  <!-- Header -->
+  <header class="sticky top-0 z-50 bg-background/80 backdrop-blur-md px-6 py-4 flex items-center gap-4 border-b border-black/5">
+    <button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-surface-container transition-colors" [routerLink]="['/']">
+      <mat-icon>arrow_back</mat-icon>
+    </button>
+    <h1 class="font-headline font-black tracking-tight text-xl text-primary">Bet History</h1>
+  </header>
+
+  <main class="max-w-xl mx-auto px-6 pt-6 space-y-6">
+    <!-- Search Bar -->
+    <div class="relative group">
+      <div class="absolute inset-y-0 left-4 flex items-center pointer-events-none text-on-surface-variant group-focus-within:text-primary transition-colors">
+        <mat-icon>search</mat-icon>
+      </div>
+      <input 
+        type="text" 
+        placeholder="Search bets by title or description..." 
+        class="w-full h-14 pl-12 pr-4 rounded-2xl bg-surface-container-low border border-black/5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all font-medium text-on-surface"
+        (input)="onSearch($event)"
+      >
+    </div>
+
+    <!-- Stats Summary -->
+    <div class="grid grid-cols-2 gap-4">
+      <div class="bg-surface-container-low p-5 rounded-2xl border border-black/5 flex flex-col gap-1">
+        <span class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">Total Bets</span>
+        <span class="text-2xl font-headline font-black text-primary">{{ historyChallenges().length }}</span>
+      </div>
+      <div class="bg-surface-container-low p-5 rounded-2xl border border-black/5 flex flex-col gap-1">
+        <span class="text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">Completed</span>
+        <span class="text-2xl font-headline font-black text-secondary">
+          {{ completedCount() }}
+        </span>
+      </div>
+    </div>
+
+    <!-- History List -->
+    <div *ngIf="isLoading()" class="flex flex-col items-center justify-center py-12">
+      <div class="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
+      <p class="mt-4 text-on-surface-variant text-sm font-medium">Loading history...</p>
+    </div>
+
+    <div *ngIf="!isLoading()" class="space-y-4">
+      <div *ngFor="let challenge of historyChallenges()" class="bg-surface rounded-3xl p-5 soft-shadow border border-black/5 active:scale-[0.98] transition-transform cursor-pointer" [routerLink]="['/challenge-detail', challenge._id]">
+        <div class="flex justify-between items-start mb-4">
+          <div class="flex items-center gap-3">
+            <div class="w-10 h-10 rounded-2xl bg-surface-container flex items-center justify-center">
+              <mat-icon class="text-primary">history</mat-icon>
+            </div>
+            <div>
+              <h4 class="font-headline font-bold text-on-surface">{{ challenge.title }}</h4>
+              <p class="text-xs text-on-surface-variant font-medium">{{ challenge.endDate | date:'mediumDate' }}</p>
+            </div>
+          </div>
+          <span 
+            class="px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest"
+            [class.bg-secondary-container]="challenge.status === 'COMPLETED'"
+            [class.text-secondary]="challenge.status === 'COMPLETED'"
+            [class.bg-error-container]="challenge.status === 'EXPIRED'"
+            [class.text-error]="challenge.status === 'EXPIRED'"
+          >
+            {{ challenge.status }}
+          </span>
+        </div>
+        <div class="flex justify-between items-center pt-2 border-t border-black/5 mt-2">
+          <div class="flex items-center gap-2">
+            <mat-icon class="text-sm text-on-surface-variant">groups</mat-icon>
+            <span class="text-xs font-bold text-on-surface-variant">{{ challenge.participants.length }}</span>
+          </div>
+          <div class="text-lg font-headline font-black text-primary">€{{ challenge.stake }}</div>
+        </div>
+      </div>
+      
+      <div *ngIf="historyChallenges().length === 0" class="flex flex-col items-center justify-center py-20 text-center bg-surface-container-low rounded-3xl border border-dashed border-on-surface-variant/20">
+        <mat-icon class="text-6xl text-on-surface-variant/10 mb-4">history_toggle_off</mat-icon>
+        <h3 class="text-xl font-headline font-bold">No History Found</h3>
+        <p class="text-on-surface-variant mt-2">Try searching for something else or join a new bet!</p>
+      </div>
+    </div>
+  </main>
+</div>