Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory :  /home/gositeme/domains/lavocat.ca/public_html/src/components/payments/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

'use client';

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { toast } from 'react-hot-toast';
import {
  DollarSign,
  CreditCard,
  AlertCircle,
  CheckCircle,
  Clock,
  Eye
} from 'lucide-react';

interface PaymentQuickAccessProps {
  userId: string;
  userRole: string;
}

interface QuickPaymentInfo {
  pendingPayments: number;
  overdueInvoices: number;
  totalSpent: number;
  thisMonthSpent: number;
}

const PaymentQuickAccess: React.FC<PaymentQuickAccessProps> = ({ userId, userRole }) => {
  const router = useRouter();
  const [paymentInfo, setPaymentInfo] = useState<QuickPaymentInfo | null>(null);
  const [loading, setLoading] = useState(true);
  const [showDropdown, setShowDropdown] = useState(false);

  useEffect(() => {
    fetchQuickPaymentInfo();
  }, [userId]);

  const fetchQuickPaymentInfo = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/user/financial-summary');
      
      if (response.ok) {
        const data = await response.json();
        setPaymentInfo({
          pendingPayments: data.pendingPayments || 0,
          overdueInvoices: data.overdueInvoices || 0,
          totalSpent: data.totalSpent || 0,
          thisMonthSpent: data.thisMonthSpent || 0
        });
      }
    } catch (error) {
      console.error('Error fetching payment info:', error);
    } finally {
      setLoading(false);
    }
  };

  const formatCurrency = (amount: number, currency: string = 'CAD') => {
    return new Intl.NumberFormat('en-CA', {
      style: 'currency',
      currency: currency
    }).format(amount);
  };

  const hasAlerts = paymentInfo && (paymentInfo.pendingPayments > 0 || paymentInfo.overdueInvoices > 0);

  if (loading) {
    return (
      <div className="relative">
        <button className="p-2 rounded-full hover:bg-white/20 transition flex items-center">
          <DollarSign className="h-5 w-5 text-white" />
        </button>
      </div>
    );
  }

  return (
    <div className="relative">
      <button 
        onClick={() => setShowDropdown(!showDropdown)}
        className={`p-2 rounded-full hover:bg-white/20 transition flex items-center relative ${
          hasAlerts ? 'text-yellow-400' : 'text-white'
        }`}
      >
        <DollarSign className="h-5 w-5" />
        {hasAlerts && (
          <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full animate-pulse"></span>
        )}
      </button>

      {showDropdown && (
        <div className="absolute right-0 mt-2 w-64 bg-white shadow-lg rounded-lg border border-gray-200 z-50">
          <div className="p-4">
            <div className="flex items-center justify-between mb-3">
              <h3 className="text-sm font-semibold text-gray-900">Payments</h3>
              <button
                onClick={() => {
                  setShowDropdown(false);
                  router.push('/user/payments');
                }}
                className="text-xs text-blue-600 hover:text-blue-800"
              >
                View All
              </button>
            </div>

            {/* Quick Stats */}
            <div className="grid grid-cols-2 gap-3 mb-3">
              <div className="text-center">
                <div className="text-lg font-bold text-gray-900">
                  {formatCurrency(paymentInfo?.totalSpent || 0)}
                </div>
                <div className="text-xs text-gray-500">Total Spent</div>
              </div>
              <div className="text-center">
                <div className="text-lg font-bold text-gray-900">
                  {formatCurrency(paymentInfo?.thisMonthSpent || 0)}
                </div>
                <div className="text-xs text-gray-500">This Month</div>
              </div>
            </div>

            {/* Alerts */}
            {hasAlerts && (
              <div className="space-y-2 mb-3">
                {paymentInfo?.pendingPayments > 0 && (
                  <div className="flex items-center p-2 bg-yellow-50 rounded text-xs">
                    <Clock className="h-3 w-3 text-yellow-600 mr-2" />
                    <span className="text-yellow-800">
                      {paymentInfo.pendingPayments} pending payment{paymentInfo.pendingPayments > 1 ? 's' : ''}
                    </span>
                  </div>
                )}
                {paymentInfo?.overdueInvoices > 0 && (
                  <div className="flex items-center p-2 bg-red-50 rounded text-xs">
                    <AlertCircle className="h-3 w-3 text-red-600 mr-2" />
                    <span className="text-red-800">
                      {paymentInfo.overdueInvoices} overdue invoice{paymentInfo.overdueInvoices > 1 ? 's' : ''}
                    </span>
                  </div>
                )}
              </div>
            )}

            {/* Quick Actions */}
            <div className="space-y-2">
              <button
                onClick={() => {
                  setShowDropdown(false);
                  router.push('/user/payments');
                }}
                className="w-full flex items-center p-2 text-sm text-gray-700 hover:bg-gray-50 rounded transition-colors"
              >
                <Eye className="h-4 w-4 mr-2" />
                View Payments
              </button>
              <button
                onClick={() => {
                  setShowDropdown(false);
                  router.push('/user/subscription');
                }}
                className="w-full flex items-center p-2 text-sm text-gray-700 hover:bg-gray-50 rounded transition-colors"
              >
                <CreditCard className="h-4 w-4 mr-2" />
                Subscription
              </button>
              <button
                onClick={() => {
                  setShowDropdown(false);
                  router.push('/user/payments?tab=methods');
                }}
                className="w-full flex items-center p-2 text-sm text-gray-700 hover:bg-gray-50 rounded transition-colors"
              >
                <CreditCard className="h-4 w-4 mr-2" />
                Payment Methods
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default PaymentQuickAccess;