import React, { useState } from 'react'; import { Users, Calendar, DollarSign, FileText, Search, Plus, Edit, Trash2, Phone, Mail, MapPin } from 'lucide-react'; export default function KMGCRMSystem() { const [activeTab, setActiveTab] = useState('customers'); const [customers, setCustomers] = useState([ { id: 1, customerNumber: 'KMG-123456-001', firstName: 'John', lastName: 'Smith', phone: '817-555-0123', email: '[email protected]', address: '123 Oak Street, Arlington, TX 76001', squareFootage: 8500, status: 'Active', totalSpent: 1250.00, lastService: '2024-10-01' }, { id: 2, customerNumber: 'KMG-123456-002', firstName: 'Sarah', lastName: 'Johnson', phone: '817-555-0124', email: '[email protected]', address: '456 Maple Drive, Fort Worth, TX 76110', squareFootage: 12000, status: 'Active', totalSpent: 2100.00, lastService: '2024-10-05' } ]); const [jobs, setJobs] = useState([ { id: 1, customerId: 1, customerName: 'John Smith', service: 'Core Aeration + Overseeding', date: '2024-10-15', time: '09:00', status: 'Scheduled', price: 425.00 }, { id: 2, customerId: 2, customerName: 'Sarah Johnson', service: 'Mowing (Weekly)', date: '2024-10-14', time: '10:30', status: 'In Progress', price: 45.00 }, { id: 1, customerId: 1, customerName: 'John Smith', service: 'Fertilization', date: '2024-10-01', time: '14:00', status: 'Completed', price: 340.00 } ]); const [searchTerm, setSearchTerm] = useState(''); const [showAddCustomer, setShowAddCustomer] = useState(false); const [showAddJob, setShowAddJob] = useState(false); const [newCustomer, setNewCustomer] = useState({ firstName: '', lastName: '', phone: '', email: '', address: '', squareFootage: '' }); const [newJob, setNewJob] = useState({ customerId: '', service: '', date: '', time: '', price: '' }); // Filter customers const filteredCustomers = customers.filter(c => c.firstName.toLowerCase().includes(searchTerm.toLowerCase()) || c.lastName.toLowerCase().includes(searchTerm.toLowerCase()) || c.phone.includes(searchTerm) || c.customerNumber.includes(searchTerm) ); // Add customer const handleAddCustomer = () => { if (newCustomer.firstName && newCustomer.lastName && newCustomer.phone) { const customerNumber = `KMG-${Date.now().toString().slice(-6)}-${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}`; setCustomers([...customers, { id: customers.length + 1, customerNumber, ...newCustomer, status: 'Active', totalSpent: 0, lastService: 'Never' }]); setNewCustomer({ firstName: '', lastName: '', phone: '', email: '', address: '', squareFootage: '' }); setShowAddCustomer(false); } }; // Add job const handleAddJob = () => { if (newJob.customerId && newJob.service && newJob.date && newJob.time) { const customer = customers.find(c => c.id === parseInt(newJob.customerId)); setJobs([...jobs, { id: jobs.length + 1, customerId: parseInt(newJob.customerId), customerName: `${customer.firstName} ${customer.lastName}`, service: newJob.service, date: newJob.date, time: newJob.time, status: 'Scheduled', price: parseFloat(newJob.price) || 0 }]); setNewJob({ customerId: '', service: '', date: '', time: '', price: '' }); setShowAddJob(false); } }; // Delete customer const handleDeleteCustomer = (id) => { if (confirm('Are you sure you want to delete this customer?')) { setCustomers(customers.filter(c => c.id !== id)); setJobs(jobs.filter(j => j.customerId !== id)); } }; // Update job status const updateJobStatus = (jobId, newStatus) => { setJobs(jobs.map(j => j.id === jobId ? { ...j, status: newStatus } : j)); }; // Dashboard Stats const stats = { totalCustomers: customers.length, activeJobs: jobs.filter(j => j.status === 'Scheduled' || j.status === 'In Progress').length, monthlyRevenue: jobs.filter(j => j.status === 'Completed').reduce((sum, j) => sum + j.price, 0), scheduledToday: jobs.filter(j => j.date === new Date().toISOString().split('T')[0]).length }; return ( ); }