matching-list component upadted

package-lock.json

@@ -10,9 +10,9 @@
       "dependencies": {
         "@angular/animations": "^16.2.12",
         "@angular/cdk": "^16.2.14",
-        "@angular/common": "^16.1.0",
+        "@angular/common": "^16.2.12",
         "@angular/compiler": "^16.1.0",
-        "@angular/core": "^16.1.0",
+        "@angular/core": "^16.2.12",
         "@angular/forms": "^16.1.0",
         "@angular/material": "^16.2.14",
         "@angular/platform-browser": "^16.1.0",
@@ -21,7 +21,6 @@
         "@fortawesome/fontawesome-free": "^7.0.0",
         "jest-editor-support": "*",
         "rxjs": "~7.8.0",
-        "tslib": "^2.3.0",
         "zone.js": "~0.13.0"
       },
       "devDependencies": {
@@ -35,6 +34,7 @@
         "karma-coverage": "~2.2.0",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.1.0",
+        "tslib": "^2.8.1",
         "typescript": "~5.1.3"
       }
     },

package.json

@@ -12,9 +12,9 @@
   "dependencies": {
     "@angular/animations": "^16.2.12",
     "@angular/cdk": "^16.2.14",
-    "@angular/common": "^16.1.0",
+    "@angular/common": "^16.2.12",
     "@angular/compiler": "^16.1.0",
-    "@angular/core": "^16.1.0",
+    "@angular/core": "^16.2.12",
     "@angular/forms": "^16.1.0",
     "@angular/material": "^16.2.14",
     "@angular/platform-browser": "^16.1.0",
@@ -23,7 +23,6 @@
     "@fortawesome/fontawesome-free": "^7.0.0",
     "jest-editor-support": "*",
     "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
     "zone.js": "~0.13.0"
   },
   "devDependencies": {
@@ -37,6 +36,7 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "tslib": "^2.8.1",
     "typescript": "~5.1.3"
   }
 }

src/app/matching-list/matching-list.component.css

@@ -353,11 +353,12 @@
   background: #fff;
   padding: 25px;
   border-radius: 10px;
-  width: 450px;
-  max-height: 90vh;
-  overflow-y: auto;
+  width: 38vw;
+  height: 73vh;
   text-align: center;
   position: relative;
+  top: 12%;
+  overflow-y: scroll;
 }
 
 .ai-summary {
@@ -584,3 +585,130 @@
     bottom: 10px;
   }
 }
+
+
+/* Mode Toggle */
+.mode-toggle {
+  display: flex;
+  margin-left: 10px;
+}
+
+.mode-btn {
+  padding: 8px 12px;
+  border: 1px solid #00bfa6;
+  background: white;
+  color: #00bfa6;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+  .mode-btn:first-child {
+    border-radius: 6px 0 0 6px;
+  }
+
+  .mode-btn:last-child {
+    border-radius: 0 6px 6px 0;
+  }
+
+  .mode-btn.active {
+    background: #00bfa6;
+    color: white;
+  }
+
+/* Range Filter */
+.range-filter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 10px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+  .range-filter select {
+    padding: 8px 12px;
+    border-radius: 6px;
+    border: 1px solid #ccc;
+  }
+
+.mode-indicator {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+}
+
+/* Modal Profile Image */
+.modal-profile-img {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-bottom: 15px;
+}
+
+/* Personality Scores */
+.personality-scores {
+  margin: 15px 0;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 8px;
+}
+
+  .personality-scores h4 {
+    margin: 0 0 10px 0;
+    color: #333;
+  }
+
+.trait-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.trait {
+  padding: 8px 12px;
+  border-radius: 6px;
+  color: white;
+  font-weight: bold;
+  text-align: center;
+}
+
+  .trait.blue {
+    background: #3498db;
+  }
+
+  .trait.green {
+    background: #2ecc71;
+  }
+
+  .trait.yellow {
+    background: #f39c12;
+  }
+
+  .trait.red {
+    background: #e74c3c;
+  }
+
+/* Error State */
+.error-message {
+  background: #fee;
+  color: #c33;
+  padding: 15px;
+  border-radius: 8px;
+  margin: 20px;
+  text-align: center;
+  border: 1px solid #fcc;
+}
+.profile-detail {
+  margin: 8px 0;
+  padding: 8px;
+  background: #f8f9fa;
+  border-radius: 6px;
+  font-size: 14px;
+}
+
+  .profile-detail strong {
+    color: #333;
+  }

src/app/matching-list/matching-list.component.html

@@ -10,8 +10,21 @@
   <!-- HEADER -->
   <div class="header-bar">
     <div class="left-section">
-      <img src="https://cdn-icons-png.flaticon.com/512/168/168724.png" class="logo" alt="logo">
-      <h2>Py-Match</h2>
+      <!--<img src="https://cdn-icons-png.flaticon.com/512/168/168724.png" class="logo" alt="logo">
+  <h2>Py-Match</h2>-->
+      <!-- Mode Toggle -->
+      <div class="mode-toggle">
+        <button class="mode-btn"
+                [class.active]="mode === 'expectation'"
+                (click)="sortByExpectation()">
+          Expectation
+        </button>
+        <button class="mode-btn"
+                [class.active]="mode === 'character'"
+                (click)="sortCharacterwise()">
+          Character
+        </button>
+      </div>
     </div>
     <div class="search-section">
       <input type="text" id="searchBox" placeholder="Search name or city"
@@ -39,6 +52,20 @@
         <option value="location">Closest Location</option>
       </select>
       <button class="filter-btn" (click)="applyFilters()">Apply</button>
+
+      <!-- Mode Toggle -->
+      <!--<div class="mode-toggle">
+        <button class="mode-btn"
+                [class.active]="mode === 'expectation'"
+                (click)="sortByExpectation()">
+          Expectation
+        </button>
+        <button class="mode-btn"
+                [class.active]="mode === 'character'"
+                (click)="sortCharacterwise()">
+          Character
+        </button>
+      </div>-->
     </div>
     <div class="like-section" (click)="toggleLikedDropdown()">
       ❤️
@@ -72,6 +99,16 @@
 
     <!-- RIGHT MATCHING CONTAINER -->
     <div class="matching-container">
+      <!-- Score Range Filter -->
+      <div class="range-filter">
+        <select [(ngModel)]="selectedRange" (change)="processMatchesForDisplay()">
+          <option *ngFor="let range of availableRanges" [value]="range">
+            {{ range === 'all' ? 'All Scores' : range === 'below_60' ? 'Below 60%' : range + '%' }}
+          </option>
+        </select>
+        <span class="mode-indicator">Mode: {{ mode === 'expectation' ? 'Expectation Matching' : 'Character Matching' }}</span>
+      </div>
+
       <div class="grid-view" id="profilesContainer">
         <!-- Skeleton Loaders -->
         <div class="skeleton" *ngIf="displayedMatches.length === 0 && !loading"></div>
@@ -103,7 +140,7 @@
               <button (click)="$event.stopPropagation(); openChat(profile)">
                 💬
               </button>
-              <button (click)="$event.stopPropagation(); openModal(profile)">
+              <button (click)="$event.stopPropagation(); openProfileModal(profile)">
                 👁️
               </button>
             </div>
@@ -113,20 +150,42 @@
     </div>
   </div>
 
+  <!-- PROFILE MODAL -->
   <!-- PROFILE MODAL -->
   <div class="modal" [class.show]="showProfileModal">
     <div class="modal-content" *ngIf="selectedProfile">
       <span class="close" (click)="closeModal()">&times;</span>
       <img [src]="selectedProfile.photo_url" [alt]="selectedProfile.name"
-           (error)="handleImageError($event, selectedProfile)">
-      <h3>{{ selectedProfile.name }} ({{ selectedProfile.gender || 'Male' }})</h3>
+           (error)="handleImageError($event, selectedProfile)" class="modal-profile-img">
+      <h3>{{ selectedProfile.name }} ({{ selectedProfile.gender || 'Not specified' }})</h3>
       <p>{{ selectedProfile.age }} • {{ selectedProfile.city }}</p>
-      <p>{{ selectedProfile.job }}</p>
-      <p>Overall Match: {{ selectedProfile.match_score || selectedProfile.score }}%</p>
+      <!--<p>{{ selectedProfile.job }}</p>-->
 
-      <div class="ai-summary" [innerHTML]="getCompatibilityReport(selectedProfile)"></div>
+      <!-- Additional profile information -->
+      <div *ngIf="selectedProfile.marital_status" class="profile-detail">
+        <strong>Marital Status:</strong> {{ selectedProfile.marital_status }}
+      </div>
+      <div *ngIf="selectedProfile.education_level" class="profile-detail">
+        <strong>Education:</strong> {{ selectedProfile.education_level }}
+      </div>
+      <div *ngIf="selectedProfile.employment_status" class="profile-detail">
+        <strong>Employment:</strong> {{ selectedProfile.employment_status }}
+      </div>
 
-      <canvas id="aiChart" style="display: none;"></canvas>
+      <p><strong>Overall Match: {{ selectedProfile.match_score || selectedProfile.score }}%</strong></p>
+
+      <!-- Personality Scores -->
+      <!--<div class="personality-scores" *ngIf="selectedProfile.blue !== undefined">
+        <h4>Personality Traits:</h4>-->
+        <!--<div class="trait-grid">
+          <div class="trait blue">Blue: {{ selectedProfile.blue }}%</div>
+          <div class="trait green">Green: {{ selectedProfile.green }}%</div>
+          <div class="trait yellow">Yellow: {{ selectedProfile.yellow }}%</div>
+          <div class="trait red">Red: {{ selectedProfile.red }}%</div>
+        </div>-->
+      <!--</div>-->
+
+      <div class="ai-summary" [innerHTML]="getCompatibilityReport(selectedProfile)"></div>
     </div>
   </div>
 

src/app/matching-list/matching-list.component.ts

@@ -1,304 +1,415 @@
-import { Component, OnInit, ElementRef, ViewChild, HostListener } from '@angular/core';
-import { Router } from '@angular/router';
-import { FormsModule } from '@angular/forms';
-import { MatchingService, ApiMatchItem, ApiMatchResponse } from '../matching.service';
+import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatchingService, ApiMatchResponse, ApiMatchItem } from '../matching.service';
+import { ActivatedRoute } from '@angular/router';
 
-interface Profile extends ApiMatchItem {
-  id?: number;
-  name?: string;
-  age?: number | null;
-  city?: string | null;
-  job?: string | null;
+interface Profile {
+  user_id: number;
+  name: string;
+  age?: number;
+  city?: string;
+  job?: string;
+  photo_url?: string;
   isOnline?: boolean;
   match_score?: number;
-  photo_url?: string;
-  blue: number;
-  green: number;
-  yellow: number;
-  red: number;
-  score: number;
-  user_id: number;
+  score?: number;
   gender?: string;
-  profession?: string;
-  meetsExpectations?: boolean;
-  expectationMatchScore?: number;
-  aiExplanation?: string;
-  hobbies?: string[];
-  education?: string;
-  location?: string;
+  blue?: number;
+  green?: number;
+  yellow?: number;
+  red?: number;
+  explanations?: string[];
+  explanation_source?: string;
+  // Add fields from Marriage table
+  current_city?: string;
+  date_of_birth?: string;
+  job_role?: string;
+  employment_status?: string;
+  marital_status?: string;
+  education_level?: string;
 }
 
 interface ChatMessage {
-  text: string;
   sender: 'me' | 'them';
+  text: string;
   time: string;
 }
 
 @Component({
   selector: 'app-matching-list',
-  templateUrl: './matching-list.component.html',
-  styleUrls: ['./matching-list.component.css'],
   standalone: true,
-  imports: [FormsModule, CommonModule]
+  imports: [CommonModule, FormsModule],
+  templateUrl: './matching-list.component.html',
+  styleUrls: ['./matching-list.component.css']
 })
 export class MatchingListComponent implements OnInit {
-  @ViewChild('chatBody') chatBody!: ElementRef;
-
+  // User data
+  userId: number | null = null;
+  userName: string = 'User Name';
+  userCity: string = 'City';
+  userPhoto: string = 'https://cdn-icons-png.flaticon.com/512/3135/3135715.png';
+  userProfileCompletion: number = 75;
+  totalMatches: number = 0;
+
+  // Loading state
   loading = false;
   error: string | null = null;
 
-  // Modal states
-  showProfileModal = false;
-  showEditModal = false;
-  showChatWindow = false;
-  showLikedDropdown = false;
-  showTyping = false;
+  // Matching data
+  result: ApiMatchResponse | null = null;
+  groupedMatches: { range: string; items: ApiMatchItem[] }[] = [];
+  displayedMatches: Profile[] = [];
 
-  // User data
-  userId: number = 1;
-  userPhoto = 'https://randomuser.me/api/portraits/men/15.jpg';
-  userName = 'Ravi Kumar';
-  userCity = 'Chennai, India';
-  userProfileCompletion = 80;
+  // Filters and search
+  searchTerm: string = '';
+  availableLocations: string[] = ['New York', 'London', 'Tokyo', 'Paris', 'Sydney'];
+  availableAgeRanges: string[] = ['18-25', '26-35', '36-45', '46+'];
+  availableProfessions: string[] = ['Engineer', 'Doctor', 'Teacher', 'Designer', 'Developer'];
 
-  // Edit profile
-  editName = '';
-  editCity = '';
-
-  // Filter state
-  searchTerm = '';
-  locationFilter = '';
-  ageFilter = '';
-  professionFilter = '';
-  scoreFilter = 0;
-  sortBy = 'compatibility';
-
-  // Data
-  allMatches: Profile[] = [];
-  filteredMatches: Profile[] = [];
+  selectedRange: string = 'all';
+  availableRanges: string[] = ['all', '90-100', '80-89', '70-79', '60-69', 'below_60'];
+  mode: 'expectation' | 'character' = 'expectation';
+
+  // Modals and UI states
+  showProfileModal: boolean = false;
+  showEditModal: boolean = false;
+  showChatWindow: boolean = false;
+  showLikedDropdown: boolean = false;
+
+  // Selected profile data
   selectedProfile: Profile | null = null;
-  currentChatUser: Profile | null = null;
+  likedProfiles: Profile[] = [];
 
-  // Chat state
+  // Chat functionality
+  currentChatUser: Profile | null = null;
   chatMessages: ChatMessage[] = [];
-  newMessage = '';
-  typingTimeout: any = null;
+  newMessage: string = '';
+  showTyping: boolean = false;
 
-  // Stats
-  totalMatches = 0;
-
-  // Available filters
-  availableLocations: string[] = ['Chennai', 'Bengaluru', 'Hyderabad', 'Mumbai', 'Delhi'];
-  availableAgeRanges: string[] = ['18-25', '26-30', '31-35', '36-40', '41+'];
-  availableProfessions: string[] = ['Software Engineer', 'Doctor', 'Teacher', 'Business', 'Student', 'Architect', 'Data Scientist', 'Marketing Analyst'];
+  // Edit profile
+  editName: string = '';
+  editCity: string = '';
 
-  // Like functionality
-  likedProfiles: Profile[] = [];
+  // Store marriage profiles data
+  private marriageProfiles: Map<number, any> = new Map();
 
   constructor(
-    private router: Router,
-    private matchingService: MatchingService
+    private matchingService: MatchingService,
+    private route: ActivatedRoute
   ) { }
 
-  async ngOnInit() {
-    this.loadMatches();
+  ngOnInit(): void {
+    this.route.paramMap.subscribe((params) => {
+      const id = Number(params.get('id'));
+      this.userId = !isNaN(id) && id > 0 ? id : null;
+      if (this.userId) {
+        this.findMatches(this.userId);
+        this.loadUserProfile(this.userId);
+      } else {
+        this.error = 'No user ID available.';
+      }
+    });
   }
 
-  get displayedMatches(): Profile[] {
-    return this.filteredMatches;
+  loadUserProfile(userId: number): void {
+    this.loading = true;
+
+    // Fetch user's marriage profile from backend
+    this.matchingService.getMarriageProfile(userId).subscribe({
+      next: (profile: any) => {
+        if (profile) {
+          // Update user panel with actual data
+          this.userName = profile.full_name || 'User Name';
+          this.userCity = profile.current_city || 'City';
+
+          // You can also set other user details if needed
+          console.log('User profile loaded:', profile);
+        } else {
+          console.warn('No profile found for user:', userId);
+        }
+        this.loading = false;
+      },
+      error: (err: any) => {
+        console.error('Failed to load user profile:', err);
+        // Fallback to default values if API fails
+        this.userName = 'User Name';
+        this.userCity = 'City';
+        this.loading = false;
+      }
+    });
   }
 
-  async loadMatches() {
-    this.loading = true;
+  findMatches(userId: number): void {
     this.error = null;
+    this.result = null;
+    this.groupedMatches = [];
+    this.displayedMatches = [];
+    this.loading = true;
 
-    try {
-      this.matchingService.getMatches(this.userId, {
-        role: 'marriage',
-        limit: 50,
-        excludeSelf: true
-      }).subscribe({
-        next: (response: ApiMatchResponse) => {
-          this.allMatches = response.matches.map((match: ApiMatchItem) => ({
-            ...match,
-            id: match.user_id,
-            user_id: match.user_id,
-            name: match.name || `User ${match.user_id}`,
-            match_score: match.score,
-            age: match.age || Math.floor(Math.random() * 15) + 25,
-            city: match.city || this.availableLocations[Math.floor(Math.random() * this.availableLocations.length)],
-            job: match.role || this.availableProfessions[Math.floor(Math.random() * this.availableProfessions.length)],
-            profession: match.role || this.availableProfessions[Math.floor(Math.random() * this.availableProfessions.length)],
-            isOnline: Math.random() > 0.5,
-            photo_url: match.photo_url || `https://randomuser.me/api/portraits/${Math.random() > 0.5 ? 'men' : 'women'}/${Math.floor(Math.random() * 50)}.jpg`,
-            gender: Math.random() > 0.5 ? 'Male' : 'Female',
-            meetsExpectations: false,
-            expectationMatchScore: 0,
-            aiExplanation: this.generateAIExplanation(match),
-            hobbies: ['Reading', 'Travel', 'Music'].slice(0, Math.floor(Math.random() * 3) + 1),
-            education: ['Bachelor', 'Master', 'PhD'][Math.floor(Math.random() * 3)],
-            location: match.city || 'Unknown'
-          }));
-
-          this.applyFilters();
-          this.totalMatches = this.allMatches.length;
+    this.matchingService
+      .getMatches(userId, { role: 'marriage', limit: 10, excludeSelf: true })
+      .subscribe({
+        next: (res: ApiMatchResponse) => {
+          console.log('Backend Response:', res);
+          this.result = res;
+          this.groupedMatches = this.prepareGroups(res.matches, 'final_score');
+          this.loadMarriageProfiles().then(() => {
+            this.processMatchesForDisplay();
+          });
+          this.mode = 'expectation';
+          this.totalMatches = this.calculateTotalMatches(res.matches);
+        },
+        error: (err: any) => {
+          this.error = err?.error?.error || 'Failed to fetch matches.';
           this.loading = false;
         },
+        complete: () => (this.loading = false),
+      });
+  }
+
+  sortCharacterwise(): void {
+    if (!this.userId) return;
+    this.loading = true;
+    this.error = null;
+    this.result = null;
+    this.groupedMatches = [];
+    this.displayedMatches = [];
+
+    this.matchingService
+      .getCharacterwiseMatches(this.userId, { role: 'marriage', limit: 10, excludeSelf: true })
+      .subscribe({
+        next: (res: ApiMatchResponse) => {
+          this.result = res;
+          this.groupedMatches = this.prepareGroups(res.matches, 'score_color');
+          this.loadMarriageProfiles().then(() => {
+            this.processMatchesForDisplay();
+          });
+          this.mode = 'character';
+          this.totalMatches = this.calculateTotalMatches(res.matches);
+        },
         error: (err: any) => {
-          console.error('Error loading matches:', err);
-          this.error = 'Failed to load matches. Please try again.';
+          this.error = err?.error?.error || 'Failed to fetch characterwise matches.';
           this.loading = false;
-        }
+        },
+        complete: () => (this.loading = false),
       });
+  }
 
-    } catch (err) {
-      this.error = 'Failed to load matches. Please try again.';
-      this.loading = false;
-    }
+  sortByExpectation(): void {
+    if (!this.userId) return;
+    this.loading = true;
+    this.error = null;
+    this.result = null;
+    this.groupedMatches = [];
+    this.displayedMatches = [];
+
+    this.matchingService
+      .getMatches(this.userId, { role: 'marriage', limit: 10, excludeSelf: true })
+      .subscribe({
+        next: (res: ApiMatchResponse) => {
+          this.result = res;
+          this.groupedMatches = this.prepareGroups(res.matches, 'final_score');
+          this.loadMarriageProfiles().then(() => {
+            this.processMatchesForDisplay();
+          });
+          this.mode = 'expectation';
+          this.totalMatches = this.calculateTotalMatches(res.matches);
+        },
+        error: (err: any) => {
+          this.error = err?.error?.error || 'Failed to fetch matches.';
+          this.loading = false;
+        },
+        complete: () => (this.loading = false),
+      });
   }
 
-  generateAIExplanation(profile: ApiMatchItem): string {
-    const traits = [];
-    if (profile.blue > 60) traits.push('analytical thinking');
-    if (profile.green > 60) traits.push('empathetic nature');
-    if (profile.yellow > 60) traits.push('creative approach');
-    if (profile.red > 60) traits.push('assertive communication');
+  // Load marriage profiles from backend
+  private async loadMarriageProfiles(): Promise<void> {
+    if (!this.result) return;
 
-    if (traits.length > 0) {
-      return `Strong compatibility in ${traits.join(' and ')} based on personality assessment.`;
+    // Collect all user IDs from matches
+    const userIds: number[] = [];
+    this.groupedMatches.forEach(group => {
+      group.items.forEach(item => {
+        userIds.push(item.user_id);
+      });
+    });
+
+    // Fetch marriage profiles for all matched users
+    for (const userId of userIds) {
+      if (!this.marriageProfiles.has(userId)) {
+        try {
+          const profile = await this.fetchMarriageProfile(userId);
+          if (profile) {
+            this.marriageProfiles.set(userId, profile);
+          }
+        } catch (error) {
+          console.error(`Failed to fetch profile for user ${userId}:`, error);
+        }
+      }
     }
+  }
 
-    return 'Good overall compatibility with balanced personality traits.';
+  // Fetch individual marriage profile
+  private fetchMarriageProfile(userId: number): Promise<any> {
+    return new Promise((resolve, reject) => {
+      this.matchingService.getMarriageProfile(userId).subscribe({
+        next: (profile: any) => resolve(profile),
+        error: (err: any) => reject(err)
+      });
+    });
   }
 
-  applyFilters() {
-    let filtered = [...this.allMatches];
+  public processMatchesForDisplay(): void {
+    this.displayedMatches = [];
 
-    // Apply search filter
-    if (this.searchTerm) {
-      const term = this.searchTerm.toLowerCase();
-      filtered = filtered.filter(profile =>
-        profile.name?.toLowerCase().includes(term) ||
-        profile.city?.toLowerCase().includes(term) ||
-        profile.job?.toLowerCase().includes(term) ||
-        profile.hobbies?.some(hobby => hobby.toLowerCase().includes(term))
-      );
-    }
+    this.groupedMatches.forEach(group => {
+      group.items.forEach(item => {
+        const marriageProfile = this.marriageProfiles.get(item.user_id);
 
-    // Apply location filter
-    if (this.locationFilter) {
-      filtered = filtered.filter(profile =>
-        profile.city?.toLowerCase().includes(this.locationFilter.toLowerCase())
-      );
-    }
+        // Calculate age from date_of_birth
+        let age: number | undefined;
+        if (marriageProfile?.date_of_birth) {
+          age = this.calculateAge(marriageProfile.date_of_birth);
+        }
 
-    // Apply age filter
-    if (this.ageFilter) {
-      filtered = filtered.filter(profile => {
-        if (!profile.age) return false;
-        return this.doesAgeMatch(profile.age, this.ageFilter);
+        const profile: Profile = {
+          user_id: item.user_id,
+          name: item.name || 'Unknown',
+          age: age,
+          city: marriageProfile?.current_city || 'Unknown',
+          job: marriageProfile?.job_role || marriageProfile?.employment_status || 'Not specified',
+          photo_url: this.getRandomPhoto(), // Keep random photos for demo
+          isOnline: Math.random() > 0.5,
+          match_score: item.final_score || item.score_color || 0,
+          score: item.final_score || item.score_color || 0,
+          gender: item.gender,
+          blue: item.blue,
+          green: item.green,
+          yellow: item.yellow,
+          red: item.red,
+          explanations: item.explanations,
+          explanation_source: item.explanation_source,
+          // Include additional fields for modal display
+          current_city: marriageProfile?.current_city,
+          date_of_birth: marriageProfile?.date_of_birth,
+          job_role: marriageProfile?.job_role,
+          employment_status: marriageProfile?.employment_status,
+          marital_status: marriageProfile?.marital_status,
+          education_level: marriageProfile?.education_level
+        };
+        this.displayedMatches.push(profile);
       });
-    }
-
-    // Apply profession filter
-    if (this.professionFilter) {
-      filtered = filtered.filter(profile =>
-        profile.profession?.toLowerCase().includes(this.professionFilter.toLowerCase())
-      );
-    }
+    });
+  }
 
-    // Apply score filter
-    if (this.scoreFilter > 0) {
-      filtered = filtered.filter(profile =>
-        (profile.match_score || profile.score) >= this.scoreFilter
-      );
-    }
+  // Calculate age from date of birth
+  private calculateAge(dateOfBirth: string): number {
+    try {
+      const birthDate = new Date(dateOfBirth);
+      const today = new Date();
+      let age = today.getFullYear() - birthDate.getFullYear();
+      const monthDiff = today.getMonth() - birthDate.getMonth();
 
-    // Apply sorting
-    filtered.sort((a, b) => {
-      switch (this.sortBy) {
-        case 'compatibility':
-          return (b.match_score || b.score) - (a.match_score || a.score);
-        case 'newest':
-          return Math.random() - 0.5; // Random for demo
-        case 'location':
-          return a.city?.localeCompare(b.city || '') || 0;
-        default:
-          return 0;
+      if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+        age--;
       }
-    });
 
-    this.filteredMatches = filtered;
+      return age;
+    } catch (error) {
+      console.error('Error calculating age:', error);
+      return Math.floor(Math.random() * 20) + 25; // Fallback to random age
+    }
+  }
+
+  private calculateTotalMatches(matches: { [range: string]: ApiMatchItem[] }): number {
+    return Object.values(matches).reduce((total, group) => total + group.length, 0);
   }
 
-  doesAgeMatch(age: number, ageRange: string): boolean {
-    const ranges: { [key: string]: [number, number] } = {
-      '18-25': [18, 25],
-      '26-30': [26, 30],
-      '31-35': [31, 35],
-      '36-40': [36, 40],
-      '41+': [41, 100]
-    };
+  private prepareGroups(matches: ApiMatchResponse['matches'], sortKey: keyof Pick<ApiMatchItem, 'score_color' | 'final_score'>) {
+    const ordered: { range: string; items: ApiMatchItem[] }[] = [];
+    const order = ['90-100', '80-89', '70-79', '60-69', 'below_60'];
+
+    for (const range of Object.keys(matches)) {
+      const items = matches[range] || [];
+      ordered.push({
+        range,
+        items: [...items].sort((a, b) => (Number(b[sortKey]) || 0) - (Number(a[sortKey]) || 0)),
+      });
+    }
 
-    const range = ranges[ageRange];
-    return range ? age >= range[0] && age <= range[1] : false;
+    ordered.sort((a, b) => order.indexOf(a.range) - order.indexOf(b.range));
+    return ordered;
   }
 
-  // Filter handlers
-  onSearchChange() {
-    this.applyFilters();
+  // Filter methods
+  onSearchChange(): void {
+    // Implement search logic
+    console.log('Search term:', this.searchTerm);
   }
 
-  onLocationFilterChange(event: any) {
-    this.locationFilter = event.target.value;
-    this.applyFilters();
+  onLocationFilterChange(event: any): void {
+    console.log('Location filter:', event.target.value);
   }
 
-  onAgeFilterChange(event: any) {
-    this.ageFilter = event.target.value;
-    this.applyFilters();
+  onAgeFilterChange(event: any): void {
+    console.log('Age filter:', event.target.value);
   }
 
-  onProfessionFilterChange(event: any) {
-    this.professionFilter = event.target.value;
-    this.applyFilters();
+  onProfessionFilterChange(event: any): void {
+    console.log('Profession filter:', event.target.value);
   }
 
-  onScoreFilterChange(event: any) {
-    this.scoreFilter = parseInt(event.target.value);
-    this.applyFilters();
+  onScoreFilterChange(event: any): void {
+    console.log('Score filter:', event.target.value);
   }
 
-  onSortChange(event: any) {
-    this.sortBy = event.target.value;
-    this.applyFilters();
+  onSortChange(event: any): void {
+    console.log('Sort by:', event.target.value);
   }
 
-  // Profile actions
-  openModal(profile: Profile) {
+  applyFilters(): void {
+    // Implement filter logic
+    console.log('Applying filters');
+  }
+
+  // Profile methods
+  openProfileModal(profile: Profile): void {
     this.selectedProfile = profile;
     this.showProfileModal = true;
   }
 
-  closeModal() {
+  closeModal(): void {
     this.showProfileModal = false;
     this.selectedProfile = null;
   }
 
-  openProfileModal(profile: Profile) {
-    this.selectedProfile = profile;
-    this.showProfileModal = true;
+  openEditModal(): void {
+    this.editName = this.userName;
+    this.editCity = this.userCity;
+    this.showEditModal = true;
   }
 
-  toggleLike(profile: Profile) {
-    const index = this.likedProfiles.findIndex(p => p.user_id === profile.user_id);
+  closeEditModal(): void {
+    this.showEditModal = false;
+  }
 
+  saveProfile(): void {
+    this.userName = this.editName;
+    this.userCity = this.editCity;
+    this.closeEditModal();
+    // In a real app, you would call an API to update the user profile here
+    console.log('Profile updated:', { name: this.userName, city: this.userCity });
+  }
+
+  // Like functionality
+  toggleLike(profile: Profile): void {
+    const index = this.likedProfiles.findIndex(p => p.user_id === profile.user_id);
     if (index > -1) {
       this.likedProfiles.splice(index, 1);
     } else {
       this.likedProfiles.push(profile);
-      this.triggerConfetti();
     }
   }
 
@@ -306,176 +417,92 @@ export class MatchingListComponent implements OnInit {
     return this.likedProfiles.some(p => p.user_id === profile.user_id);
   }
 
-  triggerConfetti() {
-    // Simple confetti effect - you can enhance this with a proper confetti library
-    console.log('Confetti effect triggered!');
-  }
-
-  toggleLikedDropdown() {
+  toggleLikedDropdown(): void {
     this.showLikedDropdown = !this.showLikedDropdown;
   }
 
-  // Edit profile
-  openEditModal() {
-    this.editName = this.userName;
-    this.editCity = this.userCity.split(', ')[0]; // Remove country for edit
-    this.showEditModal = true;
-  }
-
-  closeEditModal() {
-    this.showEditModal = false;
-  }
-
-  saveProfile() {
-    this.userName = this.editName;
-    this.userCity = this.editCity + ', India';
-    this.userProfileCompletion = 100;
-    this.showEditModal = false;
-  }
-
   // Chat functionality
-  openChat(profile: Profile) {
+  openChat(profile: Profile): void {
     this.currentChatUser = profile;
+    this.chatMessages = [
+      { sender: 'them', text: 'Hello! How are you?', time: '10:00 AM' },
+      { sender: 'me', text: 'I\'m good, thanks! How about you?', time: '10:01 AM' }
+    ];
     this.showChatWindow = true;
-    this.loadChat(profile);
-    setTimeout(() => {
-      this.scrollChatToBottom();
-    }, 100);
   }
 
-  closeChat() {
+  closeChat(): void {
     this.showChatWindow = false;
     this.currentChatUser = null;
     this.chatMessages = [];
   }
 
-  typingIndicator() {
-    this.showTyping = true;
-    if (this.typingTimeout) {
-      clearTimeout(this.typingTimeout);
-    }
-    this.typingTimeout = setTimeout(() => {
-      this.showTyping = false;
-    }, 1500);
-  }
-
-  sendMessage() {
-    const text = this.newMessage.trim();
-    if (!text || !this.currentChatUser) return;
-
-    const message: ChatMessage = {
-      text,
-      sender: 'me',
-      time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-    };
-
-    this.chatMessages.push(message);
-    this.saveMessage(this.currentChatUser, message);
-    this.newMessage = '';
-    this.scrollChatToBottom();
-
-    // Simulate reply after 1 second
-    setTimeout(() => {
-      const reply: ChatMessage = {
-        text: `${this.currentChatUser?.name}: Nice to hear from you!`,
-        sender: 'them',
-        time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-      };
-      this.chatMessages.push(reply);
-      this.saveMessage(this.currentChatUser!, reply);
-      this.scrollChatToBottom();
-    }, 1000);
-  }
-
-  saveMessage(user: Profile, message: ChatMessage) {
-    const key = `chat_${user.user_id}`;
-    let arr = JSON.parse(localStorage.getItem(key) || '[]');
-    arr.push(message);
-    localStorage.setItem(key, JSON.stringify(arr));
-  }
-
-  loadChat(user: Profile) {
-    const key = `chat_${user.user_id}`;
-    const arr = JSON.parse(localStorage.getItem(key) || '[]');
-    this.chatMessages = arr;
-  }
-
-  scrollChatToBottom() {
-    if (this.chatBody) {
-      this.chatBody.nativeElement.scrollTop = this.chatBody.nativeElement.scrollHeight;
+  sendMessage(): void {
+    if (this.newMessage.trim()) {
+      const now = new Date();
+      const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+      this.chatMessages.push({
+        sender: 'me',
+        text: this.newMessage,
+        time: timeString
+      });
+
+      this.newMessage = '';
+
+      // Simulate reply
+      setTimeout(() => {
+        this.showTyping = true;
+        setTimeout(() => {
+          this.showTyping = false;
+          this.chatMessages.push({
+            sender: 'them',
+            text: 'That\'s interesting! Tell me more.',
+            time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+          });
+        }, 2000);
+      }, 1000);
     }
   }
 
-  // Compatibility report
-  getCompatibilityReport(profile: Profile): string {
-    const colorSet = {
-      B: Math.floor(Math.random() * 40),
-      G: Math.floor(Math.random() * 40),
-      Y: Math.floor(Math.random() * 40),
-      R: Math.floor(Math.random() * 40),
-    };
-    const colorMatch = (Math.random() * (0.9 - 0.6) + 0.6).toFixed(2);
-    const expectationMatch = (Math.random() * (0.9 - 0.6) + 0.6).toFixed(2);
-
-    const differences = [
-      "Their religion or faith expectations differ (same faith vs no preference).",
-      "Both share similar preferences in smoking preference (Occasionally).",
-      "Their alcohol preference expectations differ (no preference vs never).",
-      "Their dietary habits expectations differ (vegetarian vs no preference).",
-      "Both share similar preferences in family type (Either).",
-      "Their fitness lifestyle expectations differ (high vs moderate).",
-      "Their preferred location expectations differ (pune vs kolkata).",
-      "Their preferred country expectations differ (other vs australia).",
-    ];
-
-    return `
-    <div class="compatibility-report">
-      <p><strong>${profile.name}</strong> (${profile.gender || 'Male'})</p>
-      <p><strong>Overall Match:</strong> ${profile.match_score || profile.score}%</p>
-      <p><strong>Colors:</strong> B${colorSet.B} • G${colorSet.G} • Y${colorSet.Y} • R${colorSet.R}</p>
-      <p><strong>Color Match:</strong> ${colorMatch} • <strong>Expectation Match:</strong> ${expectationMatch}</p>
-      <br>
-      <div class="quadratic-section">
-        <h4>1️⃣ How this profile matches to you</h4>
-        <p>${profile.name} shows high compatibility in emotional stability, career orientation, and communication approach. You both value similar ethics, decision-making styles, and emotional awareness.</p>
-
-        <h4>2️⃣ Why the remaining percentage does not match</h4>
-        <p>The mismatch comes mainly from lifestyle and belief areas. Factors like faith flexibility, preferred diet, and regional lifestyle contribute to the gap.</p>
-
-        <h4>3️⃣ What you may need to sacrifice</h4>
-        <p>For smoother compatibility, consider being more adaptive toward dietary and cultural choices, and show patience toward different viewpoints in lifestyle preferences.</p>
-
-        <h4>4️⃣ Expectation-wise Comparison</h4>
-        <ul>
-          ${differences
-        .map(
-          (d) =>
-            `<li style="color:${d.includes("similar") ? "green" : "red"
-            }">${d}</li>`
-        )
-        .join("")}
-        </ul>
-      </div>
-    </div>`;
+  typingIndicator(): void {
+    // Could implement typing indicator logic here
   }
 
-  // Utility functions
-  handleImageError(event: any, profile: Profile) {
-    event.target.src = 'https://via.placeholder.com/300?text=' + (profile.name || 'User');
+  // Utility methods
+  handleImageError(event: any, profile: Profile): void {
+    event.target.src = 'https://cdn-icons-png.flaticon.com/512/3135/3135715.png';
   }
 
-  @HostListener('document:click', ['$event'])
-  handleDocumentClick(event: MouseEvent) {
-    const target = event.target as HTMLElement;
-    if (!target.closest('.like-section')) {
-      this.showLikedDropdown = false;
+  getCompatibilityReport(profile: Profile): string {
+    if (!profile.explanations || profile.explanations.length === 0) {
+      return `<div class="compatibility-report">
+        <p>Based on your personality traits and expectations, you have a <strong>${profile.match_score}% compatibility</strong> with ${profile.name}.</p>
+        <p>This match considers both character compatibility and expectation alignment.</p>
+      </div>`;
     }
+
+    return `<div class="compatibility-report">
+      <p><strong>Compatibility Analysis:</strong></p>
+      <ul>
+        ${profile.explanations.map(exp => `<li>${exp}</li>`).join('')}
+      </ul>
+    </div>`;
   }
 
-  @HostListener('document:keydown.escape')
-  handleEscape() {
-    this.closeModal();
-    this.closeEditModal();
-    this.closeChat();
+  get filteredGroups() {
+    if (this.selectedRange === 'all') return this.groupedMatches;
+    return this.groupedMatches.filter((g) => g.range === this.selectedRange);
+  }
+
+  // Helper methods for demo data (only for photos)
+  private getRandomPhoto(): string {
+    const photos = [
+      'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150&h=150&fit=crop&crop=face',
+      'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&h=150&fit=crop&crop=face',
+      'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face',
+      'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face'
+    ];
+    return photos[Math.floor(Math.random() * photos.length)];
   }
 }

src/app/matching.service.ts

@@ -11,20 +11,19 @@ export interface ApiMatchItem {
   green: number;
   yellow: number;
   red: number;
-  score: number;
-  created_at?: string | null;
+  score_color?: number;
+  score_expect?: number;
+  final_score?: number;
+  percentage?: number;
   explanations?: string[];
-  // Optional display fields that may not come from API but used in templates
-  city?: string | null;
-  age?: number | null;
-  job?: string | null;
-  isOnline?: boolean; // optional presence indicator for UI
-  photo_url?: string; // optional photo URL for profile image
+  explanation_source?: string; // ✅ added for expectation vs character
 }
 
 export interface ApiMatchResponse {
   input_user: {
     user_id: number;
+    name?: string;
+    gender?: string;
     role?: string | null;
     blue: number;
     green: number;
@@ -32,20 +31,22 @@ export interface ApiMatchResponse {
     red: number;
     created_at?: string | null;
   };
-  matches: ApiMatchItem[];
-  count: number;
+  matches: {
+    [range: string]: ApiMatchItem[];
+  };
 }
 
 @Injectable({ providedIn: 'root' })
 export class MatchingService {
-
   private baseUrl: string;
 
   constructor(private http: HttpClient) {
-    // Initialize baseUrl based on the current hostname
-    this.baseUrl = typeof location !== 'undefined' && location.hostname.endsWith('hf.space')
-      ? 'https://pykara-py-match-backend.hf.space/api'
-      : 'http://localhost:5000/api';
+    // Initialize baseUrl based on the current environment
+    if (typeof window !== 'undefined' && window.location.hostname.endsWith('hf.space')) {
+      this.baseUrl = 'https://pykara-py-match-backend.hf.space/api';
+    } else {
+      this.baseUrl = 'http://localhost:5000/api';
+    }
   }
 
   getMatches(
@@ -55,11 +56,27 @@ export class MatchingService {
     let params = new HttpParams()
       .set('user_id', String(userId))
       .set('limit', String(opts?.limit ?? 10))
-      .set('exclude_self', (opts?.excludeSelf ?? true) ? 'yes' : 'no');
+      .set('exclude_self', (opts?.excludeSelf ?? true) ? 'yes' : 'no')
+      .set('role', opts?.role ?? 'marriage');
 
-    // 👇 Default to "marriage" if role is not explicitly passed
-    params = params.set('role', opts?.role ?? 'marriage');
+    return this.http.get<ApiMatchResponse>(`${this.baseUrl}/match`, { params });
+  }
+
+  getCharacterwiseMatches(
+    userId: number,
+    options: { role?: string; limit?: number; excludeSelf?: boolean } = {}
+  ): Observable<ApiMatchResponse> {
+    let params = new HttpParams()
+      .set('user_id', String(userId))
+      .set('role', options.role ?? 'marriage')
+      .set('limit', String(options.limit ?? 10))
+      .set('exclude_self', (options.excludeSelf ?? true) ? 'yes' : 'no')
+      .set('characterwise', 'true'); // ✅ activates LLM logic in backend
 
     return this.http.get<ApiMatchResponse>(`${this.baseUrl}/match`, { params });
   }
+
+  getMarriageProfile(userId: number): Observable<any> {
+    return this.http.get<any>(`${this.baseUrl}/marriage-profile/${userId}`);
+  }
 }