 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/private_html/src/components/ |
import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import Link from 'next/link';
import { Building2, Shield, ExternalLink } from 'lucide-react';
interface BusinessAffiliation {
id: string;
businessName: string;
businessType: string;
industry?: string;
description?: string;
logo?: string;
website?: string;
isVerified: boolean;
createdAt: string;
owner?: {
id: string;
name: string;
email: string;
role: string;
};
}
interface BusinessAffiliations {
owned: BusinessAffiliation[];
memberOf: BusinessAffiliation[];
}
interface BusinessAffiliationsSectionProps {
username: string;
}
const BusinessAffiliationsSection: React.FC<BusinessAffiliationsSectionProps> = ({ username }) => {
const [affiliations, setAffiliations] = useState<BusinessAffiliations | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchAffiliations = async () => {
try {
setLoading(true);
const response = await fetch(`/api/public/profile/${username}/business-affiliations`);
if (response.ok) {
const data = await response.json();
setAffiliations(data);
} else {
setError('Failed to load business affiliations');
}
} catch (err) {
setError('Error loading business affiliations');
} finally {
setLoading(false);
}
};
fetchAffiliations();
}, [username]);
if (loading) {
return (
<motion.section
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.6 }}
>
<h2 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
<Building2 className="h-6 w-6 mr-3 text-blue-600" />
Business Affiliations
</h2>
<div className="animate-pulse">
<div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
<div className="h-4 bg-gray-200 rounded w-1/2"></div>
</div>
</motion.section>
);
}
if (error || !affiliations) {
return null; // Don't show section if there's an error or no data
}
const hasAffiliations = affiliations.owned.length > 0 || affiliations.memberOf.length > 0;
if (!hasAffiliations) {
return null; // Don't show section if no affiliations
}
return (
<motion.section
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.6 }}
>
<h2 className="text-2xl font-bold text-gray-900 mb-4 flex items-center">
<Building2 className="h-6 w-6 mr-3 text-blue-600" />
Business Affiliations
</h2>
<div className="space-y-6">
{/* Owned Businesses */}
{affiliations.owned.length > 0 && (
<div>
<h3 className="text-lg font-semibold text-gray-800 mb-3">🏢 Owned Businesses</h3>
<div className="space-y-3">
{affiliations.owned.map((business) => (
<Link
key={business.id}
href={`/business/${business.id}`}
className="block bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
{business.logo ? (
<img
src={business.logo}
alt={business.businessName}
className="w-12 h-12 rounded-lg object-cover"
/>
) : (
<div className="w-12 h-12 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
<Building2 className="h-6 w-6 text-white" />
</div>
)}
<div>
<div className="flex items-center space-x-2">
<h4 className="font-semibold text-gray-900">{business.businessName}</h4>
{business.isVerified && (
<Shield className="h-4 w-4 text-blue-600" />
)}
</div>
<p className="text-sm text-gray-600">{business.businessType}</p>
{business.industry && (
<p className="text-xs text-gray-500">{business.industry}</p>
)}
</div>
</div>
<ExternalLink className="h-4 w-4 text-gray-400" />
</div>
</Link>
))}
</div>
</div>
)}
{/* Member of Businesses */}
{affiliations.memberOf.length > 0 && (
<div>
<h3 className="text-lg font-semibold text-gray-800 mb-3">👥 Member of</h3>
<div className="space-y-3">
{affiliations.memberOf.map((business) => (
<Link
key={business.id}
href={`/business/${business.id}`}
className="block bg-white border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"
>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
{business.logo ? (
<img
src={business.logo}
alt={business.businessName}
className="w-12 h-12 rounded-lg object-cover"
/>
) : (
<div className="w-12 h-12 bg-gradient-to-br from-green-500 to-blue-600 rounded-lg flex items-center justify-center">
<Building2 className="h-6 w-6 text-white" />
</div>
)}
<div>
<div className="flex items-center space-x-2">
<h4 className="font-semibold text-gray-900">{business.businessName}</h4>
{business.isVerified && (
<Shield className="h-4 w-4 text-blue-600" />
)}
</div>
<p className="text-sm text-gray-600">{business.businessType}</p>
{business.owner && (
<p className="text-xs text-gray-500">Owner: {business.owner.name}</p>
)}
</div>
</div>
<ExternalLink className="h-4 w-4 text-gray-400" />
</div>
</Link>
))}
</div>
</div>
)}
</div>
</motion.section>
);
};
export default BusinessAffiliationsSection;