323 lines
15 KiB
TypeScript
323 lines
15 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { Layout } from '../components/Layout/Layout';
|
|
import { useAuth } from '../context/AuthContext';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { Settings as SettingsIcon, Lock, Bell, Moon, Globe, Save, AlertCircle } from 'lucide-react';
|
|
|
|
const API_URL = 'http://localhost:3001/api';
|
|
|
|
export const Settings: React.FC = () => {
|
|
const { user } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [success, setSuccess] = useState('');
|
|
|
|
// Load saved settings from localStorage
|
|
const loadSettings = () => {
|
|
const saved = localStorage.getItem('userSettings');
|
|
if (saved) {
|
|
try {
|
|
const settings = JSON.parse(saved);
|
|
if (settings.notifications) {
|
|
setNotifications(settings.notifications);
|
|
}
|
|
if (settings.display) {
|
|
setDisplay(settings.display);
|
|
}
|
|
} catch (e) {
|
|
console.error('Error loading settings:', e);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Notification preferences
|
|
const [notifications, setNotifications] = useState({
|
|
emailNotifications: true,
|
|
pushNotifications: true,
|
|
scheduleReminders: true,
|
|
payrollAlerts: true,
|
|
documentExpiry: true,
|
|
});
|
|
|
|
// Display preferences
|
|
const [display, setDisplay] = useState({
|
|
theme: 'light',
|
|
language: 'en',
|
|
timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
|
|
dateFormat: 'MM/DD/YYYY',
|
|
timeFormat: '12h',
|
|
});
|
|
|
|
useEffect(() => {
|
|
loadSettings();
|
|
}, []);
|
|
|
|
const handleNotificationChange = (key: string) => {
|
|
setNotifications(prev => ({
|
|
...prev,
|
|
[key]: !prev[key as keyof typeof prev]
|
|
}));
|
|
};
|
|
|
|
const handleDisplayChange = (key: string, value: string) => {
|
|
setDisplay(prev => ({
|
|
...prev,
|
|
[key]: value
|
|
}));
|
|
};
|
|
|
|
const handleSave = async () => {
|
|
setLoading(true);
|
|
setError('');
|
|
setSuccess('');
|
|
|
|
try {
|
|
// In a real app, this would save to the backend
|
|
// For now, we'll just save to localStorage
|
|
localStorage.setItem('userSettings', JSON.stringify({
|
|
notifications,
|
|
display,
|
|
}));
|
|
|
|
setSuccess('Settings saved successfully!');
|
|
setTimeout(() => setSuccess(''), 3000);
|
|
} catch (error) {
|
|
setError('Failed to save settings');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleChangePassword = () => {
|
|
navigate('/change-password');
|
|
};
|
|
|
|
return (
|
|
<Layout>
|
|
<div>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h1 className="text-3xl font-bold text-gray-900">Settings</h1>
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={loading}
|
|
className="px-4 py-2 bg-primary-600 text-white rounded-lg font-medium hover:bg-primary-700 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<Save className="w-4 h-4" />
|
|
{loading ? 'Saving...' : 'Save Settings'}
|
|
</button>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6 flex items-center gap-2">
|
|
<AlertCircle className="w-5 h-5" />
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{success && (
|
|
<div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg mb-6">
|
|
{success}
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-6">
|
|
{/* Security Settings */}
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Lock className="w-6 h-6 text-primary-600" />
|
|
<h2 className="text-xl font-semibold text-gray-900">Security</h2>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
|
<div>
|
|
<h3 className="font-medium text-gray-900 mb-1">Password</h3>
|
|
<p className="text-sm text-gray-600">Change your account password</p>
|
|
</div>
|
|
<button
|
|
onClick={handleChangePassword}
|
|
className="px-4 py-2 bg-primary-600 text-white rounded-lg font-medium hover:bg-primary-700"
|
|
>
|
|
Change Password
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Notification Settings */}
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Bell className="w-6 h-6 text-primary-600" />
|
|
<h2 className="text-xl font-semibold text-gray-900">Notifications</h2>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
|
<div>
|
|
<h3 className="font-medium text-gray-900 mb-1">Email Notifications</h3>
|
|
<p className="text-sm text-gray-600">Receive notifications via email</p>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={notifications.emailNotifications}
|
|
onChange={() => handleNotificationChange('emailNotifications')}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-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-primary-600"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
|
<div>
|
|
<h3 className="font-medium text-gray-900 mb-1">Push Notifications</h3>
|
|
<p className="text-sm text-gray-600">Receive push notifications in browser</p>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={notifications.pushNotifications}
|
|
onChange={() => handleNotificationChange('pushNotifications')}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-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-primary-600"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
|
<div>
|
|
<h3 className="font-medium text-gray-900 mb-1">Schedule Reminders</h3>
|
|
<p className="text-sm text-gray-600">Get reminders for upcoming shifts</p>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={notifications.scheduleReminders}
|
|
onChange={() => handleNotificationChange('scheduleReminders')}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-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-primary-600"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
|
<div>
|
|
<h3 className="font-medium text-gray-900 mb-1">Payroll Alerts</h3>
|
|
<p className="text-sm text-gray-600">Notifications about payroll updates</p>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={notifications.payrollAlerts}
|
|
onChange={() => handleNotificationChange('payrollAlerts')}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-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-primary-600"></div>
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
|
|
<div>
|
|
<h3 className="font-medium text-gray-900 mb-1">Document Expiry Warnings</h3>
|
|
<p className="text-sm text-gray-600">Alerts when documents are expiring</p>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={notifications.documentExpiry}
|
|
onChange={() => handleNotificationChange('documentExpiry')}
|
|
className="sr-only peer"
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-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-primary-600"></div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Display Preferences */}
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<Moon className="w-6 h-6 text-primary-600" />
|
|
<h2 className="text-xl font-semibold text-gray-900">Display Preferences</h2>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Theme</label>
|
|
<select
|
|
value={display.theme}
|
|
onChange={(e) => handleDisplayChange('theme', e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
|
>
|
|
<option value="light">Light</option>
|
|
<option value="dark">Dark</option>
|
|
<option value="auto">Auto (System)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Language</label>
|
|
<select
|
|
value={display.language}
|
|
onChange={(e) => handleDisplayChange('language', e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
|
>
|
|
<option value="en">English</option>
|
|
<option value="es">Spanish</option>
|
|
<option value="fr">French</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Timezone</label>
|
|
<select
|
|
value={display.timezone}
|
|
onChange={(e) => handleDisplayChange('timezone', e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
|
>
|
|
<option value={Intl.DateTimeFormat().resolvedOptions().timeZone}>
|
|
{Intl.DateTimeFormat().resolvedOptions().timeZone}
|
|
</option>
|
|
<option value="America/New_York">Eastern Time (ET)</option>
|
|
<option value="America/Chicago">Central Time (CT)</option>
|
|
<option value="America/Denver">Mountain Time (MT)</option>
|
|
<option value="America/Los_Angeles">Pacific Time (PT)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Date Format</label>
|
|
<select
|
|
value={display.dateFormat}
|
|
onChange={(e) => handleDisplayChange('dateFormat', e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
|
>
|
|
<option value="MM/DD/YYYY">MM/DD/YYYY</option>
|
|
<option value="DD/MM/YYYY">DD/MM/YYYY</option>
|
|
<option value="YYYY-MM-DD">YYYY-MM-DD</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">Time Format</label>
|
|
<select
|
|
value={display.timeFormat}
|
|
onChange={(e) => handleDisplayChange('timeFormat', e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
|
>
|
|
<option value="12h">12-hour (AM/PM)</option>
|
|
<option value="24h">24-hour</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
};
|
|
|