Seed: dashboard template (24 files)
This commit is contained in:
@@ -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 (
|
||||
<div className="flex min-h-screen bg-slate-50">
|
||||
<Sidebar activePath="/settings" />
|
||||
<div className="flex-1 lg:ml-64">
|
||||
<Header />
|
||||
<main className="p-6 space-y-8">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900 animate-fade-up">Settings</h1>
|
||||
<p className="text-sm text-slate-500 mt-1">Manage your application preferences and account settings</p>
|
||||
</div>
|
||||
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
|
||||
<TabsList className="bg-white border border-slate-200 p-1">
|
||||
<TabsTrigger value="general" className="data-[state=active]:bg-sky-50 data-[state=active]:text-sky-700">
|
||||
<SettingsIcon className="mr-2 h-4 w-4" /> General
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="notifications" className="data-[state=active]:bg-sky-50 data-[state=active]:text-sky-700">
|
||||
<Bell className="mr-2 h-4 w-4" /> Notifications
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="security" className="data-[state=active]:bg-sky-50 data-[state=active]:text-sky-700">
|
||||
<Shield className="mr-2 h-4 w-4" /> Security
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="billing" className="data-[state=active]:bg-sky-50 data-[state=active]:text-sky-700">
|
||||
<CreditCard className="mr-2 h-4 w-4" /> Billing
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* ── General ── */}
|
||||
<TabsContent value="general">
|
||||
<Card className="border-0 shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">General Settings</CardTitle>
|
||||
<CardDescription>Configure your application basics</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleGeneralSave} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="appName">Application Name</Label>
|
||||
<Input id="appName" value={appName} onChange={(e) => setAppName(e.target.value)} className="bg-slate-50" required />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Logo</Label>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-16 w-16 rounded-xl bg-slate-100 border-2 border-dashed border-slate-300 flex items-center justify-center">
|
||||
<Upload className="h-6 w-6 text-slate-400" />
|
||||
</div>
|
||||
<Button variant="outline" size="sm">Upload Logo</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Separator />
|
||||
<span className="absolute -top-2.5 left-4 bg-white px-2 text-xs font-medium text-slate-400 uppercase tracking-wider">Localization</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<Label>Timezone</Label>
|
||||
<Select defaultValue="utc-8">
|
||||
<SelectTrigger className="bg-slate-50">
|
||||
<Globe className="mr-2 h-4 w-4 text-slate-400" />
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="utc-8">(UTC-08:00) Pacific Time</SelectItem>
|
||||
<SelectItem value="utc-5">(UTC-05:00) Eastern Time</SelectItem>
|
||||
<SelectItem value="utc+0">(UTC+00:00) GMT</SelectItem>
|
||||
<SelectItem value="utc+1">(UTC+01:00) Central European</SelectItem>
|
||||
<SelectItem value="utc+8">(UTC+08:00) Singapore</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Language</Label>
|
||||
<Select defaultValue="en">
|
||||
<SelectTrigger className="bg-slate-50">
|
||||
<Languages className="mr-2 h-4 w-4 text-slate-400" />
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="en">English</SelectItem>
|
||||
<SelectItem value="es">Spanish</SelectItem>
|
||||
<SelectItem value="fr">French</SelectItem>
|
||||
<SelectItem value="de">German</SelectItem>
|
||||
<SelectItem value="ja">Japanese</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
{generalSaved && (
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-emerald-600 bg-emerald-50 px-4 py-2.5 rounded-lg">
|
||||
<Check className="h-4 w-4" /> Settings saved!
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" className="bg-sky-600 hover:bg-sky-700 text-white active:scale-[0.98] transition-all">
|
||||
<Check className="mr-2 h-4 w-4" /> Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* ── Notifications ── */}
|
||||
<TabsContent value="notifications">
|
||||
<Card className="border-0 shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Notification Preferences</CardTitle>
|
||||
<CardDescription>Choose how and when you want to be notified</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="relative">
|
||||
<Separator />
|
||||
<span className="absolute -top-2.5 left-4 bg-white px-2 text-xs font-medium text-slate-400 uppercase tracking-wider">Channels</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-4 rounded-lg bg-slate-50">
|
||||
<div>
|
||||
<p className="font-medium text-slate-900">Email Notifications</p>
|
||||
<p className="text-sm text-slate-500 mt-0.5">Receive email alerts for important updates and reports</p>
|
||||
<p className="text-xs text-slate-400 mt-1">Includes daily digest, weekly summary, and critical alerts</p>
|
||||
</div>
|
||||
<Switch checked={emailNotif} onCheckedChange={setEmailNotif} className="transition-all duration-200" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-4 rounded-lg bg-slate-50">
|
||||
<div>
|
||||
<p className="font-medium text-slate-900">Push Notifications</p>
|
||||
<p className="text-sm text-slate-500 mt-0.5">Get instant push notifications in your browser</p>
|
||||
<p className="text-xs text-slate-400 mt-1">Real-time alerts when you have the app open</p>
|
||||
</div>
|
||||
<Switch checked={pushNotif} onCheckedChange={setPushNotif} className="transition-all duration-200" />
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Separator />
|
||||
<span className="absolute -top-2.5 left-4 bg-white px-2 text-xs font-medium text-slate-400 uppercase tracking-wider">Integrations</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-4 rounded-lg bg-slate-50">
|
||||
<div>
|
||||
<p className="font-medium text-slate-900">Slack Integration</p>
|
||||
<p className="text-sm text-slate-500 mt-0.5">Send notifications to your Slack workspace channels</p>
|
||||
<p className="text-xs text-slate-400 mt-1">Requires Slack app to be installed in your workspace</p>
|
||||
</div>
|
||||
<Switch checked={slackNotif} onCheckedChange={setSlackNotif} className="transition-all duration-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* ── Security ── */}
|
||||
<TabsContent value="security">
|
||||
<Card className="border-0 shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Security Settings</CardTitle>
|
||||
<CardDescription>Manage your password and authentication methods</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<form onSubmit={handlePasswordUpdate} className="space-y-4">
|
||||
<h3 className="font-semibold text-slate-900">Change Password</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Current Password</Label>
|
||||
<Input type="password" placeholder="Enter current password" className="bg-slate-50" required />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>New Password</Label>
|
||||
<Input type="password" placeholder="Enter new password" className="bg-slate-50" required minLength={8} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Confirm New Password</Label>
|
||||
<Input type="password" placeholder="Confirm new password" className="bg-slate-50" required minLength={8} />
|
||||
</div>
|
||||
</div>
|
||||
{passwordSaved && (
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-emerald-600 bg-emerald-50 px-4 py-2.5 rounded-lg">
|
||||
<Check className="h-4 w-4" /> Password updated successfully!
|
||||
</div>
|
||||
)}
|
||||
<Button type="submit" variant="outline" size="sm" className="active:scale-[0.98]">Update Password</Button>
|
||||
</form>
|
||||
<Separator />
|
||||
<div className="flex items-center justify-between p-4 rounded-lg bg-slate-50">
|
||||
<div>
|
||||
<p className="font-medium text-slate-900">Two-Factor Authentication</p>
|
||||
<p className="text-sm text-slate-500 mt-0.5">Add an extra layer of security to your account</p>
|
||||
<p className="text-xs text-slate-400 mt-1">Uses authenticator app or SMS verification codes</p>
|
||||
</div>
|
||||
<Switch checked={twoFa} onCheckedChange={setTwoFa} className="transition-all duration-200" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* ── Danger Zone ── */}
|
||||
<Card className="border border-red-200 shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg text-red-600 flex items-center gap-2">
|
||||
<AlertTriangle className="h-5 w-5" /> Danger Zone
|
||||
</CardTitle>
|
||||
<CardDescription>Irreversible actions that affect your account</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between p-4 rounded-lg bg-red-50 border border-red-100">
|
||||
<div>
|
||||
<p className="font-medium text-red-900">Delete Account</p>
|
||||
<p className="text-sm text-red-600 mt-0.5">Permanently delete your account and all associated data. This action cannot be undone.</p>
|
||||
</div>
|
||||
<Button variant="destructive" size="sm" className="mt-3 sm:mt-0 active:scale-[0.98] shrink-0">
|
||||
<Trash2 className="mr-2 h-4 w-4" /> Delete Account
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* ── Billing ── */}
|
||||
<TabsContent value="billing">
|
||||
<div className="space-y-6">
|
||||
<Card className="border-0 shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Current Plan</CardTitle>
|
||||
<CardDescription>Manage your subscription and billing details</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col md:flex-row items-start md:items-center justify-between p-6 rounded-xl bg-gradient-to-r from-sky-500 to-sky-600 text-white">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Zap className="h-5 w-5" />
|
||||
<Badge className="bg-white/20 text-white border-0 hover:bg-white/30">Pro Plan</Badge>
|
||||
</div>
|
||||
<p className="text-2xl font-bold">$49/month</p>
|
||||
<p className="text-sky-100 text-sm mt-1">Billed monthly. Next payment on May 1, 2026</p>
|
||||
</div>
|
||||
<Button className="mt-4 md:mt-0 bg-white text-sky-700 hover:bg-sky-50 active:scale-[0.98] transition-all">
|
||||
Upgrade Plan
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-0 shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Usage</CardTitle>
|
||||
<CardDescription>Your current usage this billing period</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-slate-700">API Requests</span>
|
||||
<span className="text-sm text-slate-500">8,432 / 10,000</span>
|
||||
</div>
|
||||
<div className="h-2.5 bg-slate-100 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-sky-500 rounded-full" style={{ width: "84%" }} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-slate-700">Storage</span>
|
||||
<span className="text-sm text-slate-500">4.2 GB / 10 GB</span>
|
||||
</div>
|
||||
<div className="h-2.5 bg-slate-100 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-orange-500 rounded-full" style={{ width: "42%" }} />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-slate-700">Team Members</span>
|
||||
<span className="text-sm text-slate-500">8 / 15</span>
|
||||
</div>
|
||||
<div className="h-2.5 bg-slate-100 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-emerald-500 rounded-full" style={{ width: "53%" }} />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user