| 1 | import Layout from "@/components/Layout"; |
| 2 | import { Card } from "@/components/ui/card"; |
| 3 | import { Avatar, AvatarFallback } from "@/components/ui/avatar"; |
| 4 | import { |
| 5 | Settings, |
| 6 | Bell, |
| 7 | Shield, |
| 8 | HelpCircle, |
| 9 | FileText, |
| 10 | LogOut, |
| 11 | ChevronRight, |
| 12 | } from "lucide-react"; |
| 13 | import { Button } from "@/components/ui/button"; |
| 14 | |
| 15 | const menuItems = [ |
| 16 | { |
| 17 | section: "Account", |
| 18 | items: [ |
| 19 | { icon: Settings, label: "Settings", to: "/settings" }, |
| 20 | { icon: Bell, label: "Notifications", to: "/notifications" }, |
| 21 | { icon: Shield, label: "Security", to: "/security" }, |
| 22 | ], |
| 23 | }, |
| 24 | { |
| 25 | section: "Support", |
| 26 | items: [ |
| 27 | { icon: HelpCircle, label: "Help Center", to: "/help" }, |
| 28 | { icon: FileText, label: "Terms & Privacy", to: "/terms" }, |
| 29 | ], |
| 30 | }, |
| 31 | ]; |
| 32 | |
| 33 | const Profile = () => { |
| 34 | return ( |
| 35 | <Layout title="Profile"> |
| 36 | <div className="p-4 space-y-6"> |
| 37 | {/* Profile Header */} |
| 38 | <Card className="p-8 border-0 shadow-lg"> |
| 39 | <div className="flex items-center gap-5"> |
| 40 | <Avatar className="h-24 w-24"> |
| 41 | <AvatarFallback className="bg-primary text-primary-foreground text-3xl font-bold"> |
| 42 | JD |
| 43 | </AvatarFallback> |
| 44 | </Avatar> |
| 45 | <div className="flex-1"> |
| 46 | <h2 className="text-2xl font-bold mb-1">John Doe</h2> |
| 47 | <p className="text-sm text-muted-foreground font-medium">john.doe@company.com</p> |
| 48 | <p className="text-sm text-muted-foreground font-medium mt-1">ID: EMP-001</p> |
| 49 | </div> |
| 50 | </div> |
| 51 | </Card> |
| 52 | |
| 53 | {/* Stats */} |
| 54 | <div className="grid grid-cols-3 gap-4"> |
| 55 | <Card className="p-5 text-center border-0 shadow-md"> |
| 56 | <p className="text-3xl font-bold text-foreground">24</p> |
| 57 | <p className="text-xs text-muted-foreground mt-2 font-medium">Expenses</p> |
| 58 | </Card> |
| 59 | <Card className="p-5 text-center border-0 shadow-md"> |
| 60 | <p className="text-3xl font-bold text-expense-positive">$2.4K</p> |
| 61 | <p className="text-xs text-muted-foreground mt-2 font-medium">Approved</p> |
| 62 | </Card> |
| 63 | <Card className="p-5 text-center border-0 shadow-md"> |
| 64 | <p className="text-3xl font-bold text-foreground">3</p> |
| 65 | <p className="text-xs text-muted-foreground mt-2 font-medium">Pending</p> |
| 66 | </Card> |
| 67 | </div> |
| 68 | |
| 69 | {/* Menu Sections */} |
| 70 | {menuItems.map((section) => ( |
| 71 | <div key={section.section} className="space-y-3"> |
| 72 | <h3 className="text-sm font-bold text-muted-foreground px-1 uppercase tracking-wider"> |
| 73 | {section.section} |
| 74 | </h3> |
| 75 | <Card className="divide-y border-0 shadow-md"> |
| 76 | {section.items.map((item) => ( |
| 77 | <button |
| 78 | key={item.label} |
| 79 | className="w-full px-5 py-4 flex items-center justify-between hover:bg-muted/50 transition-colors first:rounded-t-lg last:rounded-b-lg" |
| 80 | > |
| 81 | <div className="flex items-center gap-4"> |
| 82 | <item.icon className="h-5 w-5 text-muted-foreground" /> |
| 83 | <span className="font-semibold">{item.label}</span> |
| 84 | </div> |
| 85 | <ChevronRight className="h-5 w-5 text-muted-foreground" /> |
| 86 | </button> |
| 87 | ))} |
| 88 | </Card> |
| 89 | </div> |
| 90 | ))} |
| 91 | |
| 92 | {/* Logout Button */} |
| 93 | <Button variant="outline" className="w-full" size="lg"> |
| 94 | <LogOut className="h-5 w-5 mr-2" /> |
| 95 | Log Out |
| 96 | </Button> |
| 97 | |
| 98 | <div className="text-center text-sm text-muted-foreground font-medium pb-4"> |
| 99 | Version 1.0.0 |
| 100 | </div> |
| 101 | </div> |
| 102 | </Layout> |
| 103 | ); |
| 104 | }; |
| 105 | |
| 106 | export default Profile; |