290 lines
12 KiB
TypeScript
290 lines
12 KiB
TypeScript
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
|
import {
|
|
Settings as SettingsIcon,
|
|
Bell,
|
|
Shield,
|
|
Palette,
|
|
Lock,
|
|
Calendar,
|
|
Sliders,
|
|
AlertCircle
|
|
} from 'lucide-react';
|
|
import { setupPushNotifications } from '@/utils/pushNotifications';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import { ConfigurationManager } from '@/components/admin/ConfigurationManager';
|
|
import { HolidayManager } from '@/components/admin/HolidayManager';
|
|
|
|
export function Settings() {
|
|
const { user } = useAuth();
|
|
return (
|
|
<div className="space-y-6 max-w-7xl mx-auto">
|
|
{/* Header Card */}
|
|
<Card className="relative overflow-hidden shadow-xl border-0">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900"></div>
|
|
|
|
<CardContent className="relative z-10 p-8 lg:p-12">
|
|
<div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6">
|
|
<div className="text-white">
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<div className="w-16 h-16 bg-yellow-400 rounded-xl flex items-center justify-center shadow-lg">
|
|
<SettingsIcon className="w-8 h-8 text-slate-900" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-3xl font-bold mb-2 text-white">Settings</h1>
|
|
<p className="text-lg text-gray-200">Manage your account settings and preferences</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Check if user is admin */}
|
|
{(user as any)?.isAdmin ? (
|
|
<Tabs defaultValue="user" className="w-full">
|
|
<TabsList className="grid w-full grid-cols-3 mb-6">
|
|
<TabsTrigger value="user" className="flex items-center gap-2">
|
|
<SettingsIcon className="w-4 h-4" />
|
|
User Settings
|
|
</TabsTrigger>
|
|
<TabsTrigger value="system" className="flex items-center gap-2">
|
|
<Sliders className="w-4 h-4" />
|
|
System Configuration
|
|
</TabsTrigger>
|
|
<TabsTrigger value="holidays" className="flex items-center gap-2">
|
|
<Calendar className="w-4 h-4" />
|
|
Holiday Calendar
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* User Settings Tab */}
|
|
<TabsContent value="user" className="space-y-6">
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Notification Settings */}
|
|
<Card className="shadow-lg hover:shadow-xl transition-shadow">
|
|
<CardHeader className="pb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-3 bg-blue-100 rounded-lg">
|
|
<Bell className="h-5 w-5 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-lg text-gray-900">Notifications</CardTitle>
|
|
<CardDescription className="text-gray-600">Manage notification preferences</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<Button onClick={async () => {
|
|
try {
|
|
await setupPushNotifications();
|
|
alert('Notifications enabled');
|
|
} catch (e) {
|
|
alert('Failed to enable notifications');
|
|
}
|
|
}}>
|
|
Enable Push Notifications
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Security Settings */}
|
|
<Card className="shadow-lg hover:shadow-xl transition-shadow">
|
|
<CardHeader className="pb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-3 bg-red-100 rounded-lg">
|
|
<Lock className="h-5 w-5 text-red-600" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-lg text-gray-900">Security</CardTitle>
|
|
<CardDescription className="text-gray-600">Password and security settings</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-gray-50 rounded-lg">
|
|
<p className="text-sm text-gray-600">Security settings will be available soon</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Appearance Settings */}
|
|
<Card className="shadow-lg hover:shadow-xl transition-shadow">
|
|
<CardHeader className="pb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-3 bg-purple-100 rounded-lg">
|
|
<Palette className="h-5 w-5 text-purple-600" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-lg text-gray-900">Appearance</CardTitle>
|
|
<CardDescription className="text-gray-600">Theme and display preferences</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-gray-50 rounded-lg">
|
|
<p className="text-sm text-gray-600">Appearance settings will be available soon</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Preferences */}
|
|
<Card className="shadow-lg hover:shadow-xl transition-shadow">
|
|
<CardHeader className="pb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-3 bg-emerald-100 rounded-lg">
|
|
<Shield className="h-5 w-5 text-emerald-600" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-lg text-gray-900">Preferences</CardTitle>
|
|
<CardDescription className="text-gray-600">Application preferences</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-gray-50 rounded-lg">
|
|
<p className="text-sm text-gray-600">User preferences will be available soon</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* System Configuration Tab (Admin Only) */}
|
|
<TabsContent value="system">
|
|
<ConfigurationManager />
|
|
</TabsContent>
|
|
|
|
{/* Holiday Calendar Tab (Admin Only) */}
|
|
<TabsContent value="holidays">
|
|
<HolidayManager />
|
|
</TabsContent>
|
|
</Tabs>
|
|
) : (
|
|
<>
|
|
{/* Non-Admin User Settings Only */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Notification Settings */}
|
|
<Card className="shadow-lg hover:shadow-xl transition-shadow">
|
|
<CardHeader className="pb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-3 bg-blue-100 rounded-lg">
|
|
<Bell className="h-5 w-5 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-lg text-gray-900">Notifications</CardTitle>
|
|
<CardDescription className="text-gray-600">Manage notification preferences</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<Button onClick={async () => {
|
|
try {
|
|
await setupPushNotifications();
|
|
alert('Notifications enabled');
|
|
} catch (e) {
|
|
alert('Failed to enable notifications');
|
|
}
|
|
}}>
|
|
Enable Push Notifications
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Security Settings */}
|
|
<Card className="shadow-lg hover:shadow-xl transition-shadow">
|
|
<CardHeader className="pb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-3 bg-red-100 rounded-lg">
|
|
<Lock className="h-5 w-5 text-red-600" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-lg text-gray-900">Security</CardTitle>
|
|
<CardDescription className="text-gray-600">Password and security settings</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-gray-50 rounded-lg">
|
|
<p className="text-sm text-gray-600">Security settings will be available soon</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Appearance Settings */}
|
|
<Card className="shadow-lg hover:shadow-xl transition-shadow">
|
|
<CardHeader className="pb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-3 bg-purple-100 rounded-lg">
|
|
<Palette className="h-5 w-5 text-purple-600" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-lg text-gray-900">Appearance</CardTitle>
|
|
<CardDescription className="text-gray-600">Theme and display preferences</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-gray-50 rounded-lg">
|
|
<p className="text-sm text-gray-600">Appearance settings will be available soon</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Preferences */}
|
|
<Card className="shadow-lg hover:shadow-xl transition-shadow">
|
|
<CardHeader className="pb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-3 bg-emerald-100 rounded-lg">
|
|
<Shield className="h-5 w-5 text-emerald-600" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-lg text-gray-900">Preferences</CardTitle>
|
|
<CardDescription className="text-gray-600">Application preferences</CardDescription>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-gray-50 rounded-lg">
|
|
<p className="text-sm text-gray-600">User preferences will be available soon</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Info: Admin features not available */}
|
|
<Card className="shadow-lg border-blue-200 bg-blue-50">
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center gap-3">
|
|
<AlertCircle className="w-5 h-5 text-blue-600 shrink-0" />
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-900">Admin features not accessible</p>
|
|
<p className="text-xs text-gray-600 mt-1">System configuration and holiday management require admin privileges.</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|