Changes

src/App.tsx

@@ -3,7 +3,12 @@ import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Index from "./pages/Index";
+import Dashboard from "./pages/Dashboard";
+import Partners from "./pages/Partners";
+import Events from "./pages/Events";
+import Users from "./pages/Users";
+import Financials from "./pages/Financials";
+import Settings from "./pages/Settings";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
@@ -15,7 +20,12 @@ const App = () => (
       <Sonner />
       <BrowserRouter>
         <Routes>
-          <Route path="/" element={<Index />} />
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/partners" element={<Partners />} />
+          <Route path="/events" element={<Events />} />
+          <Route path="/users" element={<Users />} />
+          <Route path="/financials" element={<Financials />} />
+          <Route path="/settings" element={<Settings />} />
           {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
           <Route path="*" element={<NotFound />} />
         </Routes>

src/components/dashboard/ActionItemsPanel.tsx

@@ -0,0 +1,86 @@
+import { Link } from 'react-router-dom';
+import { 
+  UserCheck, 
+  Flag, 
+  Wallet, 
+  AlertTriangle,
+  ArrowRight
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { ActionItem } from '@/types/dashboard';
+import { formatCurrency } from '@/data/mockData';
+
+interface ActionItemsPanelProps {
+  items: ActionItem[];
+}
+
+const iconMap = {
+  kyc: UserCheck,
+  flagged: Flag,
+  payout: Wallet,
+  stripe: AlertTriangle,
+};
+
+const colorMap = {
+  kyc: 'text-warning bg-warning/10',
+  flagged: 'text-error bg-error/10',
+  payout: 'text-success bg-success/10',
+  stripe: 'text-warning bg-warning/10',
+};
+
+export function ActionItemsPanel({ items }: ActionItemsPanelProps) {
+  return (
+    <div className="neu-card p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-lg font-bold text-foreground">Pending Actions</h2>
+          <p className="text-sm text-muted-foreground">Items requiring your attention</p>
+        </div>
+        <span className="h-8 px-3 flex items-center justify-center rounded-full bg-error/10 text-error text-sm font-semibold">
+          {items.length} urgent
+        </span>
+      </div>
+
+      <div className="space-y-3">
+        {items.map((item) => {
+          const Icon = iconMap[item.type];
+          const colorClass = colorMap[item.type];
+          
+          return (
+            <Link
+              key={item.id}
+              to={item.href}
+              className={cn(
+                "flex items-center gap-4 p-4 rounded-xl",
+                "bg-secondary/50 hover:bg-secondary",
+                "transition-all duration-200 group"
+              )}
+            >
+              <div className={cn(
+                "h-12 w-12 rounded-xl flex items-center justify-center",
+                colorClass
+              )}>
+                <Icon className="h-6 w-6" />
+              </div>
+              
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className={cn(
+                    "inline-flex h-6 min-w-6 px-2 items-center justify-center rounded-md text-xs font-bold",
+                    item.priority === 'high' ? "bg-error text-error-foreground" : "bg-warning text-warning-foreground"
+                  )}>
+                    {item.type === 'payout' ? formatCurrency(item.count) : item.count}
+                  </span>
+                  <h3 className="font-semibold text-foreground">{item.title}</h3>
+                </div>
+                <p className="text-sm text-muted-foreground truncate">{item.description}</p>
+              </div>
+              
+              <ArrowRight className="h-5 w-5 text-muted-foreground opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200" />
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/dashboard/ActivityFeed.tsx

@@ -0,0 +1,85 @@
+import { 
+  Users, 
+  Calendar, 
+  Wallet, 
+  User,
+  CheckCircle2,
+  Clock,
+  AlertTriangle,
+  XCircle
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { ActivityItem } from '@/types/dashboard';
+import { formatRelativeTime } from '@/data/mockData';
+
+interface ActivityFeedProps {
+  items: ActivityItem[];
+}
+
+const typeIconMap = {
+  partner: Users,
+  event: Calendar,
+  payout: Wallet,
+  user: User,
+};
+
+const statusIconMap = {
+  success: CheckCircle2,
+  pending: Clock,
+  warning: AlertTriangle,
+  error: XCircle,
+};
+
+const statusColorMap = {
+  success: 'text-success',
+  pending: 'text-warning',
+  warning: 'text-warning',
+  error: 'text-error',
+};
+
+export function ActivityFeed({ items }: ActivityFeedProps) {
+  return (
+    <div className="neu-card p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-lg font-bold text-foreground">Recent Activity</h2>
+          <p className="text-sm text-muted-foreground">Latest platform updates</p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        {items.map((item, index) => {
+          const TypeIcon = typeIconMap[item.type];
+          const StatusIcon = statusIconMap[item.status];
+          const statusColor = statusColorMap[item.status];
+          
+          return (
+            <div
+              key={item.id}
+              className={cn(
+                "flex items-start gap-4 pb-4",
+                index !== items.length - 1 && "border-b border-border/50"
+              )}
+            >
+              <div className="h-10 w-10 rounded-xl bg-secondary shadow-neu-inset-sm flex items-center justify-center">
+                <TypeIcon className="h-5 w-5 text-muted-foreground" />
+              </div>
+              
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <h3 className="font-medium text-foreground">{item.title}</h3>
+                  <StatusIcon className={cn("h-4 w-4", statusColor)} />
+                </div>
+                <p className="text-sm text-muted-foreground truncate">{item.description}</p>
+              </div>
+              
+              <span className="text-xs text-muted-foreground whitespace-nowrap">
+                {formatRelativeTime(item.timestamp)}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/components/dashboard/DashboardMetricCard.tsx

@@ -0,0 +1,64 @@
+import { LucideIcon, TrendingUp, TrendingDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface DashboardMetricCardProps {
+  title: string;
+  value: string;
+  subtitle?: string;
+  icon: LucideIcon;
+  trend?: {
+    value: number;
+    label: string;
+    positive?: boolean;
+  };
+  iconColor?: string;
+}
+
+export function DashboardMetricCard({
+  title,
+  value,
+  subtitle,
+  icon: Icon,
+  trend,
+  iconColor = "text-accent"
+}: DashboardMetricCardProps) {
+  return (
+    <div className="neu-card neu-card-hover p-6 group">
+      <div className="flex items-start justify-between">
+        <div className="flex-1">
+          <p className="text-sm font-medium text-muted-foreground mb-1">{title}</p>
+          <p className="text-3xl font-bold text-foreground mb-2">{value}</p>
+          
+          {trend && (
+            <div className="flex items-center gap-1.5">
+              {trend.positive !== false ? (
+                <TrendingUp className="h-4 w-4 text-success" />
+              ) : (
+                <TrendingDown className="h-4 w-4 text-error" />
+              )}
+              <span className={cn(
+                "text-sm font-medium",
+                trend.positive !== false ? "text-success" : "text-error"
+              )}>
+                {trend.positive !== false ? '+' : ''}{trend.value}%
+              </span>
+              <span className="text-sm text-muted-foreground">{trend.label}</span>
+            </div>
+          )}
+          
+          {subtitle && !trend && (
+            <p className="text-sm text-muted-foreground">{subtitle}</p>
+          )}
+        </div>
+        
+        <div className={cn(
+          "h-14 w-14 rounded-xl flex items-center justify-center",
+          "bg-secondary shadow-neu-inset-sm",
+          "group-hover:shadow-neu-inset transition-shadow duration-200"
+        )}>
+          <Icon className={cn("h-7 w-7", iconColor)} />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/dashboard/RevenueChart.tsx

@@ -0,0 +1,76 @@
+import { RevenueDataPoint } from '@/types/dashboard';
+import { formatCurrency } from '@/data/mockData';
+
+interface RevenueChartProps {
+  data: RevenueDataPoint[];
+}
+
+export function RevenueChart({ data }: RevenueChartProps) {
+  const maxValue = Math.max(...data.map(d => Math.max(d.revenue, d.payouts)));
+  
+  return (
+    <div className="neu-card p-6">
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h2 className="text-lg font-bold text-foreground">Revenue vs Payouts</h2>
+          <p className="text-sm text-muted-foreground">Last 7 days comparison</p>
+        </div>
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <span className="h-3 w-3 rounded-sm bg-accent" />
+            <span className="text-sm text-muted-foreground">Revenue</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="h-3 w-3 rounded-sm bg-success" />
+            <span className="text-sm text-muted-foreground">Payouts</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Chart Area */}
+      <div className="h-64 flex items-end gap-4 pt-8 pb-4">
+        {data.map((point, index) => (
+          <div key={index} className="flex-1 flex flex-col items-center gap-2">
+            <div className="w-full flex items-end justify-center gap-1 h-48">
+              {/* Revenue Bar */}
+              <div 
+                className="w-5 bg-accent rounded-t-md transition-all duration-300 hover:bg-ocean-blue"
+                style={{ 
+                  height: `${(point.revenue / maxValue) * 100}%`,
+                  minHeight: '8px'
+                }}
+                title={formatCurrency(point.revenue)}
+              />
+              {/* Payout Bar */}
+              <div 
+                className="w-5 bg-success rounded-t-md transition-all duration-300 hover:opacity-80"
+                style={{ 
+                  height: `${(point.payouts / maxValue) * 100}%`,
+                  minHeight: '8px'
+                }}
+                title={formatCurrency(point.payouts)}
+              />
+            </div>
+            <span className="text-xs font-medium text-muted-foreground">{point.day}</span>
+          </div>
+        ))}
+      </div>
+
+      {/* Summary */}
+      <div className="grid grid-cols-2 gap-4 pt-4 border-t border-border/50">
+        <div className="text-center">
+          <p className="text-2xl font-bold text-foreground">
+            {formatCurrency(data.reduce((sum, d) => sum + d.revenue, 0))}
+          </p>
+          <p className="text-sm text-muted-foreground">Total Revenue</p>
+        </div>
+        <div className="text-center">
+          <p className="text-2xl font-bold text-foreground">
+            {formatCurrency(data.reduce((sum, d) => sum + d.payouts, 0))}
+          </p>
+          <p className="text-sm text-muted-foreground">Total Payouts</p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/layout/AppLayout.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { Sidebar } from './Sidebar';
+import { TopBar } from './TopBar';
+
+interface AppLayoutProps {
+  children: ReactNode;
+  title: string;
+  description?: string;
+}
+
+export function AppLayout({ children, title, description }: AppLayoutProps) {
+  return (
+    <div className="min-h-screen bg-background">
+      <Sidebar />
+      <div className="pl-[264px]">
+        <TopBar title={title} description={description} />
+        <main className="p-8">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}

src/components/layout/Sidebar.tsx

@@ -0,0 +1,82 @@
+import { NavLink, useLocation } from 'react-router-dom';
+import { 
+  LayoutDashboard, 
+  Users, 
+  Calendar, 
+  User, 
+  DollarSign, 
+  Settings,
+  Ticket
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const navItems = [
+  { title: 'Dashboard', href: '/', icon: LayoutDashboard },
+  { title: 'Partner Management', href: '/partners', icon: Users },
+  { title: 'Events', href: '/events', icon: Calendar },
+  { title: 'Users', href: '/users', icon: User },
+  { title: 'Financials', href: '/financials', icon: DollarSign },
+  { title: 'Settings', href: '/settings', icon: Settings },
+];
+
+export function Sidebar() {
+  const location = useLocation();
+
+  return (
+    <aside className="fixed left-0 top-0 z-40 h-screen w-[264px] bg-card shadow-neu">
+      {/* Logo Section */}
+      <div className="flex h-20 items-center gap-3 px-6 border-b border-border/50">
+        <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary shadow-neu-inset-sm">
+          <Ticket className="h-5 w-5 text-primary-foreground" />
+        </div>
+        <div>
+          <h1 className="text-lg font-bold text-foreground">Eventify</h1>
+          <span className="text-xs font-medium tracking-widest text-muted-foreground">BACKOFFICE</span>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex flex-col gap-2 p-4">
+        {navItems.map((item) => {
+          const isActive = location.pathname === item.href || 
+            (item.href !== '/' && location.pathname.startsWith(item.href));
+          
+          return (
+            <NavLink
+              key={item.href}
+              to={item.href}
+              className={cn(
+                "flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200",
+                isActive 
+                  ? "neu-button-active" 
+                  : "neu-button hover:shadow-neu-lg"
+              )}
+            >
+              <item.icon className={cn(
+                "h-5 w-5 transition-colors",
+                isActive ? "text-primary-foreground" : "text-muted-foreground"
+              )} />
+              <span className={cn(
+                "font-medium transition-colors",
+                isActive ? "text-primary-foreground" : "text-foreground"
+              )}>
+                {item.title}
+              </span>
+            </NavLink>
+          );
+        })}
+      </nav>
+
+      {/* Bottom Section */}
+      <div className="absolute bottom-0 left-0 right-0 p-4 border-t border-border/50">
+        <div className="neu-card p-4">
+          <p className="text-xs text-muted-foreground mb-2">Platform Status</p>
+          <div className="flex items-center gap-2">
+            <span className="h-2 w-2 rounded-full bg-success animate-pulse-soft" />
+            <span className="text-sm font-medium text-foreground">All Systems Operational</span>
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+}

src/components/layout/TopBar.tsx

@@ -0,0 +1,64 @@
+import { Search, Bell, ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface TopBarProps {
+  title: string;
+  description?: string;
+}
+
+export function TopBar({ title, description }: TopBarProps) {
+  return (
+    <header className="sticky top-0 z-30 flex h-20 items-center justify-between bg-background/80 backdrop-blur-sm px-8 border-b border-border/30">
+      {/* Page Title */}
+      <div>
+        <h1 className="text-2xl font-bold text-foreground">{title}</h1>
+        {description && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+
+      {/* Right Section */}
+      <div className="flex items-center gap-4">
+        {/* Search */}
+        <div className="relative">
+          <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+          <input
+            type="text"
+            placeholder="Search partners, events..."
+            className={cn(
+              "h-10 w-64 pl-11 pr-4 rounded-xl text-sm",
+              "bg-secondary text-foreground placeholder:text-muted-foreground",
+              "shadow-neu-inset focus:outline-none focus:ring-2 focus:ring-accent/50",
+              "transition-all duration-200"
+            )}
+          />
+        </div>
+
+        {/* Notifications */}
+        <button 
+          className={cn(
+            "relative h-10 w-10 flex items-center justify-center rounded-xl",
+            "neu-button"
+          )}
+        >
+          <Bell className="h-5 w-5 text-muted-foreground" />
+          <span className="absolute -top-1 -right-1 h-5 w-5 flex items-center justify-center rounded-full bg-error text-[10px] font-bold text-error-foreground">
+            3
+          </span>
+        </button>
+
+        {/* Profile */}
+        <button className="flex items-center gap-3 pl-4 pr-3 py-2 rounded-xl neu-button">
+          <div className="h-8 w-8 rounded-lg bg-primary shadow-neu-inset-sm flex items-center justify-center">
+            <span className="text-sm font-bold text-primary-foreground">AS</span>
+          </div>
+          <div className="text-left">
+            <p className="text-sm font-medium text-foreground">Admin User</p>
+            <p className="text-xs text-muted-foreground">Super Admin</p>
+          </div>
+          <ChevronDown className="h-4 w-4 text-muted-foreground" />
+        </button>
+      </div>
+    </header>
+  );
+}

src/data/mockData.ts

@@ -0,0 +1,216 @@
+import { 
+  DashboardMetrics, 
+  ActionItem, 
+  ActivityItem, 
+  RevenueDataPoint,
+  Partner,
+  Event
+} from '@/types/dashboard';
+
+export const mockDashboardMetrics: DashboardMetrics = {
+  totalRevenue: 2450000,
+  revenueGrowth: 12.5,
+  activePartners: 156,
+  pendingPartners: 12,
+  liveEvents: 43,
+  eventsToday: 8,
+  ticketSales: 12847,
+  ticketGrowth: 8.3,
+};
+
+export const mockActionItems: ActionItem[] = [
+  {
+    id: '1',
+    type: 'kyc',
+    count: 5,
+    title: 'Partner Approval Queue',
+    description: 'Partners awaiting KYC verification',
+    href: '/partners?filter=pending',
+    priority: 'high',
+  },
+  {
+    id: '2',
+    type: 'flagged',
+    count: 3,
+    title: 'Flagged Events',
+    description: 'Events reported for review',
+    href: '/events?filter=flagged',
+    priority: 'high',
+  },
+  {
+    id: '3',
+    type: 'payout',
+    count: 845000,
+    title: 'Pending Payouts',
+    description: 'Ready for release',
+    href: '/financials?tab=payouts',
+    priority: 'medium',
+  },
+  {
+    id: '4',
+    type: 'stripe',
+    count: 2,
+    title: 'Stripe Issues',
+    description: 'Connected accounts need attention',
+    href: '/partners?filter=stripe-issues',
+    priority: 'medium',
+  },
+];
+
+export const mockActivityItems: ActivityItem[] = [
+  {
+    id: '1',
+    type: 'partner',
+    title: 'New Partner Registered',
+    description: 'EventPro Solutions submitted KYC documents',
+    timestamp: new Date(Date.now() - 1000 * 60 * 15),
+    status: 'pending',
+  },
+  {
+    id: '2',
+    type: 'event',
+    title: 'Event Approved',
+    description: 'Mumbai Music Festival is now live',
+    timestamp: new Date(Date.now() - 1000 * 60 * 45),
+    status: 'success',
+  },
+  {
+    id: '3',
+    type: 'payout',
+    title: 'Payout Completed',
+    description: '₹2,45,000 transferred to TechConf India',
+    timestamp: new Date(Date.now() - 1000 * 60 * 120),
+    status: 'success',
+  },
+  {
+    id: '4',
+    type: 'event',
+    title: 'Event Flagged',
+    description: 'Reported content in "Night Club Party"',
+    timestamp: new Date(Date.now() - 1000 * 60 * 180),
+    status: 'warning',
+  },
+  {
+    id: '5',
+    type: 'user',
+    title: 'Admin Login',
+    description: 'Priya Sharma logged in from Mumbai',
+    timestamp: new Date(Date.now() - 1000 * 60 * 240),
+    status: 'success',
+  },
+];
+
+export const mockRevenueData: RevenueDataPoint[] = [
+  { day: 'Mon', revenue: 245000, payouts: 180000 },
+  { day: 'Tue', revenue: 312000, payouts: 220000 },
+  { day: 'Wed', revenue: 289000, payouts: 195000 },
+  { day: 'Thu', revenue: 378000, payouts: 280000 },
+  { day: 'Fri', revenue: 456000, payouts: 340000 },
+  { day: 'Sat', revenue: 523000, payouts: 390000 },
+  { day: 'Sun', revenue: 247000, payouts: 185000 },
+];
+
+export const mockPartners: Partner[] = [
+  {
+    id: '1',
+    name: 'EventPro Solutions',
+    email: 'contact@eventpro.in',
+    kycStatus: 'pending',
+    stripeStatus: 'pending',
+    totalRevenue: 0,
+    eventsCount: 0,
+    createdAt: new Date(Date.now() - 1000 * 60 * 60 * 2),
+  },
+  {
+    id: '2',
+    name: 'TechConf India',
+    email: 'hello@techconf.in',
+    kycStatus: 'approved',
+    stripeStatus: 'connected',
+    totalRevenue: 1250000,
+    eventsCount: 15,
+    createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 90),
+  },
+  {
+    id: '3',
+    name: 'Music Nights',
+    email: 'booking@musicnights.com',
+    kycStatus: 'approved',
+    stripeStatus: 'connected',
+    totalRevenue: 890000,
+    eventsCount: 28,
+    createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24 * 45),
+  },
+];
+
+export const mockEvents: Event[] = [
+  {
+    id: '1',
+    title: 'Mumbai Music Festival',
+    partnerId: '3',
+    partnerName: 'Music Nights',
+    date: new Date(Date.now() + 1000 * 60 * 60 * 24 * 7),
+    status: 'live',
+    ticketsSold: 2450,
+    revenue: 489000,
+  },
+  {
+    id: '2',
+    title: 'Tech Summit 2024',
+    partnerId: '2',
+    partnerName: 'TechConf India',
+    date: new Date(Date.now() + 1000 * 60 * 60 * 24 * 14),
+    status: 'published',
+    ticketsSold: 890,
+    revenue: 445000,
+  },
+  {
+    id: '3',
+    title: 'Night Club Party',
+    partnerId: '3',
+    partnerName: 'Music Nights',
+    date: new Date(Date.now() + 1000 * 60 * 60 * 24 * 3),
+    status: 'flagged',
+    ticketsSold: 120,
+    revenue: 24000,
+  },
+];
+
+// Helper function to format currency in Indian format
+export function formatCurrency(amount: number): string {
+  if (amount >= 10000000) {
+    return `₹${(amount / 10000000).toFixed(2)}Cr`;
+  } else if (amount >= 100000) {
+    return `₹${(amount / 100000).toFixed(2)}L`;
+  } else if (amount >= 1000) {
+    return `₹${(amount / 1000).toFixed(1)}K`;
+  }
+  return `₹${amount.toLocaleString('en-IN')}`;
+}
+
+// Helper to format large numbers
+export function formatNumber(num: number): string {
+  if (num >= 1000000) {
+    return `${(num / 1000000).toFixed(1)}M`;
+  } else if (num >= 1000) {
+    return `${(num / 1000).toFixed(1)}K`;
+  }
+  return num.toLocaleString('en-IN');
+}
+
+// Helper to format relative time
+export function formatRelativeTime(date: Date): string {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / (1000 * 60));
+  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffMins < 60) {
+    return `${diffMins}m ago`;
+  } else if (diffHours < 24) {
+    return `${diffHours}h ago`;
+  } else {
+    return `${diffDays}d ago`;
+  }
+}

src/index.css

@@ -2,95 +2,104 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
-All colors MUST be HSL.
+/* Eventify Backoffice - Neumorphic Blue Theme Design System
+   All colors MUST be HSL.
 */
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    /* Neumorphic Blue Theme - Primary Palette */
+    --neu-base: 216 33% 94%;         /* #E8EFF8 - Main background */
+    --neu-surface: 216 30% 92%;      /* #DFE9F5 - Card surfaces */
+    --neu-raised: 216 33% 96%;       /* Lighter for raised elements */
+    --neu-inset: 216 30% 88%;        /* Darker for inset/pressed */
+    
+    /* Brand Colors */
+    --deep-blue: 220 60% 15%;        /* #0F1E3D - Primary text */
+    --royal-blue: 222 75% 33%;       /* #1E3A8A - Active states */
+    --ocean-blue: 217 91% 60%;       /* #3B82F6 - Interactive */
+    --sky-blue: 199 89% 48%;         /* #0EA5E9 - Highlights */
+    --ice-blue: 199 95% 74%;         /* #7DD3FC - Subtle accents */
+    
+    /* Semantic Colors */
+    --success: 142 76% 36%;          /* Green for positive */
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 50%;           /* Amber for warnings */
+    --warning-foreground: 0 0% 100%;
+    --error: 0 84% 60%;              /* Red for errors */
+    --error-foreground: 0 0% 100%;
+    
+    /* Base shadcn tokens mapped to neumorphic theme */
+    --background: 216 33% 94%;
+    --foreground: 220 60% 15%;
 
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card: 216 30% 92%;
+    --card-foreground: 220 60% 15%;
 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover: 216 30% 92%;
+    --popover-foreground: 220 60% 15%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 222 75% 33%;
+    --primary-foreground: 0 0% 100%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 216 30% 88%;
+    --secondary-foreground: 220 60% 15%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 216 30% 88%;
+    --muted-foreground: 220 30% 40%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 217 91% 60%;
+    --accent-foreground: 0 0% 100%;
 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --border: 216 25% 85%;
+    --input: 216 30% 88%;
+    --ring: 217 91% 60%;
 
-    --radius: 0.5rem;
+    --radius: 0.75rem;
 
-    --sidebar-background: 0 0% 98%;
-
-    --sidebar-foreground: 240 5.3% 26.1%;
-
-    --sidebar-primary: 240 5.9% 10%;
-
-    --sidebar-primary-foreground: 0 0% 98%;
-
-    --sidebar-accent: 240 4.8% 95.9%;
-
-    --sidebar-accent-foreground: 240 5.9% 10%;
-
-    --sidebar-border: 220 13% 91%;
-
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    /* Sidebar tokens */
+    --sidebar-background: 216 30% 92%;
+    --sidebar-foreground: 220 60% 15%;
+    --sidebar-primary: 222 75% 33%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 216 30% 88%;
+    --sidebar-accent-foreground: 220 60% 15%;
+    --sidebar-border: 216 25% 85%;
+    --sidebar-ring: 217 91% 60%;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
+    /* Dark mode not used in neumorphic theme - keeping light values */
+    --background: 216 33% 94%;
+    --foreground: 220 60% 15%;
+    --card: 216 30% 92%;
+    --card-foreground: 220 60% 15%;
+    --popover: 216 30% 92%;
+    --popover-foreground: 220 60% 15%;
+    --primary: 222 75% 33%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 216 30% 88%;
+    --secondary-foreground: 220 60% 15%;
+    --muted: 216 30% 88%;
+    --muted-foreground: 220 30% 40%;
+    --accent: 217 91% 60%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 216 25% 85%;
+    --input: 216 30% 88%;
+    --ring: 217 91% 60%;
+    --sidebar-background: 216 30% 92%;
+    --sidebar-foreground: 220 60% 15%;
+    --sidebar-primary: 222 75% 33%;
     --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --sidebar-accent: 216 30% 88%;
+    --sidebar-accent-foreground: 220 60% 15%;
+    --sidebar-border: 216 25% 85%;
+    --sidebar-ring: 217 91% 60%;
   }
 }
 
@@ -100,6 +109,55 @@ All colors MUST be HSL.
   }
 
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
+  }
+}
+
+@layer components {
+  /* Neumorphic utility classes */
+  .neu-card {
+    @apply bg-card rounded-2xl transition-all duration-200;
+    box-shadow: 
+      6px 6px 12px hsl(var(--neu-inset)),
+      -6px -6px 12px hsl(var(--neu-raised));
+  }
+  
+  .neu-card-hover:hover {
+    box-shadow: 
+      8px 8px 16px hsl(var(--neu-inset)),
+      -8px -8px 16px hsl(var(--neu-raised));
+  }
+  
+  .neu-inset {
+    @apply bg-secondary rounded-xl;
+    box-shadow: 
+      inset 3px 3px 6px hsl(var(--neu-inset)),
+      inset -3px -3px 6px hsl(var(--neu-raised));
+  }
+  
+  .neu-button {
+    @apply bg-card rounded-xl transition-all duration-200 cursor-pointer;
+    box-shadow: 
+      4px 4px 8px hsl(var(--neu-inset)),
+      -4px -4px 8px hsl(var(--neu-raised));
+  }
+  
+  .neu-button:hover {
+    box-shadow: 
+      6px 6px 12px hsl(var(--neu-inset)),
+      -6px -6px 12px hsl(var(--neu-raised));
+  }
+  
+  .neu-button:active {
+    box-shadow: 
+      inset 2px 2px 4px hsl(var(--neu-inset)),
+      inset -2px -2px 4px hsl(var(--neu-raised));
+  }
+  
+  .neu-button-active {
+    @apply bg-primary text-primary-foreground;
+    box-shadow: 
+      inset 2px 2px 4px hsl(222 75% 28%),
+      inset -2px -2px 4px hsl(222 75% 38%);
   }
 }

src/pages/Dashboard.tsx

@@ -0,0 +1,79 @@
+import { IndianRupee, Users, Calendar, Ticket } from 'lucide-react';
+import { AppLayout } from '@/components/layout/AppLayout';
+import { DashboardMetricCard } from '@/components/dashboard/DashboardMetricCard';
+import { ActionItemsPanel } from '@/components/dashboard/ActionItemsPanel';
+import { RevenueChart } from '@/components/dashboard/RevenueChart';
+import { ActivityFeed } from '@/components/dashboard/ActivityFeed';
+import { 
+  mockDashboardMetrics, 
+  mockActionItems, 
+  mockRevenueData, 
+  mockActivityItems,
+  formatCurrency,
+  formatNumber
+} from '@/data/mockData';
+
+export default function Dashboard() {
+  const metrics = mockDashboardMetrics;
+
+  return (
+    <AppLayout 
+      title="Dashboard" 
+      description="Welcome back! Here's what's happening with Eventify."
+    >
+      {/* Metrics Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+        <DashboardMetricCard
+          title="Total Platform Revenue"
+          value={formatCurrency(metrics.totalRevenue)}
+          icon={IndianRupee}
+          iconColor="text-success"
+          trend={{
+            value: metrics.revenueGrowth,
+            label: "MoM",
+            positive: true
+          }}
+        />
+        <DashboardMetricCard
+          title="Active Partners"
+          value={metrics.activePartners.toString()}
+          subtitle={`${metrics.pendingPartners} pending approval`}
+          icon={Users}
+          iconColor="text-accent"
+        />
+        <DashboardMetricCard
+          title="Live Events"
+          value={metrics.liveEvents.toString()}
+          subtitle={`${metrics.eventsToday} starting today`}
+          icon={Calendar}
+          iconColor="text-royal-blue"
+        />
+        <DashboardMetricCard
+          title="Ticket Sales Volume"
+          value={formatNumber(metrics.ticketSales)}
+          icon={Ticket}
+          iconColor="text-sky-blue"
+          trend={{
+            value: metrics.ticketGrowth,
+            label: "this week",
+            positive: true
+          }}
+        />
+      </div>
+
+      {/* Main Content Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Left Column - Charts & Actions */}
+        <div className="lg:col-span-2 space-y-6">
+          <ActionItemsPanel items={mockActionItems} />
+          <RevenueChart data={mockRevenueData} />
+        </div>
+
+        {/* Right Column - Activity Feed */}
+        <div>
+          <ActivityFeed items={mockActivityItems} />
+        </div>
+      </div>
+    </AppLayout>
+  );
+}

src/pages/Events.tsx

@@ -0,0 +1,136 @@
+import { Calendar, Ticket, Flag, Search, Filter, Plus } from 'lucide-react';
+import { AppLayout } from '@/components/layout/AppLayout';
+import { cn } from '@/lib/utils';
+import { mockEvents, formatCurrency } from '@/data/mockData';
+
+const statusStyles = {
+  draft: 'bg-muted text-muted-foreground',
+  published: 'bg-accent/10 text-accent',
+  live: 'bg-success/10 text-success',
+  completed: 'bg-muted text-muted-foreground',
+  cancelled: 'bg-error/10 text-error',
+  flagged: 'bg-error/10 text-error',
+};
+
+export default function Events() {
+  return (
+    <AppLayout 
+      title="Events" 
+      description="Monitor and manage all platform events."
+    >
+      {/* Quick Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <div className="neu-card p-6">
+          <div className="flex items-center gap-4">
+            <div className="h-12 w-12 rounded-xl bg-accent/10 flex items-center justify-center">
+              <Calendar className="h-6 w-6 text-accent" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-foreground">43</p>
+              <p className="text-sm text-muted-foreground">Live Events</p>
+            </div>
+          </div>
+        </div>
+        <div className="neu-card p-6">
+          <div className="flex items-center gap-4">
+            <div className="h-12 w-12 rounded-xl bg-success/10 flex items-center justify-center">
+              <Ticket className="h-6 w-6 text-success" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-foreground">12.8K</p>
+              <p className="text-sm text-muted-foreground">Tickets Sold Today</p>
+            </div>
+          </div>
+        </div>
+        <div className="neu-card p-6">
+          <div className="flex items-center gap-4">
+            <div className="h-12 w-12 rounded-xl bg-error/10 flex items-center justify-center">
+              <Flag className="h-6 w-6 text-error" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-foreground">3</p>
+              <p className="text-sm text-muted-foreground">Flagged Events</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Events Table */}
+      <div className="neu-card p-6">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-lg font-bold text-foreground">All Events</h2>
+          <div className="flex items-center gap-3">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <input
+                type="text"
+                placeholder="Search events..."
+                className="h-10 w-64 pl-10 pr-4 rounded-xl text-sm bg-secondary shadow-neu-inset focus:outline-none focus:ring-2 focus:ring-accent/50"
+              />
+            </div>
+            <button className="h-10 px-4 rounded-xl neu-button flex items-center gap-2">
+              <Filter className="h-4 w-4" />
+              <span className="text-sm font-medium">Filter</span>
+            </button>
+            <button className="h-10 px-4 rounded-xl bg-primary text-primary-foreground flex items-center gap-2 shadow-neu-sm hover:shadow-neu transition-shadow">
+              <Plus className="h-4 w-4" />
+              <span className="text-sm font-medium">Create Event</span>
+            </button>
+          </div>
+        </div>
+
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-border/50">
+                <th className="text-left py-3 px-4 text-sm font-semibold text-muted-foreground">Event</th>
+                <th className="text-left py-3 px-4 text-sm font-semibold text-muted-foreground">Partner</th>
+                <th className="text-left py-3 px-4 text-sm font-semibold text-muted-foreground">Date</th>
+                <th className="text-left py-3 px-4 text-sm font-semibold text-muted-foreground">Status</th>
+                <th className="text-right py-3 px-4 text-sm font-semibold text-muted-foreground">Tickets</th>
+                <th className="text-right py-3 px-4 text-sm font-semibold text-muted-foreground">Revenue</th>
+                <th className="text-right py-3 px-4 text-sm font-semibold text-muted-foreground">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {mockEvents.map((event) => (
+                <tr key={event.id} className="border-b border-border/30 hover:bg-secondary/30 transition-colors">
+                  <td className="py-4 px-4">
+                    <p className="font-medium text-foreground">{event.title}</p>
+                  </td>
+                  <td className="py-4 px-4 text-muted-foreground">{event.partnerName}</td>
+                  <td className="py-4 px-4 text-muted-foreground">
+                    {event.date.toLocaleDateString('en-IN', { 
+                      day: 'numeric',
+                      month: 'short',
+                      year: 'numeric'
+                    })}
+                  </td>
+                  <td className="py-4 px-4">
+                    <span className={cn(
+                      "inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium",
+                      statusStyles[event.status]
+                    )}>
+                      {event.status.charAt(0).toUpperCase() + event.status.slice(1)}
+                    </span>
+                  </td>
+                  <td className="py-4 px-4 text-right font-medium text-foreground">
+                    {event.ticketsSold.toLocaleString()}
+                  </td>
+                  <td className="py-4 px-4 text-right font-medium text-foreground">
+                    {formatCurrency(event.revenue)}
+                  </td>
+                  <td className="py-4 px-4 text-right">
+                    <button className="text-sm font-medium text-accent hover:underline">
+                      View
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </AppLayout>
+  );
+}

src/pages/Financials.tsx

@@ -0,0 +1,115 @@
+import { IndianRupee, TrendingUp, Wallet, ArrowUpRight, ArrowDownRight } from 'lucide-react';
+import { AppLayout } from '@/components/layout/AppLayout';
+import { formatCurrency, mockRevenueData } from '@/data/mockData';
+
+export default function Financials() {
+  const totalRevenue = mockRevenueData.reduce((sum, d) => sum + d.revenue, 0);
+  const totalPayouts = mockRevenueData.reduce((sum, d) => sum + d.payouts, 0);
+  const platformFee = totalRevenue - totalPayouts;
+
+  return (
+    <AppLayout 
+      title="Financials" 
+      description="Track revenue, payouts, and platform earnings."
+    >
+      {/* Financial Overview */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+        <div className="neu-card p-6">
+          <div className="flex items-center gap-4">
+            <div className="h-12 w-12 rounded-xl bg-success/10 flex items-center justify-center">
+              <IndianRupee className="h-6 w-6 text-success" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-foreground">{formatCurrency(totalRevenue)}</p>
+              <p className="text-sm text-muted-foreground">Total Revenue (7d)</p>
+            </div>
+          </div>
+        </div>
+        <div className="neu-card p-6">
+          <div className="flex items-center gap-4">
+            <div className="h-12 w-12 rounded-xl bg-accent/10 flex items-center justify-center">
+              <Wallet className="h-6 w-6 text-accent" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-foreground">{formatCurrency(totalPayouts)}</p>
+              <p className="text-sm text-muted-foreground">Partner Payouts (7d)</p>
+            </div>
+          </div>
+        </div>
+        <div className="neu-card p-6">
+          <div className="flex items-center gap-4">
+            <div className="h-12 w-12 rounded-xl bg-royal-blue/10 flex items-center justify-center">
+              <TrendingUp className="h-6 w-6 text-royal-blue" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-foreground">{formatCurrency(platformFee)}</p>
+              <p className="text-sm text-muted-foreground">Platform Earnings (7d)</p>
+            </div>
+          </div>
+        </div>
+        <div className="neu-card p-6">
+          <div className="flex items-center gap-4">
+            <div className="h-12 w-12 rounded-xl bg-warning/10 flex items-center justify-center">
+              <Wallet className="h-6 w-6 text-warning" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-foreground">{formatCurrency(845000)}</p>
+              <p className="text-sm text-muted-foreground">Pending Payouts</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Transaction History */}
+      <div className="neu-card p-6">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-lg font-bold text-foreground">Recent Transactions</h2>
+          <button className="text-sm font-medium text-accent hover:underline">
+            View All
+          </button>
+        </div>
+
+        <div className="space-y-4">
+          {[
+            { id: '1', type: 'in', title: 'Mumbai Music Festival', partner: 'Music Nights', amount: 489000, date: new Date() },
+            { id: '2', type: 'out', title: 'Partner Payout', partner: 'TechConf India', amount: 245000, date: new Date(Date.now() - 1000 * 60 * 60 * 2) },
+            { id: '3', type: 'in', title: 'Tech Summit 2024', partner: 'TechConf India', amount: 156000, date: new Date(Date.now() - 1000 * 60 * 60 * 5) },
+            { id: '4', type: 'out', title: 'Partner Payout', partner: 'Music Nights', amount: 180000, date: new Date(Date.now() - 1000 * 60 * 60 * 8) },
+            { id: '5', type: 'in', title: 'Night Club Party', partner: 'Music Nights', amount: 24000, date: new Date(Date.now() - 1000 * 60 * 60 * 12) },
+          ].map((tx) => (
+            <div key={tx.id} className="flex items-center justify-between p-4 rounded-xl bg-secondary/30 hover:bg-secondary/50 transition-colors">
+              <div className="flex items-center gap-4">
+                <div className={`h-10 w-10 rounded-xl flex items-center justify-center ${
+                  tx.type === 'in' ? 'bg-success/10' : 'bg-error/10'
+                }`}>
+                  {tx.type === 'in' ? (
+                    <ArrowUpRight className="h-5 w-5 text-success" />
+                  ) : (
+                    <ArrowDownRight className="h-5 w-5 text-error" />
+                  )}
+                </div>
+                <div>
+                  <p className="font-medium text-foreground">{tx.title}</p>
+                  <p className="text-sm text-muted-foreground">{tx.partner}</p>
+                </div>
+              </div>
+              <div className="text-right">
+                <p className={`font-bold ${tx.type === 'in' ? 'text-success' : 'text-error'}`}>
+                  {tx.type === 'in' ? '+' : '-'}{formatCurrency(tx.amount)}
+                </p>
+                <p className="text-sm text-muted-foreground">
+                  {tx.date.toLocaleDateString('en-IN', {
+                    day: 'numeric',
+                    month: 'short',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                  })}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </AppLayout>
+  );
+}

src/pages/Partners.tsx

@@ -0,0 +1,129 @@
+import { Users, UserCheck, AlertTriangle, Search, Filter } from 'lucide-react';
+import { AppLayout } from '@/components/layout/AppLayout';
+import { cn } from '@/lib/utils';
+import { mockPartners, formatCurrency } from '@/data/mockData';
+
+export default function Partners() {
+  return (
+    <AppLayout 
+      title="Partner Management" 
+      description="Manage partner accounts, KYC approvals, and Stripe connections."
+    >
+      {/* Quick Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <div className="neu-card p-6">
+          <div className="flex items-center gap-4">
+            <div className="h-12 w-12 rounded-xl bg-accent/10 flex items-center justify-center">
+              <Users className="h-6 w-6 text-accent" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-foreground">156</p>
+              <p className="text-sm text-muted-foreground">Total Partners</p>
+            </div>
+          </div>
+        </div>
+        <div className="neu-card p-6">
+          <div className="flex items-center gap-4">
+            <div className="h-12 w-12 rounded-xl bg-warning/10 flex items-center justify-center">
+              <UserCheck className="h-6 w-6 text-warning" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-foreground">12</p>
+              <p className="text-sm text-muted-foreground">Pending KYC</p>
+            </div>
+          </div>
+        </div>
+        <div className="neu-card p-6">
+          <div className="flex items-center gap-4">
+            <div className="h-12 w-12 rounded-xl bg-error/10 flex items-center justify-center">
+              <AlertTriangle className="h-6 w-6 text-error" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-foreground">2</p>
+              <p className="text-sm text-muted-foreground">Stripe Issues</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Partners Table */}
+      <div className="neu-card p-6">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-lg font-bold text-foreground">All Partners</h2>
+          <div className="flex items-center gap-3">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <input
+                type="text"
+                placeholder="Search partners..."
+                className="h-10 w-64 pl-10 pr-4 rounded-xl text-sm bg-secondary shadow-neu-inset focus:outline-none focus:ring-2 focus:ring-accent/50"
+              />
+            </div>
+            <button className="h-10 px-4 rounded-xl neu-button flex items-center gap-2">
+              <Filter className="h-4 w-4" />
+              <span className="text-sm font-medium">Filter</span>
+            </button>
+          </div>
+        </div>
+
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-border/50">
+                <th className="text-left py-3 px-4 text-sm font-semibold text-muted-foreground">Partner</th>
+                <th className="text-left py-3 px-4 text-sm font-semibold text-muted-foreground">KYC Status</th>
+                <th className="text-left py-3 px-4 text-sm font-semibold text-muted-foreground">Stripe</th>
+                <th className="text-right py-3 px-4 text-sm font-semibold text-muted-foreground">Revenue</th>
+                <th className="text-right py-3 px-4 text-sm font-semibold text-muted-foreground">Events</th>
+                <th className="text-right py-3 px-4 text-sm font-semibold text-muted-foreground">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {mockPartners.map((partner) => (
+                <tr key={partner.id} className="border-b border-border/30 hover:bg-secondary/30 transition-colors">
+                  <td className="py-4 px-4">
+                    <div>
+                      <p className="font-medium text-foreground">{partner.name}</p>
+                      <p className="text-sm text-muted-foreground">{partner.email}</p>
+                    </div>
+                  </td>
+                  <td className="py-4 px-4">
+                    <span className={cn(
+                      "inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium",
+                      partner.kycStatus === 'approved' && "bg-success/10 text-success",
+                      partner.kycStatus === 'pending' && "bg-warning/10 text-warning",
+                      partner.kycStatus === 'rejected' && "bg-error/10 text-error"
+                    )}>
+                      {partner.kycStatus.charAt(0).toUpperCase() + partner.kycStatus.slice(1)}
+                    </span>
+                  </td>
+                  <td className="py-4 px-4">
+                    <span className={cn(
+                      "inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium",
+                      partner.stripeStatus === 'connected' && "bg-success/10 text-success",
+                      partner.stripeStatus === 'pending' && "bg-warning/10 text-warning",
+                      partner.stripeStatus === 'failed' && "bg-error/10 text-error"
+                    )}>
+                      {partner.stripeStatus.charAt(0).toUpperCase() + partner.stripeStatus.slice(1)}
+                    </span>
+                  </td>
+                  <td className="py-4 px-4 text-right font-medium text-foreground">
+                    {formatCurrency(partner.totalRevenue)}
+                  </td>
+                  <td className="py-4 px-4 text-right font-medium text-foreground">
+                    {partner.eventsCount}
+                  </td>
+                  <td className="py-4 px-4 text-right">
+                    <button className="text-sm font-medium text-accent hover:underline">
+                      View
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </AppLayout>
+  );
+}

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>
+  );
+}

src/pages/Users.tsx

@@ -0,0 +1,144 @@
+import { User, Shield, UserCheck, Search, Plus } from 'lucide-react';
+import { AppLayout } from '@/components/layout/AppLayout';
+import { cn } from '@/lib/utils';
+
+const mockUsers = [
+  { id: '1', name: 'Arjun Sharma', email: 'arjun@eventify.in', role: 'admin', status: 'active', lastActive: new Date() },
+  { id: '2', name: 'Priya Patel', email: 'priya@eventify.in', role: 'support', status: 'active', lastActive: new Date(Date.now() - 1000 * 60 * 30) },
+  { id: '3', name: 'Rahul Kumar', email: 'rahul@eventify.in', role: 'viewer', status: 'inactive', lastActive: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3) },
+];
+
+export default function Users() {
+  return (
+    <AppLayout 
+      title="Users" 
+      description="Manage platform administrators and their access levels."
+    >
+      {/* Quick Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        <div className="neu-card p-6">
+          <div className="flex items-center gap-4">
+            <div className="h-12 w-12 rounded-xl bg-accent/10 flex items-center justify-center">
+              <User className="h-6 w-6 text-accent" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-foreground">8</p>
+              <p className="text-sm text-muted-foreground">Total Users</p>
+            </div>
+          </div>
+        </div>
+        <div className="neu-card p-6">
+          <div className="flex items-center gap-4">
+            <div className="h-12 w-12 rounded-xl bg-warning/10 flex items-center justify-center">
+              <Shield className="h-6 w-6 text-warning" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-foreground">3</p>
+              <p className="text-sm text-muted-foreground">Admins</p>
+            </div>
+          </div>
+        </div>
+        <div className="neu-card p-6">
+          <div className="flex items-center gap-4">
+            <div className="h-12 w-12 rounded-xl bg-success/10 flex items-center justify-center">
+              <UserCheck className="h-6 w-6 text-success" />
+            </div>
+            <div>
+              <p className="text-2xl font-bold text-foreground">6</p>
+              <p className="text-sm text-muted-foreground">Active Now</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Users Table */}
+      <div className="neu-card p-6">
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="text-lg font-bold text-foreground">Platform Users</h2>
+          <div className="flex items-center gap-3">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <input
+                type="text"
+                placeholder="Search users..."
+                className="h-10 w-64 pl-10 pr-4 rounded-xl text-sm bg-secondary shadow-neu-inset focus:outline-none focus:ring-2 focus:ring-accent/50"
+              />
+            </div>
+            <button className="h-10 px-4 rounded-xl bg-primary text-primary-foreground flex items-center gap-2 shadow-neu-sm hover:shadow-neu transition-shadow">
+              <Plus className="h-4 w-4" />
+              <span className="text-sm font-medium">Add User</span>
+            </button>
+          </div>
+        </div>
+
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-border/50">
+                <th className="text-left py-3 px-4 text-sm font-semibold text-muted-foreground">User</th>
+                <th className="text-left py-3 px-4 text-sm font-semibold text-muted-foreground">Role</th>
+                <th className="text-left py-3 px-4 text-sm font-semibold text-muted-foreground">Status</th>
+                <th className="text-left py-3 px-4 text-sm font-semibold text-muted-foreground">Last Active</th>
+                <th className="text-right py-3 px-4 text-sm font-semibold text-muted-foreground">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {mockUsers.map((user) => (
+                <tr key={user.id} className="border-b border-border/30 hover:bg-secondary/30 transition-colors">
+                  <td className="py-4 px-4">
+                    <div className="flex items-center gap-3">
+                      <div className="h-10 w-10 rounded-xl bg-primary shadow-neu-inset-sm flex items-center justify-center">
+                        <span className="text-sm font-bold text-primary-foreground">
+                          {user.name.split(' ').map(n => n[0]).join('')}
+                        </span>
+                      </div>
+                      <div>
+                        <p className="font-medium text-foreground">{user.name}</p>
+                        <p className="text-sm text-muted-foreground">{user.email}</p>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="py-4 px-4">
+                    <span className={cn(
+                      "inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium capitalize",
+                      user.role === 'admin' && "bg-warning/10 text-warning",
+                      user.role === 'support' && "bg-accent/10 text-accent",
+                      user.role === 'viewer' && "bg-muted text-muted-foreground"
+                    )}>
+                      {user.role}
+                    </span>
+                  </td>
+                  <td className="py-4 px-4">
+                    <span className={cn(
+                      "inline-flex items-center gap-1.5 text-sm font-medium",
+                      user.status === 'active' ? "text-success" : "text-muted-foreground"
+                    )}>
+                      <span className={cn(
+                        "h-2 w-2 rounded-full",
+                        user.status === 'active' ? "bg-success animate-pulse-soft" : "bg-muted-foreground"
+                      )} />
+                      {user.status === 'active' ? 'Active' : 'Inactive'}
+                    </span>
+                  </td>
+                  <td className="py-4 px-4 text-muted-foreground">
+                    {user.lastActive.toLocaleDateString('en-IN', {
+                      day: 'numeric',
+                      month: 'short',
+                      hour: '2-digit',
+                      minute: '2-digit'
+                    })}
+                  </td>
+                  <td className="py-4 px-4 text-right">
+                    <button className="text-sm font-medium text-accent hover:underline">
+                      Edit
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </AppLayout>
+  );
+}

src/types/dashboard.ts

@@ -0,0 +1,68 @@
+// Dashboard Types - API Ready Interfaces
+
+export interface DashboardMetrics {
+  totalRevenue: number;
+  revenueGrowth: number;
+  activePartners: number;
+  pendingPartners: number;
+  liveEvents: number;
+  eventsToday: number;
+  ticketSales: number;
+  ticketGrowth: number;
+}
+
+export interface ActionItem {
+  id: string;
+  type: 'kyc' | 'flagged' | 'payout' | 'stripe';
+  count: number;
+  title: string;
+  description: string;
+  href: string;
+  priority: 'high' | 'medium' | 'low';
+}
+
+export interface ActivityItem {
+  id: string;
+  type: 'partner' | 'event' | 'payout' | 'user';
+  title: string;
+  description: string;
+  timestamp: Date;
+  status: 'success' | 'pending' | 'warning' | 'error';
+}
+
+export interface RevenueDataPoint {
+  day: string;
+  revenue: number;
+  payouts: number;
+}
+
+export interface Partner {
+  id: string;
+  name: string;
+  email: string;
+  kycStatus: 'pending' | 'approved' | 'rejected';
+  stripeStatus: 'connected' | 'pending' | 'failed';
+  totalRevenue: number;
+  eventsCount: number;
+  createdAt: Date;
+}
+
+export interface Event {
+  id: string;
+  title: string;
+  partnerId: string;
+  partnerName: string;
+  date: Date;
+  status: 'draft' | 'published' | 'live' | 'completed' | 'cancelled' | 'flagged';
+  ticketsSold: number;
+  revenue: number;
+}
+
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: 'admin' | 'support' | 'viewer';
+  status: 'active' | 'inactive';
+  lastActive: Date;
+}

tailwind.config.ts

@@ -57,33 +57,66 @@ export default {
           border: "hsl(var(--sidebar-border))",
           ring: "hsl(var(--sidebar-ring))",
         },
+        // Neumorphic theme colors
+        neu: {
+          base: "hsl(var(--neu-base))",
+          surface: "hsl(var(--neu-surface))",
+          raised: "hsl(var(--neu-raised))",
+          inset: "hsl(var(--neu-inset))",
+        },
+        // Brand colors
+        "deep-blue": "hsl(var(--deep-blue))",
+        "royal-blue": "hsl(var(--royal-blue))",
+        "ocean-blue": "hsl(var(--ocean-blue))",
+        "sky-blue": "hsl(var(--sky-blue))",
+        "ice-blue": "hsl(var(--ice-blue))",
+        // Semantic
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+        },
+        error: {
+          DEFAULT: "hsl(var(--error))",
+          foreground: "hsl(var(--error-foreground))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
+        xl: "1rem",
+        "2xl": "1.25rem",
+      },
+      boxShadow: {
+        // Neumorphic shadows
+        "neu": "6px 6px 12px hsl(var(--neu-inset)), -6px -6px 12px hsl(var(--neu-raised))",
+        "neu-sm": "4px 4px 8px hsl(var(--neu-inset)), -4px -4px 8px hsl(var(--neu-raised))",
+        "neu-lg": "8px 8px 16px hsl(var(--neu-inset)), -8px -8px 16px hsl(var(--neu-raised))",
+        "neu-inset": "inset 3px 3px 6px hsl(var(--neu-inset)), inset -3px -3px 6px hsl(var(--neu-raised))",
+        "neu-inset-sm": "inset 2px 2px 4px hsl(var(--neu-inset)), inset -2px -2px 4px hsl(var(--neu-raised))",
       },
       keyframes: {
         "accordion-down": {
-          from: {
-            height: "0",
-          },
-          to: {
-            height: "var(--radix-accordion-content-height)",
-          },
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
         },
         "accordion-up": {
-          from: {
-            height: "var(--radix-accordion-content-height)",
-          },
-          to: {
-            height: "0",
-          },
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+        "pulse-soft": {
+          "0%, 100%": { opacity: "1" },
+          "50%": { opacity: "0.7" },
         },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
+        "pulse-soft": "pulse-soft 2s ease-in-out infinite",
       },
     },
   },