 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.quebec/private_html/src/components/ |
import React, { useState, useEffect } from 'react';
import {
Shield,
Eye,
EyeOff,
Users,
User,
Mail,
Phone,
MapPin,
Calendar,
MessageSquare,
Bell,
Lock,
Unlock,
Settings,
Save,
X
} from 'lucide-react';
interface PrivacySettings {
// Profile Visibility
showProfile: 'public' | 'connections' | 'private';
showOnlineStatus: boolean;
showLastSeen: boolean;
showProfileViews: boolean;
// Contact Information
showEmail: boolean;
showPhone: boolean;
showLocation: boolean;
showBirthDate: boolean;
// Social Features
showFriends: boolean;
showFollowers: boolean;
showFollowing: boolean;
showEndorsements: boolean;
showTestimonials: boolean;
// Activity & Content
showActivityFeed: boolean;
showCaseInvolvement: boolean;
showAchievements: boolean;
showReviews: boolean;
// Communication
allowMessages: 'everyone' | 'connections' | 'none';
allowFriendRequests: boolean;
allowEndorsements: boolean;
allowProfileViews: boolean;
// Notifications
emailNotifications: boolean;
pushNotifications: boolean;
smsNotifications: boolean;
// Advanced
allowSearchIndexing: boolean;
allowDataAnalytics: boolean;
allowThirdPartySharing: boolean;
}
interface AdvancedPrivacySettingsProps {
userId: string;
currentSettings: Partial<PrivacySettings>;
onSave: (settings: PrivacySettings) => Promise<void>;
onClose: () => void;
}
const AdvancedPrivacySettings: React.FC<AdvancedPrivacySettingsProps> = ({
userId,
currentSettings,
onSave,
onClose
}) => {
const [settings, setSettings] = useState<PrivacySettings>({
// Default settings
showProfile: 'public',
showOnlineStatus: true,
showLastSeen: true,
showProfileViews: true,
showEmail: false,
showPhone: false,
showLocation: false,
showBirthDate: false,
showFriends: true,
showFollowers: true,
showFollowing: true,
showEndorsements: true,
showTestimonials: true,
showActivityFeed: true,
showCaseInvolvement: true,
showAchievements: true,
showReviews: true,
allowMessages: 'connections',
allowFriendRequests: true,
allowEndorsements: true,
allowProfileViews: true,
emailNotifications: true,
pushNotifications: true,
smsNotifications: false,
allowSearchIndexing: true,
allowDataAnalytics: true,
allowThirdPartySharing: false,
...currentSettings
});
const [isSaving, setIsSaving] = useState(false);
const [activeTab, setActiveTab] = useState('profile');
const handleSave = async () => {
setIsSaving(true);
try {
await onSave(settings);
onClose();
} catch (error) {
} finally {
setIsSaving(false);
}
};
const updateSetting = (key: keyof PrivacySettings, value: any) => {
setSettings(prev => ({ ...prev, [key]: value }));
};
const PrivacyToggle = ({
setting,
label,
description,
icon: Icon
}: {
setting: keyof PrivacySettings;
label: string;
description: string;
icon: React.ComponentType<any>;
}) => (
<div className="flex items-start justify-between p-4 border-b border-gray-100 last:border-b-0">
<div className="flex items-start gap-3">
<Icon className="h-5 w-5 text-gray-500 mt-0.5" />
<div>
<h3 className="font-medium text-gray-900">{label}</h3>
<p className="text-sm text-gray-600">{description}</p>
</div>
</div>
<label className="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
className="sr-only peer"
checked={settings[setting] as boolean}
onChange={(e) => updateSetting(setting, e.target.checked)}
/>
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
</label>
</div>
);
const PrivacySelect = ({
setting,
label,
description,
options,
icon: Icon
}: {
setting: keyof PrivacySettings;
label: string;
description: string;
options: { value: string; label: string; description: string }[];
icon: React.ComponentType<any>;
}) => (
<div className="p-4 border-b border-gray-100 last:border-b-0">
<div className="flex items-start gap-3 mb-3">
<Icon className="h-5 w-5 text-gray-500 mt-0.5" />
<div>
<h3 className="font-medium text-gray-900">{label}</h3>
<p className="text-sm text-gray-600">{description}</p>
</div>
</div>
<div className="space-y-2">
{options.map(option => (
<label key={option.value} className="flex items-start gap-3 cursor-pointer">
<input
type="radio"
name={setting}
value={option.value}
checked={settings[setting] === option.value}
onChange={(e) => updateSetting(setting, e.target.value)}
className="mt-1"
/>
<div>
<div className="font-medium text-sm">{option.label}</div>
<div className="text-xs text-gray-500">{option.description}</div>
</div>
</label>
))}
</div>
</div>
);
const tabs = [
{ id: 'profile', label: 'Profile', icon: User },
{ id: 'contact', label: 'Contact', icon: Mail },
{ id: 'social', label: 'Social', icon: Users },
{ id: 'activity', label: 'Activity', icon: Calendar },
{ id: 'communication', label: 'Communication', icon: MessageSquare },
{ id: 'notifications', label: 'Notifications', icon: Bell },
{ id: 'advanced', label: 'Advanced', icon: Settings }
];
return (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-hidden">
{/* Header */}
<div className="flex items-center justify-between p-6 border-b">
<div className="flex items-center gap-3">
<Shield className="h-6 w-6 text-blue-600" />
<h2 className="text-xl font-semibold">Privacy Settings</h2>
</div>
<div className="flex items-center gap-2">
<button
onClick={handleSave}
disabled={isSaving}
className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 disabled:opacity-50"
>
<Save className="h-4 w-4" />
{isSaving ? 'Saving...' : 'Save'}
</button>
<button
onClick={onClose}
className="p-2 hover:bg-gray-100 rounded-lg"
>
<X className="h-5 w-5" />
</button>
</div>
</div>
<div className="flex h-[calc(90vh-80px)]">
{/* Sidebar */}
<div className="w-64 border-r bg-gray-50 p-4">
<nav className="space-y-1">
{tabs.map(tab => {
const Icon = tab.icon;
return (
<button
key={tab.id}
onClick={() => setActiveTab(tab.id)}
className={
activeTab === tab.id
? 'bg-blue-100 text-blue-700'
: 'text-gray-700 hover:bg-gray-100'
}
>
<Icon className="h-4 w-4" />
{tab.label}
</button>
);
})}
</nav>
</div>
{/* Content */}
<div className="flex-1 overflow-y-auto">
<div className="p-6">
{activeTab === 'profile' && (
<div className="space-y-4">
<h3 className="text-lg font-semibold mb-4">Profile Visibility</h3>
<PrivacySelect
setting="showProfile"
label="Profile Visibility"
description="Control who can see your profile"
icon={Eye}
options={[
{ value: 'public', label: 'Public', description: 'Anyone can view your profile' },
{ value: 'connections', label: 'Connections Only', description: 'Only your connections can view your profile' },
{ value: 'private', label: 'Private', description: 'Only you can view your profile' }
]}
/>
<PrivacyToggle
setting="showOnlineStatus"
label="Show Online Status"
description="Display when you're online to others"
icon={Bell}
/>
<PrivacyToggle
setting="showLastSeen"
label="Show Last Seen"
description="Display when you were last active"
icon={Calendar}
/>
<PrivacyToggle
setting="showProfileViews"
label="Show Profile Views"
description="Display who has viewed your profile"
icon={Eye}
/>
</div>
)}
{activeTab === 'contact' && (
<div className="space-y-4">
<h3 className="text-lg font-semibold mb-4">Contact Information</h3>
<PrivacyToggle
setting="showEmail"
label="Show Email Address"
description="Display your email address on your profile"
icon={Mail}
/>
<PrivacyToggle
setting="showPhone"
label="Show Phone Number"
description="Display your phone number on your profile"
icon={Phone}
/>
<PrivacyToggle
setting="showLocation"
label="Show Location"
description="Display your location on your profile"
icon={MapPin}
/>
<PrivacyToggle
setting="showBirthDate"
label="Show Birth Date"
description="Display your birth date on your profile"
icon={Calendar}
/>
</div>
)}
{activeTab === 'social' && (
<div className="space-y-4">
<h3 className="text-lg font-semibold mb-4">Social Features</h3>
<PrivacyToggle
setting="showFriends"
label="Show Friends List"
description="Display your friends on your profile"
icon={Users}
/>
<PrivacyToggle
setting="showFollowers"
label="Show Followers"
description="Display your followers count and list"
icon={Users}
/>
<PrivacyToggle
setting="showFollowing"
label="Show Following"
description="Display who you're following"
icon={Users}
/>
<PrivacyToggle
setting="showEndorsements"
label="Show Endorsements"
description="Display endorsements on your profile"
icon={Shield}
/>
<PrivacyToggle
setting="showTestimonials"
label="Show Testimonials"
description="Display testimonials on your profile"
icon={Shield}
/>
</div>
)}
{activeTab === 'activity' && (
<div className="space-y-4">
<h3 className="text-lg font-semibold mb-4">Activity & Content</h3>
<PrivacyToggle
setting="showActivityFeed"
label="Show Activity Feed"
description="Display your recent activity on your profile"
icon={Calendar}
/>
<PrivacyToggle
setting="showCaseInvolvement"
label="Show Case Involvement"
description="Display your case participation history"
icon={Shield}
/>
<PrivacyToggle
setting="showAchievements"
label="Show Achievements"
description="Display your achievements and badges"
icon={Shield}
/>
<PrivacyToggle
setting="showReviews"
label="Show Reviews"
description="Display reviews you've received"
icon={Shield}
/>
</div>
)}
{activeTab === 'communication' && (
<div className="space-y-4">
<h3 className="text-lg font-semibold mb-4">Communication</h3>
<PrivacySelect
setting="allowMessages"
label="Allow Messages"
description="Control who can send you messages"
icon={MessageSquare}
options={[
{ value: 'everyone', label: 'Everyone', description: 'Anyone can send you messages' },
{ value: 'connections', label: 'Connections Only', description: 'Only your connections can message you' },
{ value: 'none', label: 'No One', description: 'No one can send you messages' }
]}
/>
<PrivacyToggle
setting="allowFriendRequests"
label="Allow Friend Requests"
description="Allow others to send you friend requests"
icon={Users}
/>
<PrivacyToggle
setting="allowEndorsements"
label="Allow Endorsements"
description="Allow others to endorse your profile"
icon={Shield}
/>
<PrivacyToggle
setting="allowProfileViews"
label="Allow Profile Views"
description="Allow others to view your profile"
icon={Eye}
/>
</div>
)}
{activeTab === 'notifications' && (
<div className="space-y-4">
<h3 className="text-lg font-semibold mb-4">Notifications</h3>
<PrivacyToggle
setting="emailNotifications"
label="Email Notifications"
description="Receive notifications via email"
icon={Mail}
/>
<PrivacyToggle
setting="pushNotifications"
label="Push Notifications"
description="Receive push notifications in your browser"
icon={Bell}
/>
<PrivacyToggle
setting="smsNotifications"
label="SMS Notifications"
description="Receive notifications via SMS"
icon={Phone}
/>
</div>
)}
{activeTab === 'advanced' && (
<div className="space-y-4">
<h3 className="text-lg font-semibold mb-4">Advanced Settings</h3>
<PrivacyToggle
setting="allowSearchIndexing"
label="Allow Search Indexing"
description="Allow search engines to index your profile"
icon={Eye}
/>
<PrivacyToggle
setting="allowDataAnalytics"
label="Allow Data Analytics"
description="Allow us to use your data for analytics"
icon={Settings}
/>
<PrivacyToggle
setting="allowThirdPartySharing"
label="Allow Third-Party Sharing"
description="Allow sharing your data with third parties"
icon={Unlock}
/>
</div>
)}
</div>
</div>
</div>
</div>
</div>
);
};
export default AdvancedPrivacySettings;