271 lines
18 KiB
TypeScript
271 lines
18 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Topbar } from "@/components/topbar"
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Switch } from "@/components/ui/switch"
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { User, Bell, Shield, CreditCard, Users, Plus, Trash2 } from "lucide-react"
|
|
import { useToast } from "@/hooks/use-toast"
|
|
import { useTranslation } from "@/lib/i18n"
|
|
|
|
const teamMembers = [
|
|
{ id: 1, name: "John Doe", email: "john@company.com", role: "Admin", status: "Active", avatar: "/placeholder.svg?height=32&width=32" },
|
|
{ id: 2, name: "Sarah Johnson", email: "sarah@company.com", role: "Sales Manager", status: "Active", avatar: "/placeholder.svg?height=32&width=32" },
|
|
{ id: 3, name: "Mike Chen", email: "mike@company.com", role: "Sales Rep", status: "Active", avatar: "/placeholder.svg?height=32&width=32" },
|
|
{ id: 4, name: "Emily Davis", email: "emily@company.com", role: "Sales Rep", status: "Pending", avatar: "/placeholder.svg?height=32&width=32" },
|
|
]
|
|
|
|
export default function Settings() {
|
|
const { t } = useTranslation()
|
|
const { toast } = useToast()
|
|
const [notifications, setNotifications] = useState({
|
|
email: true, sms: false, inApp: true, dealUpdates: true, taskReminders: true, weeklyReports: false,
|
|
})
|
|
|
|
const handleSave = () => {
|
|
toast({ title: t("settings.toast.saved"), description: t("settings.toast.savedDesc") })
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen">
|
|
<Topbar />
|
|
<div className="flex-1 p-6">
|
|
<div className="mb-6">
|
|
<h1 className="text-3xl font-bold tracking-tight">{t("settings.title")}</h1>
|
|
<p className="text-muted-foreground">{t("settings.description")}</p>
|
|
</div>
|
|
|
|
<Tabs defaultValue="profile" className="space-y-6">
|
|
<TabsList className="grid w-full grid-cols-5">
|
|
<TabsTrigger value="profile" className="flex items-center gap-2"><User className="h-4 w-4" />{t("settings.tabs.profile")}</TabsTrigger>
|
|
<TabsTrigger value="team" className="flex items-center gap-2"><Users className="h-4 w-4" />{t("settings.tabs.team")}</TabsTrigger>
|
|
<TabsTrigger value="billing" className="flex items-center gap-2"><CreditCard className="h-4 w-4" />{t("settings.tabs.billing")}</TabsTrigger>
|
|
<TabsTrigger value="notifications" className="flex items-center gap-2"><Bell className="h-4 w-4" />{t("settings.tabs.notifications")}</TabsTrigger>
|
|
<TabsTrigger value="security" className="flex items-center gap-2"><Shield className="h-4 w-4" />{t("settings.tabs.security")}</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<TabsContent value="profile" className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{t("settings.profile.title")}</CardTitle>
|
|
<CardDescription>{t("settings.profile.desc")}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="flex items-center gap-6">
|
|
<Avatar className="h-20 w-20"><AvatarImage src="/placeholder.svg?height=80&width=80" /><AvatarFallback>JD</AvatarFallback></Avatar>
|
|
<div>
|
|
<Button variant="outline">{t("settings.profile.changePhoto")}</Button>
|
|
<p className="text-sm text-muted-foreground mt-2">{t("settings.profile.photoHint")}</p>
|
|
</div>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<div className="space-y-2"><Label htmlFor="firstName">{t("settings.profile.firstName")}</Label><Input id="firstName" defaultValue="John" /></div>
|
|
<div className="space-y-2"><Label htmlFor="lastName">{t("settings.profile.lastName")}</Label><Input id="lastName" defaultValue="Doe" /></div>
|
|
</div>
|
|
<div className="space-y-2"><Label htmlFor="email">{t("settings.profile.email")}</Label><Input id="email" type="email" defaultValue="john@company.com" /></div>
|
|
<div className="space-y-2"><Label htmlFor="title">{t("settings.profile.jobTitle")}</Label><Input id="title" defaultValue="Sales Manager" /></div>
|
|
<Button onClick={handleSave}>{t("settings.profile.saveChanges")}</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="team" className="space-y-6">
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div><CardTitle>{t("settings.team.title")}</CardTitle><CardDescription>{t("settings.team.desc")}</CardDescription></div>
|
|
<Button><Plus className="mr-2 h-4 w-4" />{t("settings.team.inviteUser")}</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>{t("settings.team.user")}</TableHead>
|
|
<TableHead>{t("settings.team.role")}</TableHead>
|
|
<TableHead>{t("settings.team.status")}</TableHead>
|
|
<TableHead>{t("settings.team.actions")}</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{teamMembers.map((member) => (
|
|
<TableRow key={member.id}>
|
|
<TableCell>
|
|
<div className="flex items-center gap-3">
|
|
<Avatar className="h-8 w-8"><AvatarImage src={member.avatar || "/placeholder.svg"} /><AvatarFallback>{member.name.split(" ").map((n) => n[0]).join("")}</AvatarFallback></Avatar>
|
|
<div><p className="font-medium">{member.name}</p><p className="text-sm text-muted-foreground">{member.email}</p></div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Select defaultValue={member.role.toLowerCase().replace(" ", "_")}>
|
|
<SelectTrigger className="w-32"><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="admin">{t("settings.team.admin")}</SelectItem>
|
|
<SelectItem value="sales_manager">{t("settings.team.salesManager")}</SelectItem>
|
|
<SelectItem value="sales_rep">{t("settings.team.salesRep")}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Badge className={member.status === "Active" ? "bg-green-100 text-green-800" : "bg-yellow-100 text-yellow-800"}>{member.status}</Badge>
|
|
</TableCell>
|
|
<TableCell><Button variant="ghost" size="icon"><Trash2 className="h-4 w-4" /></Button></TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="billing" className="space-y-6">
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
<Card>
|
|
<CardHeader><CardTitle>{t("settings.billing.currentPlan")}</CardTitle><CardDescription>{t("settings.billing.currentPlanDesc")}</CardDescription></CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between"><span>{t("settings.billing.plan")}</span><Badge>{t("settings.billing.professional")}</Badge></div>
|
|
<div className="flex items-center justify-between"><span>{t("settings.billing.price")}</span><span className="font-medium">{t("settings.billing.priceValue")}</span></div>
|
|
<div className="flex items-center justify-between"><span>{t("settings.billing.users")}</span><span>{t("settings.billing.usersValue")}</span></div>
|
|
<Button className="w-full">{t("settings.billing.upgradePlan")}</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader><CardTitle>{t("settings.billing.paymentMethod")}</CardTitle><CardDescription>{t("settings.billing.paymentDesc")}</CardDescription></CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center gap-3 p-3 border rounded-lg">
|
|
<CreditCard className="h-6 w-6" />
|
|
<div className="flex-1"><p className="font-medium">•••• •••• •••• 4242</p><p className="text-sm text-muted-foreground">{t("settings.billing.expires")}</p></div>
|
|
</div>
|
|
<Button variant="outline" className="w-full">{t("settings.billing.updatePayment")}</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
<Card>
|
|
<CardHeader><CardTitle>{t("settings.billing.billingHistory")}</CardTitle><CardDescription>{t("settings.billing.billingHistoryDesc")}</CardDescription></CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>{t("settings.billing.date")}</TableHead>
|
|
<TableHead>{t("settings.billing.amount")}</TableHead>
|
|
<TableHead>{t("settings.billing.status")}</TableHead>
|
|
<TableHead>{t("settings.billing.invoice")}</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow>
|
|
<TableCell>Dec 1, 2024</TableCell><TableCell>$49.00</TableCell>
|
|
<TableCell><Badge className="bg-green-100 text-green-800">{t("settings.billing.paid")}</Badge></TableCell>
|
|
<TableCell><Button variant="ghost" size="sm">{t("settings.billing.download")}</Button></TableCell>
|
|
</TableRow>
|
|
<TableRow>
|
|
<TableCell>Nov 1, 2024</TableCell><TableCell>$49.00</TableCell>
|
|
<TableCell><Badge className="bg-green-100 text-green-800">{t("settings.billing.paid")}</Badge></TableCell>
|
|
<TableCell><Button variant="ghost" size="sm">{t("settings.billing.download")}</Button></TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="notifications" className="space-y-6">
|
|
<Card>
|
|
<CardHeader><CardTitle>{t("settings.notifications.title")}</CardTitle><CardDescription>{t("settings.notifications.desc")}</CardDescription></CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="space-y-4">
|
|
<h4 className="text-sm font-medium">{t("settings.notifications.communication")}</h4>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<div><Label htmlFor="email-notifications">{t("settings.notifications.emailNotifications")}</Label><p className="text-sm text-muted-foreground">{t("settings.notifications.emailNotificationsDesc")}</p></div>
|
|
<Switch id="email-notifications" checked={notifications.email} onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, email: checked }))} />
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<div><Label htmlFor="sms-notifications">{t("settings.notifications.smsNotifications")}</Label><p className="text-sm text-muted-foreground">{t("settings.notifications.smsNotificationsDesc")}</p></div>
|
|
<Switch id="sms-notifications" checked={notifications.sms} onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, sms: checked }))} />
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<div><Label htmlFor="in-app-notifications">{t("settings.notifications.inAppNotifications")}</Label><p className="text-sm text-muted-foreground">{t("settings.notifications.inAppNotificationsDesc")}</p></div>
|
|
<Switch id="in-app-notifications" checked={notifications.inApp} onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, inApp: checked }))} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<h4 className="text-sm font-medium">{t("settings.notifications.salesUpdates")}</h4>
|
|
<div className="space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<div><Label htmlFor="deal-updates">{t("settings.notifications.dealUpdates")}</Label><p className="text-sm text-muted-foreground">{t("settings.notifications.dealUpdatesDesc")}</p></div>
|
|
<Switch id="deal-updates" checked={notifications.dealUpdates} onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, dealUpdates: checked }))} />
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<div><Label htmlFor="task-reminders">{t("settings.notifications.taskReminders")}</Label><p className="text-sm text-muted-foreground">{t("settings.notifications.taskRemindersDesc")}</p></div>
|
|
<Switch id="task-reminders" checked={notifications.taskReminders} onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, taskReminders: checked }))} />
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<div><Label htmlFor="weekly-reports">{t("settings.notifications.weeklyReports")}</Label><p className="text-sm text-muted-foreground">{t("settings.notifications.weeklyReportsDesc")}</p></div>
|
|
<Switch id="weekly-reports" checked={notifications.weeklyReports} onCheckedChange={(checked) => setNotifications((prev) => ({ ...prev, weeklyReports: checked }))} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Button onClick={handleSave}>{t("settings.notifications.savePreferences")}</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
|
|
<TabsContent value="security" className="space-y-6">
|
|
<Card>
|
|
<CardHeader><CardTitle>{t("settings.security.password")}</CardTitle><CardDescription>{t("settings.security.passwordDesc")}</CardDescription></CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2"><Label htmlFor="current-password">{t("settings.security.currentPassword")}</Label><Input id="current-password" type="password" /></div>
|
|
<div className="space-y-2"><Label htmlFor="new-password">{t("settings.security.newPassword")}</Label><Input id="new-password" type="password" /></div>
|
|
<div className="space-y-2"><Label htmlFor="confirm-password">{t("settings.security.confirmPassword")}</Label><Input id="confirm-password" type="password" /></div>
|
|
<Button>{t("settings.security.updatePassword")}</Button>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader><CardTitle>{t("settings.security.twoFactor")}</CardTitle><CardDescription>{t("settings.security.twoFactorDesc")}</CardDescription></CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div><p className="font-medium">{t("settings.security.authenticatorApp")}</p><p className="text-sm text-muted-foreground">{t("settings.security.authenticatorDesc")}</p></div>
|
|
<Button variant="outline">{t("settings.security.setup")}</Button>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<div><p className="font-medium">{t("settings.security.smsVerification")}</p><p className="text-sm text-muted-foreground">{t("settings.security.smsVerificationDesc")}</p></div>
|
|
<Button variant="outline">{t("settings.security.setup")}</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader><CardTitle>{t("settings.security.activeSessions")}</CardTitle><CardDescription>{t("settings.security.activeSessionsDesc")}</CardDescription></CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between p-3 border rounded-lg">
|
|
<div><p className="font-medium">{t("settings.security.currentSession")}</p><p className="text-sm text-muted-foreground">{t("settings.security.currentSessionDetail")}</p></div>
|
|
<Badge className="bg-green-100 text-green-800">{t("settings.security.activeLabel")}</Badge>
|
|
</div>
|
|
<div className="flex items-center justify-between p-3 border rounded-lg">
|
|
<div><p className="font-medium">{t("settings.security.mobileApp")}</p><p className="text-sm text-muted-foreground">{t("settings.security.mobileAppDetail")}</p></div>
|
|
<Button variant="outline" size="sm">{t("settings.security.revoke")}</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|