import React, { useState } from 'react'; import { Search, Plus, Edit2, Save, X } from 'lucide-react'; const SalonCustomerManagement = () => { const [customers, setCustomers] = useState([]); const [searchTerm, setSearchTerm] = useState(''); const [isAdding, setIsAdding] = useState(false); const [editingId, setEditingId] = useState(null); const [formData, setFormData] = useState({ name: '', address: '', gender: '', age: '', firstVisit: '', lastVisit: '', menu: '', price: '', notes: '' }); const resetForm = () => { setFormData({ name: '', address: '', gender: '', age: '', firstVisit: '', lastVisit: '', menu: '', price: '', notes: '' }); }; const handleSubmit = () => { if (!formData.name.trim()) { alert('名前を入力してください'); return; } if (editingId !== null) { setCustomers(customers.map(c => c.id === editingId ? { ...formData, id: editingId } : c )); setEditingId(null); } else { setCustomers([...customers, { ...formData, id: Date.now() }]); setIsAdding(false); } resetForm(); }; const handleEdit = (customer) => { setFormData(customer); setEditingId(customer.id); setIsAdding(true); }; const handleCancel = () => { setIsAdding(false); setEditingId(null); resetForm(); }; const filteredCustomers = customers.filter(customer => customer.name.toLowerCase().includes(searchTerm.toLowerCase()) || customer.address.toLowerCase().includes(searchTerm.toLowerCase()) ); return (

美容室顧客管理システム

setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
{isAdding && (

{editingId ? '顧客情報編集' : '新規顧客登録'}

setFormData({...formData, name: e.target.value})} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
setFormData({...formData, address: e.target.value})} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
setFormData({...formData, age: e.target.value})} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
setFormData({...formData, firstVisit: e.target.value})} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
setFormData({...formData, lastVisit: e.target.value})} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
setFormData({...formData, menu: e.target.value})} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" />
setFormData({...formData, price: e.target.value})} className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent" />