208 lines
11 KiB
TypeScript
208 lines
11 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { GlassCard } from '@/components/ui/GlassCard';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Switch } from '@/components/ui/switch';
|
||
import { Label } from '@/components/ui/label';
|
||
import { Separator } from '@/components/ui/separator';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { useTheme } from '@/context/ThemeContext';
|
||
import {
|
||
User,
|
||
ShieldCheck,
|
||
Globe,
|
||
Bell,
|
||
Moon,
|
||
Download,
|
||
Trash2,
|
||
LogOut,
|
||
CheckCircle,
|
||
Building,
|
||
Sparkles
|
||
} from 'lucide-react';
|
||
|
||
export const Profile = () => {
|
||
const { theme, setTheme } = useTheme();
|
||
const [isShariaEnabled, setIsShariaEnabled] = useState(false);
|
||
const [notifications, setNotifications] = useState(true);
|
||
const [currency, setCurrency] = useState('AED');
|
||
|
||
return (
|
||
<div className="max-w-4xl mx-auto space-y-6 animate-fade-in pb-20">
|
||
{/* Header */}
|
||
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-4 mb-8 text-center sm:text-left">
|
||
<div className="w-20 h-20 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-3xl shadow-lg border-4 border-white shrink-0">
|
||
👩💼
|
||
</div>
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-slate-900">Anjali</h1>
|
||
<div className="flex flex-col sm:flex-row items-center gap-2 mt-1">
|
||
<Badge variant="outline" className="bg-green-50 text-green-700 border-green-200 gap-1">
|
||
<CheckCircle className="w-3 h-3" /> Verified Investor
|
||
</Badge>
|
||
<span className="text-sm text-slate-500">Member since 2023</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
{/* Identity & KYC */}
|
||
<GlassCard className="p-6 space-y-6">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="p-2 bg-blue-100 rounded-lg text-blue-600">
|
||
<ShieldCheck className="w-5 h-5" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold">Identity & KYC</h3>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div className="flex justify-between items-center p-3 bg-white/50 rounded-lg border border-white/40">
|
||
<div>
|
||
<p className="text-xs text-slate-500 uppercase tracking-wide">Emirates ID</p>
|
||
<p className="font-mono text-slate-800">784-1988-1234567-9</p>
|
||
</div>
|
||
<Badge className="bg-green-100 text-green-700 hover:bg-green-100">Verified via UAE Pass</Badge>
|
||
</div>
|
||
|
||
<div className="flex justify-between items-center p-3 bg-white/50 rounded-lg border border-white/40">
|
||
<div>
|
||
<p className="text-xs text-slate-500 uppercase tracking-wide">Investor Number (NIN)</p>
|
||
<p className="font-mono text-slate-800">99200312</p>
|
||
</div>
|
||
<Badge variant="outline" className="text-xs">ADX / DFM Linked</Badge>
|
||
</div>
|
||
</div>
|
||
</GlassCard>
|
||
|
||
{/* Regional Preferences */}
|
||
<GlassCard className="p-6 space-y-6">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="p-2 bg-purple-100 rounded-lg text-purple-600">
|
||
<Globe className="w-5 h-5" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold">Regional Preferences</h3>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<div className="space-y-0.5">
|
||
<Label className="text-base">Base Currency</Label>
|
||
<p className="text-sm text-slate-500">Locked to AED for local compliance</p>
|
||
</div>
|
||
<div className="flex items-center gap-2 bg-slate-100 rounded-lg p-1">
|
||
<Button
|
||
size="sm"
|
||
variant={currency === 'AED' ? 'default' : 'ghost'}
|
||
className={currency === 'AED' ? "bg-white text-slate-900 shadow-sm" : ""}
|
||
onClick={() => setCurrency('AED')}
|
||
>
|
||
AED
|
||
</Button>
|
||
<Button
|
||
size="sm"
|
||
variant={currency === 'USD' ? 'default' : 'ghost'}
|
||
className={currency === 'USD' ? "bg-white text-slate-900 shadow-sm" : ""}
|
||
onClick={() => setCurrency('USD')}
|
||
>
|
||
USD
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<Separator />
|
||
<div className="flex items-center justify-between">
|
||
<div className="space-y-0.5">
|
||
<Label className="text-base flex items-center gap-2">
|
||
Islamic Finance Mode <Moon className="w-4 h-4 text-green-600" />
|
||
</Label>
|
||
<p className="text-sm text-slate-500">Hide non-Sharia compliant assets</p>
|
||
</div>
|
||
<Switch checked={isShariaEnabled} onCheckedChange={setIsShariaEnabled} className="data-[state=checked]:bg-green-600" />
|
||
</div>
|
||
</div>
|
||
</GlassCard>
|
||
|
||
{/* App Settings */}
|
||
<GlassCard className="p-6 space-y-6">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="p-2 bg-orange-100 rounded-lg text-orange-600">
|
||
<User className="w-5 h-5" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold">App Settings</h3>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div className="flex items-center justify-between">
|
||
<div className="space-y-0.5">
|
||
<Label className="text-base">Notifications</Label>
|
||
<p className="text-sm text-slate-500">Market alerts and diverse insights</p>
|
||
</div>
|
||
<Switch checked={notifications} onCheckedChange={setNotifications} />
|
||
</div>
|
||
</div>
|
||
</GlassCard>
|
||
|
||
{/* Appearance & Themes */}
|
||
<GlassCard className="p-6 space-y-6">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="p-2 bg-pink-100 rounded-lg text-pink-600">
|
||
<Sparkles className="w-5 h-5" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold">Appearance</h3>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{['default', 'dubai', 'minimal', 'nature'].map((themeName) => (
|
||
<button
|
||
key={themeName}
|
||
onClick={() => setTheme(themeName as any)}
|
||
className={`relative h-20 rounded-xl overflow-hidden border-2 transition-all ${theme === themeName ? 'border-blue-600 shadow-md scale-[1.02]' : 'border-transparent hover:scale-[1.02]'}`}
|
||
>
|
||
{themeName === 'default' && <div className="absolute inset-0 bg-gradient-to-br from-purple-100 to-blue-100" />}
|
||
{themeName === 'dubai' && <img src="https://images.unsplash.com/photo-1512453979798-5ea9ba6a80f4?q=80&w=300&auto=format&fit=crop" className="absolute inset-0 w-full h-full object-cover" />}
|
||
{themeName === 'minimal' && <img src="https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=300&auto=format&fit=crop" className="absolute inset-0 w-full h-full object-cover" />}
|
||
{themeName === 'nature' && <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=80&w=300&auto=format&fit=crop" className="absolute inset-0 w-full h-full object-cover" />}
|
||
|
||
<div className="absolute inset-0 bg-black/20 flex items-center justify-center">
|
||
<span className="text-white font-medium text-xs capitalized drop-shadow-md capitalize">{themeName}</span>
|
||
</div>
|
||
{theme === themeName && (
|
||
<div className="absolute top-1 right-1 bg-blue-600 rounded-full p-0.5">
|
||
<CheckCircle className="w-3 h-3 text-white" />
|
||
</div>
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</GlassCard>
|
||
|
||
{/* Data Privacy (UAE PDPL) */}
|
||
<GlassCard className="p-6 space-y-6 border-red-100/50">
|
||
<div className="flex items-center gap-3 mb-4">
|
||
<div className="p-2 bg-red-100 rounded-lg text-red-600">
|
||
<ShieldCheck className="w-5 h-5" />
|
||
</div>
|
||
<h3 className="text-lg font-semibold">Data Privacy</h3>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<Button variant="outline" className="w-full justify-start gap-2 border-slate-200">
|
||
<Download className="w-4 h-4" /> Download My Data (UAE PDPL)
|
||
</Button>
|
||
<Button variant="ghost" className="w-full justify-start gap-2 text-red-600 hover:text-red-700 hover:bg-red-50">
|
||
<Trash2 className="w-4 h-4" /> Delete Account
|
||
</Button>
|
||
<p className="text-xs text-slate-400 text-center pt-2">
|
||
Your data is stored locally in UAE data centers in compliance with Federal Decree-Law No. 45 of 2021.
|
||
</p>
|
||
</div>
|
||
</GlassCard>
|
||
</div>
|
||
|
||
<div className="flex justify-center pt-8">
|
||
<Button variant="ghost" className="text-slate-500 gap-2">
|
||
<LogOut className="w-4 h-4" /> Sign Out
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|