import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'; import { motion, AnimatePresence } from 'framer-motion'; import { LayoutDashboard, DollarSign, Users, FileText, Settings as SettingsIcon, Search, Download, Bell, ChevronDown, TrendingUp, TrendingDown, ArrowUpRight, ArrowDownRight, Sparkles, Zap, Shield, Check, X, Menu, Clock, Activity, User, CreditCard, BarChart3, PieChart, Calendar, Filter, MoreHorizontal, Plus, Mail, Phone, Globe, MapPin, Award, Target, Eye, Edit3, Save, LogOut, HelpCircle, BookOpen, MessageSquare, Star, Briefcase, Building2, Wallet, LineChart, Layers } from 'lucide-react'; export default function App() { const [activeView, setActiveView] = useState('overview'); const [sidebarOpen, setSidebarOpen] = useState(false); const navItems = [ { id: 'overview', label: 'Overview', icon: LayoutDashboard }, { id: 'revenue', label: 'Revenue', icon: DollarSign }, { id: 'customers', label: 'Customers', icon: Users }, { id: 'reports', label: 'Reports', icon: FileText }, { id: 'settings', label: 'Settings', icon: SettingsIcon }, ]; return (

{/* Background glows */}

{/* Sidebar */}

Pulse

Analytics Suite

{navItems.map((item) => ( ))}

Pro Plan

68% of quota used

{/* Mobile overlay */} {sidebarOpen && (

setSidebarOpen(false)} /> )} {/* Main content */}

{/* Header */}

{activeView}

Welcome back, Alex

{/* Views */}

{activeView === 'overview' && } {activeView === 'revenue' && } {activeView === 'customers' && } {activeView === 'reports' && } {activeView === 'settings' && }

); } function OverviewView() { const stats = [ { label: 'Monthly Recurring Revenue', value: '$84,254', change: '+12.5%', trend: 'up', icon: DollarSign, color: 'emerald' }, { label: 'Active Users', value: '12,847', change: '+8.2%', trend: 'up', icon: Users, color: 'blue' }, { label: 'Churn Rate', value: '2.4%', change: '-0.3%', trend: 'down', icon: TrendingDown, color: 'red' }, { label: 'Growth Rate', value: '18.7%', change: '+4.1%', trend: 'up', icon: TrendingUp, color: 'purple' }, ]; const [chartPeriod, setChartPeriod] = useState('monthly'); const monthlyRevenueData = [40, 55, 48, 70, 65, 85, 78, 92, 88, 100, 95, 110]; const weeklyRevenueData = [62, 58, 71, 66, 80, 74, 90, 85, 95, 88, 100, 97]; const revenueData = chartPeriod === 'monthly' ? monthlyRevenueData : weeklyRevenueData; return (

{/* Bento grid */}

{stats.map((stat, i) => (

{stat.trend === 'up' ? : } {stat.change}

{stat.value}

{stat.label}

))}

{/* Chart + Activity */}

Revenue Overview

Last 6 months

{revenueData.map((value, i) => (

${(value * 1000).toLocaleString()}

))}

Recent Activity

{[ { icon: User, text: 'New customer signed up', time: '2 min ago', color: 'emerald' }, { icon: DollarSign, text: 'Payment of $2,400 received', time: '1 hr ago', color: 'blue' }, { icon: TrendingUp, text: 'MRR increased by 5%', time: '3 hrs ago', color: 'purple' }, { icon: Users, text: 'New team member added', time: '5 hrs ago', color: 'orange' }, ].map((item, i) => (

{item.text}

{item.time}

))}

{/* Top customers table */}

Top Customers

{[ { name: 'Acme Corp', plan: 'Enterprise', mrr: '$12,400', status: 'Active' }, { name: 'TechFlow', plan: 'Pro', mrr: '$8,200', status: 'Active' }, { name: 'Innovate Ltd', plan: 'Pro', mrr: '$5,800', status: 'Trial' }, { name: 'Global Systems', plan: 'Enterprise', mrr: '$15,100', status: 'Active' }, ].map((customer, i) => ( ))}

Customer	Plan	MRR	Status
{customer.name.charAt(0)} {customer.name}	{customer.plan}	{customer.mrr}	{customer.status}

); } function RevenueView() { const [selectedMonth, setSelectedMonth] = useState('June'); const [monthMenuOpen, setMonthMenuOpen] = useState(false); const monthOptions = ['January', 'February', 'March', 'April', 'May', 'June']; const monthlyData = [ { month: 'Jan', revenue: 45000, target: 50000 }, { month: 'Feb', revenue: 52000, target: 50000 }, { month: 'Mar', revenue: 48000, target: 55000 }, { month: 'Apr', revenue: 61000, target: 55000 }, { month: 'May', revenue: 58000, target: 60000 }, { month: 'Jun', revenue: 72000, target: 60000 }, ]; const plans = [ { name: 'Starter', price: '$29/mo', customers: 320, mrr: '$9,280' }, { name: 'Pro', price: '$79/mo', customers: 540, mrr: '$42,660' }, { name: 'Enterprise', price: '$199/mo', customers: 120, mrr: '$23,880' }, { name: 'Custom', price: 'Custom', customers: 25, mrr: '$8,500' }, ]; return (

{[ { label: 'Total Revenue', value: '$84,320', change: '+12.5%' }, { label: 'Avg. Revenue/User', value: '$6.56', change: '+8.2%' }, { label: 'Projected Revenue', value: '$94,500', change: '+18.7%' }, ].map((stat, i) => (

{stat.label}

{stat.value}

{stat.change} vs last month

))}

Revenue vs Target

6-month performance

{monthMenuOpen && (

{monthOptions.map((m) => ( ))}

)}

{monthlyData.map((data, i) => (

{data.month}

))}

Revenue by Plan

{plans.map((plan, i) => (

{plan.name}

{plan.price} · {plan.customers} customers

{plan.mrr}

MRR

))}

Monthly Comparison

{[ { label: 'New Revenue', value: '$12,400', change: '+24%' }, { label: 'Expansion Revenue', value: '$8,200', change: '+15%' }, { label: 'Churned Revenue', value: '-$3,400', change: '-12%' }, { label: 'Net Revenue Retention', value: '112%', change: '+8%' }, ].map((item, i) => (

{item.label}

{item.value} {item.change}

))}

); } function CustomersView() { const [searchTerm, setSearchTerm] = useState(''); const [statusFilter, setStatusFilter] = useState('all'); const customers = [ { name: 'Acme Corporation', email: 'contact@acme.com', plan: 'Enterprise', mrr: '$12,400', status: 'Active', joined: 'Jan 2023' }, { name: 'TechFlow Solutions', email: 'hello@techflow.io', plan: 'Pro', mrr: '$8,200', status: 'Active', joined: 'Mar 2023' }, { name: 'Innovate Ltd', email: 'info@innovate.co', plan: 'Pro', mrr: '$5,800', status: 'Trial', joined: 'Jun 2024' }, { name: 'Global Systems', email: 'support@globalsys.com', plan: 'Enterprise', mrr: '$15,100', status: 'Active', joined: 'Feb 2023' }, { name: 'Nexus Digital', email: 'team@nexus.digital', plan: 'Starter', mrr: '$1,200', status: 'Inactive', joined: 'Aug 2023' }, { name: 'BlueWave Media', email: 'hello@bluewave.media', plan: 'Pro', mrr: '$6,400', status: 'Active', joined: 'Apr 2023' }, { name: 'Quantum Labs', email: 'info@quantumlabs.ai', plan: 'Enterprise', mrr: '$18,700', status: 'Active', joined: 'Nov 2022' }, { name: 'Vertex Industries', email: 'contact@vertexind.com', plan: 'Starter', mrr: '$980', status: 'Trial', joined: 'Jul 2024' }, { name: 'Zenith Corp', email: 'admin@zenith.co', plan: 'Pro', mrr: '$7,300', status: 'Active', joined: 'May 2023' }, { name: 'Orbit Technologies', email: 'info@orbittech.io', plan: 'Enterprise', mrr: '$11,200', status: 'Inactive', joined: 'Oct 2023' }, ]; const filteredCustomers = customers.filter((customer) => { const matchesSearch = customer.name.toLowerCase().includes(searchTerm.toLowerCase()) || customer.email.toLowerCase().includes(searchTerm.toLowerCase()); const matchesStatus = statusFilter === 'all' || customer.status.toLowerCase() === statusFilter; return matchesSearch && matchesStatus; }); return (

Customer Directory

Manage and track your customer relationships

setSearchTerm(e.target.value)} placeholder="Search customers..." className="w-full pl-10 pr-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-sm focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all" />

{['all', 'active', 'trial', 'inactive'].map((status) => ( ))}

{filteredCustomers.map((customer, i) => ( ))}

Customer	Plan	MRR	Status	Joined
{customer.name.charAt(0)} {customer.name} {customer.email}	{customer.plan}	{customer.mrr}	{customer.status}	{customer.joined}

{filteredCustomers.length === 0 && (

No customers found matching your search

)}

); } function ReportsView() { const [dateRange, setDateRange] = useState('Last 30 days'); const [generating, setGenerating] = useState(null); const reports = [ { name: 'Monthly Revenue Report', type: 'Financial', description: 'Comprehensive revenue analysis including MRR, ARR, and growth metrics.', icon: DollarSign, size: '2.4 MB' }, { name: 'Customer Growth Analysis', type: 'Customer', description: 'Detailed customer acquisition and retention trends with cohort analysis.', icon: Users, size: '1.8 MB' }, { name: 'Churn Risk Assessment', type: 'Predictive', description: 'AI-powered churn prediction and at-risk customer identification.', icon: TrendingDown, size: '3.1 MB' }, { name: 'Product Usage Insights', type: 'Product', description: 'Feature adoption rates and user engagement patterns across the platform.', icon: Activity, size: '2.7 MB' }, { name: 'Sales Funnel Report', type: 'Sales', description: 'Conversion rates and pipeline analysis from lead to closed deal.', icon: BarChart3, size: '1.5 MB' }, { name: 'Executive Summary', type: 'Executive', description: 'High-level business overview with key metrics and strategic recommendations.', icon: Award, size: '4.2 MB' }, ]; return (

Reports & Analytics

Generate and download detailed business reports

{reports.map((report, i) => (

{report.type}

{report.name}

{report.description}

{report.size}

))}

Scheduled Reports

{[ { name: 'Weekly Performance Digest', schedule: 'Every Monday at 9:00 AM', recipients: 'alex@pulse.io' }, { name: 'Monthly Executive Summary', schedule: '1st of each month', recipients: 'execs@pulse.io' }, { name: 'Quarterly Growth Report', schedule: 'Quarter end', recipients: 'board@pulse.io' }, ].map((sched, i) => (

{sched.name}

{sched.schedule} · {sched.recipients}

))}

); } function SettingsView() { const [notifications, setNotifications] = useState({ email: true, push: false, weekly: true, monthly: false, product: true, billing: true, }); const [profile, setProfile] = useState({ name: 'Alex Morgan', email: 'alex@pulse.io', company: 'Pulse Analytics', role: 'Administrator', bio: 'Building the future of analytics.', }); const [saved, setSaved] = useState(false); const handleSave = () => { setSaved(true); setTimeout(() => setSaved(false), 2000); }; const toggleNotification = (key) => { setNotifications((prev) => ({ ...prev, [key]: !prev[key] })); }; const updateProfile = (field, value) => { setProfile((prev) => ({ ...prev, [field]: value })); }; return (

Settings

Manage your account preferences

Profile Information

Full Name updateProfile('name', e.target.value)} className="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-sm focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all" />

Email updateProfile('email', e.target.value)} className="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-sm focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all" />

Company updateProfile('company', e.target.value)} className="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-sm focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all" />

Role updateProfile('role', e.target.value)} className="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-sm focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all" />

Bio

updateProfile('bio', e.target.value)}
                rows="3"
                className="w-full px-4 py-2.5 bg-white/5 border border-white/10 rounded-xl text-sm focus:outline-none focus:border-emerald-500/50 focus:ring-2 focus:ring-emerald-500/20 transition-all resize-none"
              />
            </div>
          </div>
        </motion.div>

<motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-6"
        >
          <h4 className="font-semibold mb-6">Notification Preferences</h4>
          <div className="space-y-3">
            {[
              { key: 'email', label: 'Email Notifications', description: 'Receive important updates via email' },
              { key: 'push', label: 'Push Notifications', description: 'Get real-time alerts in your browser' },
              { key: 'weekly', label: 'Weekly Digest', description: 'Summary of your weekly performance' },
              { key: 'monthly', label: 'Monthly Report', description: 'Detailed monthly analytics report' },
              { key: 'product', label: 'Product Updates', description: 'News about new features and improvements' },
              { key: 'billing', label: 'Billing Alerts', description: 'Payment confirmations and invoice notifications' },
            ].map((item) => (
              <div key={item.key} className="flex items-center justify-between p-4 rounded-xl bg-white/5 border border-white/5">
                <div>
                  <p className="font-medium text-sm">{item.label}</p>
                  <p className="text-xs text-white/40">{item.description}</p>
                </div>
                <button
                  onClick={() => toggleNotification(item.key)}
                  className={`relative w-12 h-6 rounded-full transition-colors duration-200 ${notifications[item.key] ? 'bg-emerald-500' : 'bg-white/10'}`}
                >
                  <span
                    className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all duration-200 ${notifications[item.key] ? 'left-7' : 'left-1'}`}
                  />
                </button>
              </div>
            ))}
          </div>
        </motion.div>
      </div>

<motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.3 }}
        className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-6"
      >
        <h4 className="font-semibold mb-4">Danger Zone</h4>
        <div className="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between p-4 rounded-xl bg-red-500/5 border border-red-500/20">
          <div>
            <p className="font-medium text-red-400">Delete Account</p>
            <p className="text-sm text-white/40">Permanently delete your account and all associated data</p>
          </div>
          <button className="px-4 py-2 bg-red-500/10 border border-red-500/30 text-red-400 text-sm font-medium rounded-xl hover:bg-red-500/20 transition-colors">
            Delete Account
          </button>
        </div>
      </motion.div>
    </div>
  );
}</article></body></html>

SaaS 분석 대시보드