Here's a comprehensive salon management website setup with all essential pages: Salon Management

SalonPro

Salon Dashboard

Today's Appointments

Monthly Revenue

Active Clients

Appointments | SalonPro

SalonPro

Appointments

Client	Service	Date	Time	Stylist	Status	Actions

Services | SalonPro

SalonPro

Services

Name	Description	Duration	Price	Actions

Products | SalonPro

SalonPro

Products

Name	Description	Category	Price	Stock	Actions

Payments | SalonPro

SalonPro

Payments

Invoice #	Client	Amount	Date	Method	Status	Actions

Clients | SalonPro

SalonPro

Clients

Name	Phone	Email	Last Visit	Total Spent	Actions

Staff | SalonPro

SalonPro

Staff

Name	Role	Phone	Email	Specialization	Actions

:root { --primary-color: #8e44ad; --secondary-color: #9b59b6; --accent-color: #e74c3c; --light-color: #ecf0f1; --dark-color: #2c3e50; --success-color: #2ecc71; --warning-color: #f39c12; --danger-color: #e74c3c; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f5f5f5; color: #333; } header { background-color: var(--primary-color); color: white; padding: 1rem; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5rem; font-weight: bold; } nav ul { display: flex; list-style: none; } nav ul li { margin-left: 1rem; } nav ul li a { color: white; text-decoration: none; padding: 0.5rem; border-radius: 4px; transition: background-color 0.3s; } nav ul li a:hover { background-color: var(--secondary-color); } main { padding: 2rem; } h1 { margin-bottom: 1.5rem; color: var(--dark-color); } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; } .stat-card { background-color: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .stat-card h3 { color: var(--secondary-color); margin-bottom: 0.5rem; } .stat-card p { font-size: 1.5rem; font-weight: bold; } button { background-color: var(--primary-color); color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; margin-bottom: 1rem; } button:hover { background-color: var(--secondary-color); } table { width: 100%; border-collapse: collapse; background-color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: var(--primary-color); color: white; } tr:hover { background-color: #f5f5f5; } .controls { display: flex; gap: 1rem; margin-bottom: 1rem; } input, select { padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; } // Dashboard functionality document.addEventListener('DOMContentLoaded', () => { // Sample data - in a real app this would come from an API document.getElementById('today-appointments').textContent = '5'; document.getElementById('monthly-revenue').textContent = '$2,450'; document.getElementById('active-clients').textContent = '87'; }); // Appointments functionality document.addEventListener('DOMContentLoaded', () => { const appointments = [ { client: 'Sarah Johnson', service: 'Haircut & Color', date: '2023-11-15', time: '10:00 AM', stylist: 'Emma Wilson', status: 'Confirmed' }, { client: 'Michael Brown', service: 'Beard Trim', date: '2023-11-15', time: '2:30 PM', stylist: 'James Smith', status: 'Confirmed' } ]; const tableBody = document.querySelector('#appointments-table tbody'); function renderAppointments() { tableBody.innerHTML = ''; appointments.forEach(appointment => { const row = document.createElement('tr'); row.innerHTML = ` ${appointment.client} ${appointment.service} ${appointment.date} ${appointment.time} ${appointment.stylist} ${appointment.status} `; tableBody.appendChild(row); }); } document.getElementById('new-appointment').addEventListener('click', () => { // In a real app, this would open a modal/form alert('New appointment form would open here'); }); renderAppointments(); }); // Services functionality document.addEventListener('DOMContentLoaded', () => { const services = [ { name: 'Haircut', description: 'Basic haircut with styling', duration: '30 min', price: '$35' }, { name: 'Hair Color', description: 'Full hair coloring service', duration: '2 hours', price: '$120' }, { name: 'Manicure', description: 'Basic manicure with polish', duration: '45 min', price: '$25' } ]; const tableBody = document.querySelector('#services-table tbody'); function renderServices() { tableBody.innerHTML = ''; services.forEach(service => { const row = document.createElement('tr'); row.innerHTML = ` ${service.name} ${service.description} ${service.duration} ${service.price} `; tableBody.appendChild(row); }); } document.getElementById('add-service').addEventListener('click', () => { // In a real app, this would open a modal/form alert('Add service form would open here'); }); renderServices(); }); // Products functionality document.addEventListener('DOMContentLoaded', () => { const products = [ { name: 'Shampoo', description: 'Moisturizing shampoo for all hair types', category: 'Hair Care', price: '$15', stock: '24' }, { name: 'Conditioner', description: 'Deep conditioning treatment', category: 'Hair Care', price: '$18', stock: '15' }, { name: 'Hair Spray', description: 'Strong hold hair spray', category: 'Styling', price: '$12', stock: '8' } ]; const tableBody = document.querySelector('#products-table tbody'); function renderProducts() { tableBody.innerHTML = ''; products.forEach(product => { const row = document.createElement('tr'); row.innerHTML = ` ${product.name} ${product.description} ${product.category} ${product.price} ${product.stock} `; tableBody.appendChild(row); }); } document.getElementById('add-product').addEventListener('click', () => { // In a real app, this would open a modal/form alert('Add product form would open here'); }); renderProducts(); }); // Payments functionality document.addEventListener('DOMContentLoaded', () => { const payments = [ { invoice: '#1001', client: 'Sarah Johnson', amount: '$120', date: '2023-11-10', method: 'Credit Card', status: 'Paid' }, { invoice: '#1002', client: 'Michael Brown', amount: '$35', date: '2023-11-12', method: 'Cash', status: 'Paid' } ]; const tableBody = document.querySelector('#payments-table tbody'); function renderPayments() { tableBody.innerHTML = ''; payments.forEach(payment => { const row = document.createElement('tr'); row.innerHTML = ` ${payment.invoice} ${payment.client} ${payment.amount} ${payment.date} ${payment.method} ${payment.status} `; tableBody.appendChild(row); }); } renderPayments(); }); // Clients functionality document.addEventListener('DOMContentLoaded', () => { const clients = [ { name: 'Sarah Johnson', phone: '(555) 123-4567', email: 'sarah@example.com', lastVisit: '2023-11-10', totalSpent: '$450' }, { name: 'Michael Brown', phone: '(555) 987-6543', email: 'michael@example.com', lastVisit: '2023-11-12', totalSpent: '$120' } ]; const tableBody = document.querySelector('#clients-table tbody'); function renderClients() { tableBody.innerHTML = ''; clients.forEach(client => { const row = document.createElement('tr'); row.innerHTML = ` ${client.name} ${client.phone} ${client.email} ${client.lastVisit} ${client.totalSpent} `; tableBody.appendChild(row); }); } document.getElementById('add-client').addEventListener('click', () => { // In a real app, this would open a modal/form alert('Add client form would open here'); }); renderClients(); }); // Staff functionality document.addEventListener('DOMContentLoaded', () => { const staff = [ { name: 'Emma Wilson', role: 'Stylist', phone: '(555) 111-2222', email: 'emma@salon.com', specialization: 'Hair Coloring' }, { name: 'James Smith', role: 'Barber', phone: '(555) 333-4444', email: 'james@salon.com', specialization: 'Beard Grooming' } ]; const tableBody = document.querySelector('#staff-table tbody'); function renderStaff() { tableBody.innerHTML = ''; staff.forEach(staffMember => { const row = document.createElement('tr'); row.innerHTML = ` ${staffMember.name} ${staffMember.role} ${staffMember.phone} ${staffMember.email} ${staffMember.specialization} `; tableBody.appendChild(row); }); } document.getElementById('add-staff').addEventListener('click', () => { // In a real app, this would open a modal/form alert('Add staff form would open here'); }); renderStaff(); });