RFP Management

{showNewRfpForm && (

Create New RFP

setNewRfpData({...newRfpData, title: e.target.value})} /> setNewRfpData({...newRfpData, destination: e.target.value})} /> setNewRfpData({...newRfpData, pax: e.target.value})} /> setNewRfpData({...newRfpData, budget: e.target.value})} />

setNewRfpData({...newRfpData, requirements: e.target.value})} />
                <div style={{ marginTop: 16, display: 'flex', gap: 12 }}>
                  <button className="btn btn-primary">Publish RFP</button>
                  <button className="btn btn-ghost" onClick={() => setShowNewRfpForm(false)}>Cancel</button>
                </div>
              </div>
            )}

<div style={{ marginTop: 24 }}>
              {rfps.map(rfp => (
                <div key={rfp.id} className="card" style={{ padding: 20, marginBottom: 12 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 12 }}>
                    <div>
                      <h3 style={{ margin: 0, marginBottom: 4 }}>{rfp.title}</h3>
                      <div style={{ fontSize: 13, color: '#718096' }}>Location: {rfp.destination} • Budget: {rfp.budget}</div>
                    </div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <span className="tag tag-gold">{rfp.status}</span>
                      <button className="btn btn-ghost btn-sm">View Quotes</button>
                    </div>
                  </div>
                  <div style={{ background: '#FAF7F2', padding: 12, borderRadius: 8, marginTop: 12 }}>
                    <div style={{ fontSize: 12, color: '#718096' }}><strong>{rfp.quotes}</strong> quotes received • Last updated 2 hours ago</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        );

case 'quotes':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Quotes Received</h2>
            <div style={{ overflowX: 'auto' }}>
              <table>
                <thead>
                  <tr>
                    <th>RFP Title</th>
                    <th>Supplier</th>
                    <th>Quote Amount</th>
                    <th>Status</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  {quotes.map(quote => (
                    <tr key={quote.id}>
                      <td><strong>{quote.rfp}</strong></td>
                      <td>{quote.supplier}</td>
                      <td style={{ fontWeight: 600 }}>{quote.amount}</td>
                      <td>
                        <span className={`tag ${quote.status === 'accepted' ? 'tag-success' : 'tag-warning'}`}>
                          {quote.status}
                        </span>
                      </td>
                      <td>
                        <button className="btn btn-ghost btn-sm">View Details</button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        );

case 'bookings':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Bookings</h2>
            {bookings.map(booking => (
              <div key={booking.id} className="card" style={{ padding: 20, marginBottom: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ marginBottom: 8 }}>
                      <span style={{ fontSize: 12, color: '#718096' }}>Booking Reference:</span>
                      <strong style={{ marginLeft: 8, fontFamily: "'Space Mono', monospace" }}>{booking.ref}</strong>
                    </div>
                    <h3 style={{ margin: 0, marginBottom: 4 }}>{booking.supplier}</h3>
                    <div style={{ fontSize: 13, color: '#718096', marginBottom: 12 }}>{booking.date}</div>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>₹{booking.amount}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <span className={`tag ${booking.status === 'confirmed' ? 'tag-success' : 'tag-info'}`}>{booking.status}</span>
                    <div style={{ marginTop: 12, display: 'flex', gap: 8, flexDirection: 'column' }}>
                      <button className="btn btn-ghost btn-sm">View Details</button>
                      <button className="btn btn-ghost btn-sm"><Icon name="download" size={14} /> Download</button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        );

case 'profile':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Profile Settings</h2>
            <div className="card" style={{ padding: 24 }}>
              <div style={{ marginBottom: 20 }}>
                <label>Company Name</label>
                <input type="text" defaultValue="Global Travels Inc." />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Contact Email</label>
                <input type="email" defaultValue="contact@globaltravels.com" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Phone Number</label>
                <input type="tel" defaultValue="+91 98765 43210" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Address</label>
                <input type="text" defaultValue="New Delhi, India" />
              </div>
              <button className="btn btn-primary">Save Changes</button>
            </div>
          </div>
        );

default:
        return <div>Coming soon...</div>;
    }
  };

return (
    <div style={{ display: 'flex', minHeight: 'calc(100vh - 70px)', background: '#FAF7F2' }}>
      {/* Sidebar */}
      <div className="sidebar" style={{ width: 250, padding: '24px 0', flexShrink: 0 }}>
        <div style={{ padding: '0 16px', marginBottom: 32 }}>
          <h4 style={{ fontSize: 12, fontWeight: 700, textTransform: 'uppercase', color: '#718096', margin: '0 0 16px 0' }}>Travel Company</h4>
        </div>
        {[
          { name: 'overview', label: 'Overview', icon: 'home' },
          { name: 'rfps', label: 'RFPs', icon: 'briefcase' },
          { name: 'quotes', label: 'Quotes', icon: 'chartBar' },
          { name: 'bookings', label: 'Bookings', icon: 'calendar' },
          { name: 'profile', label: 'Profile', icon: 'user' },
        ].map(item => (
          <div key={item.name} className={`sidebar-item ${activeTab === item.name ? 'active' : ''}`} onClick={() => setActiveTab(item.name)}>
            <Icon name={item.icon} size={18} />
            {item.label}
          </div>
        ))}
        <div style={{ padding: '0 16px', marginTop: 'auto', paddingBottom: 24 }}>
          <button className="btn btn-ghost w-full" onClick={() => { setIsLoggedIn(false); setPage('home'); }} style={{ fontSize: 13 }}>
            <Icon name="logOut" size={14} />
            Sign Out
          </button>
        </div>
      </div>

{/* Main Content */}
      <div style={{ flex: 1, padding: 40, overflowY: 'auto' }}>
        <div style={{ background: 'white', borderRadius: 16, padding: 40 }} className="card">
          {renderTab()}
        </div>
      </div>
    </div>
  );
};

// ═══════════════════════════════════════════════════════════
// SUPPLIER DASHBOARD
// ═══════════════════════════════════════════════════════════

const renderTab = () => {
    switch (activeTab) {
      case 'overview':
        return (
          <div>
            <div style={{ marginBottom: 32 }}>
              <h2 className="playfair" style={{ marginBottom: 24 }}>Dashboard Overview</h2>
              <div className="grid-4">
                {[
                  { label: 'Active Quotes', value: '8', icon: 'briefcase' },
                  { label: 'Accepted Quotes', value: '3', icon: 'checkCircle' },
                  { label: 'Confirmed Bookings', value: '12', icon: 'calendar' },
                  { label: 'Revenue This Month', value: '₹5,80,000', icon: 'trendingUp' },
                ].map((item, i) => (
                  <div key={i} className="card" style={{ padding: 24 }}>
                    <Icon name={item.icon} size={24} color="#C8960C" style={{ marginBottom: 12 }} />
                    <div style={{ fontSize: 12, color: '#718096', marginBottom: 4 }}>{item.label}</div>
                    <div style={{ fontSize: 28, fontWeight: 700, fontFamily: "'Playfair Display', serif" }}>{item.value}</div>
                  </div>
                ))}
              </div>
            </div>

<div className="grid-2" style={{ gap: 24 }}>
              <div>
                <h3 style={{ marginBottom: 16 }}>Available Opportunities</h3>
                {availableRfps.slice(0, 2).map(rfp => (
                  <div key={rfp.id} className="card" style={{ padding: 16, marginBottom: 12 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 8 }}>
                      <div>
                        <h4 style={{ margin: 0, marginBottom: 4 }}>{rfp.title}</h4>
                        <div style={{ fontSize: 12, color: '#718096' }}>{rfp.destination} • {rfp.pax} pax</div>
                      </div>
                      <span className="tag tag-gold">{rfp.category}</span>
                    </div>
                    <div style={{ fontSize: 12, fontWeight: 600, color: '#0F766E' }}>{rfp.budget}</div>
                  </div>
                ))}
              </div>

<div>
                <h3 style={{ marginBottom: 16 }}>Performance Metrics</h3>
                {[
                  { label: 'Quote Success Rate', value: '75%' },
                  { label: 'Average Rating', value: '4.7★' },
                  { label: 'Response Time', value: '2.5 hrs' },
                  { label: 'Completion Rate', value: '98%' },
                ].map((m, i) => (
                  <div key={i} className="card" style={{ padding: 16, marginBottom: 12 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                      <div style={{ fontSize: 12, color: '#718096' }}>{m.label}</div>
                      <div style={{ fontSize: 18, fontWeight: 700, color: '#C8960C' }}>{m.value}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        );

case 'opportunities':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Available Opportunities</h2>
            {availableRfps.map(rfp => (
              <div key={rfp.id} className="card" style={{ padding: 20, marginBottom: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', marginBottom: 16 }}>
                  <div>
                    <h3 style={{ margin: 0, marginBottom: 8 }}>{rfp.title}</h3>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, fontSize: 13, color: '#718096' }}>
                      <div>📍 {rfp.destination}</div>
                      <div>👥 {rfp.pax} participants</div>
                      <div>💰 {rfp.budget}</div>
                    </div>
                  </div>
                  <span className="tag tag-gold">{rfp.category}</span>
                </div>
                <button className="btn btn-primary">Submit Quote</button>
              </div>
            ))}
          </div>
        );

case 'quotes':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>My Quotes</h2>
            <div style={{ overflowX: 'auto' }}>
              <table>
                <thead>
                  <tr>
                    <th>RFP Title</th>
                    <th>Quote Amount</th>
                    <th>Status</th>
                    <th>Submitted</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  {myQuotes.map(quote => (
                    <tr key={quote.id}>
                      <td><strong>{quote.rfp}</strong></td>
                      <td style={{ fontWeight: 600 }}>{quote.amount}</td>
                      <td>
                        <span className={`tag ${quote.status === 'accepted' ? 'tag-success' : quote.status === 'completed' ? 'tag-info' : 'tag-warning'}`}>
                          {quote.status}
                        </span>
                      </td>
                      <td style={{ fontSize: 12, color: '#718096' }}>{quote.date}</td>
                      <td>
                        <button className="btn btn-ghost btn-sm">View</button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        );

case 'bookings':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Confirmed Bookings</h2>
            {supplyerBookings.map(booking => (
              <div key={booking.id} className="card" style={{ padding: 20, marginBottom: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ marginBottom: 8 }}>
                      <span style={{ fontSize: 12, color: '#718096' }}>Booking Reference:</span>
                      <strong style={{ marginLeft: 8, fontFamily: "'Space Mono', monospace" }}>{booking.ref}</strong>
                    </div>
                    <h3 style={{ margin: 0, marginBottom: 4 }}>{booking.client}</h3>
                    <div style={{ fontSize: 13, color: '#718096', marginBottom: 12 }}>{booking.date}</div>
                    <div style={{ fontSize: 14, fontWeight: 600 }}>₹{booking.amount}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <span className={`tag ${booking.status === 'confirmed' ? 'tag-success' : 'tag-info'}`}>{booking.status}</span>
                    <div style={{ marginTop: 12 }}>
                      <button className="btn btn-ghost btn-sm">View Details</button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        );

case 'profile':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Supplier Profile</h2>
            <div className="card" style={{ padding: 24 }}>
              <div style={{ marginBottom: 20 }}>
                <label>Company Name</label>
                <input type="text" defaultValue="Hotel Paradise Goa" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Company Type</label>
                <select defaultValue="hotel">
                  <option value="hotel">Hotel</option>
                  <option value="transport">Transport</option>
                  <option value="catering">Catering</option>
                </select>
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Contact Email</label>
                <input type="email" defaultValue="info@hotelparagoa.com" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Phone Number</label>
                <input type="tel" defaultValue="+91 83270 12345" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Location</label>
                <input type="text" defaultValue="Goa, India" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>GST Number</label>
                <input type="text" defaultValue="18AABCS1234H1Z1" />
              </div>
              <button className="btn btn-primary">Save Changes</button>
            </div>
          </div>
        );

default:
        return <div>Coming soon...</div>;
    }
  };

return (
    <div style={{ display: 'flex', minHeight: 'calc(100vh - 70px)', background: '#FAF7F2' }}>
      {/* Sidebar */}
      <div className="sidebar" style={{ width: 250, padding: '24px 0', flexShrink: 0 }}>
        <div style={{ padding: '0 16px', marginBottom: 32 }}>
          <h4 style={{ fontSize: 12, fontWeight: 700, textTransform: 'uppercase', color: '#718096', margin: '0 0 16px 0' }}>Supplier</h4>
        </div>
        {[
          { name: 'overview', label: 'Overview', icon: 'home' },
          { name: 'opportunities', label: 'Opportunities', icon: 'briefcase' },
          { name: 'quotes', label: 'My Quotes', icon: 'chartBar' },
          { name: 'bookings', label: 'Bookings', icon: 'calendar' },
          { name: 'profile', label: 'Profile', icon: 'user' },
        ].map(item => (
          <div key={item.name} className={`sidebar-item ${activeTab === item.name ? 'active' : ''}`} onClick={() => setActiveTab(item.name)}>
            <Icon name={item.icon} size={18} />
            {item.label}
          </div>
        ))}
        <div style={{ padding: '0 16px', marginTop: 'auto', paddingBottom: 24 }}>
          <button className="btn btn-ghost w-full" onClick={() => { setIsLoggedIn(false); setPage('home'); }} style={{ fontSize: 13 }}>
            <Icon name="logOut" size={14} />
            Sign Out
          </button>
        </div>
      </div>

// ═══════════════════════════════════════════════════════════
// ADMIN DASHBOARD
// ═══════════════════════════════════════════════════════════

const renderTab = () => {
    switch (activeTab) {
      case 'overview':
        return (
          <div>
            <div style={{ marginBottom: 32 }}>
              <h2 className="playfair" style={{ marginBottom: 24 }}>Platform Overview</h2>
              <div className="grid-4">
                {[
                  { label: 'Total RFPs', value: '234', icon: 'briefcase' },
                  { label: 'Active Suppliers', value: '87', icon: 'users' },
                  { label: 'Total Revenue', value: '₹24.5M', icon: 'trendingUp' },
                  { label: 'Success Rate', value: '94.2%', icon: 'checkCircle' },
                ].map((item, i) => (
                  <div key={i} className="card" style={{ padding: 24 }}>
                    <Icon name={item.icon} size={24} color="#C8960C" style={{ marginBottom: 12 }} />
                    <div style={{ fontSize: 12, color: '#718096', marginBottom: 4 }}>{item.label}</div>
                    <div style={{ fontSize: 28, fontWeight: 700, fontFamily: "'Playfair Display', serif" }}>{item.value}</div>
                  </div>
                ))}
              </div>
            </div>

<div className="grid-2" style={{ gap: 24, marginBottom: 24 }}>
              <div>
                <h3 style={{ marginBottom: 16 }}>Recent RFPs</h3>
                {allRfps.slice(0, 3).map(rfp => (
                  <div key={rfp.id} className="card" style={{ padding: 16, marginBottom: 12 }}>
                    <div style={{ marginBottom: 8 }}>
                      <h4 style={{ margin: 0, marginBottom: 4 }}>{rfp.title}</h4>
                      <div style={{ fontSize: 12, color: '#718096' }}>{rfp.client}</div>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
                      <span>{rfp.quotes} quotes</span>
                      <span className="tag tag-gold">{rfp.status}</span>
                    </div>
                  </div>
                ))}
              </div>

<div>
                <h3 style={{ marginBottom: 16 }}>Top Performing Suppliers</h3>
                {suppliers.filter(s => s.verified).slice(0, 3).map((s, i) => (
                  <div key={i} className="card" style={{ padding: 16, marginBottom: 12 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                      <h4 style={{ margin: 0 }}>{s.name}</h4>
                      <span style={{ color: '#C8960C', fontWeight: 700 }}>{s.rating}★</span>
                    </div>
                    <div style={{ fontSize: 12, color: '#718096' }}>{s.bookings} bookings</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        );

case 'rfps':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>All RFPs</h2>
            <div style={{ overflowX: 'auto' }}>
              <table>
                <thead>
                  <tr>
                    <th>RFP Title</th>
                    <th>Client</th>
                    <th>Destination</th>
                    <th>Budget</th>
                    <th>Quotes</th>
                    <th>Status</th>
                    <th>Action</th>
                  </tr>
                </thead>
                <tbody>
                  {allRfps.map(rfp => (
                    <tr key={rfp.id}>
                      <td><strong>{rfp.title}</strong></td>
                      <td>{rfp.client}</td>
                      <td>{rfp.destination}</td>
                      <td>{rfp.budget}</td>
                      <td>{rfp.quotes}</td>
                      <td><span className="tag tag-gold">{rfp.status}</span></td>
                      <td><button className="btn btn-ghost btn-sm">View</button></td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        );

case 'suppliers':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Supplier Management</h2>
            {suppliers.map(supplier => (
              <div key={supplier.id} className="card" style={{ padding: 20, marginBottom: 12 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
                  <div style={{ flex: 1 }}>
                    <h3 style={{ margin: 0, marginBottom: 8 }}>{supplier.name}</h3>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 16, fontSize: 13, color: '#718096' }}>
                      <div>Type: {supplier.type}</div>
                      <div>Location: {supplier.city}</div>
                      <div>Bookings: {supplier.bookings}</div>
                    </div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ marginBottom: 8 }}>
                      <span className={`tag ${supplier.verified ? 'tag-success' : 'tag-warning'}`}>
                        {supplier.verified ? 'Verified' : 'Pending'}
                      </span>
                    </div>
                    <div style={{ fontSize: 18, color: '#C8960C', fontWeight: 700, marginBottom: 12 }}>{supplier.rating}★</div>
                    <div style={{ display: 'flex', gap: 8, flexDirection: 'column' }}>
                      {!supplier.verified && <button className="btn btn-primary btn-sm">Approve</button>}
                      <button className="btn btn-ghost btn-sm">View Details</button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        );

case 'revenue':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Revenue & Analytics</h2>
            <div className="grid-2" style={{ gap: 24, marginBottom: 24 }}>
              <div className="card" style={{ padding: 24 }}>
                <h3 style={{ marginBottom: 16 }}>Monthly Revenue</h3>
                <div style={{ fontSize: 32, fontWeight: 700, fontFamily: "'Playfair Display', serif", marginBottom: 16 }}>₹24.5M</div>
                <div style={{ fontSize: 13, color: '#0F766E' }}>↑ 12% from last month</div>
              </div>
              <div className="card" style={{ padding: 24 }}>
                <h3 style={{ marginBottom: 16 }}>Commission Rate</h3>
                <div style={{ fontSize: 32, fontWeight: 700, fontFamily: "'Playfair Display', serif", marginBottom: 16 }}>15%</div>
                <button className="btn btn-ghost btn-sm">Adjust Rate</button>
              </div>
            </div>

<h3 style={{ marginBottom: 16 }}>Recent Transactions</h3>
            {[
              { id: 1, rfp: 'Delhi to Goa Trip', supplier: 'Hotel Paradise', amount: '₹72,000', date: 'Today' },
              { id: 2, rfp: 'Mumbai Conference', supplier: 'Business Hotels', amount: '₹125,000', date: 'Yesterday' },
              { id: 3, rfp: 'Bangalore Outing', supplier: 'Sunset Resorts', amount: '₹80,000', date: '2 days ago' },
            ].map(tx => (
              <div key={tx.id} className="card" style={{ padding: 16, marginBottom: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                  <div style={{ fontWeight: 600 }}>{tx.rfp}</div>
                  <div style={{ fontSize: 12, color: '#718096' }}>{tx.supplier} • {tx.date}</div>
                </div>
                <div style={{ fontSize: 16, fontWeight: 700 }}>{tx.amount}</div>
              </div>
            ))}
          </div>
        );

case 'settings':
        return (
          <div>
            <h2 className="playfair" style={{ marginBottom: 24 }}>Platform Settings</h2>
            <div className="card" style={{ padding: 24 }}>
              <div style={{ marginBottom: 20 }}>
                <label>Platform Name</label>
                <input type="text" defaultValue="Premier Hospitality" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Commission Rate (%)</label>
                <input type="number" defaultValue="15" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Currency</label>
                <input type="text" defaultValue="INR" />
              </div>
              <div style={{ marginBottom: 20 }}>
                <label>Support Email</label>
                <input type="email" defaultValue="support@premierhospitality.com" />
              </div>
              <button className="btn btn-primary">Save Settings</button>
            </div>
          </div>
        );

default:
        return <div>Coming soon...</div>;
    }
  };

return (
    <div style={{ display: 'flex', minHeight: 'calc(100vh - 70px)', background: '#FAF7F2' }}>
      {/* Sidebar */}
      <div className="sidebar" style={{ width: 250, padding: '24px 0', flexShrink: 0 }}>
        <div style={{ padding: '0 16px', marginBottom: 32 }}>
          <h4 style={{ fontSize: 12, fontWeight: 700, textTransform: 'uppercase', color: '#718096', margin: '0 0 16px 0' }}>Admin Panel</h4>
        </div>
        {[
          { name: 'overview', label: 'Overview', icon: 'home' },
          { name: 'rfps', label: 'All RFPs', icon: 'briefcase' },
          { name: 'suppliers', label: 'Suppliers', icon: 'users' },
          { name: 'revenue', label: 'Revenue', icon: 'trendingUp' },
        ].map(item => (
          <div key={item.name} className={`sidebar-item ${activeTab === item.name ? 'active' : ''}`} onClick={() => setActiveTab(item.name)}>
            <Icon name={item.icon} size={18} />
            {item.label}
          </div>
        ))}
        <div className="sidebar-section" style={{ marginTop: 32 }}>System</div>
        {[
          { name: 'settings', label: 'Settings', icon: 'settings' },
        ].map(item => (
          <div key={item.name} className={`sidebar-item ${activeTab === item.name ? 'active' : ''}`} onClick={() => setActiveTab(item.name)}>
            <Icon name={item.icon} size={18} />
            {item.label}
          </div>
        ))}
        <div style={{ padding: '0 16px', marginTop: 'auto', paddingBottom: 24 }}>
          <button className="btn btn-ghost w-full" onClick={() => { setIsLoggedIn(false); setPage('home'); }} style={{ fontSize: 13 }}>
            <Icon name="logOut" size={14} />
            Sign Out
          </button>
        </div>
      </div>

// ═══════════════════════════════════════════════════════════
// MAIN APP
// ═══════════════════════════════════════════════════════════

function App() {
  const [page, setPage] = useState('home');
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [userType, setUserType] = useState(null);
  const [userName, setUserName] = useState('');

return (
    <div>
      <Header page={page} setPage={setPage} isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} userType={userType} userName={userName} />
      
      {page === 'home' && <HomePage setPage={setPage} />}
      {page === 'login' && <AuthPage mode="login" setPage={setPage} setIsLoggedIn={setIsLoggedIn} setUserType={setUserType} setUserName={setUserName} />}
      {page === 'register' && <AuthPage mode="register" setPage={setPage} setIsLoggedIn={setIsLoggedIn} setUserType={setUserType} setUserName={setUserName} />}
      {page === 'client-dashboard' && isLoggedIn && <ClientDashboard setPage={setPage} setIsLoggedIn={setIsLoggedIn} userName={userName} />}
      {page === 'supplier-dashboard' && isLoggedIn && <SupplierDashboard setPage={setPage} setIsLoggedIn={setIsLoggedIn} userName={userName} />}
      {page === 'admin-dashboard' && isLoggedIn && <AdminDashboard setPage={setPage} setIsLoggedIn={setIsLoggedIn} userName={userName} />}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Premier Hospitality

Simplify Your Travel & MICE Operations

Why Choose Premier Hospitality

{item.title}

How It Works

{item.title}

What Our Users Say

{mode === 'login' ? 'Welcome Back' : 'Create Account'}

Dashboard Overview

Recent RFPs

{rfp.title}

Top Suppliers

{s.name}

RFP Management

Create New RFP