App blueprints, ready to deploy.

import React, { useState } from 'react';
import { Users, DollarSign, TrendingUp, ShieldAlert, Plus, Search, Check, Sparkles } from 'lucide-react';

// Nexus CRM Live Sandbox React Code
export default function CRMWorkspace() {
  const [users, setUsers] = useState([
    { id: '1', name: 'Alexander Wright', email: '[email protected]', tier: 'Enterprise', status: 'Active', mrr: 1250 },
    { id: '2', name: 'Sophia Chen', email: '[email protected]', tier: 'Growth', status: 'Active', mrr: 349 },
    { id: '3', name: 'Liam Martinez', email: '[email protected]', tier: 'Starter', status: 'Pending', mrr: 49 },
    { id: '4', name: 'Elena Rostova', email: '[email protected]', tier: 'Enterprise', status: 'Active', mrr: 2100 },
    { id: '5', name: 'Marcus Aurelius', email: '[email protected]', tier: 'Growth', status: 'Suspended', mrr: 0 },
  ]);

  const [searchTerm, setSearchTerm] = useState('');
  const [showAddModal, setShowAddModal] = useState(false);
  const [newUserName, setNewUserName] = useState('');
  const [newUserEmail, setNewUserEmail] = useState('');
  const [newUserTier, setNewUserTier] = useState('Growth');
  
  const totalMRR = users.reduce((acc, u) => acc + (u.status === 'Active' ? u.mrr : 0), 0);
  const activeUsers = users.filter(u => u.status === 'Active').length;

  const handleAddUser = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newUserName || !newUserEmail) return;
    const mrrMap: Record<string, number> = { 'Starter': 49, 'Growth': 349, 'Enterprise': 1250 };
    const newUser = {
      id: String(users.length + 1),
      name: newUserName,
      email: newUserEmail,
      tier: newUserTier,
      status: 'Active' as const,
      mrr: mrrMap[newUserTier] || 49
    };
    setUsers([newUser, ...users]);
    setNewUserName('');
    setNewUserEmail('');
    setShowAddModal(false);
  };

  return (
    <div className="bg-[#090D16] text-slate-100 min-h-screen font-sans p-6 rounded-xl border border-slate-800">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
        <div>
          <h1 className="text-2xl font-bold tracking-tight text-white flex items-center gap-2">
            <span className="p-1 px-2.5 bg-gradient-to-tr from-cyan-500 to-blue-600 rounded text-xs tracking-widest font-mono uppercase">Live Sandbox</span>
            Nexus Revenue Dashboard
          </h1>
          <p className="text-slate-400 text-sm">Real-time cloud database and client synchronization active.</p>
        </div>
        <button 
          onClick={() => setShowAddModal(true)}
          className="bg-cyan-500 hover:bg-cyan-600 active:scale-95 transition text-slate-950 font-medium px-4 py-2 rounded-lg text-sm flex items-center gap-2 cursor-pointer"
        >
          <Plus className="w-4 h-4" /> Add Enterprise Contact
        </button>
      </div>

      {/* Metrics Row */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
        <div className="bg-[#111625] p-5 rounded-xl border border-slate-800/80 hover:border-slate-700/80 transition shadow-lg relative overflow-hidden group">
          <div className="absolute top-0 right-0 w-32 h-32 bg-cyan-500/5 rounded-full blur-2xl group-hover:bg-cyan-500/10 transition"></div>
          <div className="flex justify-between items-center mb-2">
            <span className="text-slate-400 text-sm font-medium">Monthly Recurring Revenue</span>
            <DollarSign className="w-4 h-4 text-cyan-400" />
          </div>
          <div className="text-2xl font-bold text-white tracking-tight">
            ${totalMRR.toLocaleString()}
          </div>
          <div className="text-xs text-emerald-400 mt-2 flex items-center gap-1">
            <TrendingUp className="w-3.5 h-3.5" /> +14.2% from last month
          </div>
        </div>

        <div className="bg-[#111625] p-5 rounded-xl border border-slate-800/80 hover:border-slate-700/80 transition shadow-lg relative overflow-hidden group">
          <div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/5 rounded-full blur-2xl group-hover:bg-blue-500/10 transition"></div>
          <div className="flex justify-between items-center mb-2">
            <span className="text-slate-400 text-sm font-medium">Active High-Tier Seats</span>
            <Users className="w-4 h-4 text-blue-400" />
          </div>
          <div className="text-2xl font-bold text-white tracking-tight">
            {activeUsers} / {users.length}
          </div>
          <div className="text-xs text-blue-400 mt-2">78% utilization SLA active</div>
        </div>

        <div className="bg-[#111625] p-5 rounded-xl border border-slate-800/80 hover:border-slate-700/80 transition shadow-lg relative overflow-hidden group">
          <div className="absolute top-0 right-0 w-32 h-32 bg-violet-500/5 rounded-full blur-2xl group-hover:bg-violet-500/10 transition"></div>
          <div className="flex justify-between items-center mb-2">
            <span className="text-slate-400 text-sm font-medium">Database Node Latency</span>
            <ShieldAlert className="w-4 h-4 text-violet-400" />
          </div>
          <div className="text-2xl font-bold text-white tracking-tight">4.2ms</div>
          <div className="text-xs text-emerald-400 mt-2">Active CDN Propagation</div>
        </div>
      </div>

      {/* Main Panel */}
      <div className="bg-[#0F1422] rounded-xl border border-slate-800 p-6 shadow-xl">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
          <h2 className="text-lg font-semibold text-white">Active Cloud Accounts</h2>
          <div className="relative w-full sm:w-64">
            <input 
              type="text" 
              placeholder="Filter by name/email..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="bg-[#151B2E] border border-slate-800 focus:border-cyan-500 rounded-lg px-3 py-1.5 pl-9 text-xs w-full text-slate-100 outline-none"
            />
            <Search className="w-3.5 h-3.5 text-slate-500 absolute left-3 top-2.5" />
          </div>
        </div>

        <div className="overflow-x-auto">
          <table className="w-full text-left text-sm">
            <thead>
              <tr className="border-b border-slate-800 text-slate-400 text-xs font-semibold uppercase tracking-wider pb-3">
                <th className="py-3 px-2">Account Holder</th>
                <th className="py-3 px-2">Lifecycle Tier</th>
                <th className="py-3 px-2">Status</th>
                <th className="py-3 px-2 text-right">Estimated ARR</th>
              </tr>
            </thead>
            <tbody>
              {users.filter(u => u.name.toLowerCase().includes(searchTerm.toLowerCase()) || u.email.toLowerCase().includes(searchTerm.toLowerCase())).map((user) => (
                <tr key={user.id} className="border-b border-slate-800/60 hover:bg-[#151C2F]/50 transition">
                  <td className="py-3.5 px-2">
                    <div className="font-medium text-white">{user.name}</div>
                    <div className="text-xs text-slate-400">{user.email}</div>
                  </td>
                  <td className="py-3.5 px-2">
                    <span className={`text-xs px-2.5 py-1 rounded-full font-medium ${
                      user.tier === 'Enterprise' ? 'bg-cyan-500/10 text-cyan-300 border border-cyan-500/20' : 
                      user.tier === 'Growth' ? 'bg-blue-500/10 text-blue-300 border border-blue-500/20' : 
                      'bg-slate-500/10 text-slate-300 border border-slate-500/20'
                    }`}>
                      {user.tier}
                    </span>
                  </td>
                  <td className="py-3.5 px-2">
                    <span className={`inline-flex items-center gap-1 text-xs font-semibold ${
                      user.status === 'Active' ? 'text-emerald-400' :
                      user.status === 'Pending' ? 'text-amber-400' : 'text-rose-400'
                    }`}>
                      <span className={`w-1.5 h-1.5 rounded-full animate-pulse ${
                        user.status === 'Active' ? 'bg-emerald-500' :
                        user.status === 'Pending' ? 'bg-amber-500' : 'bg-rose-500'
                      }`}></span>
                      {user.status}
                    </span>
                  </td>
                  <td className="py-3.5 px-2 text-right font-mono text-white">
                    ${((user.status === 'Active' ? user.mrr : 0) * 12).toLocaleString()}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Simple Modal */}
      {showAddModal && (
        <div className="fixed inset-0 bg-slate-950/80 backdrop-blur-sm flex items-center justify-center p-4 z-50">
          <div className="bg-[#0F1422] border border-slate-800 rounded-xl p-6 w-full max-w-md shadow-2xl animate-in fade-in zoom-in duration-150">
            <h3 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
              <Sparkles className="w-5 h-5 text-cyan-400" /> New Account Instance
            </h3>
            <form onSubmit={handleAddUser} className="space-y-4">
              <div>
                <label className="block text-xs text-slate-400 mb-1 font-medium">FullName</label>
                <input 
                  type="text" 
                  value={newUserName}
                  onChange={(e) => setNewUserName(e.target.value)}
                  className="w-full bg-[#151B2E] border border-slate-800 focus:border-cyan-500 rounded-lg p-2 text-xs text-white outline-none" 
                  placeholder="e.g. Rachel Adams"
                  required
                />
              </div>
              <div>
                <label className="block text-xs text-slate-400 mb-1 font-medium">Email Address</label>
                <input 
                  type="email" 
                  value={newUserEmail}
                  onChange={(e) => setNewUserEmail(e.target.value)}
                  className="w-full bg-[#151B2E] border border-slate-800 focus:border-cyan-500 rounded-lg p-2 text-xs text-white outline-none" 
                  placeholder="e.g. [email protected]"
                  required
                />
              </div>
              <div>
                <label className="block text-xs text-slate-400 mb-1 font-medium">Product Tier Selection</label>
                <select 
                  value={newUserTier}
                  onChange={(e) => setNewUserTier(e.target.value)}
                  className="w-full bg-[#151B2E] border border-slate-800 focus:border-cyan-500 rounded-lg p-2 text-xs text-white outline-none"
                >
                  <option value="Starter">Starter Plan --- $49/mo</option>
                  <option value="Growth">Growth Plan --- $349/mo</option>
                  <option value="Enterprise">Enterprise Plan --- $1,250/mo</option>
                </select>
              </div>
              <div className="flex justify-end gap-3 pt-4">
                <button 
                  type="button" 
                  onClick={() => setShowAddModal(false)}
                  className="px-4 py-2 bg-[#1A1F30] hover:bg-slate-800 text-slate-300 rounded-lg text-xs font-semibold cursor-pointer"
                >
                  Cancel
                </button>
                <button 
                  type="submit" 
                  className="px-4 py-2 bg-gradient-to-tr from-cyan-500 to-blue-600 hover:opacity-90 active:scale-95 text-slate-950 font-bold rounded-lg text-xs cursor-pointer flex items-center gap-1"
                >
                  Confirm Provision
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}