Seed: product-management template (23 files)
This commit is contained in:
@@ -0,0 +1,286 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||||
|
import { Progress } from "@/components/ui/progress";
|
||||||
|
import {
|
||||||
|
Settings2, Users, Puzzle, Key, Copy, RefreshCw, Eye, EyeOff,
|
||||||
|
Shield, Globe, Bell, Trash2, Plus, ExternalLink
|
||||||
|
} from "lucide-react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import Sidebar from "@/components/Sidebar";
|
||||||
|
import Header from "@/components/Header";
|
||||||
|
|
||||||
|
const teamMembers = [
|
||||||
|
{ name: "Sarah Kim", email: "sarah@example.com", initials: "SK", color: "bg-blue-500", role: "Admin" },
|
||||||
|
{ name: "Alex Lee", email: "alex@example.com", initials: "AL", color: "bg-sky-500", role: "Editor" },
|
||||||
|
{ name: "Nina Kumar", email: "nina@example.com", initials: "NK", color: "bg-emerald-500", role: "Editor" },
|
||||||
|
{ name: "Raj Joshi", email: "raj@example.com", initials: "RJ", color: "bg-indigo-500", role: "Viewer" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const integrations = [
|
||||||
|
{ name: "Slack", description: "Send notifications to Slack channels", connected: true, icon: "S", color: "bg-purple-500" },
|
||||||
|
{ name: "Jira", description: "Two-way sync with Jira issues", connected: true, icon: "J", color: "bg-blue-500" },
|
||||||
|
{ name: "Linear", description: "Import and sync with Linear projects", connected: false, icon: "L", color: "bg-indigo-500" },
|
||||||
|
{ name: "GitHub", description: "Link features to pull requests", connected: false, icon: "G", color: "bg-slate-800" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function SettingsPage() {
|
||||||
|
const [showApiKey, setShowApiKey] = useState(false);
|
||||||
|
const apiKey = "pk_live_a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6";
|
||||||
|
const maskedKey = "pk_live_****************************o5p6";
|
||||||
|
|
||||||
|
const handleCopyKey = () => {
|
||||||
|
toast("API key copied to clipboard!");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRegenerate = () => {
|
||||||
|
toast("API key regenerated successfully!");
|
||||||
|
};
|
||||||
|
|
||||||
|
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-6">
|
||||||
|
{/* ── Page Header ── */}
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-bold text-slate-900 animate-fade-up">Settings</h1>
|
||||||
|
<p className="text-slate-500 mt-1">Manage your workspace preferences</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── Settings Tabs ── */}
|
||||||
|
<Tabs defaultValue="general" className="space-y-6">
|
||||||
|
<TabsList className="bg-white border shadow-sm p-1">
|
||||||
|
<TabsTrigger value="general" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">
|
||||||
|
<Settings2 className="mr-2 h-4 w-4" /> General
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="team" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">
|
||||||
|
<Users className="mr-2 h-4 w-4" /> Team
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="integrations" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">
|
||||||
|
<Puzzle className="mr-2 h-4 w-4" /> Integrations
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="api" className="data-[state=active]:bg-blue-600 data-[state=active]:text-white">
|
||||||
|
<Key className="mr-2 h-4 w-4" /> API
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
{/* ── General Tab ── */}
|
||||||
|
<TabsContent value="general" className="space-y-6">
|
||||||
|
<Card className="border-0 shadow-sm">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Workspace Settings</CardTitle>
|
||||||
|
<CardDescription>Configure your workspace name and preferences</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Workspace Name</Label>
|
||||||
|
<Input defaultValue="ProductLab" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label>Workspace URL</Label>
|
||||||
|
<Input defaultValue="productlab.app/workspace" disabled className="bg-slate-50" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h4 className="font-medium text-slate-900">Notifications</h4>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-700">Email Notifications</p>
|
||||||
|
<p className="text-xs text-slate-500">Receive email updates for feature changes</p>
|
||||||
|
</div>
|
||||||
|
<Switch defaultChecked />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-700">Slack Notifications</p>
|
||||||
|
<p className="text-xs text-slate-500">Push notifications to connected Slack channels</p>
|
||||||
|
</div>
|
||||||
|
<Switch defaultChecked />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-700">Weekly Digest</p>
|
||||||
|
<p className="text-xs text-slate-500">Receive a weekly summary of product activity</p>
|
||||||
|
</div>
|
||||||
|
<Switch />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button className="bg-blue-600 hover:bg-blue-700 text-white">Save Changes</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* ── Team Tab ── */}
|
||||||
|
<TabsContent value="team" className="space-y-6">
|
||||||
|
<Card className="border-0 shadow-sm">
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-lg">Team Members</CardTitle>
|
||||||
|
<CardDescription>{teamMembers.length} members in your workspace</CardDescription>
|
||||||
|
</div>
|
||||||
|
<Button className="bg-blue-600 hover:bg-blue-700 text-white" size="sm">
|
||||||
|
<Plus className="mr-1 h-4 w-4" /> Invite
|
||||||
|
</Button>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{teamMembers.map((member, i) => (
|
||||||
|
<div key={i} className="flex items-center justify-between p-3 rounded-lg hover:bg-slate-50 transition-colors">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Avatar className="h-9 w-9">
|
||||||
|
<AvatarFallback className={`text-xs text-white \${member.color}`}>{member.initials}</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-900">{member.name}</p>
|
||||||
|
<p className="text-xs text-slate-400">{member.email}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Badge variant="secondary" className="text-xs">{member.role}</Badge>
|
||||||
|
{member.role !== "Admin" && (
|
||||||
|
<Button variant="ghost" size="sm" className="h-7 text-xs text-slate-400 hover:text-red-600">Remove</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* ── Integrations Tab ── */}
|
||||||
|
<TabsContent value="integrations" className="space-y-6">
|
||||||
|
<Card className="border-0 shadow-sm">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">Integrations</CardTitle>
|
||||||
|
<CardDescription>Connect your favorite tools to streamline your workflow</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{integrations.map((integration, i) => (
|
||||||
|
<div key={i} className="flex items-center justify-between p-4 rounded-lg border border-slate-100 hover:border-blue-200 transition-colors">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className={`h-10 w-10 rounded-lg \${integration.color} flex items-center justify-center`}>
|
||||||
|
<span className="text-sm font-bold text-white">{integration.icon}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-slate-900">{integration.name}</p>
|
||||||
|
<p className="text-xs text-slate-400">{integration.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{integration.connected ? (
|
||||||
|
<>
|
||||||
|
<Badge className="bg-emerald-100 text-emerald-700 text-xs border-0">Connected</Badge>
|
||||||
|
<Button variant="outline" size="sm" className="text-xs">Configure</Button>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<Button size="sm" className="bg-blue-600 hover:bg-blue-700 text-white text-xs">Connect</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* ── API Tab ── */}
|
||||||
|
<TabsContent value="api" className="space-y-6">
|
||||||
|
<Card className="border-0 shadow-sm">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-lg">API Key</CardTitle>
|
||||||
|
<CardDescription>Use your API key to access the ProductLab API programmatically</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Label>Your API Key</Label>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="flex-1 relative">
|
||||||
|
<Input
|
||||||
|
readOnly
|
||||||
|
value={showApiKey ? apiKey : maskedKey}
|
||||||
|
className="font-mono text-sm bg-slate-50 pr-10"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={() => setShowApiKey(!showApiKey)}
|
||||||
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
|
||||||
|
>
|
||||||
|
{showApiKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" size="sm" onClick={handleCopyKey}>
|
||||||
|
<Copy className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50" onClick={handleRegenerate}>
|
||||||
|
<RefreshCw className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-slate-400 flex items-center gap-1">
|
||||||
|
<Shield className="h-3 w-3" /> Keep your API key secret. Do not share it publicly.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
{/* Usage Stats */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h4 className="font-medium text-slate-900">API Usage (This Month)</h4>
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||||
|
<div className="p-4 bg-slate-50 rounded-lg">
|
||||||
|
<p className="text-2xl font-bold text-slate-900">12,847</p>
|
||||||
|
<p className="text-xs text-slate-500 mt-1">Total Requests</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 bg-slate-50 rounded-lg">
|
||||||
|
<p className="text-2xl font-bold text-slate-900">142ms</p>
|
||||||
|
<p className="text-xs text-slate-500 mt-1">Avg Response Time</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 bg-slate-50 rounded-lg">
|
||||||
|
<p className="text-2xl font-bold text-slate-900">99.8%</p>
|
||||||
|
<p className="text-xs text-slate-500 mt-1">Success Rate</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-slate-500">Rate Limit Usage</span>
|
||||||
|
<span className="font-medium text-slate-700">12,847 / 50,000</span>
|
||||||
|
</div>
|
||||||
|
<Progress value={26} className="h-2 bg-slate-100" />
|
||||||
|
<p className="text-xs text-slate-400">26% of monthly limit used</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Separator />
|
||||||
|
|
||||||
|
{/* API Docs Link */}
|
||||||
|
<div className="flex items-center justify-between p-4 bg-blue-50 rounded-lg">
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium text-blue-900">API Documentation</p>
|
||||||
|
<p className="text-xs text-blue-600 mt-0.5">Explore endpoints, authentication, and examples</p>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" size="sm" className="text-blue-600 border-blue-200 hover:bg-blue-100">
|
||||||
|
View Docs <ExternalLink className="ml-1 h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user