+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+const SessionsTab: React.FC = () => {
+ const [sessions, setSessions] = useState
+ {}
+
+
+
+
+ {}
+
+
+
+ + Accountant Profile & Settings +
++ Manage your accountant account information, security, and privacy preferences +
+
+
+
+ {}
+ {activeTab === 'profile' && (
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {}
+ {activeTab === 'password' && (
+
+
+
+ )}
+
+ {}
+ {activeTab === 'mfa' && (
+
+ {}
+
+ )}
+
+ {/* Sessions Tab */}
+ {activeTab === 'sessions' && (
+
+
+
+
+
+ {mfaStatus?.mfa_enabled ? (
+
+
+
+ + Add an extra layer of security to your account by requiring a verification code in addition to your password. +
+
+ {}
+
+ ) : (
+
+
+
+
+ {}
+ {showBackupCodes && (
+
+
+
+
+
+
+ MFA is Enabled
++ Your account is protected with two-factor authentication. +
++ Remaining backup codes: {mfaStatus.backup_codes_count} +
+
+
+ )}
+
+ {}
+
+
+
+
+
+
+ + Store these codes in a safe place. Each code can only be used once. +
+
+ {showBackupCodes.map((code, index) => (
+
+
+
+ {code}
+
+
+ ))}
+
+
+
+
+
+ {}
+
+
+ + If you lose access to your authenticator app, you can use backup codes to access your account. +
+ +
+
+
+
+
+
+ + Disabling MFA will reduce the security of your account. We recommend keeping it enabled. +
+ +
+ {!mfaSecret ? (
+
+
+ )}
+
+
+
+ ) : (
+
+
+ {}
+
+ )}
+
+
+
+
+
+ {}
+
+
+ + Use your authenticator app (Google Authenticator, Authy, etc.) to scan this QR code. +
+ {mfaQrCode && ( +
+ 
+
+ )}
+
+
+
+ Manual Entry Key:
+
+
+
+
+
+ {showMfaSecret ? mfaSecret : '••••••••••••••••'}
+
+
+
+
+
+
+
+
+ + Enter the 6-digit code from your authenticator app to complete the setup. +
+
+
+
+
+ setMfaVerificationToken(e.target.value.replace(/\D/g, '').slice(0, 6))}
+ placeholder="000000"
+ maxLength={6}
+ className="luxury-input text-center text-lg sm:text-xl tracking-widest font-mono"
+ />
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+const GDPRTab: React.FC = () => {
+ const [requests, setRequests] = useState
+
+
+
+
+ {sessions.length === 0 ? (
+
+
+ + Manage your active sessions across different devices +
+
+
+ ) : (
+ No active sessions
+
+ {sessions.length > 1 && (
+
+ )}
+
+
+
+ )}
+ {sessions.map((session) => (
+
+
+ ))}
+
+
+
+
+
+
+ {getDeviceIcon(session.user_agent)}
+
+
+
+ + {getDeviceName(session.user_agent)} +
++ IP Address: {session.ip_address || 'Unknown'} +
++ Last Activity: {formatDate(session.last_activity)} +
++ Expires: {formatDate(session.expires_at)} +
+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default ProfilePage;
diff --git a/Frontend/src/pages/admin/ProfilePage.tsx b/Frontend/src/pages/admin/ProfilePage.tsx
new file mode 100644
index 00000000..fafea992
--- /dev/null
+++ b/Frontend/src/pages/admin/ProfilePage.tsx
@@ -0,0 +1,1489 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import {
+ User,
+ Mail,
+ Phone,
+ Save,
+ CheckCircle,
+ AlertCircle,
+ Lock,
+ Camera,
+ Shield,
+ ShieldCheck,
+ ShieldOff,
+ Copy,
+ Eye,
+ EyeOff,
+ RefreshCw,
+ KeyRound,
+ LogOut,
+ Monitor,
+ FileText,
+ Download,
+ Trash2,
+ Database,
+ Smartphone,
+ Tablet
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import authService from '../../features/auth/services/authService';
+import sessionService from '../../features/auth/services/sessionService';
+import gdprService, { GDPRRequest } from '../../features/compliance/services/gdprService';
+import useAuthStore from '../../store/useAuthStore';
+import Loading from '../../shared/components/Loading';
+import EmptyState from '../../shared/components/EmptyState';
+import { useAsync } from '../../shared/hooks/useAsync';
+import { useGlobalLoading } from '../../shared/contexts/LoadingContext';
+import { normalizeImageUrl } from '../../shared/utils/imageUtils';
+import { formatDate } from '../../shared/utils/format';
+import { UserSession } from '../../features/auth/services/sessionService';
+import { useNavigate } from 'react-router-dom';
+
+const profileValidationSchema = yup.object().shape({
+ name: yup
+ .string()
+ .required('Full name is required')
+ .min(2, 'Full name must be at least 2 characters')
+ .max(100, 'Full name cannot exceed 100 characters'),
+ email: yup
+ .string()
+ .required('Email is required')
+ .email('Invalid email address'),
+ phone: yup
+ .string()
+ .required('Phone number is required')
+ .matches(
+ /^[\d\s\-\+\(\)]{5,}$/,
+ 'Please enter a valid phone number'
+ ),
+});
+
+const passwordValidationSchema = yup.object().shape({
+ currentPassword: yup
+ .string()
+ .required('Current password is required'),
+ newPassword: yup
+ .string()
+ .required('New password is required')
+ .min(8, 'Password must be at least 8 characters')
+ .matches(/[A-Z]/, 'Password must contain at least one uppercase letter')
+ .matches(/[a-z]/, 'Password must contain at least one lowercase letter')
+ .matches(/[0-9]/, 'Password must contain at least one number')
+ .matches(/[!@#$%^&*(),.?":{}|<>]/, 'Password must contain at least one special character (!@#$%^&*(),.?":{}|<>)'),
+ confirmPassword: yup
+ .string()
+ .required('Please confirm your password')
+ .oneOf([yup.ref('newPassword')], 'Passwords must match'),
+});
+
+type ProfileFormData = yup.InferType
+
+
+
+
+ {/* Data Export */}
+
+
+ + Manage your personal data and exercise your privacy rights under GDPR +
+
+
+
+ {/* Data Deletion */}
+
+
+
+
+
+
+ Export Your Data
++ Request a copy of all your personal data stored in our system. You will receive an email with a download link when your data is ready. +
+ +
+
+
+ {/* Request History */}
+ {requests.length > 0 && (
+
+
+
+
+
+
+ Delete Your Data
+
+
+
+
+
+
+
+ Warning: This action cannot be undone
++ Requesting data deletion will permanently remove your account and all associated data including bookings, payments, and personal information. This action is irreversible. +
+
+
+
+
+ )}
+
+
+
+ {requests.map((request) => (
+
+
+
+ ))}
+
+
+
+
+ {request.request_type === 'data_export' && request.status === 'completed' && request.verification_token && (
+
+ )}
+
+ {request.request_type === 'data_export' ? (
+
+ + {request.request_type === 'data_export' ? 'Data Export' : 'Data Deletion'} +
+ + {request.status.charAt(0).toUpperCase() + request.status.slice(1)} + ++ Created: {formatDate(request.created_at)} + {request.processed_at && ` • Processed: ${formatDate(request.processed_at)}`} +
+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+const SessionsTab: React.FC = () => {
+ const [sessions, setSessions] = useState
+ {}
+
+
+
+
+ {}
+
+
+
+ + Admin Profile & Settings +
++ Manage your admin account information, security, and privacy preferences +
+
+
+
+ {}
+ {activeTab === 'profile' && (
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {}
+ {activeTab === 'password' && (
+
+
+
+ )}
+
+ {}
+ {activeTab === 'mfa' && (
+
+ {}
+
+ )}
+
+ {/* Sessions Tab */}
+ {activeTab === 'sessions' && (
+
+
+
+
+
+ {mfaStatus?.mfa_enabled ? (
+
+
+
+ + Add an extra layer of security to your account by requiring a verification code in addition to your password. +
+
+ {}
+
+ ) : (
+
+
+
+
+ {}
+ {showBackupCodes && (
+
+
+
+
+
+
+ MFA is Enabled
++ Your account is protected with two-factor authentication. +
++ Remaining backup codes: {mfaStatus.backup_codes_count} +
+
+
+ )}
+
+ {}
+
+
+
+
+
+
+ + Store these codes in a safe place. Each code can only be used once. +
+
+ {showBackupCodes.map((code, index) => (
+
+
+
+ {code}
+
+
+ ))}
+
+
+
+
+
+ {}
+
+
+ + If you lose access to your authenticator app, you can use backup codes to access your account. +
+ +
+
+
+
+
+
+ + Disabling MFA will reduce the security of your account. We recommend keeping it enabled. +
+ +
+ {!mfaSecret ? (
+
+
+ )}
+
+
+
+ ) : (
+
+
+ {}
+
+ )}
+
+
+
+
+
+ {}
+
+
+ + Use your authenticator app (Google Authenticator, Authy, etc.) to scan this QR code. +
+ {mfaQrCode && ( +
+
+
+ )}
+
+
+
+ Manual Entry Key:
+
+
+
+
+
+ {showMfaSecret ? mfaSecret : '••••••••••••••••'}
+
+
+
+
+
+
+
+
+ + Enter the 6-digit code from your authenticator app to complete the setup. +
+
+
+
+
+ setMfaVerificationToken(e.target.value.replace(/\D/g, '').slice(0, 6))}
+ placeholder="000000"
+ maxLength={6}
+ className="luxury-input text-center text-lg sm:text-xl tracking-widest font-mono"
+ />
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+const GDPRTab: React.FC = () => {
+ const [requests, setRequests] = useState
+
+
+
+
+ {sessions.length === 0 ? (
+
+
+ + Manage your active sessions across different devices +
+
+
+ ) : (
+ No active sessions
+
+ {sessions.length > 1 && (
+
+ )}
+
+
+
+ )}
+ {sessions.map((session) => (
+
+
+ ))}
+
+
+
+
+
+
+ {getDeviceIcon(session.user_agent)}
+
+
+
+ + {getDeviceName(session.user_agent)} +
++ IP Address: {session.ip_address || 'Unknown'} +
++ Last Activity: {formatDate(session.last_activity)} +
++ Expires: {formatDate(session.expires_at)} +
+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default ProfilePage;
diff --git a/Frontend/src/pages/staff/ProfilePage.tsx b/Frontend/src/pages/staff/ProfilePage.tsx
new file mode 100644
index 00000000..25bf75ff
--- /dev/null
+++ b/Frontend/src/pages/staff/ProfilePage.tsx
@@ -0,0 +1,1489 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as yup from 'yup';
+import {
+ User,
+ Mail,
+ Phone,
+ Save,
+ CheckCircle,
+ AlertCircle,
+ Lock,
+ Camera,
+ Shield,
+ ShieldCheck,
+ ShieldOff,
+ Copy,
+ Eye,
+ EyeOff,
+ RefreshCw,
+ KeyRound,
+ LogOut,
+ Monitor,
+ FileText,
+ Download,
+ Trash2,
+ Database,
+ Smartphone,
+ Tablet
+} from 'lucide-react';
+import { toast } from 'react-toastify';
+import authService from '../../features/auth/services/authService';
+import sessionService from '../../features/auth/services/sessionService';
+import gdprService, { GDPRRequest } from '../../features/compliance/services/gdprService';
+import useAuthStore from '../../store/useAuthStore';
+import Loading from '../../shared/components/Loading';
+import EmptyState from '../../shared/components/EmptyState';
+import { useAsync } from '../../shared/hooks/useAsync';
+import { useGlobalLoading } from '../../shared/contexts/LoadingContext';
+import { normalizeImageUrl } from '../../shared/utils/imageUtils';
+import { formatDate } from '../../shared/utils/format';
+import { UserSession } from '../../features/auth/services/sessionService';
+import { useNavigate } from 'react-router-dom';
+
+const profileValidationSchema = yup.object().shape({
+ name: yup
+ .string()
+ .required('Full name is required')
+ .min(2, 'Full name must be at least 2 characters')
+ .max(100, 'Full name cannot exceed 100 characters'),
+ email: yup
+ .string()
+ .required('Email is required')
+ .email('Invalid email address'),
+ phone: yup
+ .string()
+ .required('Phone number is required')
+ .matches(
+ /^[\d\s\-\+\(\)]{5,}$/,
+ 'Please enter a valid phone number'
+ ),
+});
+
+const passwordValidationSchema = yup.object().shape({
+ currentPassword: yup
+ .string()
+ .required('Current password is required'),
+ newPassword: yup
+ .string()
+ .required('New password is required')
+ .min(8, 'Password must be at least 8 characters')
+ .matches(/[A-Z]/, 'Password must contain at least one uppercase letter')
+ .matches(/[a-z]/, 'Password must contain at least one lowercase letter')
+ .matches(/[0-9]/, 'Password must contain at least one number')
+ .matches(/[!@#$%^&*(),.?":{}|<>]/, 'Password must contain at least one special character (!@#$%^&*(),.?":{}|<>)'),
+ confirmPassword: yup
+ .string()
+ .required('Please confirm your password')
+ .oneOf([yup.ref('newPassword')], 'Passwords must match'),
+});
+
+type ProfileFormData = yup.InferType
+
+
+
+
+ {/* Data Export */}
+
+
+ + Manage your personal data and exercise your privacy rights under GDPR +
+
+
+
+ {/* Data Deletion */}
+
+
+
+
+
+
+ Export Your Data
++ Request a copy of all your personal data stored in our system. You will receive an email with a download link when your data is ready. +
+ +
+
+
+ {/* Request History */}
+ {requests.length > 0 && (
+
+
+
+
+
+
+ Delete Your Data
+
+
+
+
+
+
+
+ Warning: This action cannot be undone
++ Requesting data deletion will permanently remove your account and all associated data including bookings, payments, and personal information. This action is irreversible. +
+
+
+
+
+ )}
+
+
+
+ {requests.map((request) => (
+
+
+
+ ))}
+
+
+
+
+ {request.request_type === 'data_export' && request.status === 'completed' && request.verification_token && (
+
+ )}
+
+ {request.request_type === 'data_export' ? (
+
+ + {request.request_type === 'data_export' ? 'Data Export' : 'Data Deletion'} +
+ + {request.status.charAt(0).toUpperCase() + request.status.slice(1)} + ++ Created: {formatDate(request.created_at)} + {request.processed_at && ` • Processed: ${formatDate(request.processed_at)}`} +
+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+const SessionsTab: React.FC = () => {
+ const [sessions, setSessions] = useState
+ {}
+
+
+
+
+ {}
+
+
+
+ + Staff Profile & Settings +
++ Manage your staff account information, security, and privacy preferences +
+
+
+
+ {}
+ {activeTab === 'profile' && (
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {}
+ {activeTab === 'password' && (
+
+
+
+ )}
+
+ {}
+ {activeTab === 'mfa' && (
+
+ {}
+
+ )}
+
+ {/* Sessions Tab */}
+ {activeTab === 'sessions' && (
+
+
+
+
+
+ {mfaStatus?.mfa_enabled ? (
+
+
+
+ + Add an extra layer of security to your account by requiring a verification code in addition to your password. +
+
+ {}
+
+ ) : (
+
+
+
+
+ {}
+ {showBackupCodes && (
+
+
+
+
+
+
+ MFA is Enabled
++ Your account is protected with two-factor authentication. +
++ Remaining backup codes: {mfaStatus.backup_codes_count} +
+
+
+ )}
+
+ {}
+
+
+
+
+
+
+ + Store these codes in a safe place. Each code can only be used once. +
+
+ {showBackupCodes.map((code, index) => (
+
+
+
+ {code}
+
+
+ ))}
+
+
+
+
+
+ {}
+
+
+ + If you lose access to your authenticator app, you can use backup codes to access your account. +
+ +
+
+
+
+
+
+ + Disabling MFA will reduce the security of your account. We recommend keeping it enabled. +
+ +
+ {!mfaSecret ? (
+
+
+ )}
+
+
+
+ ) : (
+
+
+ {}
+
+ )}
+
+
+
+
+
+ {}
+
+
+ + Use your authenticator app (Google Authenticator, Authy, etc.) to scan this QR code. +
+ {mfaQrCode && ( +
+
+
+ )}
+
+
+
+ Manual Entry Key:
+
+
+
+
+
+ {showMfaSecret ? mfaSecret : '••••••••••••••••'}
+
+
+
+
+
+
+
+
+ + Enter the 6-digit code from your authenticator app to complete the setup. +
+
+
+
+
+ setMfaVerificationToken(e.target.value.replace(/\D/g, '').slice(0, 6))}
+ placeholder="000000"
+ maxLength={6}
+ className="luxury-input text-center text-lg sm:text-xl tracking-widest font-mono"
+ />
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+const GDPRTab: React.FC = () => {
+ const [requests, setRequests] = useState
+
+
+
+
+ {sessions.length === 0 ? (
+
+
+ + Manage your active sessions across different devices +
+
+
+ ) : (
+ No active sessions
+
+ {sessions.length > 1 && (
+
+ )}
+
+
+
+ )}
+ {sessions.map((session) => (
+
+
+ ))}
+
+
+
+
+
+
+ {getDeviceIcon(session.user_agent)}
+
+
+
+ + {getDeviceName(session.user_agent)} +
++ IP Address: {session.ip_address || 'Unknown'} +
++ Last Activity: {formatDate(session.last_activity)} +
++ Expires: {formatDate(session.expires_at)} +
+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default ProfilePage;
diff --git a/Frontend/src/shared/components/SidebarAccountant.tsx b/Frontend/src/shared/components/SidebarAccountant.tsx
index ed92f8b9..eb536754 100644
--- a/Frontend/src/shared/components/SidebarAccountant.tsx
+++ b/Frontend/src/shared/components/SidebarAccountant.tsx
@@ -9,7 +9,8 @@ import {
Menu,
X,
CreditCard,
- Receipt
+ Receipt,
+ User
} from 'lucide-react';
import useAuthStore from '../../store/useAuthStore';
import { useResponsive } from '../../hooks';
@@ -95,6 +96,11 @@ const SidebarAccountant: React.FC
+
+
+
+
+ {/* Data Export */}
+
+
+ + Manage your personal data and exercise your privacy rights under GDPR +
+
+
+
+ {/* Data Deletion */}
+
+
+
+
+
+
+ Export Your Data
++ Request a copy of all your personal data stored in our system. You will receive an email with a download link when your data is ready. +
+ +
+
+
+ {/* Request History */}
+ {requests.length > 0 && (
+
+
+
+
+
+
+ Delete Your Data
+
+
+
+
+
+
+
+ Warning: This action cannot be undone
++ Requesting data deletion will permanently remove your account and all associated data including bookings, payments, and personal information. This action is irreversible. +
+
+
+
+
+ )}
+
+
+
+ {requests.map((request) => (
+
+
+
+ ))}
+
+
+
+
+ {request.request_type === 'data_export' && request.status === 'completed' && request.verification_token && (
+
+ )}
+
+ {request.request_type === 'data_export' ? (
+
+ + {request.request_type === 'data_export' ? 'Data Export' : 'Data Deletion'} +
+ + {request.status.charAt(0).toUpperCase() + request.status.slice(1)} + ++ Created: {formatDate(request.created_at)} + {request.processed_at && ` • Processed: ${formatDate(request.processed_at)}`} +
+