Refactor Settings page: Simplified layout with critical business sections only
This commit is contained in:
CycroftX
106
src/features/settings/components/DeveloperSection.tsx
Normal file
106
src/features/settings/components/DeveloperSection.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
|
||||
import { Code2, Copy, Eye, EyeOff } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export function DeveloperSection() {
|
||||
const [showKey, setShowKey] = useState(false);
|
||||
|
||||
const handleCopy = (text: string) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
toast.success("Copied to clipboard");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="neu-card p-0 overflow-hidden">
|
||||
<Accordion type="single" collapsible className="w-full">
|
||||
<AccordionItem value="developer-settings" className="border-none">
|
||||
<AccordionTrigger className="px-6 py-4 hover:no-underline hover:bg-secondary/20 transition-colors">
|
||||
<div className="flex items-center gap-3">
|
||||
<Code2 className="h-5 w-5 text-muted-foreground" />
|
||||
<div className="text-left">
|
||||
<span className="font-semibold text-foreground">Developer & Webhooks</span>
|
||||
<p className="text-xs text-muted-foreground font-normal mt-0.5">API access and integration settings</p>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="px-6 pb-6 pt-2">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 pt-4 border-t border-border/50">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Publishable API Key</Label>
|
||||
<div className="relative">
|
||||
<Input
|
||||
value="pk_live_51Mxxxxxxxxxxxxxxxxxx"
|
||||
readOnly
|
||||
className="pr-10 bg-secondary/50 font-mono text-xs"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-0 top-0 h-10 w-10 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => handleCopy("pk_live_51Mxxxxxxxxxxxxxxxxxx")}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<Label>Secret Key</Label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowKey(!showKey)}
|
||||
className="text-xs text-accent hover:underline flex items-center gap-1"
|
||||
>
|
||||
{showKey ? <EyeOff className="h-3 w-3" /> : <Eye className="h-3 w-3" />}
|
||||
{showKey ? "Hide" : "Reveal"}
|
||||
</button>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Input
|
||||
type={showKey ? "text" : "password"}
|
||||
value="sk_live_51Mxxxxxxxxxxxxxxxxxx"
|
||||
readOnly
|
||||
className="pr-10 bg-secondary/50 font-mono text-xs"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="absolute right-0 top-0 h-10 w-10 text-muted-foreground hover:text-foreground"
|
||||
onClick={() => handleCopy("sk_live_51Mxxxxxxxxxxxxxxxxxx")}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Webhook URL</Label>
|
||||
<Input placeholder="https://your-domain.com/api/webhooks" className="font-mono text-sm" />
|
||||
<p className="text-xs text-muted-foreground">
|
||||
We will send POST requests to this URL for platform events.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end pt-2">
|
||||
<Button variant="secondary" size="sm">Send Test Event</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
91
src/features/settings/components/OrganizationProfileCard.tsx
Normal file
91
src/features/settings/components/OrganizationProfileCard.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
|
||||
import { Building2, Pencil } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Sheet,
|
||||
SheetContent,
|
||||
SheetDescription,
|
||||
SheetHeader,
|
||||
SheetTitle,
|
||||
SheetTrigger
|
||||
} from "@/components/ui/sheet";
|
||||
|
||||
export function OrganizationProfileCard() {
|
||||
return (
|
||||
<div className="neu-card p-6 h-full flex flex-col relative group">
|
||||
<div className="absolute right-6 top-6">
|
||||
<Sheet>
|
||||
<SheetTrigger asChild>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 text-muted-foreground hover:text-accent">
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
<SheetContent>
|
||||
<SheetHeader>
|
||||
<SheetTitle>Edit Organization Profile</SheetTitle>
|
||||
<SheetDescription>Update your public-facing business identity.</SheetDescription>
|
||||
</SheetHeader>
|
||||
<div className="space-y-4 mt-6">
|
||||
<div className="space-y-2">
|
||||
<Label>Business Name</Label>
|
||||
<Input defaultValue="Eventify India Pvt Ltd" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Support Email</Label>
|
||||
<Input defaultValue="support@eventify.in" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>GSTIN / VAT</Label>
|
||||
<Input defaultValue="27AAAAA0000A1Z5" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Logo URL</Label>
|
||||
<Input defaultValue="https://event.ify/logo.png" />
|
||||
</div>
|
||||
<Button className="w-full bg-primary mt-4">Save Changes</Button>
|
||||
</div>
|
||||
</SheetContent>
|
||||
</Sheet>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="h-12 w-12 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
<Building2 className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg text-foreground">Organization Profile</h3>
|
||||
<p className="text-sm text-muted-foreground">Public-facing identity</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 flex-1">
|
||||
<div>
|
||||
<span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Business Name</span>
|
||||
<p className="text-base font-medium text-foreground">Eventify India Pvt Ltd</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Support Contact</span>
|
||||
<p className="text-base font-medium text-foreground">support@eventify.in</p>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">GSTIN</span>
|
||||
<p className="text-base font-medium text-foreground font-mono">27AAAAA0000A1Z5</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-border/50">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-10 w-10 rounded-lg bg-surface border border-border flex items-center justify-center overflow-hidden">
|
||||
<span className="text-xs font-bold text-muted-foreground">Logo</span>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium">Ticket Branding</p>
|
||||
<p className="text-xs text-muted-foreground">Used on PDF invoices & tickets</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
63
src/features/settings/components/PayoutBankingCard.tsx
Normal file
63
src/features/settings/components/PayoutBankingCard.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
|
||||
import { Landmark, CheckCircle2, AlertTriangle, ExternalLink } from "lucide-react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export function PayoutBankingCard() {
|
||||
return (
|
||||
<div className="neu-card p-6 h-full flex flex-col">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="h-12 w-12 rounded-xl bg-purple-500/10 flex items-center justify-center">
|
||||
<Landmark className="h-6 w-6 text-purple-600 dark:text-purple-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg text-foreground">Payout & Banking</h3>
|
||||
<p className="text-sm text-muted-foreground">Revenue destination</p>
|
||||
</div>
|
||||
<div className="ml-auto">
|
||||
<Badge className="bg-success/15 text-success hover:bg-success/25 border-none gap-1">
|
||||
<CheckCircle2 className="h-3 w-3" />
|
||||
Verified
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-4">
|
||||
<div className="rounded-xl border border-purple-500/20 bg-gradient-to-br from-purple-500/5 to-transparent p-4 relative overflow-hidden">
|
||||
{/* Stripe-like card styling */}
|
||||
<div className="relative z-10">
|
||||
<p className="text-sm font-medium text-muted-foreground mb-1">Connected Bank Account</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-8 w-12 bg-surface rounded border border-border flex items-center justify-center">
|
||||
<span className="text-[10px] font-bold">HDFC</span>
|
||||
</div>
|
||||
<p className="text-lg font-mono font-bold text-foreground">•••• 8821</p>
|
||||
</div>
|
||||
<div className="mt-4 flex items-center justify-between">
|
||||
<p className="text-xs text-muted-foreground">Settlements enabled</p>
|
||||
<span className="text-xs font-medium text-purple-600 dark:text-purple-400">Primary</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute -right-4 -top-8 h-24 w-24 bg-purple-500/10 rounded-full blur-2xl" />
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-border/50 bg-secondary/20 p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="h-4 w-4 text-warning mt-0.5" />
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">Tax Information Updated</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">Your PAN and GST details are verified. No actions required.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-border/50">
|
||||
<Button variant="outline" className="w-full justify-between group">
|
||||
Manage Payout Methods
|
||||
<ExternalLink className="h-4 w-4 group-hover:text-foreground text-muted-foreground" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
65
src/features/settings/components/TeamSecurityCard.tsx
Normal file
65
src/features/settings/components/TeamSecurityCard.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
|
||||
import { Shield, Smartphone, ArrowRight, Users } from "lucide-react";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
export function TeamSecurityCard() {
|
||||
return (
|
||||
<div className="neu-card p-6 h-full flex flex-col">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="h-12 w-12 rounded-xl bg-blue-500/10 flex items-center justify-center">
|
||||
<Shield className="h-6 w-6 text-blue-600 dark:text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-bold text-lg text-foreground">Team & Security</h3>
|
||||
<p className="text-sm text-muted-foreground">Access control</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-6">
|
||||
<div className="flex items-center justify-between p-3 rounded-lg bg-secondary/30">
|
||||
<div className="space-y-0.5">
|
||||
<Label className="text-base font-medium">Two-Factor Auth</Label>
|
||||
<p className="text-xs text-muted-foreground">Secure your account with OTP</p>
|
||||
</div>
|
||||
<Switch checked={true} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Active Sessions</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-3 text-sm p-2 rounded-md hover:bg-secondary/50 transition-colors">
|
||||
<Smartphone className="h-4 w-4 text-muted-foreground" />
|
||||
<div className="flex-1">
|
||||
<p className="font-medium">MacBook Pro (This Device)</p>
|
||||
<p className="text-xs text-muted-foreground">Mumbai, IN • Just now</p>
|
||||
</div>
|
||||
<div className="h-2 w-2 rounded-full bg-success animate-pulse" />
|
||||
</div>
|
||||
<div className="flex items-center gap-3 text-sm p-2 rounded-md hover:bg-secondary/50 transition-colors opacity-70">
|
||||
<Smartphone className="h-4 w-4 text-muted-foreground" />
|
||||
<div className="flex-1">
|
||||
<p className="font-medium">Chrome on Windows</p>
|
||||
<p className="text-xs text-muted-foreground">Delhi, IN • 2h ago</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-border/50">
|
||||
<Button variant="ghost" className="w-full justify-between group px-0 hover:bg-transparent hover:text-accent" asChild>
|
||||
<Link to="/users">
|
||||
<span className="flex items-center gap-2">
|
||||
<Users className="h-4 w-4" />
|
||||
Manage Team Roles
|
||||
</span>
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,111 +1,56 @@
|
||||
import { Settings as SettingsIcon, Bell, Shield, Palette, Globe, Database } from 'lucide-react';
|
||||
import { AppLayout } from '@/components/layout/AppLayout';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const settingsSections = [
|
||||
{
|
||||
icon: Bell,
|
||||
title: 'Notifications',
|
||||
description: 'Configure email and push notification preferences',
|
||||
status: 'Enabled',
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: 'Security',
|
||||
description: 'Two-factor authentication and session management',
|
||||
status: '2FA Active',
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
title: 'Appearance',
|
||||
description: 'Theme, colors, and display settings',
|
||||
status: 'Light Mode',
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
title: 'Localization',
|
||||
description: 'Language, timezone, and currency settings',
|
||||
status: 'INR / IST',
|
||||
},
|
||||
{
|
||||
icon: Database,
|
||||
title: 'Data & Export',
|
||||
description: 'Export data and manage backups',
|
||||
status: 'Last backup: Today',
|
||||
},
|
||||
];
|
||||
import { OrganizationProfileCard } from '@/features/settings/components/OrganizationProfileCard';
|
||||
import { PayoutBankingCard } from '@/features/settings/components/PayoutBankingCard';
|
||||
import { TeamSecurityCard } from '@/features/settings/components/TeamSecurityCard';
|
||||
import { DeveloperSection } from '@/features/settings/components/DeveloperSection';
|
||||
|
||||
export default function Settings() {
|
||||
return (
|
||||
<AppLayout
|
||||
title="Settings"
|
||||
description="Configure platform settings and preferences."
|
||||
description="Manage platform configuration and critical operations."
|
||||
>
|
||||
{/* Settings Header Card */}
|
||||
<div className="neu-card p-6 mb-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="h-16 w-16 rounded-2xl bg-primary shadow-neu-inset flex items-center justify-center">
|
||||
<SettingsIcon className="h-8 w-8 text-primary-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-foreground">Platform Configuration</h2>
|
||||
<p className="text-muted-foreground">Manage your Eventify backoffice settings</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-6 max-w-[1200px]">
|
||||
{/* Top Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-auto lg:h-[400px]">
|
||||
{/* Box 1: Organization Identity (High Priority) */}
|
||||
<OrganizationProfileCard />
|
||||
|
||||
{/* Settings Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{settingsSections.map((section) => (
|
||||
<button
|
||||
key={section.title}
|
||||
className="neu-card neu-card-hover p-6 text-left group"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="h-12 w-12 rounded-xl bg-secondary shadow-neu-inset-sm flex items-center justify-center group-hover:shadow-neu-inset transition-shadow">
|
||||
<section.icon className="h-6 w-6 text-accent" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-semibold text-foreground">{section.title}</h3>
|
||||
<span className="text-xs font-medium px-2 py-1 rounded-full bg-success/10 text-success">
|
||||
{section.status}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">{section.description}</p>
|
||||
</div>
|
||||
{/* Box 2: Financials & Banking (High Priority) */}
|
||||
<PayoutBankingCard />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* Box 3: Security (Full Width on Mobile, 2/3 on Desktop if needed, but here simple 1/3 stack or full width row) */}
|
||||
{/* Adjusting layout: Let's make Security taking full row or sidebar style.
|
||||
Based on requirements "2x2 Grid or Vertical Stack".
|
||||
Let's stick to a clean layout where Security sits next to maybe a logs panel or just takes full width.
|
||||
Actually, the requirements said "Layout: 2x2 Grid".
|
||||
Let's put Team & Security as the 3rd box, and maybe Developer as 4th?
|
||||
But Developer is collapsible.
|
||||
*/}
|
||||
<div className="lg:col-span-2">
|
||||
<TeamSecurityCard />
|
||||
</div>
|
||||
<div className="lg:col-span-1">
|
||||
{/* Placeholder or Tip card? Or maybe just make TeamSecurityCard full width if it has lists.
|
||||
The TeamSecurityCard design I made is card-like.
|
||||
Let's span it across 2 columns for better readability of the list.
|
||||
*/}
|
||||
<div className="neu-card p-6 h-full bg-gradient-to-br from-primary/5 to-transparent border-primary/20">
|
||||
<h4 className="font-bold text-lg mb-2">Need Help?</h4>
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
Contact our dedicated support team for assistance with account configurations.
|
||||
</p>
|
||||
<button className="text-sm font-bold text-primary hover:underline">
|
||||
Open Support Ticket →
|
||||
</button>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* API Settings */}
|
||||
<div className="neu-card p-6 mt-8">
|
||||
<h3 className="text-lg font-bold text-foreground mb-4">API Configuration</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-muted-foreground mb-2">
|
||||
API Base URL
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value="https://api.eventify.in/v1"
|
||||
readOnly
|
||||
className="w-full h-10 px-4 rounded-xl text-sm bg-secondary shadow-neu-inset focus:outline-none text-foreground"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-muted-foreground mb-2">
|
||||
Webhook URL
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value="https://api.eventify.in/webhooks"
|
||||
readOnly
|
||||
className="w-full h-10 px-4 rounded-xl text-sm bg-secondary shadow-neu-inset focus:outline-none text-foreground"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Collapsible Developer Section */}
|
||||
<DeveloperSection />
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user