Refactor Settings page: Simplified layout with critical business sections only

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 (
-    <AppLayout 
-      title="Settings" 
-      description="Configure platform settings and preferences."
+    <AppLayout
+      title="Settings"
+      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 &rarr;
+              </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>
   );