diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx new file mode 100644 index 0000000..1f8542b --- /dev/null +++ b/src/pages/Settings.tsx @@ -0,0 +1,323 @@ +import { useState } from "react"; +import { toast } from "sonner"; +import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import { Label } from "@/components/ui/label"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Switch } from "@/components/ui/switch"; +import { Separator } from "@/components/ui/separator"; +import { + Settings as SettingsIcon, Bell, Shield, CreditCard, + Upload, Globe, Languages, Check, Zap, AlertTriangle, Trash2 +} from "lucide-react"; +import Sidebar from "@/components/Sidebar"; +import Header from "@/components/Header"; + +export default function SettingsPage() { + const [appName, setAppName] = useState("MetricFlow"); + const [emailNotif, setEmailNotif] = useState(true); + const [pushNotif, setPushNotif] = useState(true); + const [slackNotif, setSlackNotif] = useState(false); + const [twoFa, setTwoFa] = useState(false); + const [activeTab, setActiveTab] = useState("general"); + const [generalSaved, setGeneralSaved] = useState(false); + const [passwordSaved, setPasswordSaved] = useState(false); + + const handleGeneralSave = (e: React.FormEvent) => { + e.preventDefault(); + setGeneralSaved(true); + toast.success("Settings saved!"); + setTimeout(() => setGeneralSaved(false), 3000); + }; + + const handlePasswordUpdate = (e: React.FormEvent) => { + e.preventDefault(); + setPasswordSaved(true); + toast.success("Password updated!"); + setTimeout(() => setPasswordSaved(false), 3000); + }; + + return ( +
+ +
+
+
+
+

Settings

+

Manage your application preferences and account settings

+
+ + + + + General + + + Notifications + + + Security + + + Billing + + + + {/* ── General ── */} + + + + General Settings + Configure your application basics + + +
+
+
+ + setAppName(e.target.value)} className="bg-slate-50" required /> +
+
+ +
+
+ +
+ +
+
+
+
+ + Localization +
+
+
+ + +
+
+ + +
+
+ {generalSaved && ( +
+ Settings saved! +
+ )} +
+ +
+
+ + + + + {/* ── Notifications ── */} + + + + Notification Preferences + Choose how and when you want to be notified + + +
+ + Channels +
+
+
+

Email Notifications

+

Receive email alerts for important updates and reports

+

Includes daily digest, weekly summary, and critical alerts

+
+ +
+
+
+

Push Notifications

+

Get instant push notifications in your browser

+

Real-time alerts when you have the app open

+
+ +
+
+ + Integrations +
+
+
+

Slack Integration

+

Send notifications to your Slack workspace channels

+

Requires Slack app to be installed in your workspace

+
+ +
+ + + + + {/* ── Security ── */} + + + + Security Settings + Manage your password and authentication methods + + +
+

Change Password

+
+
+ + +
+
+ + +
+
+ + +
+
+ {passwordSaved && ( +
+ Password updated successfully! +
+ )} + +
+ +
+
+

Two-Factor Authentication

+

Add an extra layer of security to your account

+

Uses authenticator app or SMS verification codes

+
+ +
+ + + + {/* ── Danger Zone ── */} + + + + Danger Zone + + Irreversible actions that affect your account + + +
+
+

Delete Account

+

Permanently delete your account and all associated data. This action cannot be undone.

+
+ +
+ + + + + {/* ── Billing ── */} + +
+ + + Current Plan + Manage your subscription and billing details + + +
+
+
+ + Pro Plan +
+

$49/month

+

Billed monthly. Next payment on May 1, 2026

+
+ +
+ + + + + + Usage + Your current usage this billing period + + +
+
+ API Requests + 8,432 / 10,000 +
+
+
+
+
+
+
+ Storage + 4.2 GB / 10 GB +
+
+
+
+
+
+
+ Team Members + 8 / 15 +
+
+
+
+
+ + +
+ + +
+
+
+ ); +}