From 79478f5005556994172e13c56d3d160a19fc0263 Mon Sep 17 00:00:00 2001
From: AdithaBuwaneka <adithabuwaneka0@gmail.com>
Date: Tue, 22 Jul 2025 10:33:47 +0530
Subject: [PATCH] feat: Add KYC status fetching for users in ListingCard,
 MatchCard, and MatchDetailsModal

---
 .../Dashboard/listings/ListingCard.tsx        | 46 +++++++++++++++++--
 .../Dashboard/matches/MatchCard.tsx           | 28 +++++++++--
 .../Dashboard/matches/MatchDetailsModal.tsx   | 27 +++++++++--
 3 files changed, 92 insertions(+), 9 deletions(-)

diff --git a/src/components/Dashboard/listings/ListingCard.tsx b/src/components/Dashboard/listings/ListingCard.tsx
index fe0aeca..48964f3 100644
--- a/src/components/Dashboard/listings/ListingCard.tsx
+++ b/src/components/Dashboard/listings/ListingCard.tsx
@@ -3,8 +3,9 @@
 
 import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import { SkillListing } from '@/types/skillListing';
-import { BadgeCheck, Edit, Trash2, Eye, Users, Shield, CheckCircle, Clock, XCircle } from 'lucide-react';
+import { BadgeCheck, Edit, Trash2, Eye, Users, Shield, CheckCircle, Clock, XCircle, AlertCircle } from 'lucide-react';
 import { useAuth } from '@/lib/context/AuthContext';
 import { processAvatarUrl } from '@/utils/avatarUtils';
 
@@ -19,8 +20,10 @@ interface ListingCardProps {
 
 const ListingCard: React.FC<ListingCardProps> = ({ listing, onDelete, onEdit }) => {
   const { user } = useAuth();
+  const router = useRouter();
   const [isOwner, setIsOwner] = useState(false);
   const [showDetailsModal, setShowDetailsModal] = useState(false);
+  const [kycStatus, setKycStatus] = useState<string | null>(null);
   
   useEffect(() => {
     // Check if the current user is the owner of this listing
@@ -28,6 +31,22 @@ const ListingCard: React.FC<ListingCardProps> = ({ listing, onDelete, onEdit })
       setIsOwner(user._id === listing.userId);
     }
   }, [user, listing]);
+
+  // Fetch KYC status for the listing user
+  useEffect(() => {
+    async function fetchKycStatus() {
+      try {
+        const res = await fetch(`/api/kyc/status?userId=${listing.userId}`);
+        const data = await res.json();
+        setKycStatus(data.success ? data.status : null);
+      } catch (err) {
+        setKycStatus(null);
+      }
+    }
+    if (listing.userId) {
+      fetchKycStatus();
+    }
+  }, [listing.userId]);
   
   const formatDate = (dateString: string) => {
     const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'short', day: 'numeric' };
@@ -89,7 +108,17 @@ const ListingCard: React.FC<ListingCardProps> = ({ listing, onDelete, onEdit })
               <div className="flex-1 min-w-0">
                 <h3 className="font-medium text-gray-800 flex items-center truncate">
                   <span className="truncate">{listing.userDetails.firstName} {listing.userDetails.lastName}</span>
-                  <BadgeCheck className="w-4 h-4 ml-1 text-blue-500 flex-shrink-0" />
+                  {(kycStatus === 'Accepted' || kycStatus === 'Approved') ? (
+                    <BadgeCheck className="w-4 h-4 ml-1 text-blue-500 flex-shrink-0" />
+                  ) : (
+                    <button 
+                      onClick={() => router.push('/dashboard?component=setting')}
+                      title="Click to verify your account"
+                      className="inline-flex"
+                    >
+                      <AlertCircle className="w-4 h-4 ml-1 text-orange-500 flex-shrink-0 hover:text-orange-600 transition-colors cursor-pointer" />
+                    </button>
+                  )}
                 </h3>
                 <p className="text-xs text-gray-500 truncate">
                   {formatDate(listing.createdAt)}
@@ -226,7 +255,18 @@ const ListingCard: React.FC<ListingCardProps> = ({ listing, onDelete, onEdit })
                 <div className="flex-1">
                   <h3 className="font-semibold text-gray-800 flex items-center">
                     {listing.userDetails.firstName} {listing.userDetails.lastName}
-                    <BadgeCheck className="w-5 h-5 ml-2 text-blue-500" />
+                    {(kycStatus === 'Accepted' || kycStatus === 'Approved') ? (
+                      <BadgeCheck className="w-5 h-5 ml-2 text-blue-500" />
+                    ) : (
+                      <button 
+                        onClick={() => router.push('/dashboard?component=setting')} 
+                        className="ml-2 px-3 py-1 text-sm bg-orange-100 text-orange-600 rounded-full flex items-center hover:bg-orange-200 transition-colors"
+                        title="Click to verify your account"
+                      >
+                        <AlertCircle className="w-4 h-4 mr-1" />
+                        Verify
+                      </button>
+                    )}
                   </h3>
                   <p className="text-sm text-gray-500">
                     Posted on {formatDate(listing.createdAt)}
diff --git a/src/components/Dashboard/matches/MatchCard.tsx b/src/components/Dashboard/matches/MatchCard.tsx
index e6ca210..d04c810 100644
--- a/src/components/Dashboard/matches/MatchCard.tsx
+++ b/src/components/Dashboard/matches/MatchCard.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 import { SkillMatch } from '@/types/skillMatch';
-import { BadgeCheck, ArrowRightLeft, Eye, MessageCircle, Clock, CheckCircle, XCircle, Award, Calendar } from 'lucide-react';
+import { BadgeCheck, ArrowRightLeft, Eye, MessageCircle, Clock, CheckCircle, XCircle, Award, Calendar, AlertCircle } from 'lucide-react';
 import { processAvatarUrl } from '@/utils/avatarUtils';
 
 interface MatchCardProps {
@@ -12,6 +12,24 @@ interface MatchCardProps {
 }
 
 const MatchCard: React.FC<MatchCardProps> = ({ match, onClick }) => {
+  const [otherUserKycStatus, setOtherUserKycStatus] = useState<string | null>(null);
+
+  // Fetch KYC status for the other user
+  useEffect(() => {
+    async function fetchKycStatus() {
+      try {
+        const res = await fetch(`/api/kyc/status?userId=${match.otherUser.userId}`);
+        const data = await res.json();
+        setOtherUserKycStatus(data.success ? data.status : null);
+      } catch (err) {
+        setOtherUserKycStatus(null);
+      }
+    }
+    if (match.otherUser.userId) {
+      fetchKycStatus();
+    }
+  }, [match.otherUser.userId]);
+
   // Format date
   const formatDate = (dateString: string) => {
     const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'short', day: 'numeric' };
@@ -222,7 +240,11 @@ const MatchCard: React.FC<MatchCardProps> = ({ match, onClick }) => {
               >
                 {match.otherUser.firstName} {match.otherUser.lastName}
               </span>
-              <BadgeCheck className="w-4 h-4 ml-1 text-blue-500 flex-shrink-0" />
+              {(otherUserKycStatus === 'Accepted' || otherUserKycStatus === 'Approved') ? (
+                <BadgeCheck className="w-4 h-4 ml-1 text-blue-500 flex-shrink-0" />
+              ) : (
+                <AlertCircle className="w-4 h-4 ml-1 text-orange-500 flex-shrink-0" title="Not Verified" />
+              )}
             </h3>
           </div>
           
diff --git a/src/components/Dashboard/matches/MatchDetailsModal.tsx b/src/components/Dashboard/matches/MatchDetailsModal.tsx
index e6e09f9..6355eac 100644
--- a/src/components/Dashboard/matches/MatchDetailsModal.tsx
+++ b/src/components/Dashboard/matches/MatchDetailsModal.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { SkillMatch } from '@/types/skillMatch';
@@ -8,7 +8,7 @@ import { useToast } from '@/lib/context/ToastContext';
 import { updateMatchStatus, acceptMatchAndCreateChatRoom } from '@/services/matchService';
 import { fetchUserChatRooms } from '@/services/chatApiServices';
 import { useAuth } from '@/lib/context/AuthContext';
-import { BadgeCheck, ArrowRight, MessageCircle, Calendar, XCircle, CheckCircle, Clock, Award, BarChart3, Target } from 'lucide-react';
+import { BadgeCheck, ArrowRight, MessageCircle, Calendar, XCircle, CheckCircle, Clock, Award, BarChart3, Target, AlertCircle } from 'lucide-react';
 import { processAvatarUrl } from '@/utils/avatarUtils';
 
 interface MatchDetailsModalProps {
@@ -92,6 +92,23 @@ const MatchDetailsModal: React.FC<MatchDetailsModalProps> = ({ match, currentUse
   const [showAcceptConfirmation, setShowAcceptConfirmation] = useState(false);
   const [showRejectConfirmation, setShowRejectConfirmation] = useState(false);
   const [openingChat, setOpeningChat] = useState(false);
+  const [otherUserKycStatus, setOtherUserKycStatus] = useState<string | null>(null);
+
+  // Fetch KYC status for the other user
+  useEffect(() => {
+    async function fetchKycStatus() {
+      try {
+        const res = await fetch(`/api/kyc/status?userId=${match.otherUser.userId}`);
+        const data = await res.json();
+        setOtherUserKycStatus(data.success ? data.status : null);
+      } catch (err) {
+        setOtherUserKycStatus(null);
+      }
+    }
+    if (match.otherUser.userId) {
+      fetchKycStatus();
+    }
+  }, [match.otherUser.userId]);
   
   // Format date
   const formatDate = (dateString: string) => {
@@ -411,7 +428,11 @@ const MatchDetailsModal: React.FC<MatchDetailsModalProps> = ({ match, currentUse
                   <div>
                     <h3 className="font-semibold text-gray-800 flex items-center">
                       {match.otherUser.firstName} {match.otherUser.lastName}
-                      <BadgeCheck className="w-4 h-4 ml-1 text-blue-500" />
+                      {(otherUserKycStatus === 'Accepted' || otherUserKycStatus === 'Approved') ? (
+                        <BadgeCheck className="w-4 h-4 ml-1 text-blue-500" />
+                      ) : (
+                        <AlertCircle className="w-4 h-4 ml-1 text-orange-500" title="Not Verified" />
+                      )}
                     </h3>
                     <p className="text-xs text-gray-600">Partner Profile</p>
                   </div>