Changes

src/pages/Settings.tsx

@@ -0,0 +1,112 @@
+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',
+  },
+];
+
+export default function Settings() {
+  return (
+    <AppLayout 
+      title="Settings" 
+      description="Configure platform settings and preferences."
+    >
+      {/* 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>
+
+      {/* 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>
+            </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>
+    </AppLayout>
+  );
+}