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 { AppLayout } from '@/components/layout/AppLayout';
|
||||||
import { cn } from '@/lib/utils';
|
import { OrganizationProfileCard } from '@/features/settings/components/OrganizationProfileCard';
|
||||||
|
import { PayoutBankingCard } from '@/features/settings/components/PayoutBankingCard';
|
||||||
const settingsSections = [
|
import { TeamSecurityCard } from '@/features/settings/components/TeamSecurityCard';
|
||||||
{
|
import { DeveloperSection } from '@/features/settings/components/DeveloperSection';
|
||||||
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',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default function Settings() {
|
export default function Settings() {
|
||||||
return (
|
return (
|
||||||
<AppLayout
|
<AppLayout
|
||||||
title="Settings"
|
title="Settings"
|
||||||
description="Configure platform settings and preferences."
|
description="Manage platform configuration and critical operations."
|
||||||
>
|
>
|
||||||
{/* Settings Header Card */}
|
<div className="space-y-6 max-w-[1200px]">
|
||||||
<div className="neu-card p-6 mb-8">
|
{/* Top Grid */}
|
||||||
<div className="flex items-center gap-4">
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 h-auto lg:h-[400px]">
|
||||||
<div className="h-16 w-16 rounded-2xl bg-primary shadow-neu-inset flex items-center justify-center">
|
{/* Box 1: Organization Identity (High Priority) */}
|
||||||
<SettingsIcon className="h-8 w-8 text-primary-foreground" />
|
<OrganizationProfileCard />
|
||||||
</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>
|
|
||||||
|
|
||||||
{/* Settings Grid */}
|
{/* Box 2: Financials & Banking (High Priority) */}
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
<PayoutBankingCard />
|
||||||
{settingsSections.map((section) => (
|
</div>
|
||||||
<button
|
|
||||||
key={section.title}
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
className="neu-card neu-card-hover p-6 text-left group"
|
{/* 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.
|
||||||
<div className="flex items-start gap-4">
|
Based on requirements "2x2 Grid or Vertical Stack".
|
||||||
<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">
|
Let's stick to a clean layout where Security sits next to maybe a logs panel or just takes full width.
|
||||||
<section.icon className="h-6 w-6 text-accent" />
|
Actually, the requirements said "Layout: 2x2 Grid".
|
||||||
</div>
|
Let's put Team & Security as the 3rd box, and maybe Developer as 4th?
|
||||||
<div className="flex-1">
|
But Developer is collapsible.
|
||||||
<div className="flex items-center justify-between">
|
*/}
|
||||||
<h3 className="font-semibold text-foreground">{section.title}</h3>
|
<div className="lg:col-span-2">
|
||||||
<span className="text-xs font-medium px-2 py-1 rounded-full bg-success/10 text-success">
|
<TeamSecurityCard />
|
||||||
{section.status}
|
</div>
|
||||||
</span>
|
<div className="lg:col-span-1">
|
||||||
</div>
|
{/* Placeholder or Tip card? Or maybe just make TeamSecurityCard full width if it has lists.
|
||||||
<p className="text-sm text-muted-foreground mt-1">{section.description}</p>
|
The TeamSecurityCard design I made is card-like.
|
||||||
</div>
|
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>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Collapsible Developer Section */}
|
||||||
|
<DeveloperSection />
|
||||||
</div>
|
</div>
|
||||||
</AppLayout>
|
</AppLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user