PozoAccount/src/components/ModalContents.jsx

export function PaymentModalContent({ customers, suppliers, selectedCustomer, onCustomerChange }) {
  return (
    <>
      <div className="form-group">
        <label>Select Customer/Supplier</label>
        <select onChange={onCustomerChange}>
          <option value="">Choose...</option>
          {[...customers, ...suppliers].map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
        </select>
      </div>
      {selectedCustomer && (
        <div className="form-group">
          <label>Current Balance</label>
          <div style={{
            padding: '1rem',
            backgroundColor: selectedCustomer.type === 'credit' ? '#F0FDF4' : '#FEF2F2',
            borderRadius: '0.75rem',
            border: `2px solid ${selectedCustomer.type === 'credit' ? '#BBF7D0' : '#FECACA'}`,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between'
          }}>
            <span style={{ fontSize: '0.875rem', fontWeight: 600, color: '#6B7280' }}>
              {selectedCustomer.type === 'credit' ? "You'll Get" : "You'll Give"}
            </span>
            <span style={{ fontSize: '1.5rem', fontWeight: 700, color: selectedCustomer.type === 'credit' ? '#059669' : '#DC2626' }}>
              ₹{selectedCustomer.balance.toLocaleString()}
            </span>
          </div>
        </div>
      )}
      <div className="form-group">
        <label>Amount (₹)</label>
        <input type="number" placeholder="Enter amount" />
      </div>
      <div className="form-group">
        <label>Note</label>
        <textarea placeholder="Add a note (optional)" rows="3"></textarea>
      </div>
      <div className="form-group">
        <label>Date</label>
        <input type="date" defaultValue={new Date().toISOString().split('T')[0]} />
      </div>
    </>
  );
}

export function AddCustomerModalContent() {
  return (
    <>
      <div className="form-group">
        <label>Name</label>
        <input type="text" placeholder="Enter name" />
      </div>
      <div className="form-group">
        <label>Phone Number</label>
        <input type="tel" placeholder="98755 43210" />
      </div>
      <div className="form-group">
        <label>Opening Balance (₹)</label>
        <input type="number" placeholder="0" />
      </div>
      <div className="form-group">
        <label>Balance Type</label>
        <select>
          <option value="credit">You'll Get (Credit)</option>
          <option value="debit">You'll Give (Debit)</option>
        </select>
      </div>
      <div className="form-group">
        <label>Address (Optional)</label>
        <textarea placeholder="Enter address" rows="2"></textarea>
      </div>
    </>
  );
}

export function AddEntryModalContent({ selectedCustomer }) {
  return (
    <>
      {selectedCustomer && (
        <div className="form-group">
          <label>Current Balance</label>
          <div style={{
            padding: '1rem',
            backgroundColor: selectedCustomer.type === 'credit' ? '#F0FDF4' : '#FEF2F2',
            borderRadius: '0.75rem',
            border: `2px solid ${selectedCustomer.type === 'credit' ? '#BBF7D0' : '#FECACA'}`,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between'
          }}>
            <span style={{ fontSize: '0.875rem', fontWeight: 600, color: '#6B7280' }}>
              {selectedCustomer.type === 'credit' ? "You'll Get" : "You'll Give"}
            </span>
            <span style={{ fontSize: '1.5rem', fontWeight: 700, color: selectedCustomer.type === 'credit' ? '#059669' : '#DC2626' }}>
              ₹{selectedCustomer.balance.toLocaleString()}
            </span>
          </div>
        </div>
      )}
      <div className="form-group">
        <label>Transaction Type</label>
        <select>
          <option value="credit">Payment Received (You'll Get)</option>
          <option value="debit">Payment Made (You'll Give)</option>
        </select>
      </div>
      <div className="form-group">
        <label>Amount (₹)</label>
        <input type="number" placeholder="Enter amount" />
      </div>
      <div className="form-group">
        <label>Description</label>
        <textarea placeholder="Add description (optional)" rows="3"></textarea>
      </div>
      <div className="form-group">
        <label>Payment Method</label>
        <select>
          <option value="cash">Cash</option>
          <option value="upi">UPI</option>
          <option value="bank">Bank Transfer</option>
          <option value="card">Card</option>
        </select>
      </div>
      <div className="form-group">
        <label>Date</label>
        <input type="date" defaultValue={new Date().toISOString().split('T')[0]} />
      </div>
    </>
  );
}

export function ReminderModalContent({ selectedCustomer }) {
  return (
    <>
      <div className="form-group">
        <label>Reminder Type</label>
        <select>
          <option value="payment">Payment Reminder</option>
          <option value="followup">Follow-up</option>
          <option value="custom">Custom Message</option>
        </select>
      </div>
      <div className="form-group">
        <label>Message</label>
        <textarea
          placeholder={`Hi ${selectedCustomer?.name}, this is a friendly reminder about your pending payment of ₹${selectedCustomer?.balance}. Please settle at your earliest convenience. Thank you!`}
          rows="5"
          defaultValue={`Hi ${selectedCustomer?.name}, this is a friendly reminder about your pending payment of ₹${selectedCustomer?.balance}. Please settle at your earliest convenience. Thank you!`}
        ></textarea>
      </div>
      <div className="form-group">
        <label>Send Via</label>
        <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
          <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
            <input type="checkbox" defaultChecked />
            <span>WhatsApp</span>
          </label>
          <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
            <input type="checkbox" />
            <span>SMS</span>
          </label>
          <label style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
            <input type="checkbox" />
            <span>Email</span>
          </label>
        </div>
      </div>
      <div className="form-group">
        <label>Schedule (Optional)</label>
        <input type="datetime-local" />
      </div>
    </>
  );
}