Invoice ${invoiceNum} - ${showInvoice.name || showInvoice.address}

Date	Service	Amount	Status
{new Date(t.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })}	{showInvoice.service \|\| 'Window Cleaning'}	£{t.amount.toFixed(2)}	{t.isPaid ? '✓ PAID' : 'DUE'}

Date

Service

Amount

Status

{new Date(t.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'short' })}

{showInvoice.service || 'Window Cleaning'}

£{t.amount.toFixed(2)}

{t.isPaid ? '✓ PAID' : 'DUE'}

🪟 CWC

💾 Export / Backup

{/* PLANNER */} {activeTab === 'planner' && (

{/* View Toggle */}

{calendarView === 'week' && ( <>

{/* Round filter + action buttons */}

{/* Bulk Reschedule Modal */} {showBulkReschedule && (

Bulk Reschedule

Move all jobs from one day to another

From date: setBulkFromDate(e.target.value)} style={{ ...styles.input, width: '100%' }} /> {bulkFromDate && (

{customers.filter(c => c.status === 'active' && c.nextDue === bulkFromDate).length} jobs on this date

)}

To date: setBulkToDate(e.target.value)} style={{ ...styles.input, width: '100%' }} />

)} {overdueJobs.length > 0 && (

⚠️ {overdueJobs.length} overdue

{overdueJobs.slice(0, 5).map(job => (

{job.name || job.address} {Math.abs(getDaysUntilDue(job))}d late

))}

)} {/* Worksheet Job Selection Modal */} {showCreateWorksheet && worksheetDate && (

Create Worksheet - {worksheetDate.toLocaleDateString('en-GB', { weekday: 'long', day: 'numeric', month: 'short' })}

{selectedJobIds.length} selected

{/* Text All Reminders Button */} {(() => { const reminderJobs = customers.filter(c => c.status === 'active' && c.nextDue === worksheetDate.toISOString().split('T')[0] && c.needsReminder && c.phone ); if (reminderJobs.length === 0) return null; return ( ); })()}

{customers .filter(c => c.status === 'active' && c.nextDue === worksheetDate.toISOString().split('T')[0]) .sort((a, b) => (a.order || 999) - (b.order || 999)) .map(job => (

toggleJobSelection(job.id)} >

{selectedJobIds.includes(job.id) ? '☑' : '☐'}

#{job.order}

{job.name || job.address}

{job.name &&

{job.address}

} {job.phone && ( )}

{job.needsReminder && (

{ e.stopPropagation(); setTextedJobs(prev => prev.includes(job.id) ? prev.filter(id => id !== job.id) : [...prev, job.id] ); }} style={{ width: '20px', height: '20px', borderRadius: '4px', border: '2px solid', borderColor: textedJobs.includes(job.id) ? '#22c55e' : '#fbbf24', background: textedJobs.includes(job.id) ? '#22c55e' : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', fontSize: '12px', color: '#fff' }} > {textedJobs.includes(job.id) && '✓'}

)}

£{job.price.toFixed(2)}

)) }

Total: £{customers .filter(c => selectedJobIds.includes(c.id)) .reduce((sum, c) => sum + c.price, 0) .toFixed(2)}

)}

{getWeekDates().map((date, idx) => { const jobs = getJobsForDate(date); const isToday = date.toDateString() === new Date().toDateString(); const isPast = date < new Date() && !isToday; const dayTotal = jobs.reduce((sum, j) => sum + j.price, 0); const dateStr = date.toISOString().split('T')[0]; const isDragOver = dragOverDate === dateStr; return (

handleDragOver(e, date)} onDragLeave={handleDragLeave} onDrop={(e) => handleDrop(e, date)} >

{formatDate(date)} {jobs.length > 0 && ( {jobs.length} jobs )}

{jobs.length > 0 && ( £{dayTotal.toFixed(0)} )}

{jobs.length === 0 ? (

{isDragOver ? 'Drop here' : 'No jobs'}

) : ( <> {jobs.map(job => (

handleDragStart(e, job)} onDragEnd={handleDragEnd} >

⋮⋮

{job.address}

{job.name &&

{job.name}

}

#{job.order} £{job.price.toFixed(2)}

))}

)}

); })}

)} {/* Month Calendar View */} {calendarView === 'month' && (() => { const today = new Date(); const currentMonth = new Date(currentWeekStart.getFullYear(), currentWeekStart.getMonth(), 1); const daysInMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0).getDate(); const firstDayOfWeek = currentMonth.getDay() || 7; // Monday = 1 const monthName = currentMonth.toLocaleDateString('en-GB', { month: 'long', year: 'numeric' }); const days = []; // Add empty cells for days before month starts for (let i = 1; i < firstDayOfWeek; i++) { days.push(null); } // Add all days of month for (let d = 1; d <= daysInMonth; d++) { days.push(new Date(currentMonth.getFullYear(), currentMonth.getMonth(), d)); } return (

{monthName}

{/* Day headers */}

{['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map(day => (

{day}

))}

{/* Calendar grid */}

{days.map((date, idx) => { if (!date) return

; // Use local date string to avoid timezone issues const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); const dateStr = `${year}-${month}-${day}`; const jobsForDay = roundFilteredCustomers.filter(c => c.nextDue === dateStr); const totalForDay = jobsForDay.reduce((sum, c) => sum + c.price, 0); const isToday = date.toDateString() === today.toDateString(); const isPast = date < today && !isToday; return (

{ setCurrentWeekStart(date); setDaysToShow(1); setCalendarView('week'); }} style={{ minHeight: '60px', padding: '4px', background: isToday ? '#1e3a5f' : isPast ? '#0f172a' : '#1e293b', borderRadius: '4px', cursor: 'pointer', border: isToday ? '2px solid #3b82f6' : 'none', opacity: isPast ? 0.5 : 1 }} >

{date.getDate()}

{jobsForDay.length > 0 && (

{jobsForDay.length} job{jobsForDay.length > 1 ? 's' : ''}

£{totalForDay.toFixed(0)}

)}

); })}

); })()}

)} {/* WORKSHEET */} {activeTab === 'worksheet' && (

{!activeWorksheet ? (

Worksheets

{worksheets.length === 0 ? (

No worksheets yet. Create one from the Planner tab.

) : (

{worksheets.sort((a, b) => new Date(b.date) - new Date(a.date)).map(ws => { const doneCount = ws.jobs.filter(j => j.status === 'done').length; const totalJobs = ws.jobs.length; return (

setActiveWorksheet(ws)}>

{ws.name}

{ws.date}

{doneCount}/{totalJobs} {doneCount === totalJobs && ✓}

); })}

)}

) : (

{activeWorksheet.name}

{/* Progress bar */}

{/* Stats row */}

£{getWsStats().collected.toFixed(2)}

collected

£{getWsStats().totalValue.toFixed(2)}

total

{getWsStats().remaining}

left

~{Math.floor(getWsStats().timeLeft / 60)}h {getWsStats().timeLeft % 60}m

est. time

{/* Action buttons */}

{undoStack.length > 0 && ( )}

{/* End of Day Summary Modal */} {showEndOfDay && (() => { const stats = getWsStats(); const doneJobs = activeWorksheet.jobs.filter(j => j.status === 'done'); const missedJobs = activeWorksheet.jobs.filter(j => j.status === 'missed'); // Get customer IDs from done jobs const doneCustomerIds = doneJobs.map(j => j.customerId); // Calculate collected vs owed from today's transactions for these customers const today = new Date().toISOString().split('T')[0]; const todayTransactions = transactions.filter(t => t.date === today && doneCustomerIds.includes(t.customerId) ); const todayCharges = todayTransactions.filter(t => t.type === 'charge').reduce((sum, t) => sum + t.amount, 0); const todayPayments = todayTransactions.filter(t => t.type === 'payment').reduce((sum, t) => sum + t.amount, 0); const todayOwed = todayCharges - todayPayments; return (

🌅 End of Day Summary

{activeWorksheet.name}

{/* Jobs summary */}

{doneJobs.length}

Done

{missedJobs.length}

Missed

{/* Money summary */}

Work completed: £{stats.collected.toFixed(2)}

Collected (paid): £{todayPayments.toFixed(2)}

Still owed: 0 ? '#f59e0b' : '#22c55e' }}>£{todayOwed.toFixed(2)}

Total earned: £{todayCharges.toFixed(2)}

{/* Missed jobs list */} {missedJobs.length > 0 && (

Missed jobs to reschedule:

{missedJobs.map(j => { const cust = customers.find(c => c.id === j.customerId); return (

• {cust?.name || cust?.address.split(',')[0]}

); })}

)}

); })()} {confirmDeleteWs && (

Delete this worksheet?

)} {/* Payment prompt modal */} {pendingDoneJob && (() => { const customer = customers.find(c => c.id === pendingDoneJob); return (

{customer?.name || customer?.address.split(',')[0]}

£{customer?.price?.toFixed(2)}

Did they pay?

); })()} {/* Swipe hint */}

💡 Swipe right = done • Swipe left = missed • Tap buttons for more

{activeWorksheet.jobs .filter(job => !collapseDone || job.status !== 'done') .map((job, idx) => { const customer = customers.find(c => c.id === job.customerId); if (!customer) return null; const isBeingSwiped = swipingJob === job.customerId; return (

setWsDragIdx(idx)} onDragOver={(e) => { e.preventDefault(); }} onDrop={() => { reorderWsJob(wsDragIdx, idx); setWsDragIdx(null); }} onDragEnd={() => setWsDragIdx(null)} onTouchStart={(e) => !wsReorderMode && handleTouchStart(e, job.customerId)} onTouchMove={handleTouchMove} onTouchEnd={() => handleTouchEnd(job.customerId)} style={{ ...styles.wsJobCard, ...(job.status === 'done' ? styles.wsJobDone : {}), ...(job.status === 'missed' ? styles.wsJobMissed : {}), ...(customer.needsReminder ? { borderLeft: '4px solid #fbbf24' } : {}), ...(wsReorderMode ? { cursor: 'grab', background: 'rgba(59,130,246,0.1)' } : {}), ...(wsDragIdx === idx ? { opacity: 0.5 } : {}), transform: isBeingSwiped ? `translateX(${swipeOffset}px)` : 'none', transition: isBeingSwiped ? 'none' : 'transform 0.2s', background: isBeingSwiped ? swipeOffset > 30 ? 'rgba(34,197,94,0.3)' : swipeOffset < -30 ? 'rgba(239,68,68,0.3)' : '#1e293b' : job.status === 'done' ? 'rgba(34,197,94,0.1)' : job.status === 'missed' ? 'rgba(239,68,68,0.1)' : '#1e293b' }} > {wsReorderMode && (

☰

)}

{idx + 1}

{customer.needsReminder && 📱}

{customer.name &&

{customer.name}

} {customer.phone && ( )}

{customer.schedule} weekly • £{customer.price.toFixed(2)}

{customer.notes && (

⚠️ {customer.notes}

)} {/* Job note */} {job.note && (

📝 {job.note}

)} {editingJobNote === job.customerId ? (

setTempNote(e.target.value)} placeholder="Add note..." style={{ flex: 1, padding: '6px', borderRadius: '4px', border: '1px solid #334155', background: '#0f172a', color: '#e2e8f0', fontSize: '0.8rem' }} />

) : ( )}

£{customer.price.toFixed(2)}

{(customer.balance || 0) < 0 && (

Owes £{Math.abs(customer.balance).toFixed(2)}

)} {job.status === 'pending' && (

)} {job.status === 'done' && (

✓ Done

)} {job.status === 'missed' && (

✗ Missed

)}

); })} {collapseDone && activeWorksheet.jobs.filter(j => j.status === 'done').length > 0 && (

{activeWorksheet.jobs.filter(j => j.status === 'done').length} completed jobs hidden

)}

)} {/* CUSTOMERS */} {activeTab === 'customers' && (

setSearchTerm(e.target.value)} style={styles.searchInput} />

{/* Bulk Edit Modal */} {showBulkEdit && (

✏️ Bulk Price Edit

Apply to Action Amount setBulkPriceChange(e.target.value)} style={styles.input} />

{bulkPriceType === 'set' && bulkPriceChange && `Will set all prices to £${parseFloat(bulkPriceChange).toFixed(2)}`} {bulkPriceType === 'increase' && bulkPriceChange && `Will add £${parseFloat(bulkPriceChange).toFixed(2)} to all prices`} {bulkPriceType === 'decrease' && bulkPriceChange && `Will subtract £${parseFloat(bulkPriceChange).toFixed(2)} from all prices`} {bulkPriceType === 'percent' && bulkPriceChange && `Will increase all prices by ${bulkPriceChange}%`}

)} {/* Import Modal */} {showImport && (

📥 Import Customers

Paste CSV data with columns: address (required), name, phone, price, schedule, service

setImportData(e.target.value)}
                    style={{...styles.input, minHeight: '150px', fontFamily: 'monospace', fontSize: '0.8rem'}}
                  />
                  <div style={styles.modalButtons}>
                    <button onClick={() => { setShowImport(false); setImportData(''); }} style={styles.cancelBtn}>Cancel</button>
                    <button onClick={importCustomersCSV} style={styles.saveBtn}>Import</button>
                  </div>
                </div>
              </div>
            )}

{showAddCustomer && (
              <div style={styles.modal}>
                <div style={styles.modalContent}>
                  <h3 style={styles.modalTitle}>Add Customer</h3>
                  <input placeholder="Name" value={newCustomer.name} onChange={e => setNewCustomer({...newCustomer, name: e.target.value})} style={styles.input} />
                  <input placeholder="Address *" value={newCustomer.address} onChange={e => setNewCustomer({...newCustomer, address: e.target.value})} style={styles.input} />
                  <input placeholder="Phone" value={newCustomer.phone} onChange={e => setNewCustomer({...newCustomer, phone: e.target.value})} style={styles.input} />
                  <label style={styles.inputLabel}>Service</label>
                  <select value={newCustomer.service} onChange={e => setNewCustomer({...newCustomer, service: e.target.value})} style={styles.input}>
                    {(settings.services || ['window cleaning']).map(s => (
                      <option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>
                    ))}
                  </select>
                  <input placeholder="Price (£)" type="number" value={newCustomer.price} onChange={e => setNewCustomer({...newCustomer, price: e.target.value})} style={styles.input} />
                  <select value={newCustomer.schedule} onChange={e => setNewCustomer({...newCustomer, schedule: e.target.value})} style={styles.input}>
                    <option value="1">Weekly</option>
                    <option value="2">2 Weekly</option>
                    <option value="4">4 Weekly</option>
                    <option value="6">6 Weekly</option>
                    <option value="8">8 Weekly</option>
                    <option value="12">12 Weekly</option>
                    <option value="52">Yearly</option>
                  </select>
                  <label style={styles.inputLabel}>Status</label>
                  <select value={newCustomer.status} onChange={e => setNewCustomer({...newCustomer, status: e.target.value})} style={styles.input}>
                    <option value="active">Active</option>
                    <option value="quote">Quote</option>
                  </select>
                  <label style={styles.inputLabel}>Round</label>
                  <select value={newCustomer.round || 'Round 1'} onChange={e => setNewCustomer({...newCustomer, round: e.target.value})} style={styles.input}>
                    {(settings.rounds || ['Round 1']).map(r => (
                      <option key={r} value={r}>{r}</option>
                    ))}
                  </select>
                  <textarea placeholder="Notes" value={newCustomer.notes} onChange={e => setNewCustomer({...newCustomer, notes: e.target.value})} style={{...styles.input, minHeight: '50px'}} />
                  <div style={styles.modalButtons}>
                    <button onClick={() => setShowAddCustomer(false)} style={styles.cancelBtn}>Cancel</button>
                    <button onClick={addCustomer} style={styles.saveBtn}>Save</button>
                  </div>
                </div>
              </div>
            )}

{editingCustomer && (
              <div style={styles.modal}>
                <div style={{...styles.modalContent, maxHeight: '90vh', overflow: 'auto'}}>
                  <h3 style={styles.modalTitle}>Edit Customer</h3>
                  
                  {/* Customer History Section */}
                  {(() => {
                    const allTrans = [...IMPORTED_TRANSACTIONS, ...transactions];
                    const custTrans = allTrans.filter(t => 
                      t.customerId === editingCustomer.id || 
                      t.address?.toUpperCase() === editingCustomer.address?.toUpperCase()
                    ).sort((a, b) => new Date(b.date) - new Date(a.date));
                    
                    const charges = custTrans.filter(t => t.type === 'charge');
                    const payments = custTrans.filter(t => t.type === 'payment');
                    const totalCharged = charges.reduce((sum, t) => sum + t.amount, 0);
                    const totalPaid = payments.reduce((sum, t) => sum + t.amount, 0);
                    const last5Cleans = charges.slice(0, 5);
                    
                    return (
                      <div style={{ background: '#0f172a', padding: '12px', borderRadius: '8px', marginBottom: '16px' }}>
                        <div style={{ fontSize: '0.85rem', fontWeight: '600', marginBottom: '10px', color: '#94a3b8' }}>📋 Customer History</div>
                        
                        {/* Stats row */}
                        <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
                          <div style={{ flex: 1, background: '#1e293b', padding: '8px', borderRadius: '6px', textAlign: 'center' }}>
                            <div style={{ fontSize: '1.1rem', fontWeight: 'bold', color: '#3b82f6' }}>{charges.length}</div>
                            <div style={{ fontSize: '0.65rem', color: '#64748b' }}>cleans</div>
                          </div>
                          <div style={{ flex: 1, background: '#1e293b', padding: '8px', borderRadius: '6px', textAlign: 'center' }}>
                            <div style={{ fontSize: '1.1rem', fontWeight: 'bold', color: '#22c55e' }}>£{totalPaid.toFixed(0)}</div>
                            <div style={{ fontSize: '0.65rem', color: '#64748b' }}>paid</div>
                          </div>
                          <div style={{ flex: 1, background: '#1e293b', padding: '8px', borderRadius: '6px', textAlign: 'center' }}>
                            <div style={{ fontSize: '1.1rem', fontWeight: 'bold', color: totalCharged - totalPaid > 0 ? '#f59e0b' : '#22c55e' }}>
                              £{(totalCharged - totalPaid).toFixed(0)}
                            </div>
                            <div style={{ fontSize: '0.65rem', color: '#64748b' }}>owed</div>
                          </div>
                        </div>
                        
                        {/* Last 5 cleans */}
                        {last5Cleans.length > 0 ? (
                          <div>
                            <div style={{ fontSize: '0.75rem', color: '#64748b', marginBottom: '6px' }}>Last {last5Cleans.length} cleans:</div>
                            {last5Cleans.map((t, idx) => {
                              const wasPaid = payments.some(p => p.date === t.date && p.amount === t.amount);
                              return (
                                <div key={idx} style={{ 
                                  display: 'flex', 
                                  justifyContent: 'space-between', 
                                  padding: '6px 8px',
                                  background: idx % 2 === 0 ? '#1e293b' : 'transparent',
                                  borderRadius: '4px',
                                  fontSize: '0.8rem'
                                }}>
                                  <span style={{ color: '#94a3b8' }}>
                                    {new Date(t.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: '2-digit' })}
                                  </span>
                                  <span>
                                    <span style={{ color: '#e2e8f0' }}>£{t.amount.toFixed(2)}</span>
                                    <span style={{ 
                                      marginLeft: '8px',
                                      color: wasPaid ? '#22c55e' : '#f59e0b',
                                      fontSize: '0.7rem'
                                    }}>
                                      {wasPaid ? '✓ Paid' : '○ Unpaid'}
                                    </span>
                                  </span>
                                </div>
                              );
                            })}
                          </div>
                        ) : (
                          <div style={{ fontSize: '0.8rem', color: '#64748b', textAlign: 'center' }}>No history yet</div>
                        )}
                      </div>
                    );
                  })()}

<input placeholder="Name" value={editingCustomer.name} onChange={e => setEditingCustomer({...editingCustomer, name: e.target.value})} style={styles.input} />
                  <input placeholder="Address" value={editingCustomer.address} onChange={e => setEditingCustomer({...editingCustomer, address: e.target.value})} style={styles.input} />
                  <input placeholder="Phone" value={editingCustomer.phone || ''} onChange={e => setEditingCustomer({...editingCustomer, phone: e.target.value})} style={styles.input} />
                  <label style={styles.inputLabel}>Service</label>
                  <select value={editingCustomer.service || 'window cleaning'} onChange={e => setEditingCustomer({...editingCustomer, service: e.target.value})} style={styles.input}>
                    {(settings.services || ['window cleaning']).map(s => (
                      <option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>
                    ))}
                  </select>
                  <label style={styles.inputLabel}>Price (£)</label>
                  <input placeholder="0.00" type="number" value={editingCustomer.price} onChange={e => setEditingCustomer({...editingCustomer, price: e.target.value})} style={styles.input} />
                  <label style={styles.inputLabel}>Schedule</label>
                  <select value={editingCustomer.schedule} onChange={e => setEditingCustomer({...editingCustomer, schedule: e.target.value})} style={styles.input}>
                    <option value="1">Weekly</option>
                    <option value="2">2 Weekly</option>
                    <option value="4">4 Weekly</option>
                    <option value="6">6 Weekly</option>
                    <option value="8">8 Weekly</option>
                    <option value="12">12 Weekly</option>
                    <option value="52">Yearly</option>
                  </select>
                  <label style={styles.inputLabel}>Status</label>
                  <select value={editingCustomer.status} onChange={e => setEditingCustomer({...editingCustomer, status: e.target.value})} style={styles.input}>
                    <option value="active">Active</option>
                    <option value="quote">Quote</option>
                    <option value="paused">Paused</option>
                    <option value="cancelled">Cancelled</option>
                  </select>
                  <label style={styles.inputLabel}>Next Due</label>
                  <input type="date" value={editingCustomer.nextDue || ''} onChange={e => setEditingCustomer({...editingCustomer, nextDue: e.target.value})} style={styles.input} />
                  <label style={styles.inputLabel}>Round</label>
                  <select value={editingCustomer.round || 'Round 1'} onChange={e => setEditingCustomer({...editingCustomer, round: e.target.value})} style={styles.input}>
                    {(settings.rounds || ['Round 1']).map(r => (
                      <option key={r} value={r}>{r}</option>
                    ))}
                  </select>
                  <label style={styles.inputLabel}>Round Order</label>
                  <input type="number" value={editingCustomer.order || ''} onChange={e => setEditingCustomer({...editingCustomer, order: parseInt(e.target.value) || 0})} style={styles.input} />
                  <label style={styles.inputLabel}>Tag</label>
                  <select value={editingCustomer.tag || ''} onChange={e => setEditingCustomer({...editingCustomer, tag: e.target.value})} style={styles.input}>
                    <option value="">No tag</option>
                    {CUSTOMER_TAGS.map(tag => (
                      <option key={tag} value={tag}>{tag}</option>
                    ))}
                  </select>
                  <textarea placeholder="Notes" value={editingCustomer.notes || ''} onChange={e => setEditingCustomer({...editingCustomer, notes: e.target.value})} style={{...styles.input, minHeight: '50px'}} />
                  
                  <div 
                    onClick={() => setEditingCustomer({...editingCustomer, needsReminder: !editingCustomer.needsReminder})}
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: '10px',
                      padding: '12px',
                      background: editingCustomer.needsReminder ? 'rgba(251,191,36,0.2)' : 'rgba(255,255,255,0.05)',
                      borderRadius: '8px',
                      cursor: 'pointer',
                      marginBottom: '12px'
                    }}
                  >
                    <div style={{
                      width: '24px',
                      height: '24px',
                      borderRadius: '4px',
                      border: '2px solid',
                      borderColor: editingCustomer.needsReminder ? '#fbbf24' : '#64748b',
                      background: editingCustomer.needsReminder ? '#fbbf24' : 'transparent',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      color: '#000',
                      fontWeight: 'bold'
                    }}>
                      {editingCustomer.needsReminder && '✓'}
                    </div>
                    <div>
                      <div style={{ fontWeight: '500' }}>📱 Needs reminder text</div>
                      <div style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Show alert when adding to worksheet</div>
                    </div>
                  </div>

<div 
                    onClick={() => setEditingCustomer({...editingCustomer, sendReceipt: !editingCustomer.sendReceipt})}
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      gap: '10px',
                      padding: '12px',
                      background: editingCustomer.sendReceipt ? 'rgba(34,197,94,0.2)' : 'rgba(255,255,255,0.05)',
                      borderRadius: '8px',
                      cursor: 'pointer',
                      marginBottom: '12px'
                    }}
                  >
                    <div style={{
                      width: '24px',
                      height: '24px',
                      borderRadius: '4px',
                      border: '2px solid',
                      borderColor: editingCustomer.sendReceipt ? '#22c55e' : '#64748b',
                      background: editingCustomer.sendReceipt ? '#22c55e' : 'transparent',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      color: '#000',
                      fontWeight: 'bold'
                    }}>
                      {editingCustomer.sendReceipt && '✓'}
                    </div>
                    <div>
                      <div style={{ fontWeight: '500' }}>📄 Send receipt</div>
                      <div style={{ fontSize: '0.75rem', color: '#94a3b8' }}>Prompt to send receipt after job</div>
                    </div>
                  </div>

{/* Convert Quote to Job Button */}
                  {editingCustomer.status === 'quote' && (
                    <button 
                      onClick={() => { setConvertingQuote(editingCustomer); setQuoteStartDate(new Date().toISOString().split('T')[0]); }}
                      style={{
                        width: '100%',
                        padding: '14px',
                        marginBottom: '12px',
                        borderRadius: '8px',
                        border: 'none',
                        background: 'linear-gradient(135deg, #22c55e, #16a34a)',
                        color: '#fff',
                        fontSize: '1rem',
                        fontWeight: '600',
                        cursor: 'pointer'
                      }}
                    >
                      ✓ Convert to Active Job
                    </button>
                  )}

{/* Generate Invoice Button */}
                  {editingCustomer.status === 'active' && (editingCustomer.balance || 0) < 0 && (
                    <button 
                      onClick={() => setShowInvoice(editingCustomer)}
                      style={{
                        width: '100%',
                        padding: '14px',
                        marginBottom: '12px',
                        borderRadius: '8px',
                        border: 'none',
                        background: 'linear-gradient(135deg, #3b82f6, #2563eb)',
                        color: '#fff',
                        fontSize: '1rem',
                        fontWeight: '600',
                        cursor: 'pointer'
                      }}
                    >
                      🧾 Generate Invoice (£{Math.abs(editingCustomer.balance || 0).toFixed(2)} owed)
                    </button>
                  )}

{/* Duplicate Customer Button */}
                  <button 
                    onClick={() => {
                      const services = settings.services || ['window cleaning'];
                      const otherServices = services.filter(s => s !== editingCustomer.service);
                      const selectedService = window.prompt(
                        `Duplicate for different service?\n\nAvailable:\n${otherServices.map((s, i) => `${i + 1}. ${s}`).join('\n')}\n\nEnter number (1-${otherServices.length}):`,
                        '1'
                      );
                      if (selectedService) {
                        const serviceIndex = parseInt(selectedService) - 1;
                        if (serviceIndex >= 0 && serviceIndex < otherServices.length) {
                          const newCust = {
                            ...editingCustomer,
                            id: Date.now(),
                            service: otherServices[serviceIndex],
                            balance: 0,
                            nextDue: new Date().toISOString().split('T')[0]
                          };
                          const updatedCustomers = [...customers, newCust];
                          saveCustomers(updatedCustomers);
                          setEditingCustomer(null);
                          alert(`Duplicated! New job: ${otherServices[serviceIndex]} at ${newCust.address}`);
                        }
                      }
                    }}
                    style={{
                      width: '100%',
                      padding: '12px',
                      marginBottom: '12px',
                      borderRadius: '8px',
                      border: '1px solid #64748b',
                      background: 'transparent',
                      color: '#94a3b8',
                      fontSize: '0.9rem',
                      cursor: 'pointer'
                    }}
                  >
                    📋 Duplicate (different service)
                  </button>

<div style={styles.modalButtons}>
                    <button onClick={() => deleteCustomer(editingCustomer.id)} style={{...styles.cancelBtn, color: '#ef4444'}}>Delete</button>
                    <button onClick={() => setEditingCustomer(null)} style={styles.cancelBtn}>Cancel</button>
                    <button onClick={updateCustomer} style={styles.saveBtn}>Save</button>
                  </div>
                </div>
              </div>
            )}

{/* Convert Quote Modal */}
            {convertingQuote && (
              <div style={styles.modal}>
                <div style={styles.modalContent}>
                  <h3 style={styles.modalTitle}>🎉 Convert Quote to Job</h3>
                  
                  <div style={{ background: '#0f172a', padding: '16px', borderRadius: '8px', marginBottom: '16px' }}>
                    <div style={{ fontSize: '1.1rem', fontWeight: '600', marginBottom: '4px' }}>
                      {convertingQuote.name || convertingQuote.address.split(',')[0]}
                    </div>
                    <div style={{ fontSize: '0.85rem', color: '#94a3b8', marginBottom: '8px' }}>
                      {convertingQuote.address}
                    </div>
                    <div style={{ display: 'flex', gap: '16px' }}>
                      <div>
                        <span style={{ color: '#94a3b8' }}>Price: </span>
                        <span style={{ color: '#22c55e', fontWeight: '600' }}>£{convertingQuote.price?.toFixed(2)}</span>
                      </div>
                      <div>
                        <span style={{ color: '#94a3b8' }}>Schedule: </span>
                        <span>{convertingQuote.schedule} weekly</span>
                      </div>
                    </div>
                  </div>
                  
                  <label style={styles.inputLabel}>First Clean Date</label>
                  <input 
                    type="date" 
                    value={quoteStartDate}
                    onChange={(e) => setQuoteStartDate(e.target.value)}
                    style={styles.input}
                  />
                  
                  <div style={styles.modalButtons}>
                    <button onClick={() => { setConvertingQuote(null); setQuoteStartDate(''); }} style={styles.cancelBtn}>Cancel</button>
                    <button onClick={convertQuoteToJob} style={{...styles.saveBtn, background: '#22c55e'}}>Start Job</button>
                  </div>
                </div>
              </div>
            )}

<div style={styles.customersList}>
              {customerListFiltered.map(customer => {
                const days = getDaysUntilDue(customer);
                const isOverdue = days < 0 && customer.status === 'active';
                const isDueSoon = days >= 0 && days <= 3 && customer.status === 'active';
                
                return (
                  <div 
                    key={customer.id} 
                    style={{
                      ...styles.customerCard,
                      ...(isOverdue ? styles.overdueCard : {}),
                      ...(isDueSoon ? styles.dueSoonCard : {}),
                      ...(customer.status === 'quote' ? styles.quoteCard : {}),
                      ...(customer.status === 'paused' || customer.status === 'cancelled' ? styles.inactiveCard : {})
                    }}
                    onClick={() => setEditingCustomer(customer)}
                  >
                    <div style={styles.customerOrder}>#{customer.order}</div>
                    <div style={styles.customerMain}>
                      <div style={styles.customerName}>
                        {customer.name || customer.address.split(',')[0]}
                        {customer.status === 'quote' && <span style={{...styles.statusBadge, background: '#f59e0b'}}>Quote</span>}
                        {customer.status === 'paused' && <span style={styles.statusBadge}>Paused</span>}
                      </div>
                      {customer.name && (
                        <button
                          onClick={(e) => {
                            e.stopPropagation();
                            window.open(`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(customer.address)}`, '_blank');
                          }}
                          style={{ fontSize: '0.75rem', color: '#94a3b8', background: 'none', border: 'none', cursor: 'pointer', padding: 0, textAlign: 'left' }}
                        >
                          📍 {customer.address}
                        </button>
                      )}
                      {customer.phone && (
                        <button 
                          onClick={(e) => {
                            e.stopPropagation();
                            navigator.clipboard.writeText(customer.phone);
                            alert(`Phone number copied!\n\n${customer.phone}`);
                          }}
                          style={{ fontSize: '0.75rem', color: '#38bdf8', background: 'none', border: 'none', cursor: 'pointer', padding: 0 }}
                        >
                          📞 {customer.phone}
                        </button>
                      )}
                      {customer.needsReminder && <span style={{ fontSize: '0.7rem', color: '#fbbf24' }}>📱 Reminder</span>}
                      {customer.tag && <span style={{ fontSize: '0.65rem', color: '#94a3b8', background: '#334155', padding: '2px 6px', borderRadius: '4px', marginLeft: '4px' }}>{customer.tag}</span>}
                      {customer.round && <span style={{ fontSize: '0.65rem', color: '#f59e0b', background: '#f59e0b20', padding: '2px 6px', borderRadius: '4px', marginLeft: '4px' }}>🗺️ {customer.round}</span>}
                      <div style={styles.customerScheduleText}>{customer.service || 'window cleaning'} • {customer.schedule}wk</div>
                    </div>
                    <div style={styles.customerMeta}>
                      <div style={styles.customerPrice}>£{customer.price?.toFixed(2)}</div>
                      {customer.status === 'active' && (
                        <div style={{
                          ...styles.customerDue,
                          color: isOverdue ? '#ef4444' : isDueSoon ? '#f59e0b' : '#94a3b8'
                        }}>
                          {isOverdue ? `${Math.abs(days)}d late` : days === 0 ? 'Today' : `${days}d`}
                        </div>
                      )}
                      {(customer.balance || 0) < 0 && (
                        <div style={styles.customerOwes}>-£{Math.abs(customer.balance).toFixed(2)}</div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}

{/* DEBTS */}
        {activeTab === 'debts' && (
          <div>
            <div style={styles.debtHeader}>
              <h2 style={styles.sectionTitle}>Outstanding</h2>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                <button
                  onClick={async () => {
                    // Clean all Sure Store transactions from today
                    const today = new Date().toISOString().split('T')[0];
                    const cleanedTrans = transactions.filter(t => 
                      !(t.address && t.address.includes('SURE STORE'))
                    );
                    setTransactions(cleanedTrans);
                    await appStorage.set('cwc-test-transactions-v1', JSON.stringify(cleanedTrans));
                    
                    const cleanedCustomers = customers.map(c => 
                      c.address && c.address.includes('SURE STORE') 
                        ? {...c, balance: 0} 
                        : c
                    );
                    setCustomers(cleanedCustomers);
                    await appStorage.set('cwc-test-customers-v1', JSON.stringify(cleanedCustomers));
                    
                    alert('Done! Sure Store data cleaned.');
                  }}
                  style={{
                    padding: '6px 12px',
                    fontSize: '0.8rem',
                    background: '#334155',
                    border: 'none',
                    borderRadius: '6px',
                    color: '#94a3b8',
                    cursor: 'pointer'
                  }}
                >
                  🧹 Clean Test
                </button>
                <div style={styles.totalDebt}>Total: £{Math.abs(totalDebt).toFixed(2)}</div>
              </div>
            </div>

{showAddPayment && selectedCustomer && (
              <div style={styles.modal}>
                <div style={styles.modalContent}>
                  <h3 style={styles.modalTitle}>Record Payment</h3>
                  <p style={styles.paymentFor}>{selectedCustomer.name || selectedCustomer.address}</p>
                  <p style={styles.paymentOwes}>Owes: £{Math.abs(selectedCustomer.balance).toFixed(2)}</p>
                  <input placeholder="Amount (£)" type="number" value={paymentAmount} onChange={e => setPaymentAmount(e.target.value)} style={styles.input} />
                  <div style={styles.modalButtons}>
                    <button onClick={() => {setShowAddPayment(false); setSelectedCustomer(null);}} style={styles.cancelBtn}>Cancel</button>
                    <button onClick={addPayment} style={styles.saveBtn}>Record Payment</button>
                  </div>
                </div>
              </div>
            )}

<div style={styles.debtsList}>
              {customers.filter(c => (c.balance || 0) < 0).length === 0 ? (
                <p style={styles.emptyState}>🎉 No outstanding debts!</p>
              ) : (
                customers
                  .filter(c => (c.balance || 0) < 0)
                  .sort((a, b) => a.balance - b.balance)
                  .map(customer => {
                    // Find last charge date for this customer from transactions
                    const lastCharge = transactions
                      .filter(t => t.type === 'charge' && (t.customerId === customer.id || t.address?.toUpperCase() === customer.address?.toUpperCase()))
                      .sort((a, b) => new Date(b.date) - new Date(a.date))[0];
                    const chargeDate = lastCharge ? new Date(lastCharge.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'short' }) : null;
                    
                    return (
                      <div key={customer.id} style={styles.debtCard}>
                        <div style={styles.debtInfo}>
                          <div style={styles.debtName}>{customer.name || customer.address.split(',')[0]}</div>
                          <div style={styles.debtAddress}>{customer.address}</div>
                          {chargeDate && <div style={{ fontSize: '0.75rem', color: '#f59e0b' }}>Cleaned: {chargeDate}</div>}
                          {customer.phone && (
                            <button 
                              onClick={() => {
                                const msg = `Hi, can you please complete the payment for window cleaning${chargeDate ? ` on ${chargeDate}` : ''}, many thanks as always, Carl`;
                                navigator.clipboard.writeText(msg);
                                alert(`Message copied!\n\nNow text: ${customer.phone}\n\nMessage:\n${msg}`);
                              }}
                              style={{ fontSize: '0.8rem', color: '#38bdf8', background: 'none', border: 'none', cursor: 'pointer', padding: 0, marginTop: '4px' }}
                            >
                              📱 {customer.phone} - Tap to copy message
                            </button>
                          )}
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: '8px' }}>
                          <div style={styles.debtAmount}>-£{Math.abs(customer.balance).toFixed(2)}</div>
                          <div style={{ display: 'flex', gap: '6px' }}>
                            <button onClick={() => setShowInvoice(customer)} style={{ padding: '8px 12px', borderRadius: '6px', border: 'none', background: '#3b82f6', color: '#fff', cursor: 'pointer', fontSize: '0.8rem' }}>🧾</button>
                            <button onClick={() => {setSelectedCustomer(customer); setPaymentAmount(Math.abs(customer.balance).toFixed(2)); setShowAddPayment(true);}} style={styles.payBtn}>Pay</button>
                          </div>
                        </div>
                      </div>
                    );
                  })
              )}
            </div>
          </div>
        )}

{/* EXPENSES */}
        {activeTab === 'expenses' && (
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
              <h2 style={styles.sectionTitle}>Expenses</h2>
              <button onClick={() => setShowAddExpense(true)} style={styles.addBtn}>+ Add Expense</button>
            </div>

{/* Month Filter */}
            <div style={{ marginBottom: '16px' }}>
              <select 
                value={expenseMonth} 
                onChange={e => setExpenseMonth(e.target.value)}
                style={styles.filterSelect}
              >
                <option value="all">All Time</option>
                <option value="2026-01">January 2026</option>
                <option value="2025-12">December 2025</option>
                <option value="2025-11">November 2025</option>
                <option value="2025-10">October 2025</option>
                <option value="2025-09">September 2025</option>
                <option value="2025-08">August 2025</option>
              </select>
            </div>

{/* Summary */}
            {(() => {
              const filtered = expenseMonth === 'all' 
                ? expenses 
                : expenses.filter(e => e.date.startsWith(expenseMonth));
              const total = filtered.reduce((sum, e) => sum + e.amount, 0);
              const byCategory = filtered.reduce((acc, e) => {
                acc[e.category] = (acc[e.category] || 0) + e.amount;
                return acc;
              }, {});

return (
                <>
                  <div style={{ display: 'flex', gap: '12px', marginBottom: '16px', flexWrap: 'wrap' }}>
                    <div style={{ background: 'rgba(239,68,68,0.2)', padding: '12px 16px', borderRadius: '8px', minWidth: '120px' }}>
                      <div style={{ color: '#f87171', fontWeight: '700', fontSize: '1.3rem' }}>£{total.toFixed(2)}</div>
                      <div style={{ color: '#94a3b8', fontSize: '0.7rem' }}>Total Expenses</div>
                    </div>
                    {Object.entries(byCategory).sort((a, b) => b[1] - a[1]).slice(0, 3).map(([cat, amt]) => (
                      <div key={cat} style={{ background: 'rgba(255,255,255,0.05)', padding: '12px 16px', borderRadius: '8px' }}>
                        <div style={{ color: '#e2e8f0', fontWeight: '600' }}>£{amt.toFixed(2)}</div>
                        <div style={{ color: '#94a3b8', fontSize: '0.7rem' }}>{cat}</div>
                      </div>
                    ))}
                  </div>

{/* Expense List */}
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                    {filtered.length === 0 ? (
                      <p style={{ color: '#94a3b8', textAlign: 'center', padding: '40px' }}>No expenses recorded</p>
                    ) : (
                      filtered.sort((a, b) => new Date(b.date) - new Date(a.date)).map(expense => (
                        <div key={expense.id} style={{
                          background: 'rgba(255,255,255,0.05)',
                          padding: '12px 16px',
                          borderRadius: '8px',
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center'
                        }}>
                          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                            {expense.receipt && (
                              <button
                                onClick={() => setViewingReceipt(expense.receipt)}
                                style={{ 
                                  background: '#3b82f6', 
                                  border: 'none', 
                                  borderRadius: '6px', 
                                  padding: '8px', 
                                  cursor: 'pointer',
                                  fontSize: '1.1rem'
                                }}
                              >🧾</button>
                            )}
                            <div>
                              <div style={{ fontWeight: '600' }}>{expense.category}</div>
                              {expense.description && <div style={{ fontSize: '0.8rem', color: '#94a3b8' }}>{expense.description}</div>}
                              <div style={{ fontSize: '0.75rem', color: '#64748b' }}>
                                {new Date(expense.date).toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })}
                              </div>
                            </div>
                          </div>
                          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                            <div style={{ color: '#f87171', fontWeight: '600', fontSize: '1.1rem' }}>-£{expense.amount.toFixed(2)}</div>
                            <button 
                              onClick={() => deleteExpense(expense.id)}
                              style={{ background: 'none', border: 'none', color: '#64748b', cursor: 'pointer', fontSize: '1.2rem' }}
                            >×</button>
                          </div>
                        </div>
                      ))
                    )}
                  </div>
                </>
              );
            })()}

{/* Add Expense Modal */}
            {showAddExpense && (
              <div style={styles.modal}>
                <div style={styles.modalContent}>
                  <h3 style={styles.modalTitle}>Add Expense</h3>
                  
                  <label style={styles.inputLabel}>Category</label>
                  <select 
                    value={newExpense.category} 
                    onChange={e => setNewExpense({...newExpense, category: e.target.value})}
                    style={styles.input}
                  >
                    {EXPENSE_CATEGORIES.map(cat => (
                      <option key={cat} value={cat}>{cat}</option>
                    ))}
                  </select>

<label style={styles.inputLabel}>Amount (£)</label>
                  <input 
                    type="number" 
                    placeholder="0.00"
                    value={newExpense.amount}
                    onChange={e => setNewExpense({...newExpense, amount: e.target.value})}
                    style={styles.input}
                  />

<label style={styles.inputLabel}>Date</label>
                  <input 
                    type="date"
                    value={newExpense.date}
                    onChange={e => setNewExpense({...newExpense, date: e.target.value})}
                    style={styles.input}
                  />

<label style={styles.inputLabel}>Description (optional)</label>
                  <input 
                    placeholder="e.g. Shell garage, 40L"
                    value={newExpense.description}
                    onChange={e => setNewExpense({...newExpense, description: e.target.value})}
                    style={styles.input}
                  />

<label style={styles.inputLabel}>Receipt Photo (optional)</label>
                  <div style={{ display: 'flex', gap: '8px', alignItems: 'center', marginBottom: '12px' }}>
                    <label style={{
                      background: '#10b981',
                      color: '#fff',
                      padding: '10px 16px',
                      borderRadius: '8px',
                      cursor: 'pointer',
                      fontSize: '0.9rem',
                      display: 'flex',
                      alignItems: 'center',
                      gap: '6px'
                    }}>
                      📷 {receiptPhoto ? 'Change Photo' : 'Take Photo'}
                      <input 
                        type="file" 
                        accept="image/*" 
                        capture="environment"
                        onChange={handleReceiptCapture}
                        style={{ display: 'none' }}
                      />
                    </label>
                    {receiptPhoto && (
                      <button 
                        onClick={() => setReceiptPhoto(null)}
                        style={{ background: '#ef4444', color: '#fff', border: 'none', padding: '10px 12px', borderRadius: '8px', cursor: 'pointer' }}
                      >
                        ✕ Remove
                      </button>
                    )}
                  </div>
                  {receiptPhoto && (
                    <img 
                      src={receiptPhoto} 
                      alt="Receipt" 
                      style={{ width: '100%', maxHeight: '150px', objectFit: 'contain', borderRadius: '8px', marginBottom: '12px', background: '#1e293b' }}
                    />
                  )}

<div style={styles.modalButtons}>
                    <button onClick={() => { setShowAddExpense(false); setReceiptPhoto(null); }} style={styles.cancelBtn}>Cancel</button>
                    <button onClick={addExpense} style={styles.saveBtn}>Add Expense</button>
                  </div>
                </div>
              </div>
            )}

{/* View Receipt Modal */}
            {viewingReceipt && (
              <div style={styles.modal} onClick={() => setViewingReceipt(null)}>
                <div style={{ ...styles.modalContent, maxWidth: '90vw', maxHeight: '90vh' }} onClick={e => e.stopPropagation()}>
                  <h3 style={styles.modalTitle}>Receipt</h3>
                  <img 
                    src={viewingReceipt} 
                    alt="Receipt" 
                    style={{ width: '100%', maxHeight: '70vh', objectFit: 'contain', borderRadius: '8px' }}
                  />
                  <div style={{ marginTop: '16px', textAlign: 'center' }}>
                    <button onClick={() => setViewingReceipt(null)} style={styles.cancelBtn}>Close</button>
                  </div>
                </div>
              </div>
            )}
          </div>
        )}

{/* HISTORY */}
        {activeTab === 'history' && (
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
              <h2 style={styles.sectionTitle}>Transaction History</h2>
              <button 
                onClick={() => setShowReports(true)}
                style={{ padding: '10px 16px', borderRadius: '6px', border: 'none', background: '#8b5cf6', color: '#fff', cursor: 'pointer', fontSize: '0.85rem', fontWeight: '500' }}
              >
                📊 Reports
              </button>
            </div>

{/* Reports Modal */}
            {showReports && (() => {
              const reportData = getReportData();
              const data = reportPeriod === 'week' ? reportData.weeks : reportData.months;
              const totals = data.reduce((acc, d) => ({
                earned: acc.earned + d.earned,
                collected: acc.collected + d.collected,
                jobs: acc.jobs + d.jobs
              }), { earned: 0, collected: 0, jobs: 0 });
              
              return (
                <div style={{
                  position: 'fixed',
                  top: 0, left: 0, right: 0, bottom: 0,
                  background: 'rgba(0,0,0,0.9)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  zIndex: 9999,
                  padding: '16px'
                }}>
                  <div style={{
                    background: '#1e293b',
                    padding: '20px',
                    borderRadius: '16px',
                    width: '100%',
                    maxWidth: '500px',
                    maxHeight: '90vh',
                    overflow: 'auto'
                  }}>
                    <h2 style={{ textAlign: 'center', marginBottom: '16px', color: '#8b5cf6' }}>📊 Earnings Report</h2>
                    
                    {/* Period toggle */}
                    <div style={{ display: 'flex', gap: '8px', marginBottom: '20px' }}>
                      <button 
                        onClick={() => setReportPeriod('week')}
                        style={{
                          flex: 1,
                          padding: '10px',
                          borderRadius: '8px',
                          border: 'none',
                          background: reportPeriod === 'week' ? '#3b82f6' : '#334155',
                          color: '#fff',
                          cursor: 'pointer',
                          fontWeight: reportPeriod === 'week' ? '600' : '400'
                        }}
                      >
                        Weekly
                      </button>
                      <button 
                        onClick={() => setReportPeriod('month')}
                        style={{
                          flex: 1,
                          padding: '10px',
                          borderRadius: '8px',
                          border: 'none',
                          background: reportPeriod === 'month' ? '#3b82f6' : '#334155',
                          color: '#fff',
                          cursor: 'pointer',
                          fontWeight: reportPeriod === 'month' ? '600' : '400'
                        }}
                      >
                        Monthly
                      </button>
                    </div>
                    
                    {/* Summary totals */}
                    <div style={{ background: '#0f172a', padding: '16px', borderRadius: '12px', marginBottom: '16px' }}>
                      <div style={{ textAlign: 'center', marginBottom: '8px', color: '#94a3b8', fontSize: '0.85rem' }}>
                        {reportPeriod === 'week' ? 'Last 8 Weeks' : 'Last 6 Months'} Total
                      </div>
                      <div style={{ display: 'flex', justifyContent: 'space-around' }}>
                        <div style={{ textAlign: 'center' }}>
                          <div style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#3b82f6' }}>£{totals.earned.toFixed(0)}</div>
                          <div style={{ fontSize: '0.7rem', color: '#94a3b8' }}>earned</div>
                        </div>
                        <div style={{ textAlign: 'center' }}>
                          <div style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#22c55e' }}>£{totals.collected.toFixed(0)}</div>
                          <div style={{ fontSize: '0.7rem', color: '#94a3b8' }}>collected</div>
                        </div>
                        <div style={{ textAlign: 'center' }}>
                          <div style={{ fontSize: '1.5rem', fontWeight: 'bold', color: '#e2e8f0' }}>{totals.jobs}</div>
                          <div style={{ fontSize: '0.7rem', color: '#94a3b8' }}>jobs</div>
                        </div>
                      </div>
                    </div>
                    
                    {/* Period breakdown */}
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                      {data.map((period, idx) => (
                        <div key={idx} style={{
                          background: '#0f172a',
                          padding: '12px',
                          borderRadius: '8px',
                          display: 'flex',
                          justifyContent: 'space-between',
                          alignItems: 'center'
                        }}>
                          <div>
                            <div style={{ fontWeight: '600', fontSize: '0.9rem' }}>{period.label}</div>
                            {period.start && (
                              <div style={{ fontSize: '0.75rem', color: '#64748b' }}>{period.start} - {period.end}</div>
                            )}
                          </div>
                          <div style={{ textAlign: 'right' }}>
                            <div style={{ fontWeight: 'bold', color: '#22c55e' }}>£{period.earned.toFixed(2)}</div>
                            <div style={{ fontSize: '0.75rem', color: '#64748b' }}>{period.jobs} jobs</div>
                          </div>
                        </div>
                      ))}
                    </div>
                    
                    <button 
                      onClick={() => setShowReports(false)}
                      style={{
                        width: '100%',
                        marginTop: '20px',
                        padding: '14px',
                        borderRadius: '8px',
                        border: 'none',
                        background: '#334155',
                        color: '#fff',
                        fontSize: '1rem',
                        cursor: 'pointer'
                      }}
                    >
                      Close
                    </button>
                  </div>
                </div>
              );
            })()}
            
            {/* Filter Controls */}
            <div style={{ display: 'flex', gap: '8px', marginBottom: '12px', flexWrap: 'wrap' }}>
              <select 
                value={historyFilter} 
                onChange={e => setHistoryFilter(e.target.value)}
                style={{ ...styles.daysSelect, flex: '1', minWidth: '100px' }}
              >
                <option value="all">All Types</option>
                <option value="charge">Charges</option>
                <option value="payment">Payments</option>
                <option value="missed">Missed</option>
              </select>
              <select 
                value={historyMonth} 
                onChange={e => setHistoryMonth(e.target.value)}
                style={{ ...styles.daysSelect, flex: '1', minWidth: '100px' }}
              >
                <option value="all">All Months</option>
                <option value="2026-01">Jan 2026</option>
                <option value="2025-12">Dec 2025</option>
                <option value="2025-11">Nov 2025</option>
                <option value="2025-10">Oct 2025</option>
                <option value="2025-09">Sep 2025</option>
                <option value="2025-08">Aug 2025</option>
              </select>
              <input
                type="text"
                placeholder="Search address..."
                value={historySearch}
                onChange={e => setHistorySearch(e.target.value)}
                style={{ ...styles.searchInput, flex: '2', minWidth: '140px' }}
              />
            </div>
            
            {/* Summary Stats */}
            {(() => {
              const filtered = IMPORTED_TRANSACTIONS.filter(t => {
                if (historyFilter !== 'all' && t.type !== historyFilter) return false;
                if (historyMonth !== 'all' && !t.date.startsWith(historyMonth)) return false;
                if (historySearch && !t.address.toLowerCase().includes(historySearch.toLowerCase())) return false;
                return true;
              });
              const totalCharges = filtered.filter(t => t.type === 'charge').reduce((sum, t) => sum + t.amount, 0);
              const totalPayments = filtered.filter(t => t.type === 'payment').reduce((sum, t) => sum + t.amount, 0);
              const missedCount = filtered.filter(t => t.type === 'missed').length;
              
              return (
                <>
                  <div style={{ display: 'flex', gap: '12px', marginBottom: '12px', fontSize: '0.8rem' }}>
                    <div 
                      onClick={() => setHistoryFilter(historyFilter === 'charge' ? 'all' : 'charge')}
                      style={{ 
                        background: historyFilter === 'charge' ? 'rgba(59,130,246,0.5)' : 'rgba(59,130,246,0.2)', 
                        padding: '8px 12px', 
                        borderRadius: '8px', 
                        flex: 1, 
                        textAlign: 'center',
                        cursor: 'pointer',
                        border: historyFilter === 'charge' ? '2px solid #60a5fa' : '2px solid transparent'
                      }}
                    >
                      <div style={{ color: '#60a5fa', fontWeight: '600' }}>£{totalCharges.toFixed(0)}</div>
                      <div style={{ color: '#94a3b8', fontSize: '0.7rem' }}>Charged</div>
                    </div>
                    <div 
                      onClick={() => setHistoryFilter(historyFilter === 'payment' ? 'all' : 'payment')}
                      style={{ 
                        background: historyFilter === 'payment' ? 'rgba(52,211,153,0.5)' : 'rgba(52,211,153,0.2)', 
                        padding: '8px 12px', 
                        borderRadius: '8px', 
                        flex: 1, 
                        textAlign: 'center',
                        cursor: 'pointer',
                        border: historyFilter === 'payment' ? '2px solid #34d399' : '2px solid transparent'
                      }}
                    >
                      <div style={{ color: '#34d399', fontWeight: '600' }}>£{totalPayments.toFixed(0)}</div>
                      <div style={{ color: '#94a3b8', fontSize: '0.7rem' }}>Received</div>
                    </div>
                    <div 
                      onClick={() => setHistoryFilter(historyFilter === 'missed' ? 'all' : 'missed')}
                      style={{ 
                        background: historyFilter === 'missed' ? 'rgba(248,113,113,0.5)' : 'rgba(248,113,113,0.2)', 
                        padding: '8px 12px', 
                        borderRadius: '8px', 
                        flex: 1, 
                        textAlign: 'center',
                        cursor: 'pointer',
                        border: historyFilter === 'missed' ? '2px solid #f87171' : '2px solid transparent'
                      }}
                    >
                      <div style={{ color: '#f87171', fontWeight: '600' }}>{missedCount}</div>
                      <div style={{ color: '#94a3b8', fontSize: '0.7rem' }}>Missed</div>
                    </div>
                  </div>
                  
                  <div style={{ fontSize: '0.75rem', color: '#94a3b8', marginBottom: '8px' }}>
                    Showing {filtered.length} of {IMPORTED_TRANSACTIONS.length} transactions
                  </div>
                  
                  <div style={styles.transactionsList}>
                    {filtered
                      .sort((a, b) => new Date(b.date) - new Date(a.date))
                      .slice(0, 100)
                      .map(trans => (
                        <div key={trans.id} style={styles.transactionCard}>
                          <div style={styles.transIcon}>
                            {trans.type === 'payment' ? '💰' : trans.type === 'missed' ? '❌' : '🪟'}
                          </div>
                          <div style={styles.transInfo}>
                            <div style={styles.transCustomer}>{trans.address}</div>
                            <div style={styles.transDate}>
                              {trans.date} {trans.method && `• ${trans.method}`}
                            </div>
                          </div>
                          <div style={{
                            ...styles.transAmount,
                            color: trans.type === 'payment' ? '#34d399' : trans.type === 'missed' ? '#f87171' : '#94a3b8'
                          }}>
                            {trans.type === 'payment' ? '+' : trans.type === 'missed' ? '' : '-'}
                            {trans.type !== 'missed' ? `£${trans.amount.toFixed(2)}` : 'Missed'}
                          </div>
                        </div>
                      ))}
                  </div>
                </>
              );
            })()}
          </div>
        )}

{/* SETTINGS */}
        {activeTab === 'settings' && (
          <div>
            <h2 style={styles.sectionTitle}>Business Settings</h2>
            <p style={{ color: '#94a3b8', marginBottom: '20px', fontSize: '0.9rem' }}>
              Edit your invoice details and business information
            </p>
            
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
              <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                <h3 style={{ marginBottom: '16px', fontSize: '1rem', color: '#3b82f6' }}>📋 Business Details</h3>
                
                <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                  <div>
                    <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.85rem', color: '#94a3b8' }}>Business Name</label>
                    <input 
                      type="text" 
                      value={settings.businessName}
                      onChange={e => setSettings({...settings, businessName: e.target.value})}
                      style={styles.input}
                    />
                  </div>
                  
                  <div>
                    <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.85rem', color: '#94a3b8' }}>Phone</label>
                    <input 
                      type="text" 
                      value={settings.phone}
                      onChange={e => setSettings({...settings, phone: e.target.value})}
                      style={styles.input}
                    />
                  </div>
                  
                  <div>
                    <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.85rem', color: '#94a3b8' }}>Mobile</label>
                    <input 
                      type="text" 
                      value={settings.mobile}
                      onChange={e => setSettings({...settings, mobile: e.target.value})}
                      style={styles.input}
                    />
                  </div>
                  
                  <div>
                    <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.85rem', color: '#94a3b8' }}>Email</label>
                    <input 
                      type="email" 
                      value={settings.email}
                      onChange={e => setSettings({...settings, email: e.target.value})}
                      style={styles.input}
                    />
                  </div>
                  
                  <div>
                    <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.85rem', color: '#94a3b8' }}>Website</label>
                    <input 
                      type="text" 
                      value={settings.website}
                      onChange={e => setSettings({...settings, website: e.target.value})}
                      style={styles.input}
                    />
                  </div>
                </div>
              </div>
              
              <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                <h3 style={{ marginBottom: '16px', fontSize: '1rem', color: '#f5a623' }}>💳 Bank Details (for invoices)</h3>
                
                <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
                  <div>
                    <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.85rem', color: '#94a3b8' }}>Account Number</label>
                    <input 
                      type="text" 
                      value={settings.bankAccount}
                      onChange={e => setSettings({...settings, bankAccount: e.target.value})}
                      style={styles.input}
                    />
                  </div>
                  
                  <div>
                    <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.85rem', color: '#94a3b8' }}>Sort Code</label>
                    <input 
                      type="text" 
                      value={settings.sortCode}
                      onChange={e => setSettings({...settings, sortCode: e.target.value})}
                      style={styles.input}
                    />
                  </div>
                  
                  <div>
                    <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.85rem', color: '#94a3b8' }}>Payment Terms</label>
                    <input 
                      type="text" 
                      value={settings.paymentTerms}
                      onChange={e => setSettings({...settings, paymentTerms: e.target.value})}
                      style={styles.input}
                      placeholder="e.g. 3 days, 7 days, 14 days"
                    />
                  </div>
                </div>
              </div>
              
              <button
                onClick={() => {
                  saveSettings(settings);
                  alert('Settings saved!');
                }}
                style={{
                  padding: '14px',
                  fontSize: '1rem',
                  fontWeight: '600',
                  borderRadius: '10px',
                  border: 'none',
                  background: '#22c55e',
                  color: '#fff',
                  cursor: 'pointer'
                }}
              >
                ✓ Save Settings
              </button>
              
              <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px', marginTop: '8px' }}>
                <h3 style={{ marginBottom: '16px', fontSize: '1rem', color: '#3b82f6' }}>📅 Working Days</h3>
                <p style={{ color: '#64748b', fontSize: '0.8rem', marginBottom: '12px' }}>
                  Select the days you work. The planner will only show these days.
                </p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
                  {[
                    { day: 1, label: 'Mon' },
                    { day: 2, label: 'Tue' },
                    { day: 3, label: 'Wed' },
                    { day: 4, label: 'Thu' },
                    { day: 5, label: 'Fri' },
                    { day: 6, label: 'Sat' },
                    { day: 0, label: 'Sun' },
                  ].map(({ day, label }) => {
                    const isActive = (settings.workDays || [1,2,3,4,5]).includes(day);
                    return (
                      <button
                        key={day}
                        onClick={() => {
                          const current = settings.workDays || [1,2,3,4,5];
                          const updated = isActive 
                            ? current.filter(d => d !== day) 
                            : [...current, day].sort();
                          setSettings({...settings, workDays: updated});
                        }}
                        style={{
                          flex: '1',
                          minWidth: '44px',
                          padding: '12px 8px',
                          borderRadius: '8px',
                          border: 'none',
                          background: isActive ? '#22c55e' : '#0f172a',
                          color: isActive ? '#fff' : '#64748b',
                          fontWeight: '600',
                          fontSize: '0.9rem',
                          cursor: 'pointer'
                        }}
                      >
                        {label}
                      </button>
                    );
                  })}
                </div>
              </div>
              
              {/* Rounds Management */}
              <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px', marginTop: '8px' }}>
                <h3 style={{ marginBottom: '16px', fontSize: '1rem', color: '#f59e0b' }}>🗺️ Rounds / Areas</h3>
                <p style={{ color: '#64748b', fontSize: '0.8rem', marginBottom: '12px' }}>
                  Create rounds to group customers by area, postcode, or day.
                </p>
                
                <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
                  <input 
                    type="text" 
                    id="newRoundInput"
                    placeholder="e.g. WS11, Hednesford, Monday..."
                    style={{...styles.input, flex: 1}}
                    onKeyPress={e => {
                      if (e.key === 'Enter' && e.target.value.trim()) {
                        setSettings({...settings, rounds: [...(settings.rounds || []), e.target.value.trim()]});
                        e.target.value = '';
                      }
                    }}
                  />
                  <button
                    onClick={() => {
                      const input = document.getElementById('newRoundInput');
                      if (input.value.trim()) {
                        setSettings({...settings, rounds: [...(settings.rounds || []), input.value.trim()]});
                        input.value = '';
                      }
                    }}
                    style={{
                      padding: '10px 16px',
                      background: '#f59e0b',
                      border: 'none',
                      borderRadius: '6px',
                      color: '#fff',
                      cursor: 'pointer',
                      fontWeight: '600'
                    }}
                  >
                    + Add
                  </button>
                </div>
                
                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                  {(settings.rounds || []).map((round, idx) => {
                    const custCount = customers.filter(c => (c.round || 'Round 1') === round).length;
                    return (
                      <div key={idx} style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center',
                        background: '#0f172a',
                        padding: '10px 12px',
                        borderRadius: '6px'
                      }}>
                        <div>
                          <span style={{ fontWeight: '500' }}>{round}</span>
                          <span style={{ color: '#64748b', fontSize: '0.8rem', marginLeft: '8px' }}>({custCount} customers)</span>
                        </div>
                        <button
                          onClick={() => {
                            if (custCount > 0) {
                              alert(`Can't delete "${round}" - ${custCount} customers are assigned to it. Move them first.`);
                              return;
                            }
                            const updated = settings.rounds.filter((_, i) => i !== idx);
                            setSettings({...settings, rounds: updated});
                          }}
                          style={{
                            padding: '4px 10px',
                            background: custCount > 0 ? '#334155' : '#ef4444',
                            border: 'none',
                            borderRadius: '4px',
                            color: custCount > 0 ? '#64748b' : '#fff',
                            cursor: 'pointer',
                            fontSize: '0.8rem'
                          }}
                        >
                          ✕
                        </button>
                      </div>
                    );
                  })}
                </div>
              </div>

{/* CSV Import */}
              <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px', marginTop: '8px' }}>
                <h3 style={{ marginBottom: '16px', fontSize: '1rem', color: '#8b5cf6' }}>📥 Import Customers (CSV)</h3>
                <p style={{ color: '#64748b', fontSize: '0.8rem', marginBottom: '12px' }}>
                  Import customers from a spreadsheet. Your CSV should have columns like: Name, Address, Phone, Price, Schedule, Round, Service
                </p>
                
                <input
                  type="file"
                  accept=".csv"
                  onChange={async (e) => {
                    const file = e.target.files[0];
                    if (!file) return;
                    const text = await file.text();
                    const lines = text.split('\n').filter(l => l.trim());
                    if (lines.length < 2) { alert('CSV is empty'); return; }
                    
                    const headers = lines[0].split(',').map(h => h.trim().replace(/^"(.*)"$/, '$1').toLowerCase());
                    const rows = lines.slice(1).map(line => {
                      const vals = [];
                      let current = '';
                      let inQuotes = false;
                      for (let i = 0; i < line.length; i++) {
                        if (line[i] === '"') { inQuotes = !inQuotes; }
                        else if (line[i] === ',' && !inQuotes) { vals.push(current.trim()); current = ''; }
                        else { current += line[i]; }
                      }
                      vals.push(current.trim());
                      const obj = {};
                      headers.forEach((h, idx) => { obj[h] = vals[idx] || ''; });
                      return obj;
                    });
                    
                    setCsvData({ headers, rows, fileName: file.name });
                    setCsvMapping({
                      name: headers.find(h => h.includes('name') || h.includes('customer')) || headers[0],
                      address: headers.find(h => h.includes('address') || h.includes('street') || h.includes('location')) || headers[1] || '',
                      phone: headers.find(h => h.includes('phone') || h.includes('mobile') || h.includes('tel')) || '',
                      price: headers.find(h => h.includes('price') || h.includes('amount') || h.includes('cost') || h.includes('charge')) || '',
                      schedule: headers.find(h => h.includes('schedule') || h.includes('frequency') || h.includes('week')) || '',
                      round: headers.find(h => h.includes('round') || h.includes('area') || h.includes('zone') || h.includes('postcode') || h.includes('route')) || '',
                      service: headers.find(h => h.includes('service') || h.includes('type') || h.includes('job')) || '',
                      nextDue: headers.find(h => h.includes('due') || h.includes('date') || h.includes('next')) || '',
                    });
                    setShowImportCSV(true);
                  }}
                  style={{
                    display: 'block',
                    width: '100%',
                    padding: '12px',
                    background: '#0f172a',
                    border: '2px dashed #334155',
                    borderRadius: '8px',
                    color: '#94a3b8',
                    cursor: 'pointer'
                  }}
                />
              </div>

{/* CSV Import Mapping Modal */}
              {showImportCSV && csvData && (
                <div style={styles.modal}>
                  <div style={{...styles.modalContent, maxHeight: '90vh', overflow: 'auto'}}>
                    <h3 style={styles.modalTitle}>📥 Import {csvData.rows.length} Customers</h3>
                    <p style={{ color: '#94a3b8', marginBottom: '16px', fontSize: '0.85rem' }}>
                      From: {csvData.fileName}
                    </p>
                    
                    <p style={{ color: '#f59e0b', marginBottom: '16px', fontSize: '0.85rem' }}>
                      Match your CSV columns to the right fields:
                    </p>
                    
                    {['name', 'address', 'phone', 'price', 'schedule', 'nextDue', 'round', 'service'].map(field => (
                      <div key={field} style={{ marginBottom: '10px' }}>
                        <label style={{ display: 'block', marginBottom: '4px', fontSize: '0.85rem', color: '#94a3b8', textTransform: 'capitalize' }}>
                          {field === 'round' ? '🗺️ Round / Area' : field === 'nextDue' ? '📅 Next Due Date' : field} {field === 'address' ? '*' : ''}
                        </label>
                        <select 
                          value={csvMapping[field] || ''} 
                          onChange={e => setCsvMapping({...csvMapping, [field]: e.target.value})}
                          style={styles.input}
                        >
                          <option value="">-- Skip --</option>
                          {csvData.headers.map(h => (
                            <option key={h} value={h}>{h} (e.g. "{csvData.rows[0]?.[h]}")</option>
                          ))}
                        </select>
                      </div>
                    ))}
                    
                    {/* Preview */}
                    <div style={{ background: '#0f172a', padding: '12px', borderRadius: '8px', marginTop: '16px', marginBottom: '16px' }}>
                      <div style={{ fontSize: '0.85rem', color: '#3b82f6', marginBottom: '8px' }}>Preview (first 3 rows):</div>
                      {csvData.rows.slice(0, 3).map((row, idx) => (
                        <div key={idx} style={{ fontSize: '0.8rem', color: '#94a3b8', padding: '6px 0', borderBottom: '1px solid #1e293b' }}>
                          <strong>{row[csvMapping.name] || 'No name'}</strong> - {row[csvMapping.address] || 'No address'}
                          {csvMapping.price && row[csvMapping.price] ? ` - £${row[csvMapping.price]}` : ''}
                          {csvMapping.round && row[csvMapping.round] ? ` [${row[csvMapping.round]}]` : ''}
                        </div>
                      ))}
                    </div>
                    
                    <div style={styles.modalButtons}>
                      <button 
                        onClick={() => { setShowImportCSV(false); setCsvData(null); }} 
                        style={styles.cancelBtn}
                      >
                        Cancel
                      </button>
                      <button 
                        onClick={async () => {
                          if (!csvMapping.address) {
                            alert('Please map at least the Address column');
                            return;
                          }
                          
                          // Collect all unique rounds from CSV
                          const csvRounds = new Set();
                          csvData.rows.forEach(row => {
                            const roundVal = csvMapping.round ? row[csvMapping.round]?.trim() : '';
                            if (roundVal) csvRounds.add(roundVal);
                          });
                          
                          // Add any new rounds to settings
                          const existingRounds = settings.rounds || ['Round 1'];
                          const newRounds = [...csvRounds].filter(r => !existingRounds.includes(r));
                          if (newRounds.length > 0) {
                            const updatedRounds = [...existingRounds, ...newRounds];
                            const updatedSettings = {...settings, rounds: updatedRounds};
                            setSettings(updatedSettings);
                            await saveSettings(updatedSettings);
                          }
                          
                          // Parse schedule value
                          const parseSchedule = (val) => {
                            if (!val) return 4;
                            const num = parseInt(val);
                            if (!isNaN(num)) return num;
                            const lower = val.toLowerCase();
                            if (lower.includes('week') && !lower.includes('2') && !lower.includes('bi')) return 1;
                            if (lower.includes('2') || lower.includes('bi') || lower.includes('fort')) return 2;
                            if (lower.includes('4') || lower.includes('month')) return 4;
                            if (lower.includes('6')) return 6;
                            if (lower.includes('8')) return 8;
                            if (lower.includes('12') || lower.includes('quarter')) return 12;
                            if (lower.includes('year') || lower.includes('annual')) return 52;
                            return 4;
                          };
                          
                          const maxOrder = Math.max(...customers.map(c => c.order || 0), 0);
                          const newCustomers = csvData.rows
                            .filter(row => row[csvMapping.address]?.trim())
                            .map((row, idx) => ({
                              id: Date.now() + idx,
                              name: csvMapping.name ? row[csvMapping.name]?.trim() || '' : '',
                              address: row[csvMapping.address]?.trim() || '',
                              phone: csvMapping.phone ? row[csvMapping.phone]?.trim() || '' : '',
                              price: csvMapping.price ? parseFloat(row[csvMapping.price]) || 0 : 0,
                              schedule: parseSchedule(csvMapping.schedule ? row[csvMapping.schedule] : ''),
                              round: csvMapping.round ? row[csvMapping.round]?.trim() || 'Round 1' : 'Round 1',
                              service: csvMapping.service ? row[csvMapping.service]?.trim().toLowerCase() || 'window cleaning' : 'window cleaning',
                              nextDue: (() => { 
                                if (csvMapping.nextDue && row[csvMapping.nextDue]?.trim()) {
                                  const raw = row[csvMapping.nextDue].trim();
                                  const parsed = new Date(raw);
                                  if (!isNaN(parsed.getTime())) {
                                    return `${parsed.getFullYear()}-${String(parsed.getMonth()+1).padStart(2,'0')}-${String(parsed.getDate()).padStart(2,'0')}`;
                                  }
                                  // Try DD/MM/YYYY format
                                  const parts = raw.split(/[\/\-\.]/);
                                  if (parts.length === 3) {
                                    const [d, m, y] = parts;
                                    const dt = new Date(parseInt(y.length === 2 ? '20'+y : y), parseInt(m)-1, parseInt(d));
                                    if (!isNaN(dt.getTime())) {
                                      return `${dt.getFullYear()}-${String(dt.getMonth()+1).padStart(2,'0')}-${String(dt.getDate()).padStart(2,'0')}`;
                                    }
                                  }
                                }
                                const d = new Date(); const day = d.getDay(); const diff = day === 0 ? 1 : day === 6 ? 2 : 0; d.setDate(d.getDate() + diff); return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
                              })(),
                              balance: 0,
                              order: maxOrder + idx + 1,
                              status: 'active',
                              notes: '',
                              createdAt: new Date().toISOString()
                            }));
                          
                          await saveCustomers([...customers, ...newCustomers]);
                          
                          const roundSummary = {};
                          newCustomers.forEach(c => {
                            roundSummary[c.round] = (roundSummary[c.round] || 0) + 1;
                          });
                          const summaryText = Object.entries(roundSummary)
                            .map(([r, count]) => `${r}: ${count}`)
                            .join('\n');
                          
                          alert(`✅ Imported ${newCustomers.length} customers!\n\nBy round:\n${summaryText}`);
                          setShowImportCSV(false);
                          setCsvData(null);
                        }}
                        style={{...styles.saveBtn, background: '#22c55e'}}
                      >
                        ✅ Import {csvData.rows.length} Customers
                      </button>
                    </div>
                  </div>
                </div>
              )}
              
              <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px', marginTop: '8px' }}>
                <h3 style={{ marginBottom: '16px', fontSize: '1rem', color: '#22c55e' }}>🛠️ Services</h3>
                
                <div style={{ display: 'flex', gap: '8px', marginBottom: '12px' }}>
                  <input 
                    type="text" 
                    value={newService}
                    onChange={e => setNewService(e.target.value)}
                    placeholder="Add new service..."
                    style={{...styles.input, flex: 1}}
                    onKeyPress={e => {
                      if (e.key === 'Enter' && newService.trim()) {
                        setSettings({...settings, services: [...(settings.services || []), newService.trim()]});
                        setNewService('');
                      }
                    }}
                  />
                  <button
                    onClick={() => {
                      if (newService.trim()) {
                        setSettings({...settings, services: [...(settings.services || []), newService.trim()]});
                        setNewService('');
                      }
                    }}
                    style={{
                      padding: '10px 16px',
                      background: '#22c55e',
                      border: 'none',
                      borderRadius: '6px',
                      color: '#fff',
                      cursor: 'pointer',
                      fontWeight: '600'
                    }}
                  >
                    + Add
                  </button>
                </div>
                
                <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                  {(settings.services || []).map((service, idx) => (
                    <div key={idx} style={{
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      background: '#0f172a',
                      padding: '10px 12px',
                      borderRadius: '6px'
                    }}>
                      <span>{service}</span>
                      <button
                        onClick={() => {
                          const updated = settings.services.filter((_, i) => i !== idx);
                          setSettings({...settings, services: updated});
                        }}
                        style={{
                          padding: '4px 10px',
                          background: '#ef4444',
                          border: 'none',
                          borderRadius: '4px',
                          color: '#fff',
                          cursor: 'pointer',
                          fontSize: '0.8rem'
                        }}
                      >
                        ✕
                      </button>
                    </div>
                  ))}
                  {(!settings.services || settings.services.length === 0) && (
                    <p style={{ color: '#64748b', fontSize: '0.9rem', textAlign: 'center', padding: '12px' }}>
                      No services added yet
                    </p>
                  )}
                </div>
              </div>
              
              <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px', marginTop: '8px' }}>
                <h3 style={{ marginBottom: '16px', fontSize: '1rem', color: '#ef4444' }}>🔧 Data Tools</h3>
                <button
                  onClick={async () => {
                    const today = new Date().toISOString().split('T')[0];
                    const cleanedTrans = transactions.filter(t => 
                      !(t.address && t.address.includes('SURE STORE'))
                    );
                    setTransactions(cleanedTrans);
                    await appStorage.set('cwc-test-transactions-v1', JSON.stringify(cleanedTrans));
                    
                    const cleanedCustomers = customers.map(c => 
                      c.address && c.address.includes('SURE STORE') 
                        ? {...c, balance: 0} 
                        : c
                    );
                    setCustomers(cleanedCustomers);
                    await appStorage.set('cwc-test-customers-v1', JSON.stringify(cleanedCustomers));
                    
                    alert('Sure Store test data cleaned!');
                  }}
                  style={{
                    padding: '10px 16px',
                    fontSize: '0.9rem',
                    background: '#334155',
                    border: 'none',
                    borderRadius: '6px',
                    color: '#94a3b8',
                    cursor: 'pointer'
                  }}
                >
                  🧹 Clean Sure Store Test Data
                </button>
              </div>
            </div>
          </div>
        )}

{/* HELP */}
        {activeTab === 'help' && (
          <div>
            {!helpCategory ? (
              <>
                <h2 style={styles.sectionTitle}>Help & Tutorials</h2>
                <p style={{ color: '#94a3b8', marginBottom: '20px', fontSize: '0.9rem' }}>
                  Tap any topic below to learn how to use it
                </p>
                
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '12px' }}>
                  {[
                    { id: 'getting-started', icon: '🚀', title: 'Getting Started', desc: 'New here? Start here!' },
                    { id: 'planner', icon: '📅', title: 'Planner', desc: 'Planning your work days' },
                    { id: 'worksheet', icon: '📋', title: 'Worksheets', desc: 'Your daily job list' },
                    { id: 'customers', icon: '👥', title: 'Customers', desc: 'Adding & editing customers' },
                    { id: 'payments', icon: '💷', title: 'Payments & Debts', desc: 'Tracking who owes you' },
                    { id: 'invoices', icon: '🧾', title: 'Invoices & Receipts', desc: 'Sending bills to customers' },
                    { id: 'expenses', icon: '⛽', title: 'Expenses', desc: 'Tracking your costs' },
                    { id: 'reports', icon: '📊', title: 'Reports & History', desc: 'See how much you earned' },
                    { id: 'settings', icon: '⚙️', title: 'Settings', desc: 'Changing your details' },
                    { id: 'troubleshooting', icon: '🔧', title: 'Problems?', desc: 'Things not working?' },
                  ].map(cat => (
                    <button
                      key={cat.id}
                      onClick={() => setHelpCategory(cat.id)}
                      style={{
                        background: '#1e293b',
                        border: 'none',
                        borderRadius: '12px',
                        padding: '16px',
                        cursor: 'pointer',
                        textAlign: 'center'
                      }}
                    >
                      <div style={{ fontSize: '2rem', marginBottom: '8px' }}>{cat.icon}</div>
                      <div style={{ fontWeight: '600', color: '#e2e8f0', marginBottom: '4px' }}>{cat.title}</div>
                      <div style={{ fontSize: '0.75rem', color: '#64748b' }}>{cat.desc}</div>
                    </button>
                  ))}
                </div>
              </>
            ) : (
              <>
                <button 
                  onClick={() => setHelpCategory(null)}
                  style={{
                    background: 'none',
                    border: 'none',
                    color: '#3b82f6',
                    fontSize: '1rem',
                    cursor: 'pointer',
                    marginBottom: '16px',
                    padding: '0'
                  }}
                >
                  ← Back to Help Topics
                </button>

{/* GETTING STARTED */}
                {helpCategory === 'getting-started' && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                    <h2 style={{ color: '#e2e8f0', marginBottom: '8px' }}>🚀 Getting Started</h2>
                    
                    <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#22c55e', marginBottom: '12px' }}>Welcome to Your App!</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        This app helps you keep track of all your window cleaning jobs. Think of it like a diary that remembers everything for you - who you need to clean, when they're due, and who owes you money.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#3b82f6', marginBottom: '12px' }}>The Main Tabs (at the bottom)</h3>
                      <div style={{ color: '#94a3b8', lineHeight: '1.8' }}>
                        <p><strong>📅 Planner</strong> - See all your jobs on a calendar. This shows you what's coming up.</p>
                        <p><strong>📋 Worksheet</strong> - Your list for today. Tick jobs off as you do them.</p>
                        <p><strong>👥 Customers</strong> - All your customers in one place. Add new ones here.</p>
                        <p><strong>💷 Debts</strong> - See who owes you money at a glance.</p>
                        <p><strong>⛽ Expenses</strong> - Keep track of fuel, equipment, and other costs.</p>
                        <p><strong>📜 History</strong> - See all your past jobs and payments.</p>
                        <p><strong>⚙️ Settings</strong> - Change your business details for invoices.</p>
                      </div>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#f59e0b', marginBottom: '12px' }}>Your First Day - Step by Step</h3>
                      <ol style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px' }}>
                        <li>Go to <strong>📅 Planner</strong></li>
                        <li>Tap on today's date (it's highlighted blue)</li>
                        <li>Tap <strong>"Create Worksheet"</strong> - this makes your job list for today</li>
                        <li>Go to <strong>📋 Worksheet</strong> to see your list</li>
                        <li>As you complete each job, tap <strong>"Done"</strong></li>
                        <li>At the end of the day, tap <strong>"End Day"</strong> to see your summary</li>
                      </ol>
                    </div>
                  </div>
                )}

{/* PLANNER */}
                {helpCategory === 'planner' && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                    <h2 style={{ color: '#e2e8f0', marginBottom: '8px' }}>📅 Planner</h2>
                    
                    <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#22c55e', marginBottom: '12px' }}>What is the Planner?</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        The Planner is like a calendar that shows you which customers are due to be cleaned and when. Jobs appear on the day they're due based on each customer's schedule (weekly, 4-weekly, etc).
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#3b82f6', marginBottom: '12px' }}>How to See Your Jobs</h3>
                      <ol style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px' }}>
                        <li>Tap <strong>📅 Planner</strong> at the bottom</li>
                        <li>You'll see a week view with days shown</li>
                        <li>Jobs appear as cards under each day</li>
                        <li>Use the <strong>◀ ▶ arrows</strong> to go forward or back weeks</li>
                        <li>Tap <strong>"Today"</strong> to jump back to today</li>
                      </ol>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#f59e0b', marginBottom: '12px' }}>The Yellow "Overdue" Bar</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        If you see a yellow bar at the top saying "X overdue" - these are jobs that were due in the past but weren't done. Tap on it to see them. You can tick them to say they're done, or add them to today's worksheet.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#22c55e', marginBottom: '12px' }}>Creating a Worksheet</h3>
                      <ol style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px' }}>
                        <li>Tap on the day you want to work</li>
                        <li>You'll see the jobs listed for that day</li>
                        <li>Tap <strong>"Create Worksheet"</strong></li>
                        <li>This makes a checklist you can use while out working</li>
                      </ol>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#3b82f6', marginBottom: '12px' }}>Moving Jobs to Different Days</h3>
                      <ol style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px' }}>
                        <li>Tap <strong>"Move Day"</strong> button</li>
                        <li>Tap the jobs you want to move (they'll get a tick)</li>
                        <li>Tap the day you want to move them to</li>
                        <li>The jobs will move to that day</li>
                      </ol>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#ef4444', marginBottom: '12px' }}>Adding Extra Jobs</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        Tap the <strong>"+ Add"</strong> button to add a one-off job or search for a customer to add to that day. Useful if someone calls asking for a clean outside their normal schedule.
                      </p>
                    </div>
                  </div>
                )}

{/* WORKSHEET */}
                {helpCategory === 'worksheet' && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                    <h2 style={{ color: '#e2e8f0', marginBottom: '8px' }}>📋 Worksheets</h2>
                    
                    <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#22c55e', marginBottom: '12px' }}>What is a Worksheet?</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        A worksheet is your job list for the day - like a checklist you take with you. As you complete each job, you tick it off. The app tracks everything for you.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#3b82f6', marginBottom: '12px' }}>Marking a Job as Done</h3>
                      <ol style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px' }}>
                        <li>Find the job in your worksheet</li>
                        <li>Tap the green <strong>"Done"</strong> button</li>
                        <li>It will ask: <strong>"Did they pay?"</strong></li>
                        <li>Tap <strong>"Yes, Paid"</strong> if they gave you money</li>
                        <li>Tap <strong>"Not Yet"</strong> if they'll pay later (adds to their debt)</li>
                        <li>A receipt popup appears - you can text them a receipt or skip</li>
                      </ol>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#f59e0b', marginBottom: '12px' }}>Marking a Job as Missed</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        If you couldn't do a job (not home, access blocked, etc), tap <strong>"Missed"</strong> instead. This doesn't charge them - it just records that you couldn't do it.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#ef4444', marginBottom: '12px' }}>Made a Mistake? Use the Reset Button</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        If you accidentally marked a job wrong, tap the red <strong>↩</strong> button next to the job. This will put it back to pending and remove any charge.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#22c55e', marginBottom: '12px' }}>The Route Button</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        Tap <strong>"🗺️ Route"</strong> to open Google Maps with all your jobs. It will plan the best driving route for you - very handy!
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#3b82f6', marginBottom: '12px' }}>End of Day</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        When you're finished, tap <strong>"End Day"</strong>. This shows you a summary of how many jobs you did, how much you earned, and how much is still owed. Any jobs you forgot to mark will be set as missed.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#f59e0b', marginBottom: '12px' }}>Reordering Jobs</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        Tap <strong>"Reorder"</strong> to change the order of your jobs. Use the up/down arrows to move jobs around. This is useful if you want to plan your route manually.
                      </p>
                    </div>
                  </div>
                )}

{/* CUSTOMERS */}
                {helpCategory === 'customers' && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                    <h2 style={{ color: '#e2e8f0', marginBottom: '8px' }}>👥 Customers</h2>
                    
                    <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#22c55e', marginBottom: '12px' }}>Adding a New Customer</h3>
                      <ol style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px' }}>
                        <li>Go to <strong>👥 Customers</strong></li>
                        <li>Tap the <strong>"+ Add"</strong> button</li>
                        <li>Fill in their details:
                          <ul style={{ paddingLeft: '20px', marginTop: '8px' }}>
                            <li><strong>Name</strong> - Their name (optional but helpful)</li>
                            <li><strong>Address</strong> - Where they live (required)</li>
                            <li><strong>Phone</strong> - Their phone number</li>
                            <li><strong>Service</strong> - What you do for them</li>
                            <li><strong>Price</strong> - How much you charge</li>
                            <li><strong>Schedule</strong> - How often (4 weekly, 8 weekly, etc)</li>
                          </ul>
                        </li>
                        <li>Tap <strong>"Add Customer"</strong></li>
                      </ol>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#3b82f6', marginBottom: '12px' }}>Editing a Customer</h3>
                      <ol style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px' }}>
                        <li>Find the customer in the list</li>
                        <li>Tap on their card</li>
                        <li>Change any details you need</li>
                        <li>Tap <strong>"Save"</strong></li>
                      </ol>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#f59e0b', marginBottom: '12px' }}>Searching for Customers</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        Use the search box at the top to find customers quickly. You can search by name or address. Just start typing and matches will appear.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#22c55e', marginBottom: '12px' }}>Active vs Quotes</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        <strong>Active</strong> customers are your regular jobs - they appear in the planner.<br/><br/>
                        <strong>Quotes</strong> are people who asked for a price but haven't started yet. They won't appear in your planner until you convert them to active.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#3b82f6', marginBottom: '12px' }}>Deleting a Customer</h3>
                      <ol style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px' }}>
                        <li>Tap on the customer to edit them</li>
                        <li>Scroll down to find <strong>"Delete Customer"</strong></li>
                        <li>Confirm you want to delete</li>
                      </ol>
                      <p style={{ color: '#ef4444', marginTop: '8px' }}>⚠️ This cannot be undone!</p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#f59e0b', marginBottom: '12px' }}>Same Address, Different Service?</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        If a customer wants windows AND gutters cleaned (different schedules), tap <strong>"Duplicate for Service"</strong> when editing them. This creates a copy with a different service type.
                      </p>
                    </div>
                  </div>
                )}

{/* PAYMENTS & DEBTS */}
                {helpCategory === 'payments' && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                    <h2 style={{ color: '#e2e8f0', marginBottom: '8px' }}>💷 Payments & Debts</h2>
                    
                    <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#22c55e', marginBottom: '12px' }}>How Debts Work</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        When you mark a job as done and tap <strong>"Not Yet"</strong> (didn't pay), the amount gets added to their debt. The Debts tab shows you everyone who owes you money.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#3b82f6', marginBottom: '12px' }}>Recording a Payment</h3>
                      <ol style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px' }}>
                        <li>Go to <strong>💷 Debts</strong></li>
                        <li>Find the customer who paid</li>
                        <li>Tap <strong>"+ Pay"</strong></li>
                        <li>Enter the amount they paid</li>
                        <li>Tap <strong>"Record Payment"</strong></li>
                      </ol>
                      <p style={{ color: '#64748b', marginTop: '8px' }}>
                        The payment will reduce their debt. If they pay in full, they'll disappear from the debts list.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#f59e0b', marginBottom: '12px' }}>Sending a Reminder</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        If someone owes money, you can tap the <strong>📱 button</strong> to copy a reminder message. Then paste it into your text messages app to send them a polite reminder.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#22c55e', marginBottom: '12px' }}>The Red Badge</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        You'll see a red number on the Debts tab - this shows how many customers owe you money. The header also shows the total amount owed in red.
                      </p>
                    </div>
                  </div>
                )}

{/* INVOICES & RECEIPTS */}
                {helpCategory === 'invoices' && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                    <h2 style={{ color: '#e2e8f0', marginBottom: '8px' }}>🧾 Invoices & Receipts</h2>
                    
                    <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#22c55e', marginBottom: '12px' }}>Quick Receipt After a Job</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        When you mark a job done and tap "Not Yet" (didn't pay), a receipt popup appears with quick options:
                      </p>
                      <ul style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px', marginTop: '8px' }}>
                        <li><strong>Skip</strong> - Don't send anything right now</li>
                        <li><strong>📱 Text</strong> - Copies a quick message to paste into texts</li>
                        <li><strong>🧾 Full Invoice</strong> - Opens a proper invoice</li>
                        <li><strong>↩ Undo</strong> - Made a mistake? Undo the job</li>
                      </ul>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#3b82f6', marginBottom: '12px' }}>Sending a Full Invoice</h3>
                      <ol style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px' }}>
                        <li>Tap <strong>🧾 Full Invoice</strong> (from receipt popup)</li>
                        <li>You'll see a professional invoice with your logo</li>
                        <li>Choose how to send it:
                          <ul style={{ paddingLeft: '20px', marginTop: '8px' }}>
                            <li><strong>📤 Share</strong> - Share via WhatsApp, email, etc</li>
                            <li><strong>✉️ Email</strong> - Opens your email app</li>
                            <li><strong>💬 Text</strong> - Copy text version for SMS</li>
                            <li><strong>🖨️ Print</strong> - Print a paper copy</li>
                          </ul>
                        </li>
                      </ol>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#f59e0b', marginBottom: '12px' }}>Sending Invoice Later</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        Missed the popup? No problem. On a completed job in the worksheet, tap the <strong>📄</strong> button to bring up the receipt options again.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#22c55e', marginBottom: '12px' }}>Invoice from Debts</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        Go to <strong>💷 Debts</strong>, tap on a customer, then tap the <strong>🧾</strong> button to create an invoice for what they owe.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#3b82f6', marginBottom: '12px' }}>Changing Invoice Details</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        Your business name, phone, email, and bank details on invoices come from <strong>⚙️ Settings</strong>. Change them there if you need to update anything.
                      </p>
                    </div>
                  </div>
                )}

{/* EXPENSES */}
                {helpCategory === 'expenses' && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                    <h2 style={{ color: '#e2e8f0', marginBottom: '8px' }}>⛽ Expenses</h2>
                    
                    <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#22c55e', marginBottom: '12px' }}>What Are Expenses?</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        Expenses are things you spend money on for your business - like fuel, cleaning supplies, equipment, van maintenance, etc. Tracking them helps you see your real profit.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#3b82f6', marginBottom: '12px' }}>Adding an Expense</h3>
                      <ol style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px' }}>
                        <li>Go to <strong>⛽ Expenses</strong></li>
                        <li>Enter the amount you spent</li>
                        <li>Choose a category (fuel, supplies, equipment, other)</li>
                        <li>Add a note if you want (e.g., "New squeegee")</li>
                        <li>Tap <strong>"Add"</strong></li>
                      </ol>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#f59e0b', marginBottom: '12px' }}>Deleting an Expense</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        Made a mistake? Tap the <strong>🗑️</strong> button next to the expense to delete it.
                      </p>
                    </div>
                  </div>
                )}

{/* REPORTS & HISTORY */}
                {helpCategory === 'reports' && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                    <h2 style={{ color: '#e2e8f0', marginBottom: '8px' }}>📊 Reports & History</h2>
                    
                    <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#22c55e', marginBottom: '12px' }}>Earnings Report</h3>
                      <ol style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px' }}>
                        <li>Go to <strong>📜 History</strong></li>
                        <li>Tap <strong>"📊 Reports"</strong> at the top</li>
                        <li>Choose a period: This Week, This Month, or This Year</li>
                        <li>See how much you earned and how many jobs you did</li>
                      </ol>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#3b82f6', marginBottom: '12px' }}>Transaction History</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        The History tab shows every charge and payment. You can filter by:
                      </p>
                      <ul style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px', marginTop: '8px' }}>
                        <li><strong>Type</strong> - Charges, Payments, or Missed jobs</li>
                        <li><strong>Month</strong> - Pick a specific month</li>
                        <li><strong>Search</strong> - Find a specific customer</li>
                      </ul>
                    </div>
                  </div>
                )}

{/* SETTINGS */}
                {helpCategory === 'settings' && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                    <h2 style={{ color: '#e2e8f0', marginBottom: '8px' }}>⚙️ Settings</h2>
                    
                    <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#22c55e', marginBottom: '12px' }}>Business Details</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        These details appear on your invoices:
                      </p>
                      <ul style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px', marginTop: '8px' }}>
                        <li><strong>Business Name</strong> - Your company name</li>
                        <li><strong>Phone/Mobile</strong> - Contact numbers</li>
                        <li><strong>Email</strong> - Your email address</li>
                        <li><strong>Website</strong> - Your website (if you have one)</li>
                      </ul>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#3b82f6', marginBottom: '12px' }}>Bank Details</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        Your bank account and sort code appear on invoices so customers know where to pay. The payment terms (e.g., "3 days") tells them when you expect payment.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#f59e0b', marginBottom: '12px' }}>Services</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        Add or remove the types of services you offer. These appear in the dropdown when adding/editing customers. Tap <strong>"+ Add"</strong> to add a new service, or the <strong>✕</strong> button to remove one.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#ef4444', marginBottom: '12px' }}>Don't Forget to Save!</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        After making changes, tap the green <strong>"✓ Save Settings"</strong> button at the bottom. Otherwise your changes won't be saved!
                      </p>
                    </div>
                  </div>
                )}

{/* TROUBLESHOOTING */}
                {helpCategory === 'troubleshooting' && (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
                    <h2 style={{ color: '#e2e8f0', marginBottom: '8px' }}>🔧 Troubleshooting</h2>
                    
                    <div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#ef4444', marginBottom: '12px' }}>Job Shows Wrong Amount Owed</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        If a customer's balance seems wrong, you can:
                      </p>
                      <ol style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px', marginTop: '8px' }}>
                        <li>Go to <strong>👥 Customers</strong></li>
                        <li>Find and tap on the customer</li>
                        <li>Look at their balance and adjust if needed</li>
                        <li>Or use <strong>💷 Debts</strong> → <strong>+ Pay</strong> to record a payment</li>
                      </ol>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#ef4444', marginBottom: '12px' }}>I Marked a Job Wrong</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        No problem! On the worksheet, find the job and tap the red <strong>↩</strong> button. This resets it back to pending and removes any charge.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#ef4444', marginBottom: '12px' }}>Customer Not Showing in Planner</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        Check these things:
                      </p>
                      <ul style={{ color: '#94a3b8', lineHeight: '2', paddingLeft: '20px', marginTop: '8px' }}>
                        <li>Is their status <strong>"Active"</strong>? (not "Quote" or "Cancelled")</li>
                        <li>Is their <strong>"Next Due"</strong> date in the week you're looking at?</li>
                        <li>Try searching for them in <strong>👥 Customers</strong></li>
                      </ul>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#ef4444', marginBottom: '12px' }}>App Running Slowly</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        Try closing the browser tab and reopening the app. This refreshes everything and usually fixes slowness.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#ef4444', marginBottom: '12px' }}>Data Not Saving</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        The app saves automatically, but it needs an internet connection. Make sure you're connected to WiFi or mobile data. If problems persist, try refreshing the page.
                      </p>
                    </div>

<div style={{ background: '#1e293b', padding: '16px', borderRadius: '12px' }}>
                      <h3 style={{ color: '#22c55e', marginBottom: '12px' }}>Still Stuck?</h3>
                      <p style={{ color: '#94a3b8', lineHeight: '1.6' }}>
                        Most problems can be fixed by refreshing the page (pull down on mobile, or press F5 on computer). If something is still not working, try going back to the main tabs and starting again.
                      </p>
                    </div>
                  </div>
                )}
              </>
            )}
          </div>
        )}
      </main>
    </div>
  );
};

const styles = {
  container: {
    fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
    minHeight: '100vh',
    background: 'linear-gradient(150deg, #0f172a 0%, #1e3a5f 50%, #0c4a6e 100%)',
    color: '#f1f5f9',
  },
  loadingContainer: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100vh',
    background: '#0f172a',
    color: '#fff',
  },
  spinner: {
    width: '40px',
    height: '40px',
    border: '3px solid rgba(255,255,255,0.2)',
    borderTop: '3px solid #38bdf8',
    borderRadius: '50%',
    animation: 'spin 0.8s linear infinite',
  },
  header: {
    background: 'rgba(0,0,0,0.3)',
    backdropFilter: 'blur(10px)',
  },
  headerTop: {
    padding: '12px 16px',
    borderBottom: '1px solid rgba(255,255,255,0.1)',
  },
  logo: {
    margin: 0,
    fontSize: '1.1rem',
    fontWeight: '600',
  },
  statsBar: {
    display: 'flex',
    padding: '10px 16px',
    gap: '20px',
  },
  statBox: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
  },
  statNumber: {
    fontSize: '1.3rem',
    fontWeight: '700',
    color: '#38bdf8',
  },
  statLabel: {
    fontSize: '0.6rem',
    textTransform: 'uppercase',
    color: '#94a3b8',
  },
  nav: {
    display: 'flex',
    justifyContent: 'center',
    gap: '2px',
    padding: '8px 12px',
    background: 'rgba(0,0,0,0.2)',
  },
  navButton: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: '2px',
    padding: '8px 12px',
    border: 'none',
    background: 'transparent',
    color: 'rgba(255,255,255,0.5)',
    cursor: 'pointer',
    borderRadius: '8px',
    fontSize: '1rem',
    position: 'relative',
  },
  navButtonActive: {
    background: 'rgba(56,189,248,0.15)',
    color: '#38bdf8',
  },
  navLabel: {
    fontSize: '0.55rem',
    textTransform: 'uppercase',
  },
  badge: {
    position: 'absolute',
    top: '2px',
    right: '2px',
    background: '#ef4444',
    color: '#fff',
    fontSize: '0.55rem',
    padding: '1px 4px',
    borderRadius: '6px',
    fontWeight: '600',
  },
  main: {
    padding: '12px',
    maxWidth: '1800px',
    margin: '0 auto',
  },
  
  // Planner
  plannerHeader: {
    display: 'flex',
    justifyContent: 'center',
    gap: '8px',
    marginBottom: '12px',
  },
  weekNav: {
    padding: '8px 14px',
    border: 'none',
    background: 'rgba(255,255,255,0.1)',
    color: '#fff',
    borderRadius: '6px',
    cursor: 'pointer',
  },
  todayBtn: {
    padding: '8px 16px',
    border: 'none',
    background: '#0ea5e9',
    color: '#fff',
    borderRadius: '6px',
    cursor: 'pointer',
    fontWeight: '600',
  },
  daysSelect: {
    padding: '8px 12px',
    border: '1px solid rgba(255,255,255,0.2)',
    borderRadius: '6px',
    background: 'rgba(255,255,255,0.1)',
    color: '#fff',
    cursor: 'pointer',
  },
  overdueSection: {
    background: 'rgba(251,191,36,0.1)',
    borderRadius: '10px',
    marginBottom: '12px',
    overflow: 'hidden',
  },
  overdueBanner: {
    padding: '8px 14px',
    background: 'rgba(251,191,36,0.2)',
    fontWeight: '600',
    fontSize: '0.85rem',
  },
  overdueList: {
    padding: '8px',
  },
  overdueJob: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '6px 10px',
    background: 'rgba(0,0,0,0.2)',
    borderRadius: '6px',
    marginBottom: '4px',
    fontSize: '0.85rem',
  },
  overdueDays: {
    marginLeft: '8px',
    color: '#fbbf24',
    fontSize: '0.75rem',
  },
  smallDoneBtn: {
    padding: '4px 10px',
    border: 'none',
    background: '#10b981',
    color: '#fff',
    borderRadius: '4px',
    cursor: 'pointer',
    fontWeight: '600',
  },
  weekGrid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
    gap: '8px',
    maxHeight: '75vh',
    overflowY: 'auto',
    padding: '4px',
  },
  dayColumn: {
    background: 'rgba(255,255,255,0.05)',
    borderRadius: '8px',
    minHeight: '150px',
    maxHeight: '75vh',
    display: 'flex',
    flexDirection: 'column',
  },
  todayColumn: {
    background: 'rgba(14,165,233,0.15)',
    boxShadow: 'inset 0 0 0 2px #0ea5e9',
  },
  pastColumn: {
    opacity: 0.5,
  },
  dragOverColumn: {
    background: 'rgba(16,185,129,0.2)',
    boxShadow: 'inset 0 0 0 2px #10b981',
  },
  dayHeader: {
    padding: '10px 12px',
    background: 'rgba(0,0,0,0.3)',
    borderRadius: '8px 8px 0 0',
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  dayName: {
    fontWeight: '600',
    fontSize: '0.8rem',
    display: 'block',
  },
  dayStats: {
    fontSize: '0.75rem',
    color: '#38bdf8',
    fontWeight: '600',
  },
  jobsList: {
    padding: '6px',
    display: 'flex',
    flexDirection: 'column',
    gap: '4px',
    overflowY: 'auto',
    flex: 1,
  },
  noJobs: {
    fontSize: '0.7rem',
    opacity: 0.4,
    textAlign: 'center',
    margin: '15px 0',
  },
  jobCard: {
    background: 'rgba(255,255,255,0.08)',
    borderRadius: '6px',
    padding: '8px 10px',
    cursor: 'grab',
  },
  jobCardDragging: {
    opacity: 0.4,
    cursor: 'grabbing',
  },
  jobCardTop: {
    display: 'flex',
    alignItems: 'flex-start',
    gap: '6px',
  },
  jobDragHandle: {
    color: '#64748b',
    fontSize: '0.7rem',
    cursor: 'grab',
    userSelect: 'none',
    flexShrink: 0,
  },
  jobOrder: {
    fontSize: '0.6rem',
    color: '#64748b',
    fontWeight: '600',
  },
  jobDetails: {
    flex: 1,
  },
  jobAddress: {
    fontWeight: '600',
    fontSize: '0.85rem',
    lineHeight: '1.3',
    color: '#fff',
    flex: 1,
  },
  jobCustomerName: {
    fontSize: '0.75rem',
    color: '#94a3b8',
    marginTop: '4px',
    marginLeft: '18px',
  },
  jobMeta: {
    display: 'flex',
    justifyContent: 'space-between',
    marginTop: '6px',
    marginLeft: '18px',
  },
  jobOrderSmall: {
    fontSize: '0.6rem',
    color: '#64748b',
  },
  jobPriceSmall: {
    fontSize: '0.75rem',
    color: '#34d399',
    fontWeight: '600',
  },
  jobName: {
    fontWeight: '600',
    fontSize: '0.7rem',
  },
  jobPrice: {
    fontSize: '0.65rem',
    color: '#34d399',
  },
  doneBtn: {
    padding: '4px 8px',
    border: 'none',
    background: '#10b981',
    color: '#fff',
    borderRadius: '4px',
    cursor: 'pointer',
    fontWeight: '700',
  },
  createSheetBtn: {
    marginTop: '6px',
    padding: '6px',
    border: 'none',
    background: 'rgba(56,189,248,0.2)',
    color: '#38bdf8',
    borderRadius: '4px',
    cursor: 'pointer',
    fontSize: '0.65rem',
    fontWeight: '600',
  },
  selectActions: {
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    marginBottom: '12px',
    paddingBottom: '10px',
    borderBottom: '1px solid rgba(255,255,255,0.1)',
  },
  selectAllBtn: {
    padding: '6px 10px',
    border: 'none',
    background: 'rgba(56,189,248,0.2)',
    color: '#38bdf8',
    borderRadius: '4px',
    cursor: 'pointer',
    fontSize: '0.75rem',
  },
  selectNoneBtn: {
    padding: '6px 10px',
    border: 'none',
    background: 'rgba(255,255,255,0.1)',
    color: '#94a3b8',
    borderRadius: '4px',
    cursor: 'pointer',
    fontSize: '0.75rem',
  },
  selectedCount: {
    marginLeft: 'auto',
    fontSize: '0.8rem',
    color: '#38bdf8',
    fontWeight: '600',
  },
  jobSelectionList: {
    maxHeight: '50vh',
    overflowY: 'auto',
    display: 'flex',
    flexDirection: 'column',
    gap: '4px',
    marginBottom: '12px',
  },
  jobSelectCard: {
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    padding: '10px',
    background: 'rgba(255,255,255,0.04)',
    borderRadius: '6px',
    cursor: 'pointer',
    border: '2px solid transparent',
  },
  jobSelectCardSelected: {
    background: 'rgba(16,185,129,0.1)',
    border: '2px solid #10b981',
  },
  jobSelectCheck: {
    fontSize: '1.2rem',
    color: '#10b981',
  },
  jobSelectOrder: {
    fontSize: '0.65rem',
    color: '#64748b',
    fontWeight: '600',
    minWidth: '28px',
  },
  jobSelectInfo: {
    flex: 1,
    minWidth: 0,
  },
  jobSelectName: {
    fontWeight: '600',
    fontSize: '0.85rem',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  },
  jobSelectAddr: {
    fontSize: '0.7rem',
    color: '#94a3b8',
  },
  jobSelectPrice: {
    fontWeight: '600',
    color: '#34d399',
    fontSize: '0.9rem',
  },
  wsSelectionTotal: {
    textAlign: 'right',
    fontSize: '1rem',
    fontWeight: '700',
    color: '#34d399',
    marginBottom: '12px',
    paddingTop: '8px',
    borderTop: '1px solid rgba(255,255,255,0.1)',
  },

// Worksheet
  worksheetList: {
    display: 'flex',
    flexDirection: 'column',
    gap: '8px',
  },
  worksheetCard: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '14px',
    background: 'rgba(255,255,255,0.06)',
    borderRadius: '8px',
    cursor: 'pointer',
  },
  wsName: {
    fontWeight: '600',
    fontSize: '1rem',
  },
  wsDate: {
    fontSize: '0.8rem',
    color: '#94a3b8',
  },
  wsStats: {
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
  },
  wsDone: {
    fontSize: '0.9rem',
    color: '#94a3b8',
  },
  wsComplete: {
    color: '#10b981',
    fontSize: '1.2rem',
  },
  wsHeader: {
    display: 'flex',
    alignItems: 'center',
    gap: '12px',
    marginBottom: '12px',
  },
  backBtn: {
    padding: '8px 12px',
    border: 'none',
    background: 'rgba(255,255,255,0.1)',
    color: '#fff',
    borderRadius: '6px',
    cursor: 'pointer',
  },
  wsTitle: {
    flex: 1,
    margin: 0,
    fontSize: '1.1rem',
  },
  wsProgress: {
    fontSize: '0.85rem',
    color: '#38bdf8',
  },
  deleteWsBtn: {
    padding: '8px 12px',
    border: 'none',
    background: 'rgba(239,68,68,0.3)',
    color: '#f87171',
    borderRadius: '6px',
    cursor: 'pointer',
    fontSize: '0.9rem',
    marginLeft: '8px',
  },
  confirmBar: {
    display: 'flex',
    alignItems: 'center',
    gap: '10px',
    padding: '10px 14px',
    background: 'rgba(239,68,68,0.15)',
    borderRadius: '8px',
    marginBottom: '12px',
    fontSize: '0.9rem',
  },
  confirmYes: {
    padding: '6px 14px',
    border: 'none',
    background: '#ef4444',
    color: '#fff',
    borderRadius: '4px',
    cursor: 'pointer',
    fontWeight: '600',
  },
  confirmNo: {
    padding: '6px 14px',
    border: 'none',
    background: 'rgba(255,255,255,0.1)',
    color: '#fff',
    borderRadius: '4px',
    cursor: 'pointer',
  },
  wsTotal: {
    textAlign: 'right',
    fontSize: '1rem',
    fontWeight: '600',
    color: '#34d399',
    marginBottom: '12px',
  },
  worksheetJobs: {
    display: 'flex',
    flexDirection: 'column',
    gap: '8px',
  },
  wsJobCard: {
    display: 'flex',
    alignItems: 'flex-start',
    gap: '10px',
    padding: '12px',
    background: 'rgba(255,255,255,0.06)',
    borderRadius: '8px',
    borderLeft: '3px solid #38bdf8',
  },
  wsJobDone: {
    borderLeftColor: '#10b981',
    opacity: 0.6,
  },
  wsJobMissed: {
    borderLeftColor: '#ef4444',
    opacity: 0.6,
  },
  wsJobNum: {
    width: '24px',
    height: '24px',
    borderRadius: '50%',
    background: 'rgba(255,255,255,0.1)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '0.75rem',
    fontWeight: '600',
  },
  wsJobMain: {
    flex: 1,
  },
  wsJobAddress: {
    fontWeight: '600',
    fontSize: '0.95rem',
  },
  wsJobName: {
    fontSize: '0.85rem',
    color: '#94a3b8',
  },
  wsJobPhone: {
    fontSize: '0.8rem',
    color: '#38bdf8',
    marginTop: '4px',
  },
  wsJobMeta: {
    fontSize: '0.75rem',
    color: '#64748b',
    marginTop: '4px',
  },
  wsLastDone: {
    fontSize: '0.7rem',
    color: '#64748b',
  },
  wsJobRight: {
    textAlign: 'right',
  },
  wsJobPrice: {
    fontWeight: '700',
    fontSize: '1rem',
    color: '#34d399',
  },
  wsJobOwes: {
    fontSize: '0.75rem',
    color: '#f87171',
  },
  wsActions: {
    display: 'flex',
    gap: '6px',
    marginTop: '8px',
  },
  wsDoneBtn: {
    padding: '6px 12px',
    border: 'none',
    background: '#10b981',
    color: '#fff',
    borderRadius: '4px',
    cursor: 'pointer',
    fontWeight: '600',
    fontSize: '0.8rem',
  },
  wsMissedBtn: {
    padding: '6px 12px',
    border: 'none',
    background: '#64748b',
    color: '#fff',
    borderRadius: '4px',
    cursor: 'pointer',
    fontWeight: '600',
    fontSize: '0.8rem',
  },
  wsStatusDone: {
    marginTop: '8px',
    color: '#10b981',
    fontWeight: '600',
    fontSize: '0.85rem',
  },
  wsStatusMissed: {
    marginTop: '8px',
    color: '#ef4444',
    fontWeight: '600',
    fontSize: '0.85rem',
  },

// Customers
  customerHeader: {
    display: 'flex',
    gap: '6px',
    marginBottom: '12px',
    flexWrap: 'wrap',
  },
  searchInput: {
    flex: 1,
    minWidth: '100px',
    padding: '10px',
    border: '1px solid rgba(255,255,255,0.15)',
    borderRadius: '6px',
    background: 'rgba(255,255,255,0.08)',
    color: '#fff',
    fontSize: '0.9rem',
  },
  sortSelect: {
    padding: '10px',
    border: '1px solid rgba(255,255,255,0.15)',
    borderRadius: '6px',
    background: 'rgba(255,255,255,0.08)',
    color: '#fff',
    fontSize: '0.8rem',
  },
  addBtn: {
    padding: '10px 16px',
    border: 'none',
    background: '#10b981',
    color: '#fff',
    borderRadius: '6px',
    cursor: 'pointer',
    fontWeight: '700',
    fontSize: '1rem',
  },
  customersList: {
    display: 'flex',
    flexDirection: 'column',
    gap: '6px',
  },
  customerCard: {
    display: 'flex',
    alignItems: 'center',
    padding: '12px',
    background: 'rgba(255,255,255,0.06)',
    borderRadius: '8px',
    cursor: 'pointer',
    gap: '10px',
  },
  overdueCard: {
    background: 'rgba(239,68,68,0.12)',
    borderLeft: '3px solid #ef4444',
  },
  dueSoonCard: {
    background: 'rgba(251,191,36,0.1)',
    borderLeft: '3px solid #fbbf24',
  },
  quoteCard: {
    background: 'rgba(245,158,11,0.1)',
    borderLeft: '3px solid #f59e0b',
  },
  inactiveCard: {
    opacity: 0.4,
  },
  customerOrder: {
    fontSize: '0.65rem',
    color: '#64748b',
    fontWeight: '600',
    minWidth: '26px',
  },
  customerMain: {
    flex: 1,
    minWidth: 0,
  },
  customerName: {
    fontWeight: '600',
    fontSize: '0.9rem',
    display: 'flex',
    alignItems: 'center',
    gap: '6px',
  },
  statusBadge: {
    fontSize: '0.5rem',
    padding: '2px 5px',
    background: 'rgba(100,116,139,0.5)',
    borderRadius: '3px',
    textTransform: 'uppercase',
  },
  customerAddress: {
    fontSize: '0.75rem',
    color: '#94a3b8',
  },
  customerScheduleText: {
    fontSize: '0.65rem',
    color: '#64748b',
  },
  customerMeta: {
    textAlign: 'right',
  },
  customerPrice: {
    fontWeight: '700',
    fontSize: '0.95rem',
    color: '#34d399',
  },
  customerDue: {
    fontSize: '0.65rem',
  },
  customerOwes: {
    fontSize: '0.65rem',
    color: '#ef4444',
    fontWeight: '600',
  },

// Modal
  modal: {
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: 'rgba(0,0,0,0.8)',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '16px',
    zIndex: 1000,
  },
  modalContent: {
    background: 'linear-gradient(150deg, #1e3a5f, #0f172a)',
    borderRadius: '12px',
    padding: '20px',
    width: '100%',
    maxWidth: '380px',
    maxHeight: '85vh',
    overflowY: 'auto',
    border: '1px solid rgba(255,255,255,0.1)',
  },
  modalTitle: {
    margin: '0 0 16px',
    fontSize: '1.1rem',
    fontWeight: '600',
  },
  inputLabel: {
    fontSize: '0.7rem',
    color: '#94a3b8',
    marginBottom: '4px',
    display: 'block',
  },
  input: {
    width: '100%',
    padding: '10px',
    marginBottom: '10px',
    border: '1px solid rgba(255,255,255,0.15)',
    borderRadius: '6px',
    background: 'rgba(255,255,255,0.08)',
    color: '#fff',
    fontSize: '0.9rem',
    boxSizing: 'border-box',
  },
  modalButtons: {
    display: 'flex',
    gap: '8px',
    marginTop: '8px',
  },
  cancelBtn: {
    flex: 1,
    padding: '10px',
    border: 'none',
    background: 'rgba(255,255,255,0.1)',
    color: '#fff',
    borderRadius: '6px',
    cursor: 'pointer',
  },
  saveBtn: {
    flex: 1,
    padding: '10px',
    border: 'none',
    background: '#10b981',
    color: '#fff',
    borderRadius: '6px',
    cursor: 'pointer',
    fontWeight: '600',
  },

// Debts
  debtHeader: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '12px',
  },
  sectionTitle: {
    margin: 0,
    fontSize: '1.1rem',
    fontWeight: '600',
  },
  totalDebt: {
    fontSize: '1.1rem',
    fontWeight: '700',
    color: '#f87171',
  },
  debtsList: {
    display: 'flex',
    flexDirection: 'column',
    gap: '6px',
  },
  debtCard: {
    display: 'flex',
    alignItems: 'center',
    padding: '12px',
    background: 'rgba(248,113,113,0.08)',
    borderRadius: '8px',
    borderLeft: '3px solid #f87171',
    gap: '10px',
  },
  debtInfo: {
    flex: 1,
  },
  debtName: {
    fontWeight: '600',
    fontSize: '0.9rem',
  },
  debtAddress: {
    fontSize: '0.75rem',
    color: '#94a3b8',
  },
  debtAmount: {
    fontWeight: '700',
    fontSize: '1rem',
    color: '#f87171',
  },
  payBtn: {
    padding: '8px 14px',
    border: 'none',
    background: '#10b981',
    color: '#fff',
    borderRadius: '6px',
    cursor: 'pointer',
    fontWeight: '600',
  },
  paymentFor: {
    fontWeight: '600',
    margin: '0 0 4px',
  },
  paymentOwes: {
    color: '#f87171',
    margin: '0 0 14px',
  },

// History
  transactionsList: {
    display: 'flex',
    flexDirection: 'column',
    gap: '4px',
  },
  transactionCard: {
    display: 'flex',
    alignItems: 'center',
    padding: '10px 12px',
    background: 'rgba(255,255,255,0.04)',
    borderRadius: '6px',
    gap: '10px',
  },
  transIcon: {
    fontSize: '1rem',
  },
  transInfo: {
    flex: 1,
  },
  transCustomer: {
    fontWeight: '500',
    fontSize: '0.85rem',
  },
  transDate: {
    fontSize: '0.65rem',
    color: '#64748b',
  },
  transAmount: {
    fontWeight: '600',
    fontSize: '0.9rem',
  },
  emptyState: {
    textAlign: 'center',
    color: '#64748b',
    padding: '40px 20px',
    fontSize: '0.9rem',
  },
};

const CWC_ROOT = ReactDOM.createRoot(document.getElementById('root'));
CWC_ROOT.render(React.createElement(CleaningBusinessApp));