const { useState, useEffect, useRef } = React; // ═══════════════════════════════════════════════════════════ // DESIGN SYSTEM & ICONS // ═══════════════════════════════════════════════════════════ const Icon = ({ name, size = 24, color = "currentColor" }) => { const icons = { logo: , home: , briefcase: , arrow_right: , search: , menu: , x: , bell: , user: , settings: , download: , check: , plus: , trash: , edit: , eye: , shield: , trendingUp: , users: , info: , calendar: , mapPin: , phone: , mail: , }; return icons[name] || null; }; // ═══════════════════════════════════════════════════════════ // HEADER COMPONENT // ═══════════════════════════════════════════════════════════ const Header = ({ setPage, page, userType = null }) => { const [mobileOpen, setMobileOpen] = useState(false); return (
setPage('home')}>

Premier Hospitality

{userType === 'home' && (
{['about', 'features', 'pricing', 'contact'].map(item => ( setPage(item)} style={{ textTransform: 'capitalize' }}> {item} ))}
)}
{!userType && ( <> )} {userType && (
U
)}
); }; // ═══════════════════════════════════════════════════════════ // HOME PAGE // ═══════════════════════════════════════════════════════════ const HomePage = ({ setPage }) => (
{/* Hero Section */}

Simplify Your Travel & MICE Operations

Connect with verified suppliers. Get competitive bids. Manage everything in one platform. Reduce costs by 30% while saving time.

{/* Features Section */}

Why Choose Premier Hospitality

The most efficient platform for travel companies and MICE professionals

{[ { icon: 'briefcase', title: 'Easy RFP Management', desc: 'Post requirements and receive competitive bids in minutes' }, { icon: 'users', title: 'Verified Suppliers', desc: 'Connect with quality hotels, transporters, and service providers' }, { icon: 'trendingUp', title: 'Cost Savings', desc: 'Reduce operational costs through competitive bidding' }, { icon: 'shield', title: 'Transparent Pricing', desc: 'Clear quotes with no hidden charges or surprises' }, { icon: 'calendar', title: 'Real-time Tracking', desc: 'Monitor all your bookings and suppliers from one dashboard' }, { icon: 'download', title: 'Instant Reports', desc: 'Export data and generate comprehensive reports instantly' }, ].map((item, idx) => (

{item.title}

{item.desc}

))}
{/* How It Works */}

How It Works

{[ { num: '01', title: 'Create Account', desc: 'Sign up as a travel company or supplier' }, { num: '02', title: 'Post Requirements', desc: 'Submit your RFP with specific details' }, { num: '03', title: 'Get Quotes', desc: 'Receive bids from verified suppliers' }, { num: '04', title: 'Book & Manage', desc: 'Select and manage your entire trip' }, ].map((item, idx) => (
{item.num}
{item.title}

{item.desc}

))}
{/* Pricing Section */}

Transparent Pricing

{[ { name: 'Starter', price: 'Free', features: ['Up to 5 RFPs/month', 'Basic analytics', 'Email support'] }, { name: 'Professional', price: '$299', features: ['Unlimited RFPs', 'Advanced analytics', 'Priority support', 'Custom branding'] }, { name: 'Enterprise', price: 'Custom', features: ['Dedicated account', 'API access', 'Custom integration', '24/7 support'] }, ].map((plan, idx) => (
{plan.name}
{plan.price} {plan.price !== 'Custom' && /month}
{plan.features.map((f, i) => (
{f}
))}
))}
{/* CTA Section */}

Ready to Transform Your Travel Business?

Join hundreds of travel companies already using Premier Hospitality to streamline operations and reduce costs.

); // ═══════════════════════════════════════════════════════════ // AUTH PAGE // ═══════════════════════════════════════════════════════════ const AuthPage = ({ mode, setPage }) => { const [formData, setFormData] = useState({ name: '', email: '', password: '', confirmPassword: '', userType: 'client', company: '', phone: '', }); const handleChange = (field, value) => { setFormData(prev => ({ ...prev, [field]: value })); }; const handleSubmit = (e) => { e.preventDefault(); if (mode === 'register' && formData.password !== formData.confirmPassword) { alert('Passwords do not match'); return; } setPage('demo'); }; return (

{mode === 'login' ? 'Welcome Back' : 'Get Started'}

{mode === 'login' ? 'Sign in to your account' : 'Create your Premier Hospitality account'}

{mode === 'register' && ( <>
handleChange('name', e.target.value)} placeholder="John Doe" required />
handleChange('company', e.target.value)} placeholder="Your Company" required />
handleChange('phone', e.target.value)} placeholder="+91 98765 43210" required />
)}
handleChange('email', e.target.value)} placeholder="you@company.com" required />
handleChange('password', e.target.value)} placeholder="••••••••" required />
{mode === 'register' && (
handleChange('confirmPassword', e.target.value)} placeholder="••••••••" required />
)}
{mode === 'login' ? "Don't have an account? " : 'Already have an account? '} setPage(mode === 'login' ? 'register' : 'login')}> {mode === 'login' ? 'Sign up' : 'Sign in'}
setPage('home')}>← Back to website
); }; // ═══════════════════════════════════════════════════════════ // CLIENT DASHBOARD // ═══════════════════════════════════════════════════════════ const ClientDashboard = ({ setPage }) => { const [activeTab, setActiveTab] = useState('overview'); const [rfps, setRfps] = useState([ { id: 1, title: 'Delhi to Goa - 50 Pax', status: 'active', quotes: 3, amount: '₹2,50,000', date: '2024-04-05' }, { id: 2, title: 'Mumbai Corporate Event', status: 'completed', quotes: 5, amount: '₹5,75,000', date: '2024-04-01' }, ]); const renderTab = () => { switch (activeTab) { case 'overview': return (

Dashboard

{[ { label: 'Active RFPs', value: '5', change: '+2 this week' }, { label: 'Total Quotes', value: '18', change: '+5 this month' }, { label: 'Avg Savings', value: '28%', change: 'vs market rate' }, { label: 'Bookings', value: '12', change: '3 pending' }, ].map((stat, idx) => (
{stat.label}
{stat.value}
{stat.change}
))}

Recent RFPs

{rfps.map(rfp => ( ))}
RFP Title Status Quotes Amount Date
{rfp.title} {rfp.status} {rfp.quotes} {rfp.amount} {rfp.date}
); case 'rfps': return (

My RFPs

{rfps.map(rfp => (

{rfp.title}

{rfp.status}
QUOTES
{rfp.quotes}
AMOUNT
{rfp.amount}
))}
); case 'quotes': return (

Received Quotes

{[ { supplier: 'Hotel Taj', rfp: 'Goa Trip', amount: '₹2,10,000', rating: '4.8/5', status: 'pending' }, { supplier: 'Oberoi Hotels', rfp: 'Goa Trip', amount: '₹2,45,000', rating: '4.9/5', status: 'accepted' }, { supplier: 'ITC Hotels', rfp: 'Goa Trip', amount: '₹1,95,000', rating: '4.6/5', status: 'pending' }, ].map((quote, idx) => ( ))}
Supplier RFP Quote Amount Rating Status Action
{quote.supplier} {quote.rfp} {quote.amount} {quote.rating} {quote.status}
); case 'bookings': return (

My Bookings

{[ { id: 1, title: 'Mumbai to Dubai - 40 Pax', hotel: 'Burj Al Arab', dates: '15-18 April', amount: '₹4,80,000', status: 'confirmed' }, { id: 2, title: 'Delhi MICE Event', venue: 'ITC Grand Central', dates: '20-22 April', amount: '₹3,20,000', status: 'confirmed' }, ].map(booking => (

{booking.title}

DATES
{booking.dates}
AMOUNT
{booking.amount}
{booking.status}
))}
); case 'settings': return (

Account Settings

); default: return
Coming soon...
; } }; return (
{/* Sidebar */}
setPage('home')}>
Client Panel
{[ { name: 'overview', label: 'Overview', icon: 'home' }, { name: 'rfps', label: 'My RFPs', icon: 'briefcase' }, { name: 'quotes', label: 'Quotes', icon: 'eye' }, { name: 'bookings', label: 'Bookings', icon: 'calendar' }, ].map(item => (
setActiveTab(item.name)} > {item.label}
))}
Account
{[ { name: 'settings', label: 'Settings', icon: 'settings' }, ].map(item => (
setActiveTab(item.name)}> {item.label}
))}
{/* Main Content */}
{renderTab()}
); }; // ═══════════════════════════════════════════════════════════ // ADMIN DASHBOARD // ═══════════════════════════════════════════════════════════ const AdminDashboard = ({ setPage }) => { const [activeTab, setActiveTab] = useState('overview'); const renderTab = () => { switch (activeTab) { case 'overview': return (

Admin Dashboard

{[ { label: 'Total RFPs', value: '1,247', change: '+12% this month' }, { label: 'Active Suppliers', value: '342', change: '+8 new suppliers' }, { label: 'Total Revenue', value: '₹45.2L', change: '+15% YoY' }, { label: 'Conversion Rate', value: '34%', change: '+2% from last month' }, ].map((stat, idx) => (
{stat.label}
{stat.value}
{stat.change}
))}

RFPs This Month

Chart Placeholder

Revenue Trend

Chart Placeholder
); case 'rfps': return (

All RFPs

{[ { id: 'RFP-001', client: 'Travel Ventures', title: 'Goa Trip 50 Pax', status: 'active', quotes: 5, created: '2024-04-01' }, { id: 'RFP-002', client: 'Corporate Events Co', title: 'Mumbai Event', status: 'completed', quotes: 8, created: '2024-03-28' }, ].map((rfp, idx) => ( ))}
ID Client Title Status Quotes Created
{rfp.id} {rfp.client} {rfp.title} {rfp.status} {rfp.quotes} {rfp.created}
); case 'suppliers': return (

Suppliers

{[ { name: 'Hotel Taj', type: 'Hotel', rating: 4.8, status: 'active' }, { name: 'Oberoi Hotels', type: 'Hotel', rating: 4.9, status: 'active' }, { name: 'ABC Transporters', type: 'Transport', rating: 4.5, status: 'active' }, ].map((supplier, idx) => (
{supplier.name}
{supplier.status}
{supplier.type}
RATING
{supplier.rating}/5 ⭐
))}
); case 'revenue': return (

Revenue & Commissions

TOTAL REVENUE
₹45.2L
+15% from last quarter
PENDING PAYOUTS
₹8.5L
); case 'settings': return (

Platform Settings

); default: return
Coming soon...
; } }; return (
{/* Sidebar */}
setPage('home')}>
Admin Panel
{[ { name: 'overview', label: 'Overview', icon: 'home' }, { name: 'rfps', label: 'RFPs', icon: 'briefcase' }, { name: 'suppliers', label: 'Suppliers', icon: 'users' }, { name: 'revenue', label: 'Revenue', icon: 'trendingUp' }, ].map(item => (
setActiveTab(item.name)}> {item.label}
))}
System
{[ { name: 'settings', label: 'Settings', icon: 'settings' }, ].map(item => (
setActiveTab(item.name)}> {item.label}
))}
{/* Main Content */}
{renderTab()}
); }; // ═══════════════════════════════════════════════════════════ // DEMO SELECTOR // ═══════════════════════════════════════════════════════════ const DemoSelector = ({ setPage, setDashType }) => (

Choose Your Dashboard

Select which interface you'd like to explore

{[ { title: 'Admin Panel', desc: 'Platform control - RFPs, suppliers, revenue, settings', icon: 'shield', type: 'admin' }, { title: 'Client Dashboard', desc: 'Travel company view - RFPs, quotes, bookings', icon: 'briefcase', type: 'client' }, ].map(opt => (
{ setDashType(opt.type); setPage('dashboard'); }} >
{opt.title}
{opt.desc}
))}
setPage('home')}>← Back to website
); // ═══════════════════════════════════════════════════════════ // MAIN APP // ═══════════════════════════════════════════════════════════ function App() { const [page, setPage] = useState('home'); const [dashType, setDashType] = useState('admin'); return (
{page === 'home' && ( <>
)} {page === 'login' && } {page === 'register' && } {page === 'demo' && } {page === 'dashboard' && dashType === 'client' && } {page === 'dashboard' && dashType === 'admin' && }
); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render();