From 456c2d7d5725520d8d310e7ae97e9e6f05d0f347 Mon Sep 17 00:00:00 2001 From: CycroftX Date: Tue, 3 Feb 2026 21:01:41 +0530 Subject: [PATCH] Refactor Settings page: Simplified layout with critical business sections only --- .../settings/components/DeveloperSection.tsx | 106 +++++++++++++ .../components/OrganizationProfileCard.tsx | 91 +++++++++++ .../settings/components/PayoutBankingCard.tsx | 63 ++++++++ .../settings/components/TeamSecurityCard.tsx | 65 ++++++++ src/pages/Settings.tsx | 143 ++++++------------ 5 files changed, 369 insertions(+), 99 deletions(-) create mode 100644 src/features/settings/components/DeveloperSection.tsx create mode 100644 src/features/settings/components/OrganizationProfileCard.tsx create mode 100644 src/features/settings/components/PayoutBankingCard.tsx create mode 100644 src/features/settings/components/TeamSecurityCard.tsx diff --git a/src/features/settings/components/DeveloperSection.tsx b/src/features/settings/components/DeveloperSection.tsx new file mode 100644 index 0000000..2cbc3a2 --- /dev/null +++ b/src/features/settings/components/DeveloperSection.tsx @@ -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 ( +
+ + + +
+ +
+ Developer & Webhooks +

API access and integration settings

+
+
+ + +
+
+
+ +
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ +
+
+ + +

+ We will send POST requests to this URL for platform events. +

+
+
+ +
+
+
+ + + +
+ ); +} diff --git a/src/features/settings/components/OrganizationProfileCard.tsx b/src/features/settings/components/OrganizationProfileCard.tsx new file mode 100644 index 0000000..3c6d412 --- /dev/null +++ b/src/features/settings/components/OrganizationProfileCard.tsx @@ -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 ( +
+
+ + + + + + + Edit Organization Profile + Update your public-facing business identity. + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ + +
+ +
+
+ +
+
+

Organization Profile

+

Public-facing identity

+
+
+ +
+
+ Business Name +

Eventify India Pvt Ltd

+
+
+ Support Contact +

support@eventify.in

+
+
+ GSTIN +

27AAAAA0000A1Z5

+
+
+ +
+
+
+ Logo +
+
+

Ticket Branding

+

Used on PDF invoices & tickets

+
+
+
+
+ ); +} diff --git a/src/features/settings/components/PayoutBankingCard.tsx b/src/features/settings/components/PayoutBankingCard.tsx new file mode 100644 index 0000000..67306fc --- /dev/null +++ b/src/features/settings/components/PayoutBankingCard.tsx @@ -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 ( +
+
+
+ +
+
+

Payout & Banking

+

Revenue destination

+
+
+ + + Verified + +
+
+ +
+
+ {/* Stripe-like card styling */} +
+

Connected Bank Account

+
+
+ HDFC +
+

•••• 8821

+
+
+

Settlements enabled

+ Primary +
+
+
+
+ +
+
+ +
+

Tax Information Updated

+

Your PAN and GST details are verified. No actions required.

+
+
+
+
+ +
+ +
+
+ ); +} diff --git a/src/features/settings/components/TeamSecurityCard.tsx b/src/features/settings/components/TeamSecurityCard.tsx new file mode 100644 index 0000000..5f36b31 --- /dev/null +++ b/src/features/settings/components/TeamSecurityCard.tsx @@ -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 ( +
+
+
+ +
+
+

Team & Security

+

Access control

+
+
+ +
+
+
+ +

Secure your account with OTP

+
+ +
+ +
+

Active Sessions

+
+
+ +
+

MacBook Pro (This Device)

+

Mumbai, IN • Just now

+
+
+
+
+ +
+

Chrome on Windows

+

Delhi, IN • 2h ago

+
+
+
+
+
+ +
+ +
+
+ ); +} diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx index a80f1ba..55814f8 100644 --- a/src/pages/Settings.tsx +++ b/src/pages/Settings.tsx @@ -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 ( - - {/* Settings Header Card */} -
-
-
- -
-
-

Platform Configuration

-

Manage your Eventify backoffice settings

-
-
-
+
+ {/* Top Grid */} +
+ {/* Box 1: Organization Identity (High Priority) */} + - {/* Settings Grid */} -
- {settingsSections.map((section) => ( -
- - ))} -
- - {/* API Settings */} -
-

API Configuration

-
-
- - -
-
- -
+ + {/* Collapsible Developer Section */} +
);