updates

Frontend/src/pages/admin/index.ts

@@ -1,6 +1,7 @@
 export { default as DashboardPage } from './DashboardPage';
 export { default as RoomManagementPage } from './RoomManagementPage';
 export { default as UserManagementPage } from './UserManagementPage';
+export { default as GuestProfilePage } from './GuestProfilePage';
 export { default as BookingManagementPage } from './BookingManagementPage';
 export { default as PaymentManagementPage } from './PaymentManagementPage';
 export { default as ServiceManagementPage } from './ServiceManagementPage';

Frontend/src/pages/customer/LoyaltyPage.tsx

@@ -0,0 +1,709 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  Star, 
+  Gift, 
+  TrendingUp, 
+  Users, 
+  Calendar,
+  Award,
+  ArrowRight,
+  Copy,
+  CheckCircle,
+  Clock,
+  Target,
+  History,
+  CreditCard
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import { Loading, EmptyState } from '../../components/common';
+import loyaltyService, {
+  UserLoyaltyStatus,
+  PointsTransaction,
+  LoyaltyReward,
+  RewardRedemption,
+  Referral
+} from '../../services/api/loyaltyService';
+import { formatDate } from '../../utils/format';
+import { useAsync } from '../../hooks/useAsync';
+
+type Tab = 'overview' | 'rewards' | 'history' | 'referrals';
+
+const LoyaltyPage: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<Tab>('overview');
+  const [loyaltyStatus, setLoyaltyStatus] = useState<UserLoyaltyStatus | null>(null);
+  const [rewards, setRewards] = useState<LoyaltyReward[]>([]);
+  const [redemptions, setRedemptions] = useState<RewardRedemption[]>([]);
+  const [referrals, setReferrals] = useState<Referral[]>([]);
+  const [transactions, setTransactions] = useState<PointsTransaction[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [isDisabled, setIsDisabled] = useState(false);
+  const [redeeming, setRedeeming] = useState<number | null>(null);
+  const [copiedCode, setCopiedCode] = useState(false);
+  const [birthday, setBirthday] = useState('');
+  const [anniversaryDate, setAnniversaryDate] = useState('');
+  const [showRedemptionModal, setShowRedemptionModal] = useState(false);
+  const [redemptionData, setRedemptionData] = useState<{ code: string; rewardName: string; pointsUsed: number } | null>(null);
+
+  useEffect(() => {
+    fetchLoyaltyStatus();
+  }, []);
+
+  useEffect(() => {
+    if (activeTab === 'rewards') {
+      fetchRewards();
+      fetchRedemptions();
+    } else if (activeTab === 'history') {
+      fetchTransactions();
+    } else if (activeTab === 'referrals') {
+      fetchReferrals();
+    }
+  }, [activeTab]);
+
+  const fetchLoyaltyStatus = async () => {
+    try {
+      setLoading(true);
+      setIsDisabled(false);
+      const response = await loyaltyService.getMyStatus();
+      setLoyaltyStatus(response.data);
+      if (response.data.birthday) {
+        setBirthday(response.data.birthday);
+      }
+      if (response.data.anniversary_date) {
+        setAnniversaryDate(response.data.anniversary_date);
+      }
+    } catch (error: any) {
+      // Check if the error is about loyalty program being disabled
+      // FastAPI returns detail in error.response.data.detail
+      // The apiClient might transform it, so check both locations
+      const statusCode = error.response?.status || error.status;
+      const errorData = error.response?.data || {};
+      const errorDetail = errorData.detail || errorData.message || '';
+      const errorMessage = error.message || '';
+      
+      // Check if it's a 503 error (service unavailable) which indicates disabled
+      // OR if the error message/detail explicitly mentions "disabled"
+      // For 503 errors from loyalty status endpoint, always treat as disabled
+      const isDisabledError = 
+        statusCode === 503 ||
+        (typeof errorDetail === 'string' && errorDetail.toLowerCase().includes('disabled')) ||
+        (typeof errorMessage === 'string' && errorMessage.toLowerCase().includes('disabled'));
+      
+      if (isDisabledError) {
+        setIsDisabled(true);
+        setLoyaltyStatus(null);
+        // Don't show toast for disabled state - it's not an error, just disabled
+        // Return early to prevent any toast from showing
+        return;
+      }
+      
+      // Only show toast for actual errors (not disabled state)
+      toast.error(error.message || 'Failed to load loyalty status');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchRewards = async () => {
+    try {
+      const response = await loyaltyService.getAvailableRewards();
+      setRewards(response.data.rewards);
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to load rewards');
+    }
+  };
+
+  const fetchRedemptions = async () => {
+    try {
+      const response = await loyaltyService.getMyRedemptions();
+      setRedemptions(response.data.redemptions);
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to load redemptions');
+    }
+  };
+
+  const fetchTransactions = async () => {
+    try {
+      const response = await loyaltyService.getPointsHistory(1, 50);
+      setTransactions(response.data.transactions);
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to load transaction history');
+    }
+  };
+
+  const fetchReferrals = async () => {
+    try {
+      const response = await loyaltyService.getMyReferrals();
+      setReferrals(response.data.referrals);
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to load referrals');
+    }
+  };
+
+  const handleRedeem = async (rewardId: number) => {
+    try {
+      setRedeeming(rewardId);
+      const response = await loyaltyService.redeemReward(rewardId);
+      
+      // Find the reward name for display
+      const redeemedReward = rewards.find(r => r.id === rewardId);
+      const rewardName = redeemedReward?.name || 'Reward';
+      
+      // Show redemption success modal with code
+      if (response.data?.code) {
+        setRedemptionData({
+          code: response.data.code,
+          rewardName: rewardName,
+          pointsUsed: response.data.points_used || redeemedReward?.points_cost || 0
+        });
+        setShowRedemptionModal(true);
+      }
+      
+      toast.success(response.message || 'Reward redeemed successfully!');
+      await Promise.all([fetchLoyaltyStatus(), fetchRewards(), fetchRedemptions()]);
+    } catch (error: any) {
+      const errorMessage = error.response?.data?.detail || error.message || 'Failed to redeem reward';
+      toast.error(errorMessage);
+    } finally {
+      setRedeeming(null);
+    }
+  };
+
+  const handleCopyReferralCode = () => {
+    if (loyaltyStatus?.referral_code) {
+      navigator.clipboard.writeText(loyaltyStatus.referral_code);
+      setCopiedCode(true);
+      toast.success('Referral code copied to clipboard!');
+      setTimeout(() => setCopiedCode(false), 2000);
+    }
+  };
+
+  const handleUpdateInfo = async () => {
+    try {
+      await loyaltyService.updateMyStatus({
+        birthday: birthday || undefined,
+        anniversary_date: anniversaryDate || undefined,
+      });
+      toast.success('Information updated successfully!');
+      await fetchLoyaltyStatus();
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to update information');
+    }
+  };
+
+  const getTierColor = (level?: string) => {
+    switch (level) {
+      case 'bronze':
+        return 'from-orange-500 to-amber-600';
+      case 'silver':
+        return 'from-gray-400 to-gray-500';
+      case 'gold':
+        return 'from-yellow-400 to-yellow-600';
+      case 'platinum':
+        return 'from-purple-400 to-indigo-600';
+      default:
+        return 'from-gray-400 to-gray-500';
+    }
+  };
+
+  const getTransactionIcon = (type: string) => {
+    switch (type) {
+      case 'earned':
+        return <TrendingUp className="w-5 h-5 text-green-600" />;
+      case 'redeemed':
+        return <Gift className="w-5 h-5 text-blue-600" />;
+      case 'expired':
+        return <Clock className="w-5 h-5 text-red-600" />;
+      case 'bonus':
+        return <Award className="w-5 h-5 text-purple-600" />;
+      default:
+        return <History className="w-5 h-5 text-gray-600" />;
+    }
+  };
+
+  if (loading && !loyaltyStatus && !isDisabled) {
+    return <Loading fullScreen text="Loading loyalty program..." />;
+  }
+
+  if (isDisabled) {
+    return (
+      <div className="min-h-screen bg-gray-50 py-8">
+        <div className="max-w-7xl mx-auto px-4">
+          <EmptyState
+            icon={Star}
+            title="Loyalty Program Disabled"
+            description="The loyalty program is currently disabled by the administrator. Please check back later."
+          />
+        </div>
+      </div>
+    );
+  }
+
+  if (!loyaltyStatus) {
+    return (
+      <div className="min-h-screen bg-gray-50 py-8">
+        <div className="max-w-7xl mx-auto px-4">
+          <EmptyState
+            icon={Star}
+            title="Unable to load loyalty status"
+            description="Please try again later"
+          />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">Loyalty Program</h1>
+          <p className="text-gray-600">Earn points, unlock rewards, and enjoy exclusive benefits</p>
+        </div>
+
+        {/* Status Overview Card */}
+        <div className={`bg-gradient-to-br ${getTierColor(loyaltyStatus.tier?.level)} rounded-2xl shadow-xl p-8 mb-8 text-white`}>
+          <div className="flex items-start justify-between mb-6">
+            <div>
+              <div className="flex items-center gap-3 mb-2">
+                <Award className="w-8 h-8" />
+                <h2 className="text-2xl font-bold">{loyaltyStatus.tier?.name} Member</h2>
+              </div>
+              <p className="text-white/90">{loyaltyStatus.tier?.description}</p>
+            </div>
+            {loyaltyStatus.tier?.icon && (
+              <div className="text-6xl opacity-50">{loyaltyStatus.tier.icon}</div>
+            )}
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
+              <div className="text-sm opacity-90 mb-1">Available Points</div>
+              <div className="text-3xl font-bold">{loyaltyStatus.available_points.toLocaleString()}</div>
+            </div>
+            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
+              <div className="text-sm opacity-90 mb-1">Lifetime Points</div>
+              <div className="text-3xl font-bold">{loyaltyStatus.lifetime_points.toLocaleString()}</div>
+            </div>
+            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
+              <div className="text-sm opacity-90 mb-1">Earn Rate</div>
+              <div className="text-3xl font-bold">{loyaltyStatus.tier?.points_earn_rate}x</div>
+              <div className="text-sm opacity-90">points per dollar</div>
+            </div>
+          </div>
+
+          {loyaltyStatus.next_tier && (
+            <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
+              <div className="flex items-center justify-between mb-2">
+                <span className="text-sm opacity-90">Progress to {loyaltyStatus.next_tier.name}</span>
+                <span className="text-sm font-semibold">
+                  {loyaltyStatus.points_needed_for_next_tier?.toLocaleString()} points needed
+                </span>
+              </div>
+              <div className="w-full bg-white/20 rounded-full h-3">
+                <div
+                  className="bg-white h-3 rounded-full transition-all"
+                  style={{
+                    width: `${Math.min(
+                      100,
+                      ((loyaltyStatus.lifetime_points / loyaltyStatus.next_tier.min_points) * 100)
+                    )}%`
+                  }}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Tabs */}
+        <div className="bg-white rounded-lg shadow-sm mb-6">
+          <div className="border-b border-gray-200">
+            <nav className="flex -mb-px">
+              {[
+                { id: 'overview', label: 'Overview', icon: Star },
+                { id: 'rewards', label: 'Rewards', icon: Gift },
+                { id: 'history', label: 'History', icon: History },
+                { id: 'referrals', label: 'Referrals', icon: Users },
+              ].map((tab) => {
+                const Icon = tab.icon;
+                return (
+                  <button
+                    key={tab.id}
+                    onClick={() => setActiveTab(tab.id as Tab)}
+                    className={`flex items-center gap-2 px-6 py-4 font-medium text-sm border-b-2 transition-colors ${
+                      activeTab === tab.id
+                        ? 'border-indigo-600 text-indigo-600'
+                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                    }`}
+                  >
+                    <Icon className="w-5 h-5" />
+                    {tab.label}
+                  </button>
+                );
+              })}
+            </nav>
+          </div>
+
+          <div className="p-6">
+            {/* Overview Tab */}
+            {activeTab === 'overview' && (
+              <div className="space-y-6">
+                {/* Benefits */}
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-3">Tier Benefits</h3>
+                  <div className="bg-gray-50 rounded-lg p-4">
+                    <p className="text-gray-700 whitespace-pre-line">
+                      {loyaltyStatus.tier?.benefits || 'No benefits listed'}
+                    </p>
+                  </div>
+                </div>
+
+                {/* Referral Code */}
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-3">Your Referral Code</h3>
+                  <div className="flex items-center gap-3">
+                    <div className="flex-1 bg-gray-50 rounded-lg p-4 flex items-center justify-between">
+                      <code className="text-lg font-mono font-bold text-gray-900">
+                        {loyaltyStatus.referral_code}
+                      </code>
+                      <button
+                        onClick={handleCopyReferralCode}
+                        className="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors flex items-center gap-2"
+                      >
+                        {copiedCode ? (
+                          <>
+                            <CheckCircle className="w-4 h-4" />
+                            Copied!
+                          </>
+                        ) : (
+                          <>
+                            <Copy className="w-4 h-4" />
+                            Copy
+                          </>
+                        )}
+                      </button>
+                    </div>
+                  </div>
+                  <p className="text-sm text-gray-600 mt-2">
+                    Share your code with friends! You both get bonus points when they make their first booking.
+                  </p>
+                  <p className="text-sm font-semibold text-gray-900 mt-1">
+                    Referrals: {loyaltyStatus.referral_count}
+                  </p>
+                </div>
+
+                {/* Personal Info */}
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-3">Personal Information</h3>
+                  <div className="space-y-4">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">
+                        Birthday (for birthday rewards)
+                      </label>
+                      <input
+                        type="date"
+                        value={birthday}
+                        onChange={(e) => setBirthday(e.target.value)}
+                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-1">
+                        Anniversary Date (for anniversary bonuses)
+                      </label>
+                      <input
+                        type="date"
+                        value={anniversaryDate}
+                        onChange={(e) => setAnniversaryDate(e.target.value)}
+                        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                      />
+                    </div>
+                    <button
+                      onClick={handleUpdateInfo}
+                      className="px-6 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
+                    >
+                      Update Information
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Rewards Tab */}
+            {activeTab === 'rewards' && (
+              <div className="space-y-6">
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-4">Available Rewards</h3>
+                  {rewards.length === 0 ? (
+                    <EmptyState
+                      icon={Gift}
+                      title="No rewards available"
+                      description="Check back later for new rewards"
+                    />
+                  ) : (
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                      {rewards.map((reward) => (
+                        <div
+                          key={reward.id}
+                          className="border border-gray-200 rounded-lg p-4 hover:shadow-lg transition-shadow"
+                        >
+                          {reward.image && (
+                            <img
+                              src={reward.image}
+                              alt={reward.name}
+                              className="w-full h-32 object-cover rounded-lg mb-3"
+                            />
+                          )}
+                          <h4 className="font-semibold text-gray-900 mb-1">{reward.name}</h4>
+                          <p className="text-sm text-gray-600 mb-3">{reward.description}</p>
+                          <div className="flex items-center justify-between mb-3">
+                            <span className="text-lg font-bold text-indigo-600">
+                              {reward.points_cost} points
+                            </span>
+                            {reward.stock_remaining !== null && (
+                              <span className="text-sm text-gray-500">
+                                {reward.stock_remaining} left
+                              </span>
+                            )}
+                          </div>
+                          <button
+                            onClick={() => handleRedeem(reward.id)}
+                            disabled={!reward.is_available || !reward.can_afford || redeeming === reward.id}
+                            className={`w-full py-2 rounded-lg font-medium transition-colors ${
+                              reward.is_available && reward.can_afford && redeeming !== reward.id
+                                ? 'bg-indigo-600 text-white hover:bg-indigo-700'
+                                : 'bg-gray-200 text-gray-500 cursor-not-allowed'
+                            }`}
+                          >
+                            {redeeming === reward.id
+                              ? 'Redeeming...'
+                              : !reward.can_afford
+                              ? 'Insufficient Points'
+                              : !reward.is_available
+                              ? 'Not Available'
+                              : 'Redeem Now'}
+                          </button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                <div>
+                  <h3 className="text-lg font-semibold text-gray-900 mb-4">My Redemptions</h3>
+                  {redemptions.length === 0 ? (
+                    <EmptyState
+                      icon={CreditCard}
+                      title="No redemptions yet"
+                      description="Redeem rewards to see them here"
+                    />
+                  ) : (
+                    <div className="space-y-3">
+                      {redemptions.map((redemption) => (
+                        <div
+                          key={redemption.id}
+                          className="border border-gray-200 rounded-lg p-4 flex items-center justify-between"
+                        >
+                          <div>
+                            <h4 className="font-semibold text-gray-900">{redemption.reward.name}</h4>
+                            <p className="text-sm text-gray-600">{redemption.reward.description}</p>
+                            {redemption.code && (
+                              <code className="text-xs text-indigo-600 font-mono mt-1 block">
+                                Code: {redemption.code}
+                              </code>
+                            )}
+                          </div>
+                          <div className="text-right">
+                            <span
+                              className={`px-3 py-1 rounded-full text-xs font-medium ${
+                                redemption.status === 'active'
+                                  ? 'bg-green-100 text-green-800'
+                                  : redemption.status === 'used'
+                                  ? 'bg-blue-100 text-blue-800'
+                                  : redemption.status === 'expired'
+                                  ? 'bg-red-100 text-red-800'
+                                  : 'bg-gray-100 text-gray-800'
+                              }`}
+                            >
+                              {redemption.status}
+                            </span>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* History Tab */}
+            {activeTab === 'history' && (
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 mb-4">Points History</h3>
+                {transactions.length === 0 ? (
+                  <EmptyState
+                    icon={History}
+                    title="No transactions yet"
+                    description="Your points transactions will appear here"
+                  />
+                ) : (
+                  <div className="space-y-3">
+                    {transactions.map((transaction) => (
+                      <div
+                        key={transaction.id}
+                        className="border border-gray-200 rounded-lg p-4 flex items-center gap-4"
+                      >
+                        {getTransactionIcon(transaction.transaction_type)}
+                        <div className="flex-1">
+                          <div className="flex items-center justify-between">
+                            <div>
+                              <p className="font-medium text-gray-900">{transaction.description}</p>
+                              <p className="text-sm text-gray-500">
+                                {formatDate(transaction.created_at)} • {transaction.source}
+                              </p>
+                            </div>
+                            <div className="text-right">
+                              <p
+                                className={`font-bold ${
+                                  transaction.points > 0 ? 'text-green-600' : 'text-red-600'
+                                }`}
+                              >
+                                {transaction.points > 0 ? '+' : ''}
+                                {transaction.points.toLocaleString()}
+                              </p>
+                              {transaction.expires_at && (
+                                <p className="text-xs text-gray-500">
+                                  Expires: {formatDate(transaction.expires_at)}
+                                </p>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Referrals Tab */}
+            {activeTab === 'referrals' && (
+              <div>
+                <h3 className="text-lg font-semibold text-gray-900 mb-4">My Referrals</h3>
+                {referrals.length === 0 ? (
+                  <EmptyState
+                    icon={Users}
+                    title="No referrals yet"
+                    description="Share your referral code to earn bonus points!"
+                  />
+                ) : (
+                  <div className="space-y-3">
+                    {referrals.map((referral) => (
+                      <div
+                        key={referral.id}
+                        className="border border-gray-200 rounded-lg p-4"
+                      >
+                        <div className="flex items-center justify-between mb-2">
+                          <div>
+                            <p className="font-semibold text-gray-900">
+                              {referral.referred_user?.name || 'Unknown User'}
+                            </p>
+                            <p className="text-sm text-gray-500">{referral.referred_user?.email}</p>
+                          </div>
+                          <span
+                            className={`px-3 py-1 rounded-full text-xs font-medium ${
+                              referral.status === 'rewarded'
+                                ? 'bg-green-100 text-green-800'
+                                : referral.status === 'completed'
+                                ? 'bg-blue-100 text-blue-800'
+                                : 'bg-yellow-100 text-yellow-800'
+                            }`}
+                          >
+                            {referral.status}
+                          </span>
+                        </div>
+                        {referral.status === 'rewarded' && (
+                          <div className="mt-2 pt-2 border-t border-gray-200 flex items-center justify-between text-sm">
+                            <span className="text-gray-600">You earned:</span>
+                            <span className="font-semibold text-green-600">
+                              +{referral.referrer_points_earned} points
+                            </span>
+                          </div>
+                        )}
+                        {referral.completed_at && (
+                          <p className="text-xs text-gray-500 mt-2">
+                            Completed: {formatDate(referral.completed_at)}
+                          </p>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Redemption Success Modal */}
+      {showRedemptionModal && redemptionData && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+            <div className="text-center mb-4">
+              <CheckCircle className="w-16 h-16 text-green-600 mx-auto mb-4" />
+              <h3 className="text-xl font-bold text-gray-900 mb-2">Reward Redeemed Successfully!</h3>
+              <p className="text-gray-600 mb-4">
+                You've redeemed <strong>{redemptionData.rewardName}</strong> for {redemptionData.pointsUsed.toLocaleString()} points.
+              </p>
+            </div>
+            
+            <div className="bg-gray-50 rounded-lg p-4 mb-4">
+              <label className="text-sm font-medium text-gray-700 mb-2 block">Your Redemption Code:</label>
+              <div className="flex items-center justify-between bg-white border-2 border-indigo-500 rounded-lg p-3">
+                <code className="text-lg font-mono font-bold text-gray-900">{redemptionData.code}</code>
+                <button
+                  onClick={() => {
+                    navigator.clipboard.writeText(redemptionData.code);
+                    toast.success('Code copied to clipboard!');
+                  }}
+                  className="ml-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors flex items-center gap-2"
+                >
+                  <Copy className="w-4 h-4" />
+                  Copy
+                </button>
+              </div>
+              <p className="text-xs text-gray-500 mt-2">
+                Save this code! You can use it when booking or contact support to apply it.
+              </p>
+            </div>
+            
+            <div className="flex gap-3">
+              <button
+                onClick={() => {
+                  setShowRedemptionModal(false);
+                  setRedemptionData(null);
+                }}
+                className="flex-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
+              >
+                Close
+              </button>
+              <button
+                onClick={() => {
+                  setActiveTab('rewards');
+                  setShowRedemptionModal(false);
+                  setRedemptionData(null);
+                }}
+                className="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
+              >
+                View My Redemptions
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LoyaltyPage;
+