diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx new file mode 100644 index 0000000..5496929 --- /dev/null +++ b/src/pages/Settings.tsx @@ -0,0 +1,296 @@ +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 { Textarea } from "@/components/ui/textarea"; +import { Avatar, AvatarFallback } from "@/components/ui/avatar"; +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, Users, Puzzle, Bell, Save, + Mail, Shield, Crown, ExternalLink, CreditCard, Check +} from "lucide-react"; +import { toast } from "sonner"; +import Sidebar from "@/components/Sidebar"; +import Header from "@/components/Header"; +import { useSaasMutation } from "@/hooks/use-tygarun"; + +const tabs = [ + { id: "general", label: "General", icon: SettingsIcon }, + { id: "team", label: "Team", icon: Users }, + { id: "integrations", label: "Integrations", icon: Puzzle }, + { id: "billing", label: "Billing", icon: CreditCard }, + { id: "notifications", label: "Notifications", icon: Bell }, +]; + +const plans = [ + { name: "Free", price: "$0", period: "/mo", amount: 0, current: true, features: ["Up to 3 projects", "5 team members", "Basic kanban boards", "Community support"] }, + { name: "Pro", price: "$12", period: "/user/mo", amount: 1200, popular: true, features: ["Unlimited projects", "Unlimited members", "Timeline & Gantt", "Time tracking", "Priority support"] }, + { name: "Enterprise", price: "Custom", period: "", amount: 0, features: ["Everything in Pro", "SSO & SAML", "Advanced permissions", "Dedicated success manager", "99.9% uptime SLA"] }, +]; + +const teamMembers = [ + { name: "Alex Kim", email: "alex@taskflow.io", initials: "AK", role: "Admin", color: "bg-violet-500" }, + { name: "Maria Rodriguez", email: "maria@taskflow.io", initials: "MR", role: "Editor", color: "bg-indigo-500" }, + { name: "Jordan Lee", email: "jordan@taskflow.io", initials: "JL", role: "Editor", color: "bg-emerald-500" }, + { name: "Sam Chen", email: "sam@taskflow.io", initials: "SC", role: "Viewer", color: "bg-amber-500" }, +]; + +const integrations = [ + { name: "Slack", description: "Send notifications and updates to Slack channels", icon: "S", connected: true, color: "bg-[#4A154B]" }, + { name: "GitHub", description: "Link commits and PRs to tasks automatically", icon: "G", connected: true, color: "bg-slate-900" }, + { name: "Figma", description: "Embed designs and sync design tokens", icon: "F", connected: false, color: "bg-[#F24E1E]" }, + { name: "Jira", description: "Import and sync issues from Jira projects", icon: "J", connected: false, color: "bg-[#0052CC]" }, + { name: "Notion", description: "Sync documentation and project wikis", icon: "N", connected: true, color: "bg-slate-800" }, + { name: "Google Drive", description: "Attach files and documents from Google Drive", icon: "G", connected: false, color: "bg-[#4285F4]" }, +]; + +const notificationSettings = [ + { id: "task-assigned", label: "Task assigned to me", description: "Get notified when someone assigns a task to you", enabled: true }, + { id: "task-completed", label: "Task completed", description: "Get notified when tasks you created are completed", enabled: true }, + { id: "mentions", label: "Mentions", description: "Get notified when someone mentions you in a comment", enabled: true }, + { id: "project-updates", label: "Project updates", description: "Receive weekly digest of project progress", enabled: false }, + { id: "due-reminders", label: "Due date reminders", description: "Get reminded before tasks are due", enabled: true }, + { id: "new-comments", label: "New comments", description: "Notify on new comments in tasks you follow", enabled: false }, +]; + +export default function SettingsPage() { + const [activeTab, setActiveTab] = useState("general"); + const [notifications, setNotifications] = useState(notificationSettings); + const { mutate: startCheckout, loading: checkoutBusy } = useSaasMutation("billing", "/checkout"); + + const toggleNotification = (id: string) => { + setNotifications(prev => prev.map(n => n.id === id ? { ...n, enabled: !n.enabled } : n)); + }; + + const handleSave = () => { + toast("Settings saved successfully"); + }; + + const handleUpgrade = async (plan: { name: string; amount: number }) => { + if (plan.name === "Enterprise") { toast("Our team will reach out about Enterprise plans"); return; } + try { + const res: any = await startCheckout({ plan: plan.name, amount: plan.amount }); + if (res?.url) { window.location.href = res.url; return; } + toast(`Upgraded to \${plan.name}`); + } catch { + toast("Checkout could not be started. Please try again."); + } + }; + + return ( +
+ +
+
+
+ {/* ── Header ── */} +
+

Settings

+

Manage your workspace preferences and team

+
+ + {/* ── Tabs ── */} +
+ {tabs.map((tab) => ( + + ))} +
+ + {/* ── General Tab ── */} + {activeTab === "general" && ( + + + Workspace Settings + Configure your workspace name, description, and preferences + + +
+ + +
+
+ +