From 95bf48f240af61f474f71fa2a703e9064752b611 Mon Sep 17 00:00:00 2001
From: Kurdistan Tech Ministry <info@pezkuwichain.io>
Date: Tue, 21 Apr 2026 05:22:19 +0300
Subject: [PATCH] feat: show citizen ID in role card, show Welati in KYC status
 card

---
 web/src/components/MobileHomeLayout.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/web/src/components/MobileHomeLayout.tsx b/web/src/components/MobileHomeLayout.tsx
index 5861cc3e..9b8371b2 100644
--- a/web/src/components/MobileHomeLayout.tsx
+++ b/web/src/components/MobileHomeLayout.tsx
@@ -7,7 +7,7 @@ import { supabase } from '@/lib/supabase';
 import { LanguageSwitcher } from './LanguageSwitcher';
 import { PezkuwiWalletButton } from './PezkuwiWalletButton';
 import NotificationBell from './notifications/NotificationBell';
-import { fetchUserTikis, getPrimaryRole, getTikiDisplayName, getTikiEmoji } from '@pezkuwi/lib/tiki';
+import { fetchUserTikis, getPrimaryRole, getTikiDisplayName, getTikiEmoji, getCitizenNFTDetails, generateCitizenNumber } from '@pezkuwi/lib/tiki';
 import { getAllScores, type UserScores } from '@pezkuwi/lib/scores';
 import { getKycStatus } from '@pezkuwi/lib/kyc';
 
@@ -127,6 +127,7 @@ const MobileHomeLayout: React.FC = () => {
     trustScore: 0, referralScore: 0, stakingScore: 0, tikiScore: 0, totalScore: 0,
   });
   const [kycStatus, setKycStatus] = useState<string>('NotStarted');
+  const [citizenId, setCitizenId] = useState<string | null>(null);
   const [loadingScores, setLoadingScores] = useState(false);
 
   const fetchProfile = useCallback(async () => {
@@ -153,6 +154,13 @@ const MobileHomeLayout: React.FC = () => {
       setTikis(userTikis);
       setScores(allScores);
       setKycStatus(status);
+      if (userTikis.includes('Welati')) {
+        const nft = await getCitizenNFTDetails(peopleApi, selectedAccount.address);
+        if (nft) {
+          const sixDigit = generateCitizenNumber(selectedAccount.address, nft.collectionId, nft.itemId);
+          setCitizenId(`#${nft.collectionId}-${nft.itemId}-${sixDigit}`);
+        }
+      }
     } catch { /* blockchain fetch is best-effort */ }
     finally { setLoadingScores(false); }
   }, [selectedAccount, peopleApi, isPeopleReady]);
@@ -240,7 +248,7 @@ const MobileHomeLayout: React.FC = () => {
             )}
             {/* Role - always visible, shows Visitor for guests */}
             <ScoreCard icon={getTikiEmoji(primaryRole)} label={t('mobile.role', 'Role')} value={getTikiDisplayName(primaryRole)}
-              sub={!user ? t('mobile.loginToSeeRoles', 'Login to see roles') : selectedAccount ? `${tikis.length} ${tikis.length === 1 ? 'role' : 'roles'}` : t('mobile.connectWallet', 'Connect wallet')}
+              sub={!user ? t('mobile.loginToSeeRoles', 'Login to see roles') : citizenId ? citizenId : selectedAccount ? `${tikis.length} ${tikis.length === 1 ? 'role' : 'roles'}` : t('mobile.connectWallet', 'Connect wallet')}
               color="border-l-orange-500" />
             {/* Total Score */}
             <ScoreCard icon="🏆" label={t('mobile.totalScore', 'Total Score')}
@@ -269,13 +277,13 @@ const MobileHomeLayout: React.FC = () => {
               action={!user ? { label: t('nav.login', 'Login'), onClick: () => navigate('/login') } : undefined} />
             {/* KYC Status */}
             <ScoreCard
-              icon={!user ? '📝' : kycStatus === 'Approved' ? '✅' : kycStatus === 'Pending' ? '⏳' : '📝'}
+              icon={!user ? '📝' : tikis.includes('Welati') ? '🌿' : kycStatus === 'Approved' ? '✅' : kycStatus === 'Pending' ? '⏳' : '📝'}
               label={t('mobile.kycStatus', 'KYC Status')}
-              value={!user ? '—' : kycStatus}
-              color={kycStatus === 'Approved' ? 'border-l-green-500' : 'border-l-yellow-500'}
+              value={!user ? '—' : tikis.includes('Welati') ? 'Welati' : kycStatus}
+              color={tikis.includes('Welati') ? 'border-l-green-500' : kycStatus === 'Approved' ? 'border-l-green-500' : 'border-l-yellow-500'}
               action={!user
                 ? { label: t('nav.login', 'Login'), onClick: () => navigate('/login') }
-                : kycStatus === 'NotStarted'
+                : !tikis.includes('Welati') && kycStatus === 'NotStarted'
                   ? { label: t('mobile.apply', 'Apply'), onClick: () => navigate('/be-citizen') }
                   : undefined}
             />